Home Explore Help
Register Sign In
wilson.silva
/
AdminLte
mirror of https://github.com/almasaeed2010/AdminLTE
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

added table scss

Daniel 3 years ago
parent
a9c982327f
commit
01e5b1ce2c
11 changed files with 922 additions and 9 deletions
Split View Show Diff Stats
  1. 210 0
      src/index3.html
  2. 5 5
      src/partials/_head.html
  3. 8 0
      src/partials/dashboard/_sidenav.html
  4. 41 0
      src/scss/_custom-variables.scss
  5. 483 0
      src/scss/_miscellaneous.scss
  6. 125 0
      src/scss/_table.scss
  7. 39 0
      src/scss/_text.scss
  8. 1 1
      src/scss/adminlte.scss
  9. 3 3
      src/scss/mixins/_miscellaneous.scss
  10. 1 0
      src/scss/parts/_components.scss
  11. 6 0
      src/scss/parts/_miscellaneous.scss

+ 210 - 0
src/index3.html
View File 

@@ -0,0 +1,210 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<!-- For RTL verison -->
 
+<!-- <html lang="en" dir="rtl"> -->
 
+  <head>
 
+    @@include('./_head.html', {
 
+      "path": ".",
 
+      "title": "AdminLTE 4 | Dashboard 3"
 
+    })
 
+    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 
+  </head>
 
+  <body class="layout-fixed">
 
+    <div class="wrapper">
 
+      @@include('./dashboard/_topbar.html', {
 
+        "path": "."
 
+      })
 
+
 
+      @@include('./dashboard/_sidenav.html', {
 
+        "mainPage": "dashboard",
 
+        "page": "index3",
 
+        "path": "."
 
+      })
 
+      <!-- Main content -->
 
+      <div class="content-wrapper">
 
+        @@include('./dashboard/_content-header.html', {
 
+          "header_name": "Dashboard v2"
 
+        })
 
+        <div class="content">
 
+          <div class="container-fluid">
 
+            <div class="row">
 
+              <div class="col-lg-6">
 
+                <div class="card">
 
+                  <div class="card-header border-0">
 
+                    <h3 class="card-title">Products</h3>
 
+                    <div class="card-tools">
 
+                      <a href="#" class="btn btn-tool btn-sm">
 
+                        <i class="fas fa-download"></i>
 
+                      </a>
 
+                      <a href="#" class="btn btn-tool btn-sm">
 
+                        <i class="fas fa-bars"></i>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body table-responsive p-0">
 
+                    <table class="table table-striped align-middle">
 
+                      <thead>
 
+                      <tr>
 
+                        <th>Product</th>
 
+                        <th>Price</th>
 
+                        <th>Sales</th>
 
+                        <th>More</th>
 
+                      </tr>
 
+                      </thead>
 
+                      <tbody>
 
+                      <tr>
 
+                        <td>
 
+                          <img src="./assets/img/AdminLTELogo.png" alt="Product 1" class="img-circle img-size-32 me-2">
 
+                          Some Product
 
+                        </td>
 
+                        <td>$13 USD</td>
 
+                        <td>
 
+                          <small class="text-success me-1">
 
+                            <i class="fas fa-arrow-up"></i>
 
+                            12%
 
+                          </small>
 
+                          12,000 Sold
 
+                        </td>
 
+                        <td>
 
+                          <a href="#" class="text-muted">
 
+                            <i class="fas fa-search"></i>
 
+                          </a>
 
+                        </td>
 
+                      </tr>
 
+                      <tr>
 
+                        <td>
 
+                          <img src="./assets/img/AdminLTELogo.png" alt="Product 1" class="img-circle img-size-32 me-2">
 
+                          Another Product
 
+                        </td>
 
+                        <td>$29 USD</td>
 
+                        <td>
 
+                          <small class="text-warning me-1">
 
+                            <i class="fas fa-arrow-down"></i>
 
+                            0.5%
 
+                          </small>
 
