madosel/dist/css/madosel-navigation-tabs.css

The most and fast advanced responsive html front-end framework.

@charset "UTF-8";
/*!
 * Madosel Navigation Tabs 1.0.0-alpha12
 * Copyright 2020-2021 Kenan Gündoğan
 * https://www.madosel.com
 * Licensed under MIT https://github.com/kenangundogan/madosel/blob/master/LICENSE
 * Released under the MIT License
 */
.navigation-tabs-container {
  position: relative;
  width: 100%;
}
.navigation-tabs-container .navigation-tab-menu {
  position: relative;
  width: 100%;
  display: flex;
}
.navigation-tabs-container .navigation-tab-menu .navigation-tab-menu-item {
  position: relative;
  min-height: 70px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 20px;
  cursor: pointer;
  border: dashed 1px #dedede;
  white-space: pre;
}
.navigation-tabs-container .navigation-tab-menu .navigation-tab-menu-item.show {
  background-color: #fef8e1;
}
.navigation-tabs-container .navigation-tab-menu .navigation-tab-menu-item.show:before {
  content: "";
  position: absolute;
  z-index: 10;
  background-color: #fef8e1;
}
.navigation-tabs-container .navigation-tab-content .navigation-tab-content-item {
  display: none;
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: dashed 1px #dedede;
  border-radius: 5px;
}
.navigation-tabs-container .navigation-tab-content .navigation-tab-content-item.show {
  display: block;
  background-color: #fef8e1;
}
.navigation-tabs-container.top .navigation-tab-menu .navigation-tab-menu-item {
  margin: 0 10px 10px 0;
}
.navigation-tabs-container.top .navigation-tab-menu .navigation-tab-menu-item.show:before {
  left: -1px;
  bottom: -12px;
  width: 100%;
  height: 30px;
  border-left: dashed 1px #dedede;
  border-right: dashed 1px #dedede;
}
.navigation-tabs-container.right {
  display: flex;
  flex-direction: row-reverse;
}
.navigation-tabs-container.right .navigation-tab-menu {
  flex-direction: column;
}
.navigation-tabs-container.right .navigation-tab-menu .navigation-tab-menu-item {
  margin: 0 0 10px 10px;
}
.navigation-tabs-container.right .navigation-tab-menu .navigation-tab-menu-item.show:before {
  top: -1px;
  left: -12px;
  width: 30px;
  height: 100%;
  border-top: dashed 1px #dedede;
  border-bottom: dashed 1px #dedede;
}
.navigation-tabs-container.bottom {
  display: flex;
  flex-direction: column-reverse;
}
.navigation-tabs-container.bottom .navigation-tab-menu .navigation-tab-menu-item {
  margin: 10px 10px 0 0;
}
.navigation-tabs-container.bottom .navigation-tab-menu .navigation-tab-menu-item.show:before {
  left: -1px;
  top: -12px;
  width: 100%;
  height: 30px;
  border-left: dashed 1px #dedede;
  border-right: dashed 1px #dedede;
}
.navigation-tabs-container.left {
  display: flex;
}
.navigation-tabs-container.left .navigation-tab-menu {
  flex-direction: column;
}
.navigation-tabs-container.left .navigation-tab-menu .navigation-tab-menu-item {
  margin: 0 10px 10px 0;
}
.navigation-tabs-container.left .navigation-tab-menu .navigation-tab-menu-item.show:before {
  top: -1px;
  right: -12px;
  width: 30px;
  height: 100%;
  border-top: dashed 1px #dedede;
  border-bottom: dashed 1px #dedede;
}

/*# sourceMappingURL=madosel-navigation-tabs.css.map*/