@dev-tcloud/tcloud-ui 4.2.1 → 5.0.0

package/scss/tcloud/prime/cards-products.scss

@@ -1,332 +1,334 @@
-body.tc-prime{
-
-  //=================================================
-  // Products Topologies
-  //=================================================
-
-  //====================================
-  // Carousel
-  //====================================
-
-  .env-card-header {
-    background: none !important;
-    @include prime-gray-100;
-
-    .fa-cog,
-    .icon-date-create {
-      @include prime-gray-100;
-    }
-
-    .status {
-      color: var(--black);
-    }
-  }
-
-  .top-id-wrap:hover .top-id,
-  .top-id-wrap:hover i {
-    @include prime-color;
-  }
-
-
-  .slick-dots li.slick-active button:before {
-    @include prime-color;
-  }
-
-  .slick-dots {
-
-    li {
-
-      button:before {
-        @include prime-bgc;
-      }
-
-      &.slick-active {
-
-        button {
-
-          &:before {
-            @include prime-bgc;
-            opacity: 1;
-          }
-        }
-      }
-    }
-  }
-
-  .slick-prev:before,
-  .slick-next:before {
-    @include prime-color;
-  }
-
-  .env-card-wrap {
-
-    .ibox-content.selected > :after,
-    .ibox-content:hover > :after {
-      border-top: 13px solid var(--tc-primary) !important;
-    }
-
-    .ibox-content:hover,
-    .ibox-content.selected {
-      box-shadow: none !important;
-    }
-  }
-
-
-  .slick-dots {
-    display: none !important;
-  }
-
-  .ibox-content.selected > :after,
-  .ibox-content:hover > :after {
-    bottom: -13px !important;
-  }
-
-  .env-card-content {
-
-    .wrap {
-      flex-flow: row-reverse !important;
-    }
-  }
-
-
-  .prime-topologies-header {
-    display: block !important;
-  }
-
-  .prime-topologies-header-content {
-    display: flex;
-    gap: 20px;
-    align-items: stretch;
-    border-bottom: 1px solid var(--tc-gray-50);
-    height: 53px;
-  }
-
-
-  .prime-topology-title-page {
-    display: flex;
-    align-items: center;
-
-    h1 {
-      font-size: 14px !important;
-      font-weight: 500 !important;
-    }
-
-    i {
-      margin-left: 10px;
-      color: var(--tc-gray-100);
-    }
-
-    .header-title {
-      background: transparent !important;
-    }
-
-  }
-
-  .prime-length-wrap {
-    display: flex;
-    gap: 20px;
-    align-items: center;
-    border-left: 1px solid var(--tc-gray-50);
-    padding-left: 20px;
-
-    .tplg-legnth {
-      font-weight: bold;
-    }
-  }
-
-  .env-length,
-  .header-title {
-    display: none !important;
-  }
-
-  .help-docs {
-    position: absolute !important;
-    top: -171px !important;
-    right: -15px !important;
-
-    i {
-      @include prime-color;
-    }
-  }
-
-  .topologies-header {
-    min-height: initial !important;
-    margin: 20px 0 !important;
-  }
-
-  .ibox-content {
-    margin-top: 0 !important;
-    padding: 0 !important;
-    border: none !important;
-  }
-
-
-  .slick-list .slick-slide .ibox-content.selected .env-card-header .status.error {
-    color: red !important;
-  }
-
-  .env-card.error {
-    .slick-list .slick-slide .ibox-content.selected .env-card-header .fa-cog {
-      color: red !important;
-    }
-
-  }
-
-  .env-card {
-
-    .ibox-content {
-      border: 3px solid var(--tc-gray-100) !important;
-      border-radius: 5px;
-
-      .env-card-header {
-        border-bottom: 2px solid var(--tc-gray-100);
-      }
-
-      &.selected,
-      &:hover {
-        border-color: var(--tc-primary) !important;
-
-        .env-card-header {
-          border-bottom: 2px solid var(--tc-primary) !important;
-
-          .status,
-          .fa-cog,
-          .icon-date-create {
-            @include prime-color;
-          }
-        }
-      }
-
-    }
-
-    &.error {
-
-      .env-card-header {
-        border-bottom: 2px solid var(--red) !important;
-
-        .status,
-        .icon-date-create {
-          color: var(--red) !important;
-        }
-
-        .status{
-          color: var(--red) !important;
-
-          &.error {
-            background-color: transparent !important;
-          }
-        }
-      }
-
-      .ibox-content {
-        border-color: var(--red) !important;
-
-        &.selected,
-        &:hover
-        {
-
-          .env-card-header {
-            border-bottom: 2px solid var(--red) !important;
-
-            .fa-cog,
-            .status,
-            .icon-date-create {
-              color: var(--red) !important;
-            }
-
-            i {
-              color: var(--red) !important;
-            }
-
-          }
-
-          .env-card-content {
-
-            &:after {
-              border-top-color: var(--red) !important;
-            }
-          }
-        }
-      }
-    }
-
-    &.migrating {
-
-      .env-card-header {
-        border-bottom: 2px solid var(--second) !important;
-
-        .status,
-        .icon-date-create {
-          color: var(--second) !important;
-        }
-
-        .status{
-          color: var(--second) !important;
-
-          &.error {
-            background-color: transparent !important;
-          }
-        }
-      }
-
-      .ibox-content {
-        border-color: var(--second) !important;
-
-        &.selected,
-        &:hover
-        {
-
-          .env-card-header {
-            border-bottom: 2px solid var(--second) !important;
-
-            .fa-cog,
-            .status,
-            .icon-date-create {
-              color: var(--second) !important;
-            }
-
-            i {
-              color: var(--second) !important;
-            }
-
-          }
-
-          .env-card-content {
-
-            &:after {
-              border-top-color: var(--second) !important;
-            }
-          }
-        }
-      }
-    }
-  }
-
-
-
-  .bedge-wrap {
-
-    &.wrap-footer {
-
-      .label-success,
-      .badge-success {
-        color: var(--black) !important;
-        font-weight: normal;
-      }
-    }
-  }
-
-  .internet-access-box,
-  .legendas {
-    background: var(--tc-gray-10) !important;
-  }
-
-  .vpn-list-box {
-    // @include test;
-
-    .vpn-box  {
-      background-color: var(--tc-gray-10) !important;
-    }
-  }
-
+@use "../custom/mixins";
+
+body.tc-prime{
+
+  //=================================================
+  // Products Topologies
+  //=================================================
+
+  //====================================
+  // Carousel
+  //====================================
+
+  .env-card-header {
+    background: none !important;
+    @include mixins.prime-gray-100;
+
+    .fa-cog,
+    .icon-date-create {
+      @include mixins.prime-gray-100;
+    }
+
+    .status {
+      color: var(--black);
+    }
+  }
+
+  .top-id-wrap:hover .top-id,
+  .top-id-wrap:hover i {
+    @include mixins.prime-color;
+  }
+
+
+  .slick-dots li.slick-active button:before {
+    @include mixins.prime-color;
+  }
+
+  .slick-dots {
+
+    li {
+
+      button:before {
+        @include mixins.prime-bgc;
+      }
+
+      &.slick-active {
+
+        button {
+
+          &:before {
+            @include mixins.prime-bgc;
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+
+  .slick-prev:before,
+  .slick-next:before {
+    @include mixins.prime-color;
+  }
+
+  .env-card-wrap {
+
+    .ibox-content.selected > :after,
+    .ibox-content:hover > :after {
+      border-top: 13px solid var(--tc-primary) !important;
+    }
+
+    .ibox-content:hover,
+    .ibox-content.selected {
+      box-shadow: none !important;
+    }
+  }
+
+
+  .slick-dots {
+    display: none !important;
+  }
+
+  .ibox-content.selected > :after,
+  .ibox-content:hover > :after {
+    bottom: -13px !important;
+  }
+
+  .env-card-content {
+
+    .wrap {
+      flex-flow: row-reverse !important;
+    }
+  }
+
+
+  .prime-topologies-header {
+    display: block !important;
+  }
+
+  .prime-topologies-header-content {
+    display: flex;
+    gap: 20px;
+    align-items: stretch;
+    border-bottom: 1px solid var(--tc-gray-50);
+    height: 53px;
+  }
+
+
+  .prime-topology-title-page {
+    display: flex;
+    align-items: center;
+
+    h1 {
+      font-size: 14px !important;
+      font-weight: 500 !important;
+    }
+
+    i {
+      margin-left: 10px;
+      color: var(--tc-gray-100);
+    }
+
+    .header-title {
+      background: transparent !important;
+    }
+
+  }
+
+  .prime-length-wrap {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    border-left: 1px solid var(--tc-gray-50);
+    padding-left: 20px;
+
+    .tplg-legnth {
+      font-weight: bold;
+    }
+  }
+
+  .env-length,
+  .header-title {
+    display: none !important;
+  }
+
+  .help-docs {
+    position: absolute !important;
+    top: -171px !important;
+    right: -15px !important;
+
+    i {
+      @include mixins.prime-color;
+    }
+  }
+
+  .topologies-header {
+    min-height: initial !important;
+    margin: 20px 0 !important;
+  }
+
+  .ibox-content {
+    margin-top: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+  }
+
+
+  .slick-list .slick-slide .ibox-content.selected .env-card-header .status.error {
+    color: red !important;
+  }
+
+  .env-card.error {
+    .slick-list .slick-slide .ibox-content.selected .env-card-header .fa-cog {
+      color: red !important;
+    }
+
+  }
+
+  .env-card {
+
+    .ibox-content {
+      border: 3px solid var(--tc-gray-100) !important;
+      border-radius: 5px;
+
+      .env-card-header {
+        border-bottom: 2px solid var(--tc-gray-100);
+      }
+
+      &.selected,
+      &:hover {
+        border-color: var(--tc-primary) !important;
+
+        .env-card-header {
+          border-bottom: 2px solid var(--tc-primary) !important;
+
+          .status,
+          .fa-cog,
+          .icon-date-create {
+            @include mixins.prime-color;
+          }
+        }
+      }
+
+    }
+
+    &.error {
+
+      .env-card-header {
+        border-bottom: 2px solid var(--red) !important;
+
+        .status,
+        .icon-date-create {
+          color: var(--red) !important;
+        }
+
+        .status{
+          color: var(--red) !important;
+
+          &.error {
+            background-color: transparent !important;
+          }
+        }
+      }
+
+      .ibox-content {
+        border-color: var(--red) !important;
+
+        &.selected,
+        &:hover
+        {
+
+          .env-card-header {
+            border-bottom: 2px solid var(--red) !important;
+
+            .fa-cog,
+            .status,
+            .icon-date-create {
+              color: var(--red) !important;
+            }
+
+            i {
+              color: var(--red) !important;
+            }
+
+          }
+
+          .env-card-content {
+
+            &:after {
+              border-top-color: var(--red) !important;
+            }
+          }
+        }
+      }
+    }
+
+    &.migrating {
+
+      .env-card-header {
+        border-bottom: 2px solid var(--second) !important;
+
+        .status,
+        .icon-date-create {
+          color: var(--second) !important;
+        }
+
+        .status{
+          color: var(--second) !important;
+
+          &.error {
+            background-color: transparent !important;
+          }
+        }
+      }
+
+      .ibox-content {
+        border-color: var(--second) !important;
+
+        &.selected,
+        &:hover
+        {
+
+          .env-card-header {
+            border-bottom: 2px solid var(--second) !important;
+
+            .fa-cog,
+            .status,
+            .icon-date-create {
+              color: var(--second) !important;
+            }
+
+            i {
+              color: var(--second) !important;
+            }
+
+          }
+
+          .env-card-content {
+
+            &:after {
+              border-top-color: var(--second) !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+
+
+  .bedge-wrap {
+
+    &.wrap-footer {
+
+      .label-success,
+      .badge-success {
+        color: var(--black) !important;
+        font-weight: normal;
+      }
+    }
+  }
+
+  .internet-access-box,
+  .legendas {
+    background: var(--tc-gray-10) !important;
+  }
+
+  .vpn-list-box {
+    // @include test;
+
+    .vpn-box  {
+      background-color: var(--tc-gray-10) !important;
+    }
+  }
+
 }