+                          123,234 Sold
 
+                        </td>
 
+                        <td>
 
+                          <a href="#" class="text-muted">
 
+                            <i class="fas fa-search"></i>
 
+                          </a>
 
+                        </td>
 
+                      </tr>
 
+                      <tr>
 
+                        <td>
 
+                          <img src="./assets/img/AdminLTELogo.png" alt="Product 1" class="img-circle img-size-32 me-2">
 
+                          Amazing Product
 
+                        </td>
 
+                        <td>$1,230 USD</td>
 
+                        <td>
 
+                          <small class="text-danger me-1">
 
+                            <i class="fas fa-arrow-down"></i>
 
+                            3%
 
+                          </small>
 
+                          198 Sold
 
+                        </td>
 
+                        <td>
 
+                          <a href="#" class="text-muted">
 
+                            <i class="fas fa-search"></i>
 
+                          </a>
 
+                        </td>
 
+                      </tr>
 
+                      <tr>
 
+                        <td>
 
+                          <img src="./assets/img/AdminLTELogo.png" alt="Product 1" class="img-circle img-size-32 me-2">
 
+                          Perfect Item
 
+                          <span class="badge bg-danger">NEW</span>
 
+                        </td>
 
+                        <td>$199 USD</td>
 
+                        <td>
 
+                          <small class="text-success me-1">
 
+                            <i class="fas fa-arrow-up"></i>
 
+                            63%
 
+                          </small>
 
+                          87 Sold
 
+                        </td>
 
+                        <td>
 
+                          <a href="#" class="text-muted">
 
+                            <i class="fas fa-search"></i>
 
+                          </a>
 
+                        </td>
 
+                      </tr>
 
+                      </tbody>
 
+                    </table>
 
+                  </div>
 
+                </div>
 
+                <!-- /.card -->
 
+              </div>
 
+              <!-- /.col-md-6 -->
 
+              <div class="col-lg-6">
 
+                <div class="card">
 
+                  <div class="card-header border-0">
 
+                    <h3 class="card-title">Online Store Overview</h3>
 
+                    <div class="card-tools">
 
+                      <a href="#" class="btn btn-sm btn-tool">
 
+                        <i class="fas fa-download"></i>
 
+                      </a>
 
+                      <a href="#" class="btn btn-sm btn-tool">
 
+                        <i class="fas fa-bars"></i>
 
+                      </a>
 
+                    </div>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
 
+                      <p class="text-success text-xl">
 
+                        <i class="ion ion-ios-refresh-empty"></i>
 
+                      </p>
 
+                      <p class="d-flex flex-column text-end">
 
+                        <span class="fw-bold">
 
+                          <i class="ion ion-android-arrow-up text-success"></i> 12%
 
+                        </span>
 
+                        <span class="text-muted">CONVERSION RATE</span>
 
+                      </p>
 
+                    </div>
 
+                    <!-- /.d-flex -->
 
+                    <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
 
+                      <p class="text-warning text-xl">
 
+                        <i class="ion ion-ios-cart-outline"></i>
 
+                      </p>
 
+                      <p class="d-flex flex-column text-end">
 
+                        <span class="fw-bold">
 
+                          <i class="ion ion-android-arrow-up text-warning"></i> 0.8%
 
+                        </span>
 
+                        <span class="text-muted">SALES RATE</span>
 
+                      </p>
 
+                    </div>
 
+                    <!-- /.d-flex -->
 
+                    <div class="d-flex justify-content-between align-items-center mb-0">
 
+                      <p class="text-danger text-xl">
 
+                        <i class="ion ion-ios-people-outline"></i>
 
+                      </p>
 
+                      <p class="d-flex flex-column text-end">
 
+                        <span class="fw-bold">
 
+                          <i class="ion ion-android-arrow-down text-danger"></i> 1%
 
+                        </span>
 
+                        <span class="text-muted">REGISTRATION RATE</span>
 
+                      </p>
 
