definicao de layout

public/assets/scss/theme/_tab.scss

@@ -0,0 +1,192 @@
+/**=====================
+    44. Tabs CSS Start
+==========================**/
+.nav-pills {
+  .nav-link.active, .show > .nav-link {
+    background-color: $primary-color;
+  }
+  .nav-link{
+    font-weight:600;
+  }
+}
+.nav{
+  i{
+    margin-right: 10px;
+  }
+}
+
+$nav-name:theme,
+primary,
+secondary,
+success,
+danger,
+info,
+light,
+dark,
+warning;
+$nav-color:$primary-color,
+$primary-color,
+$secondary-color,
+$success-color,
+$danger-color,
+$light-font,
+$light-gray,
+$dark-color,
+$warning-color;
+@each $var in $nav-name {
+  $i: index($label-name, $var);
+  .nav-#{$var} , .nav-pills.nav-#{$var} {
+    .nav-link{
+      color: nth($nav-color, $i);     
+    }
+    .nav-link.active, .show > .nav-link {
+      background-color: nth($nav-color, $i);
+      color: $white;
+    }
+  }
+}
+.nav-right{
+  justify-content: flex-end;
+}
+.nav-tabs.nav-bottom {
+  .nav-item {
+    .nav-link.active,.nav-link.focus,.nav-link.hover{
+      border-color: $white #dee2e6 #dee2e6;
+    }
+  }
+}
+.tab-content{
+  ~ .nav-tabs{
+    &.border-tab {
+      margin-bottom: 0;
+      margin-top: 30px;
+    }
+  }
+}
+// Material style css
+
+.border-tab.nav-tabs{
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  margin-bottom: 30px;
+  .nav-item{
+    .nav-link{
+      font-size: 16px;
+      color: $dark-color;
+      text-align: center;
+      padding:10px 25px;
+      border: none;
+      border-bottom: 2px solid $light-gray;
+      transition: 0.3s;
+      background-color:transparent;      
+      &.active, &.show, &:focus, &:hover {
+        color: $primary-color;
+      }
+      &.active, &.show, &:focus {
+        border-bottom: 2px solid $primary-color;
+      }
+    }
+  }
+}
+.border-tab.nav-left{
+  .nav-link{
+    border-left: 2px solid transparent;
+    transition: all 0.3s ease;
+    color: $dark-color;
+  }
+  .nav-link.active,.show > .nav-link{
+    background-color: transparent;
+    border-left-color: $primary-color;
+    color: $primary-color;
+    border-radius: 0;
+    transition: all 0.3s ease;
+  }
+}
+.border-tab.nav-right{
+  .nav-link{
+    border-right: 2px solid transparent;
+    transition: all 0.3s ease;
+    color: $dark-color;
+    text-align: right;
+  }
+  .nav-link.active,.show > .nav-link{
+    background-color: transparent;
+    border-right-color: $primary-color;
+    color: $primary-color;
+    border-radius: 0;
+    transition: all 0.3s ease;
+  }
+}
+$m-nav-name:theme,
+primary,
+secondary,
+success,
+danger,
+info,
+light,
+dark,
+warning;
+$nav-color:$primary-color,
+$primary-color,
+$secondary-color,
+$success-color,
+$danger-color,
+$light-font,
+$light-gray,
+$dark-color,
+$warning-color;
+@each $var in $m-nav-name {
+  $i: index($label-name, $var);
+  .border-tab.nav-#{$var} {
+    .nav-link.active,.nav-item.show,.nav-link:focus,.nav-link:hover {
+      color: nth($nav-color, $i);
+      background-color: transparent;
+    }
+    .nav-item {
+      .nav-link {
+        transition: 0.3s;
+        &.active, &.show, &:focus {
+          border-bottom: 2px solid nth($nav-color, $i);
+        }
+        &.active, &.show, &:focus, &:hover {
+          color: nth($nav-color, $i);
+        }
+      }
+    }
+  }
+  .border-tab.nav-left.nav-#{$var}{
+    .nav-link.active,.show > .nav-link{
+      border-left-color: nth($nav-color, $i);
+      color: nth($nav-color, $i);
+    }
+  }
+  .border-tab.nav-right.nav-#{$var}{
+    .nav-link.active,.show > .nav-link{
+      border-right-color: nth($nav-color, $i);
+      color: nth($nav-color, $i);
+    }
+  }
+}
+.tabbed-card{
+  ul{
+    position: absolute;
+    right: 15px;
+    top: 22px;
+    &.border-tab{
+      &.nav-tabs{
+        top: 0;
+        .nav-item{
+          float: right;         
+          .nav-link{
+            padding: 28px 15px;
+          }
+        }
+      }
+    }
+  }
+}
+
+/**=====================
+     44. Tabs CSS Ends
+==========================**/