@dev-tcloud/tcloud-ui 4.2.2 → 5.0.1

package/scss/tcloud/prime/left-navigation.scss

@@ -1,328 +1,330 @@
-body.tc-prime {
-
-  //==========================================================
-// Left Navigation Menu
-//==========================================================
-
-  //====================================
-  // User Box info
-  //====================================
-
-  .user-name {
-
-    p {
-      display:block;
-      color: var(--white);
-      width: 150px !important;
-    }
-  }
-
-
-  .profile-icon {
-    display: none;
-  }
-
-  .tc-prime-icon.fa-user {
-    display: block !important;
-    font-size: 18px;
-    color: var(--white);
-  }
-
-  .profile-options {
-    color: var(--white);
-    position: absolute !important;
-    right: -22px;
-    top: 2px;
-
-    .profile-name {
-      display: none;
-    }
-
-    .fas.fa-ellipsis-v {
-      height: 20px;
-      width: 20px;
-
-      background: url('/assets/img/tc-prime_menu-icon.svg') no-repeat;
-      background-position: center center;
-
-      &:before {
-        display: none;
-      }
-    }
-  }
-
-  .dropdown {
-
-    &.profile-element{
-
-      &:after {
-        display: none;
-      }
-    }
-  }
-
-  .user-thumb {
-    display: none;
-  }
-
-  .totvs-logo-wrap {
-    background: url("/assets/img/logo-totvs-white.svg");
-    background-size: cover;
-    width: 112px;
-    height: 56px;
-    position: absolute;
-    top: -61px;
-    left: -15px;
-  }
-
-  .totvs-logo-wrap img {
-    display: none;
-  }
-
-  .nav-header {
-
-    .text-muted {
-      // color: var(--tc-gray-500) !important;
-      color: var(--tc-gray-100) !important;
-    }
-  }
-
-  //====================================
-  // Nav Menu Old
-  //====================================
-
-  .navbar-default .nav > li > a {
-    font-weight: normal !important;
-  }
-
-
-  .nav > li.active,
-  .navbar-default .nav > li > a:hover,
-  .navbar-default .nav > li > a:focus,
-  ul.nav-second-level {
-    background-color: transparent !important;
-  }
-
-  .profile-element {
-    background: none;
-  }
-
-  .user-dropdown-wrap {
-    display: flex;
-    align-items: center;
-
-    i {
-      margin-right: 20px;
-    }
-  }
-
-
-  .nav > li.active a:before {
-    display:none;
-  }
-
-  .dropdown-menu {
-    font-weight: normal;
-
-    > li > a,
-    .item-link i {
-      color: var(--black) !important;
-
-      &:hover,
-      :focus {
-        @include prime-color;
-        background: none !important;
-      }
-    }
-
-    .item-link i {
-      font-size: 20px;
-    }
-
-    &:hover {
-
-      > li > a,
-      .item-link i {
-
-        @include prime-color;
-      }
-    }
-  }
-
-  .dropdown-menu > li > a:focus,
-  .dropdown-menu > li > a:hover {
-    @include prime-color;
-  }
-
-  //====================================
-  // Prime Menu
-  //====================================
-
-  #side-menu {
-    margin-bottom: 40px;
-
-    >li {
-      margin-bottom: 2px;
-
-      a {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 10px;
-        color: var(--white);
-        border-radius: 35px;
-        margin: 0 10px;
-        padding: 7px;
-        font-size: 11px;
-
-        i {
-          font-size: 18px;
-          margin-right: 0;
-        }
-      }
-
-      &.active,
-      &:hover {
-
-        > a {
-          @include prime-bg-gradient;
-        }
-      }
-
-
-      .nav-second-level {
-
-        > li {
-
-          &.active,
-          &:hover {
-
-            a {
-              color: var(--tc-primary-lighten);
-            }
-          }
-
-          a {
-            background: none !important;
-            padding: 7px 20px 0 40px;
-            margin: 0;
-          }
-        }
-
-        .nav-third-level {
-          margin-left: 20px;
-
-          li {
-            width: 100%;
-            margin: 0;
-            margin-top: 5px;
-
-            a {
-              color: var(--white);
-              padding: 0 15px 0 30px;
-              margin: 0;
-            }
-
-            &.active,
-            &:hover {
-
-              a {
-                color: var(--tc-primary-lighten);
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .nav > li > a i {
-      margin: 0 !important;
-    }
-
-    .wrap-menu-icon {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-
-    // -----------------------------
-    // ICONS MENU
-    // -----------------------------
-
-    $hgt: 25px;
-    $wdt: 20px;
-
-    .fa-laptop {
-      @include ico-menu('menu-ico_home', $hgt, $wdt);
-    }
-
-    // minha conta
-    .fa-user {
-      @include ico-menu('menu-ico_account', $hgt, $wdt);
-    }
-
-    // TSS
-    .fa-cubes {
-      @include ico-menu('menu-ico_tss', $hgt, $wdt);
-    }
-
-    // Produtos
-    .fa-server {
-      @include ico-menu('menu-ico_products', $hgt, $wdt);
-    }
-
-    // IAAS
-    .fa-cloud {
-      @include ico-menu('menu-ico_iaas', $hgt, $wdt);
-    }
-
-    // Gestão de Usuários
-    .fa-address-card {
-      @include ico-menu('menu-ico_adm-users', $hgt, $wdt);
-    }
-
-    // Administração
-    .fa-cogs {
-      @include ico-menu('menu-ico_adm', $hgt, $wdt);
-    }
-
-    // trust-center
-    .fa-lock {
-      @include ico-menu('menu-ico_trust-center', $hgt, $wdt);
-    }
-
-    // Ev Comercial
-    .fa-building {
-      @include ico-menu('menu-ico_com-event', $hgt, $wdt);
-    }
-
-    // Janela de Manutenção
-    .fa-clock {
-      @include ico-menu('menu-ico_maintenance', $hgt, $wdt);
-    }
-
-    // Migrador
-    .fa-dolly-flatbed {
-      @include ico-menu('menu-ico_migrator', $hgt, $wdt);
-    }
-
-    // DEVstudio
-    .fa-dev {
-      @include ico-menu('menu-ico_maintenance', $hgt, $wdt);
-    }
-
-  }
-
-  .menu-prime-item {
-    justify-content: space-between;
-    position: relative;
-
-    // Fix arrow menu standard
-    .fa.arrow {
-      position: absolute;
-      right: 10px;
-      top: 10px;
-    }
-  }
-
+@use "../custom/mixins";
+
+body.tc-prime {
+
+  //==========================================================
+// Left Navigation Menu
+//==========================================================
+
+  //====================================
+  // User Box info
+  //====================================
+
+  .user-name {
+
+    p {
+      display:block;
+      color: var(--white);
+      width: 150px !important;
+    }
+  }
+
+
+  .profile-icon {
+    display: none;
+  }
+
+  .tc-prime-icon.fa-user {
+    display: block !important;
+    font-size: 18px;
+    color: var(--white);
+  }
+
+  .profile-options {
+    color: var(--white);
+    position: absolute !important;
+    right: -22px;
+    top: 2px;
+
+    .profile-name {
+      display: none;
+    }
+
+    .fas.fa-ellipsis-v {
+      height: 20px;
+      width: 20px;
+
+      background: url('/assets/img/tc-prime_menu-icon.svg') no-repeat;
+      background-position: center center;
+
+      &:before {
+        display: none;
+      }
+    }
+  }
+
+  .dropdown {
+
+    &.profile-element{
+
+      &:after {
+        display: none;
+      }
+    }
+  }
+
+  .user-thumb {
+    display: none;
+  }
+
+  .totvs-logo-wrap {
+    background: url("/assets/img/logo-totvs-white.svg");
+    background-size: cover;
+    width: 112px;
+    height: 56px;
+    position: absolute;
+    top: -61px;
+    left: -15px;
+  }
+
+  .totvs-logo-wrap img {
+    display: none;
+  }
+
+  .nav-header {
+
+    .text-muted {
+      // color: var(--tc-gray-500) !important;
+      color: var(--tc-gray-100) !important;
+    }
+  }
+
+  //====================================
+  // Nav Menu Old
+  //====================================
+
+  .navbar-default .nav > li > a {
+    font-weight: normal !important;
+  }
+
+
+  .nav > li.active,
+  .navbar-default .nav > li > a:hover,
+  .navbar-default .nav > li > a:focus,
+  ul.nav-second-level {
+    background-color: transparent !important;
+  }
+
+  .profile-element {
+    background: none;
+  }
+
+  .user-dropdown-wrap {
+    display: flex;
+    align-items: center;
+
+    i {
+      margin-right: 20px;
+    }
+  }
+
+
+  .nav > li.active a:before {
+    display:none;
+  }
+
+  .dropdown-menu {
+    font-weight: normal;
+
+    > li > a,
+    .item-link i {
+      color: var(--black) !important;
+
+      &:hover,
+      :focus {
+        @include mixins.prime-color;
+        background: none !important;
+      }
+    }
+
+    .item-link i {
+      font-size: 20px;
+    }
+
+    &:hover {
+
+      > li > a,
+      .item-link i {
+
+        @include mixins.prime-color;
+      }
+    }
+  }
+
+  .dropdown-menu > li > a:focus,
+  .dropdown-menu > li > a:hover {
+    @include mixins.prime-color;
+  }
+
+  //====================================
+  // Prime Menu
+  //====================================
+
+  #side-menu {
+    margin-bottom: 40px;
+
+    >li {
+      margin-bottom: 2px;
+
+      a {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 10px;
+        color: var(--white);
+        border-radius: 35px;
+        margin: 0 10px;
+        padding: 7px;
+        font-size: 11px;
+
+        i {
+          font-size: 18px;
+          margin-right: 0;
+        }
+      }
+
+      &.active,
+      &:hover {
+
+        > a {
+          @include mixins.prime-bg-gradient;
+        }
+      }
+
+
+      .nav-second-level {
+
+        > li {
+
+          &.active,
+          &:hover {
+
+            a {
+              color: var(--tc-primary-lighten);
+            }
+          }
+
+          a {
+            background: none !important;
+            padding: 7px 20px 0 40px;
+            margin: 0;
+          }
+        }
+
+        .nav-third-level {
+          margin-left: 20px;
+
+          li {
+            width: 100%;
+            margin: 0;
+            margin-top: 5px;
+
+            a {
+              color: var(--white);
+              padding: 0 15px 0 30px;
+              margin: 0;
+            }
+
+            &.active,
+            &:hover {
+
+              a {
+                color: var(--tc-primary-lighten);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .nav > li > a i {
+      margin: 0 !important;
+    }
+
+    .wrap-menu-icon {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    // -----------------------------
+    // ICONS MENU
+    // -----------------------------
+
+    $hgt: 25px;
+    $wdt: 20px;
+
+    .fa-laptop {
+      @include mixins.ico-menu('menu-ico_home', $hgt, $wdt);
+    }
+
+    // minha conta
+    .fa-user {
+      @include mixins.ico-menu('menu-ico_account', $hgt, $wdt);
+    }
+
+    // TSS
+    .fa-cubes {
+      @include mixins.ico-menu('menu-ico_tss', $hgt, $wdt);
+    }
+
+    // Produtos
+    .fa-server {
+      @include mixins.ico-menu('menu-ico_products', $hgt, $wdt);
+    }
+
+    // IAAS
+    .fa-cloud {
+      @include mixins.ico-menu('menu-ico_iaas', $hgt, $wdt);
+    }
+
+    // Gestão de Usuários
+    .fa-address-card {
+      @include mixins.ico-menu('menu-ico_adm-users', $hgt, $wdt);
+    }
+
+    // Administração
+    .fa-cogs {
+      @include mixins.ico-menu('menu-ico_adm', $hgt, $wdt);
+    }
+
+    // trust-center
+    .fa-lock {
+      @include mixins.ico-menu('menu-ico_trust-center', $hgt, $wdt);
+    }
+
+    // Ev Comercial
+    .fa-building {
+      @include mixins.ico-menu('menu-ico_com-event', $hgt, $wdt);
+    }
+
+    // Janela de Manutenção
+    .fa-clock {
+      @include mixins.ico-menu('menu-ico_maintenance', $hgt, $wdt);
+    }
+
+    // Migrador
+    .fa-dolly-flatbed {
+      @include mixins.ico-menu('menu-ico_migrator', $hgt, $wdt);
+    }
+
+    // DEVstudio
+    .fa-dev {
+      @include mixins.ico-menu('menu-ico_maintenance', $hgt, $wdt);
+    }
+
+  }
+
+  .menu-prime-item {
+    justify-content: space-between;
+    position: relative;
+
+    // Fix arrow menu standard
+    .fa.arrow {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+    }
+  }
+
 }

package/scss/tcloud/prime/styles.scss

@@ -1,3 +1,3 @@
-@import 'left-navigation.scss';
-@import 'cards-products.scss';
-@import 'tcloud-prime.scss';
+@use 'left-navigation.scss';
+@use 'cards-products.scss';
+@use 'tcloud-prime.scss';