+                    </div>
 
+                    <!-- /.d-flex -->
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- /.col-md-6 -->
 
+            </div>
 
+            <!-- /.row -->
 
+          </div><!-- /.container-fluid -->
 
+        </div>
 
+      </div>
 
+      <!-- /.content-wrapper -->
 
+
 
+      @@include('./dashboard/_footer.html', {
 
+        "path": "."
 
+      })
 
+    </div>
 
+    <!--  ./wrapper -->
 
+
 
+    @@include('./_scripts.html', {
 
+      "path": "."
 
+    })
 
+  </body>
 
+</html>

+ 5 - 5
src/partials/_head.html
View File 

@@ -1,12 +1,12 @@
 
 <meta charset="UTF-8">
 
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-<!-- The page supports both dark and light color schemes, and the page author prefers / default is light. -->
 
+<!-- If add @@path/css/dark/adminlte-dark.css then the page supports both dark and light color schemes, and the page author prefers / default is light. -->
 
 <meta name="color-scheme" content="light dark">
 
 <title>@@title</title>
 
-<!-- For dark mode use dist/css/alt/adminlte.pcs.css, remove dist/css/adminlte.css -->
 
-<!-- <link rel="stylesheet" href="dist/css/dark/adminlte-dark.css"> -->
 
-<!-- For RTL verison -->
 
-<!-- <link rel="stylesheet" href="dist/css/rtl/adminlte.rtl.css"> -->
 
+<!-- For dark mode use @@path/css/dark/adminlte-dark.css, remove dist/css/adminlte.css -->
 
+<!-- <link rel="stylesheet" href="@@path/css/dark/adminlte-dark.css"> -->
 
+<!-- For RTL verison use @@path/css/rtl/adminlte.rtl.css, remove dist/css/adminlte.css -->
 
+<!-- <link rel="stylesheet" href="@@path/css/rtl/adminlte.rtl.css"> -->
 
 <link rel="stylesheet" href="@@path/css/adminlte.css">
 
 <link rel="stylesheet" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css">

+ 8 - 0
src/partials/dashboard/_sidenav.html
View File 

@@ -37,6 +37,14 @@
 
                 </p>
 
               </a>
 
             </li>
 
+            <li class="nav-item">
 
+              <a href="@@path/index3.html" class="nav-link @@if (context.page === 'index3') {active}">
 
+                <i class="nav-icon far fa-circle"></i>
 
+                <p>
 
+                  Dashboard v3
 
+                </p>
 
+              </a>
 
+            </li>
 
           </ul>
 
         </li>
 
         <li class="nav-item @@if (context.mainPage === 'forms') {menu-open}">

+ 41 - 0
src/scss/_custom-variables.scss
View File 

@@ -12,6 +12,11 @@ $font-size-root:              1rem !default;
 
 $transition-speed:            .3s !default;
 
 $transition-fn:               ease-in-out !default;
 
 
+// TEXT
 
+// --------------------------------------------------------
 
+$font-size-xs: ($font-size-base * .75) !default;
 
+$font-size-xl: ($font-size-base * 2) !default;
 
+
 
 // Sidebar
 
 // --------------------------------------------------------
 
 $sidebar-width:               250px !default;
 
@@ -144,6 +149,11 @@ $card-nav-link-padding-sm-y: .4rem !default;
 
 $card-nav-link-padding-sm-x: .8rem !default;
 
 $card-img-size: $img-size-sm !default;
 
 
+// Tables
 
+// --------------------------------------------------------
 
+$table-cell-padding-y-lg:        .75rem !default;
 
+$table-cell-padding-x-lg:        .75rem !default;
 
+
 
 // Z-INDEX
 
 // --------------------------------------------------------
 
 $zindex-main-header:          $zindex-fixed + 4 !default;
 
@@ -161,5 +171,36 @@ $zindex-preloader:            $zindex-toasts + 2 !default;
 
 $main-bg:                   #f4f6f9 !default;
 
 $main-color:                  $black !default;
 
 
+// BUTTON
 
+// --------------------------------------------------------
 
+$button-default-background-color: $gray-100 !default;
 
+$button-default-color: #444 !default;
 
+$button-default-border-color: #ddd !default;
 
+
 
+$button-padding-y-xs: .125rem !default;
 
+$button-padding-x-xs: .25rem !default;
 
+$button-line-height-xs: $line-height-sm !default;
 
+$button-font-size-xs: ($font-size-base * .75) !default;
 
+$button-border-radius-xs: .15rem !default;
 
+
 
+// RIBBON
 
+// --------------------------------------------------------
 
+$ribbon-border-size: 3px !default;
 
+$ribbon-line-height: 100% !default;
 
+$ribbon-padding: .375rem 0 !default;
 
+$ribbon-font-size: .8rem !default;
 
+$ribbon-width: 90px !default;
 
+$ribbon-wrapper-size: 70px !default;
 
+$ribbon-top: 10px !default;
 
+$ribbon-right: -2px !default;
 
+$ribbon-lg-wrapper-size: 120px !default;
 
+$ribbon-lg-width: 160px !default;
 
+$ribbon-lg-top: 26px !default;
 
+$ribbon-lg-right: 0 !default;
 
+$ribbon-xl-wrapper-size: 180px !default;
 
+$ribbon-xl-width: 240px !default;
 
+$ribbon-xl-top: 47px !default;
 
+$ribbon-xl-right: 4px !default;
 
+
 
 // Dark mode
 
 $enable-dark-mode:            false !default;

+ 483 - 0
src/scss/_miscellaneous.scss
View File 

@@ -1,3 +1,486 @@
 
+//
 
+// Misc: Miscellaneous
 
+//
 
+
 
+.border-transparent {
 
+  border-color: transparent !important;
 
+}
 
+
 
+// Description Blocks
 
+.description-block {
 
+  display: block;
 
+  margin: 10px 0;
 
+  text-align: center;
 
+
 
+  &.margin-bottom {
 
+    margin-bottom: 25px;
 
+  }
 
+
 
+  > .description-header {
 
+    font-size: 16px;
 
+    font-weight: 600;
 
+    margin: 0;
 
+    padding: 0;
 
+  }
 
+
 
+  > .description-text {
 
+    text-transform: uppercase;
 
+  }
 
+
 
+  // Description Block Extension
 
+  .description-icon {
 
+    font-size: 16px;
 
+  }
 
+}
 
+
 
+// List utility classes
 
+.list-group-unbordered {
 
+  > .list-group-item {
 
+    border-left: 0;
 
+    border-radius: 0;
 
+    border-right: 0;
 
+    padding-left: 0;
 
+    padding-right: 0;
 
+  }
 
+}
 
+
 
+.list-header {
 
+  color: $gray-600;
 
+  font-size: 15px;
 
+  font-weight: 700;
 
+  padding: 10px 4px;
 
+}
 
+
 
+.list-seperator {
 
+  background-color: $card-border-color;
 
+  height: 1px;
 
+  margin: 15px 0 9px;
 
+}
 
+
 
+.list-link {
 
+  > a {
 
+    color: $gray-600;
 
+    padding: 4px;
 
+
 
+    &:hover {
 
+      color: $gray-900;
 
+    }
 
+  }
 
+}
 
+
 
+// User block
 
+.user-block {
 
+  float: left;
 
+
 
+  img {
 
+    float: left;
 
+    height: 40px;
 
+    width: 40px;
 
+  }
 
+
 
+  .username,
 
+  .description,
 
+  .comment {
 
+    display: block;
 
+    margin-left: 50px;
 
+  }
 
+
 
+  .username {
 
+    font-size: 16px;
 
+    font-weight: 600;
 
+    margin-top: -1px;
 
+  }
 
+
 
+  .description {
 
+    color: $gray-600;
 
+    font-size: 13px;
 
+    margin-top: -3px;
 
+  }
 
+
 
+  &.user-block-sm {
 
+    img {
 
+      width: $img-size-sm;
 
+      height: $img-size-sm;
 
+    }
 
+
 
+    .username,
 
+    .description,
 
+    .comment {
 
+      margin-left: 40px;
 
+    }
 
+
 
+    .username {
 
+      font-size: 14px;
 
+    }
 
+  }
 
+}
 
+
 
+// Image sizes
 
+.img-sm,
 
+.img-md,
 
+.img-lg {
 
+  float: left;
 
+}
 
+
 
+.img-sm {
 
+  height: $img-size-sm;
 
+  width: $img-size-sm;
 
+
 
+  + .img-push {
 
+    margin-left: $img-size-sm + $img-size-push;
 
+  }
 
+}
 
+
 
+.img-md {
 
+  width: $img-size-md;
 
+  height: $img-size-md;
 
+
 
+  + .img-push {
 
+    margin-left: $img-size-md + $img-size-push;
 
+  }
 
+}
 
+
 
+.img-lg {
 
+  width: $img-size-lg;
 
+  height: $img-size-lg;
 
+
 
+  + .img-push {
 
+    margin-left: $img-size-lg + $img-size-push;
 
+  }
 
+}
 
+
 
+// Image bordered
 
+.img-bordered {
 
+  border: 3px solid $gray-500;
 
+  padding: 3px;
 
+}
 
+
 
+.img-bordered-sm {
 
+  border: 2px solid $gray-500;
 
+  padding: 2px;
 
+}
 
+
 
+// Rounded and Circle Images
 
+.img-rounded {
 
+  @include border-radius($border-radius);
 
+}
 
+
 
+.img-circle {
 
+  @include border-radius(50%);
 
+}
 
+
 
+// Image sizes
 
+.img-size-64,
 
+.img-size-50,
 
+.img-size-32 {
 
+  height: auto;
 
+}
 
+
 
+.img-size-64 {
 
+  width: 64px;
 
+}
 
+
 
+.img-size-50 {
 
+  width: 50px;
 
+}
 
+
 
+.img-size-32 {
 
+  width: 32px;
 
+}
 
+
 
+// Block sizes
 
+.size-32,
 
+.size-40,
 
+.size-50 {
 
+  display: block;
 
+  text-align: center;
 
+}
 
+
 
+.size-32 {
 
+  height: 32px;
 
+  line-height: 32px;
 
+  width: 32px;
 
+}
 
+
 
+.size-40 {
 
+  height: 40px;
 
+  line-height: 40px;
 
+  width: 40px;
 
+}
 
+
 
+.size-50 {
 
+  height: 50px;
 
+  line-height: 50px;
 
+  width: 50px;
 
+}
 
+
 
+// General attachemnt block
 
+.attachment-block {
 
+  background-color: $gray-100;
 
+  border: 1px solid $card-border-color;
 
+  margin-bottom: 10px;
 
+  padding: 5px;
 
+
 
+  .attachment-img {
 
+    float: left;
 
+    height: auto;
 
+    max-height: 100px;
 
+    max-width: 100px;
 
+  }
 
+
 
+  .attachment-pushed {
 
+    margin-left: 110px;
 
+  }
 
+
 
+  .attachment-heading {
 
+    margin: 0;
 
+  }
 
+
 
+  .attachment-text {
 
+    color: $gray-700;
 
+  }
 
+}
 
+
 
+// Overlays for Card, InfoBox & SmallBox
 
+.card,
 
+.overlay-wrapper,
 
+.info-box,
 
+.small-box {
 
+  // Box overlay for LOADING STATE effect
 
+  > .overlay,
 
+  > .loading-img {
 
+    height: 100%;
 
+    left: 0;
 
+    position: absolute;
 
+    top: 0;
 
+    width: 100%;
 
+  }
 
+
 
+  .overlay {
 
+    @include border-radius($border-radius);
 
+    align-items: center;
 
+    background-color: rgba($white, .7);
 
+    display: flex;
 
+    justify-content: center;
 
+    z-index: 50;
 
+
 
+    > .fa,
 
+    > .fas,
 
+    > .far,
 
+    > .fab,
 
+    > .fal,
 
+    > .fad,
 
+    > .svg-inline--fa,
 
+    > .ion {
 
+      color: $gray-800;
 
+    }
 
+
 
+    &.dark {
 
+      background-color: rgba($black, .5);
 
+
 
+      > .fa,
 
+      > .fas,
 
+      > .far,
 
+      > .fab,
 
+      > .fal,
 
+      > .fad,
 
+      > .svg-inline--fa,
 
+      > .ion {
 
+        color: $gray-400;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+.tab-pane {
 
+  // Box overlay for LOADING STATE effect on Tab Panels
 
+  > .overlay-wrapper {
 
+    position: relative;
 
+    > .overlay {
 
+      border-top-left-radius: 0;
 
+      border-top-right-radius: 0;
 
+      flex-direction: column;
 
+      margin-top: -$card-spacer-x;
 
+      margin-left: -$card-spacer-x;
 
+      height: add(100%, (2 * $card-spacer-x));
 
+      width: add(100%, (2 * $card-spacer-x));
 
+      &.dark {
 
+        color: $white;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+// Ribbon
 
+.ribbon-wrapper {
 
+  height: $ribbon-wrapper-size;
 
+  overflow: hidden;
 
+  position: absolute;
 
+  right: -2px;
 
+  top: -2px;
 
+  width: $ribbon-wrapper-size;
 
+  z-index: 10;
 
+
 
+  &.ribbon-lg {
 
+    height: $ribbon-lg-wrapper-size;
 
+    width: $ribbon-lg-wrapper-size;
 
+
 
+    .ribbon {
 
+      right: $ribbon-lg-right;
 
+      top: $ribbon-lg-top;
 
+      width: $ribbon-lg-width;
 
+    }
 
+  }
 
+
 
+  &.ribbon-xl {
 
+    height: $ribbon-xl-wrapper-size;
 
+    width: $ribbon-xl-wrapper-size;
 
+
 
+    .ribbon {
 
+      right: $ribbon-xl-right;
 
+      top: $ribbon-xl-top;
 
+      width: $ribbon-xl-width;
 
+    }
 
+  }
 
+
 
+  .ribbon {
 
+    box-shadow: 0 0 $ribbon-border-size rgba($black, .3);
 
+    font-size: $ribbon-font-size;
 
+    line-height: $ribbon-line-height;
 
+    padding: $ribbon-padding;
 
+    position: relative;
 
+    right: $ribbon-right;
 
+    text-align: center;
 
+    text-shadow: 0 -1px 0 rgba($black, .4);
 
+    text-transform: uppercase;
 
+    top: $ribbon-top;
 
+    transform: rotate(45deg);
 
+    width: $ribbon-width;
 
+
 
+    &::before,
 
+    &::after {
 
+      border-left: $ribbon-border-size solid transparent;
 
+      border-right: $ribbon-border-size solid transparent;
 
+      border-top: $ribbon-border-size solid #9e9e9e;
 
+      bottom: -$ribbon-border-size;
 
+      content: "";
 
+      position: absolute;
 
+    }
 
+
 
+    &::before {
 
+      left: 0;
 
+    }
 
+
 
+    &::after {
 
+      right: 0;
 
+    }
 
+  }
 
+}
 
+
 
+// Scroll To Top
 
+.back-to-top {
 
+  bottom: 1.25rem;
 
+  position: fixed;
 
+  right: 1.25rem;
 
+  z-index: $zindex-control-sidebar + 1;
 
+
 
+  &:focus {
 
+    box-shadow: none;
 
+  }
 
+}
 
+
 
+// Pre
 
+pre {
 
+  padding: .75rem;
 
+}
 
+
 
+// Blockquotes styles
 
+blockquote {
 
+  background-color: $white;
 
+  border-left: .7rem solid $primary;
 
+  margin: 1.5em .7rem;
 
+  padding: .5em .7rem;
 
+
 
+  .box & {
 
+    background-color: $gray-200;
 
+  }
 
+
 
+  p:last-child {
 
+    margin-bottom: 0;
 
+  }
 
+
 
+  h1,
 
+  h2,
 
+  h3,
 
+  h4,
 
+  h5,
 
+  h6 {
 
+    color: $primary;
 
+    font-size: 1.25rem;
 
+    font-weight: 600;
 
+  }
 
+
 
+  @each $color, $value in $theme-colors {
 
+    &.quote-#{$color} {
 
+      border-color: $value;
 
+
 
+      h1,
 
+      h2,
 
+      h3,
 
+      h4,
 
+      h5,
 
+      h6 {
 
+        color: $value;
 
+      }
 
+    }
 
+  }
 
+
 
+  @each $color, $value in $colors {
 
+    &.quote-#{$color} {
 
+      border-color: $value;
 
+
 
+      h1,
 
+      h2,
 
+      h3,
 
+      h4,
 
+      h5,
 
+      h6 {
 
+        color: $value;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+
 
+// Tab Custom Content
 
+
 
+.tab-custom-content {
 
+  border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
 
+  margin-top: .5rem;
 
+  padding-top: .5rem;
 
+}
 
+
 
+.nav + .tab-custom-content {
 
+  border-top: none;
 
+  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
 
+  margin-top: 0;
 
+  margin-bottom: .5rem;
 
+  padding-bottom: .5rem;
 
+}
 
+
 
+
 
+// Badge BTN Style
 
+.badge-btn {
 
+  border-radius: $button-border-radius-xs;
 
+  font-size: $button-font-size-xs;
 
+  font-weight: 400;
 
+  padding: $button-padding-y-xs * 2 $button-padding-x-xs * 2;
 
+}
 
+
 
+.badge-btn.badge-pill {
 
+  padding: .375rem .6rem;
 
+}
 
+
 
 .resize-animation-stopper * {
 
   animation: none !important;
 
   transition: none !important;

+ 125 - 0
src/scss/_table.scss
View File 

@@ -0,0 +1,125 @@
 
+//
 
+// Component: Table
 
+//
 
+
 
+.table {
 
+  &:not(.table-dark) {
 
+    color: inherit;
 
+  }
 
+
 
+  // fixed table head
 
+  &.table-head-fixed {
 
+    thead tr:nth-child(1) th {
 
+      background-color: $white;
 
+      border-bottom: 0;
 
+      box-shadow: inset 0 1px 0 $table-border-color, inset 0 -1px 0 $table-border-color;
 
+      position: sticky;
 
+      top: 0;
 
+      z-index: 10;
 
+    }
 
+
 
+    // TODO: add $table-dark
 
+    // &.table-dark {
 
+    //   thead tr {
 
+    //     &:nth-child(1) th {
 
+    //       background-color: $table-dark-bg;
 
+    //       box-shadow: inset 0 1px 0 $table-dark-border-color, inset 0 -1px 0 $table-dark-border-color;
 
+    //     }
 
+    //   }
 
+    // }
 
+  }
 
+
 
+  // no border
 
+  &.no-border {
 
+    &,
 
+    td,
 
+    th {
 
+      border: 0;
 
+    }
 
+  }
 
+
 
+  // .text-center in tables
 
+  &.text-center {
 
+    &,
 
+    td,
 
+    th {
 
+      text-align: center;
 
+    }
 
+  }
 
+
 
+  &.table-valign-middle {
 
+    thead > tr > th,
 
+    thead > tr > td,
 
+    tbody > tr > th,
 
+    tbody > tr > td {
 
+      vertical-align: middle;
 
+    }
 
+  }
 
+
 
+  .card-body.p-0 & {
 
+    thead > tr > th,
 
+    thead > tr > td,
 
+    tfoot > tr > th,
 
+    tfoot > tr > td,
 
+    tbody > tr > th,
 
+    tbody > tr > td {
 
+      &:first-of-type {
 
+        padding-left: map-get($spacers, 4);
 
+      }
 
+
 
+      &:last-of-type {
 
+        padding-right: map-get($spacers, 4);
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+// Expandable Table
 
+
 
+.table-hover tbody tr.expandable-body:hover {
 
+  background-color: inherit !important;
 
+}
 
+
 
+[data-widget="expandable-table"] {
 
+  cursor: pointer;
 
+
 
+  i.expandable-table-caret {
 
+    transition: transform $transition-speed linear;
 
+  }
 
+  &[aria-expanded="true"] {
 
+    td i.expandable-table-caret {
 
+      // stylelint-disable selector-max-attribute
 
+      &[class*="right"] {
 
+        transform: rotate(90deg);
 
+      }
 
+      &[class*="left"] {
 
+        transform: rotate(-90deg);
 
+      }
 
+      // stylelint-enable selector-max-attribute
 
+    }
 
+  }
 
+}
 
+
 
+.expandable-body {
 
+  > td {
 
+    padding: 0 !important;
 
+    width: 100%;
 
+
 
+    > div,
 
+    > p {
 
+      padding: $table-cell-padding-y-lg;
 
+    }
 
+  }
 
+
 
+  .table {
 
+    width: subtract(100%, $table-cell-padding-y-lg);
 
+    margin: 0 0 0 $table-cell-padding-y-lg;
 
+
 
+    tr:first-child {
 
+      td,
 
+      th {
 
+        border-top: none;
 
+      }
 
+    }
 
+  }
 
+}

+ 39 - 0
src/scss/_text.scss
View File 

@@ -0,0 +1,39 @@
 
+//
 
+// Component: Text
 
+//
 
+
 
+// text modification
 
+.text-bold {
 
+  &,
 
+  &.table td,
 
+  &.table th {
 
+    font-weight: 700;
 
+  }
 
+}
 
+
 
+.text-xs {
 
+  font-size: $font-size-xs !important;
 
+}
 
+
 
+.text-sm {
 
+  font-size: $font-size-sm !important;
 
+}
 
+
 
+.text-md {
 
+  font-size: $font-size-base !important;
 
+}
 
+
 
+.text-lg {
 
+  font-size: $font-size-lg !important;
 
+}
 
+
 
+.text-xl {
 
+  font-size: $font-size-xl !important;
 
+}
 
+
 
+// text color variations
 
+@each $name, $color in $colors {
 
+  .text-#{$name} {
 
+    color: #{$color} !important;
 
+  }
 
+}

+ 1 - 1
src/scss/adminlte.scss
View File 

@@ -29,4 +29,4 @@
 
 @import "parts/core";
 
 @import "parts/components";
 
 @import "parts/extra-components";
 
-@import "miscellaneous";
 
+@import "parts/miscellaneous";

+ 3 - 3
src/scss/mixins/_miscellaneous.scss
View File 

@@ -16,9 +16,9 @@
 
 //   #{$property}: calc(#{$expression});
 
 // }
 
 
-// @mixin rotate($value) {
 
-//   transform: rotate($value);
 
-// }
 
+@mixin rotate($value) {
 
+  transform: rotate($value);
 
+}
 
 
 // @mixin animation($animation) {
 
 //   animation: $animation;

+ 1 - 0
src/scss/parts/_components.scss
View File 

@@ -3,3 +3,4 @@
 
 //
 
 
 @import "../cards";
 
+@import "../table";

+ 6 - 0
src/scss/parts/_miscellaneous.scss
View File 

@@ -0,0 +1,6 @@
 
+//
 
+// Part: Miscellaneous
 
+//
 
+
 
+@import "../miscellaneous";
 
+@import "../text";