@naniteninja/dashboard-components-lib 1.0.0 → 1.0.1

package/src/lib/shared-styles/common/buttons.scss

@@ -1,152 +1,152 @@
-:root {
-  --lib-button-width: 100px;
-  --lib-button-font-color: #fff;
-  --lib-button-border-radius: 30.582px;
-  --lib-button-border: 1px solid rgba(10, 9, 9, 0.45);
-  --lib-button-background: linear-gradient(180deg, rgba(62, 64, 69, 0.5) 0%, rgba(62, 64, 69, 0) 8.33%),
-    radial-gradient(170.95% 118.01% at 8.39% 32.81%, rgba(67, 64, 70, 0.5) 0%, rgba(41, 37, 45, 0.5) 28.24%, rgba(10, 10, 11, 0.5) 100%);
-  --lib-button-container-background: linear-gradient(90deg, #353039 0.68%, #29252d 99.45%);
-  --lib-button-box-shadow: 6.11634px 6.11634px 12.23267px 0px rgba(0, 0, 0, 0.25);
-  --lib-button-icon-color: #f7416e;
-  --lib-button-padding: 0 20px;
-  --lib-button-container-hover-outline-color: rgba(0, 0, 0, 0.87);
-  --lib-button-hover-outline-color: #fe638e;
-
-  --lib-button-container-height: 50px;
-  --lib-button-height: 48.5px;
-  --lib-button-font-family: 'Calistoga', serif;
-  --lib-button-font-size: 14px;
-  --lib-primary-button-text-shadow: 0px 0px 20.000049591064453px #fe3c72, 0px 0px 20.000049591064453px #fe3c72, 0px 0px 4.000010013580322px #fff;
-  --lib-secondary-button-text-shadow: 0px 0px 47.31624221801758px #fe3c72, 0px 0px 16px #fe3c72;
-  --lib-secondary-button-font-color: #fe638e;
-
-  --lib-list-button-container-height: 43px;
-  --lib-list-button-height: 40px;
-  --lib-list-button-icon-color: #f7416e;
-  --lib-list-button-padding: 7.189px 34.251px 10.018px 18.349px;
-  --lib-list-button-font-size: 12.872px;
-  --lib-list-button-font-family: 'Gilroy-Regular', serif;
-
-  --lib-icon-button-container-height: 33px;
-  --lib-icon-button-container-width: 33px;
-  --lib-icon-button-height: 30px;
-  --lib-icon-button-width: 30px;
-  --lib-icon-button-border-radius: 50%;
-
-  --lib-hover-button-height: 40px;
-  --lib-hover-button-width: 160px;
-  --lib-hover-icon-button-height: 25px;
-  --lib-hover-icon-button-width: 25px;
-  --lib-hover-icon-left-margin: 6px;
-  --lib-hover-button-font-size: 14px;
-  --lib-hover-button-font-color: #fe3c72;
-  --lib-hover-button-font-family: 'Gilroy-Regular', serif;
-
-  --lib-menu-button-container-height: 38px;
-  --lib-menu-button-container-width: 38px;
-  --lib-menu-button-height: 35px;
-  --lib-menu-button-width: 35px;
-  --lib-menu-button-border-radius: 50%;
-  --lib-menu-button-panel-background: linear-gradient(180deg, #403d46 0%, #3e3b44 100%);
-  --lib-menu-button-panel-shadow: 0px -2px 8px 0px rgba(255, 255, 255, 0.2) inset, 2px -2px 3px 0px rgba(0, 0, 0, 0.4) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.25),
-    0px 2px 4px 0px rgba(0, 0, 0, 0.25);
-  --lib-menu-button-active-color: #fe3c72;
-  --lib-menu-button-font-size: 12px;
-  --lib-menu--button-font-family: 'Gilroy-Regular', serif;
-
-  --primary-button-background: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%) !important;
-  --black-button-background: #27242c;
-}
-
-.button {
-  text-align: center;
-  height: 46px;
-  --border-radius: 100px;
-  width: 300px;
-  text-transform: none !important;
-  font-family: 'Calistoga', serif;
-  font-weight: 400;
-  font-size: 16px;
-}
-
-.button-sm {
-  width: 200px !important;
-}
-
-.button-lg {
-  width: 600px !important;
-}
-
-.box-shadow-button {
-  --box-shadow: 11px 10px 27px 2.5px rgba(17, 16, 20, 0.65), -5px -5px 16px -3px rgba(203, 199, 209, 0.25) !important;
-}
-
-.app-outline-button {
-  @extend .button;
-  --border-color: rgba(255, 255, 255, 0.5);
-  --border-style: solid;
-  --border-width: 2px;
-  --color: rgba(255, 255, 255, 0.5);
-  --background: transparent;
-  font-family: 'Calistoga', serif;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.app-black-button {
-  --lib-button-background: var(--black-button-background);
-  --lib-button-font-color: white;
-}
-
-.app-primary-button {
-  @extend .button;
-  @extend .box-shadow-button;
-  --background: var(--primary-button-background) !important;
-  --color: white;
-}
-
-.app-round-button {
-  width: 48px;
-  height: 48px;
-  --border-radius: 50%;
-  --background: var(--black-button-background);
-  --color: white;
-}
-
-.primary-button,
-.mat-raised-button.primary-button {
-  background: var(--button-background);
-  box-shadow: var(--box-shadow);
-  border-radius: 100px;
-  padding: 10px 25px;
-  font-family: 'Calistoga', serif;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 17px;
-  line-height: 160%;
-  text-align: center;
-  text-transform: capitalize;
-  color: var(--cyrano-pink-shade-1);
-  text-shadow: 0 0 16px var(--cyrano-pink-shade-1);
-  display: flex;
-  min-width: auto;
-  border: none;
-  cursor: pointer;
-  img {
-    margin: 5px 5px 0 0;
-    width: 18px;
-  }
-  &.normal-text {
-    font-size: 16px;
-  }
-  &.disable {
-    background: #adadad;
-    opacity: 0.6;
-  }
-  &:active {
-    box-shadow:
-      0px 5px 5px -3px rgba(0, 0, 0, 0.2),
-      0px 8px 10px 1px rgba(0, 0, 0, 0.14),
-      0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-  }
-}
+:root {
+  --lib-button-width: 100px;
+  --lib-button-font-color: #fff;
+  --lib-button-border-radius: 30.582px;
+  --lib-button-border: 1px solid rgba(10, 9, 9, 0.45);
+  --lib-button-background: linear-gradient(180deg, rgba(62, 64, 69, 0.5) 0%, rgba(62, 64, 69, 0) 8.33%),
+    radial-gradient(170.95% 118.01% at 8.39% 32.81%, rgba(67, 64, 70, 0.5) 0%, rgba(41, 37, 45, 0.5) 28.24%, rgba(10, 10, 11, 0.5) 100%);
+  --lib-button-container-background: linear-gradient(90deg, #353039 0.68%, #29252d 99.45%);
+  --lib-button-box-shadow: 6.11634px 6.11634px 12.23267px 0px rgba(0, 0, 0, 0.25);
+  --lib-button-icon-color: #f7416e;
+  --lib-button-padding: 0 20px;
+  --lib-button-container-hover-outline-color: rgba(0, 0, 0, 0.87);
+  --lib-button-hover-outline-color: #fe638e;
+
+  --lib-button-container-height: 50px;
+  --lib-button-height: 48.5px;
+  --lib-button-font-family: 'Calistoga', serif;
+  --lib-button-font-size: 14px;
+  --lib-primary-button-text-shadow: 0px 0px 20.000049591064453px #fe3c72, 0px 0px 20.000049591064453px #fe3c72, 0px 0px 4.000010013580322px #fff;
+  --lib-secondary-button-text-shadow: 0px 0px 47.31624221801758px #fe3c72, 0px 0px 16px #fe3c72;
+  --lib-secondary-button-font-color: #fe638e;
+
+  --lib-list-button-container-height: 43px;
+  --lib-list-button-height: 40px;
+  --lib-list-button-icon-color: #f7416e;
+  --lib-list-button-padding: 7.189px 34.251px 10.018px 18.349px;
+  --lib-list-button-font-size: 12.872px;
+  --lib-list-button-font-family: 'Gilroy-Regular', serif;
+
+  --lib-icon-button-container-height: 33px;
+  --lib-icon-button-container-width: 33px;
+  --lib-icon-button-height: 30px;
+  --lib-icon-button-width: 30px;
+  --lib-icon-button-border-radius: 50%;
+
+  --lib-hover-button-height: 40px;
+  --lib-hover-button-width: 160px;
+  --lib-hover-icon-button-height: 25px;
+  --lib-hover-icon-button-width: 25px;
+  --lib-hover-icon-left-margin: 6px;
+  --lib-hover-button-font-size: 14px;
+  --lib-hover-button-font-color: #fe3c72;
+  --lib-hover-button-font-family: 'Gilroy-Regular', serif;
+
+  --lib-menu-button-container-height: 38px;
+  --lib-menu-button-container-width: 38px;
+  --lib-menu-button-height: 35px;
+  --lib-menu-button-width: 35px;
+  --lib-menu-button-border-radius: 50%;
+  --lib-menu-button-panel-background: linear-gradient(180deg, #403d46 0%, #3e3b44 100%);
+  --lib-menu-button-panel-shadow: 0px -2px 8px 0px rgba(255, 255, 255, 0.2) inset, 2px -2px 3px 0px rgba(0, 0, 0, 0.4) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.25),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+  --lib-menu-button-active-color: #fe3c72;
+  --lib-menu-button-font-size: 12px;
+  --lib-menu--button-font-family: 'Gilroy-Regular', serif;
+
+  --primary-button-background: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%) !important;
+  --black-button-background: #27242c;
+}
+
+.button {
+  text-align: center;
+  height: 46px;
+  --border-radius: 100px;
+  width: 300px;
+  text-transform: none !important;
+  font-family: 'Calistoga', serif;
+  font-weight: 400;
+  font-size: 16px;
+}
+
+.button-sm {
+  width: 200px !important;
+}
+
+.button-lg {
+  width: 600px !important;
+}
+
+.box-shadow-button {
+  --box-shadow: 11px 10px 27px 2.5px rgba(17, 16, 20, 0.65), -5px -5px 16px -3px rgba(203, 199, 209, 0.25) !important;
+}
+
+.app-outline-button {
+  @extend .button;
+  --border-color: rgba(255, 255, 255, 0.5);
+  --border-style: solid;
+  --border-width: 2px;
+  --color: rgba(255, 255, 255, 0.5);
+  --background: transparent;
+  font-family: 'Calistoga', serif;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.app-black-button {
+  --lib-button-background: var(--black-button-background);
+  --lib-button-font-color: white;
+}
+
+.app-primary-button {
+  @extend .button;
+  @extend .box-shadow-button;
+  --background: var(--primary-button-background) !important;
+  --color: white;
+}
+
+.app-round-button {
+  width: 48px;
+  height: 48px;
+  --border-radius: 50%;
+  --background: var(--black-button-background);
+  --color: white;
+}
+
+.primary-button,
+.mat-raised-button.primary-button {
+  background: var(--button-background);
+  box-shadow: var(--box-shadow);
+  border-radius: 100px;
+  padding: 10px 25px;
+  font-family: 'Calistoga', serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 160%;
+  text-align: center;
+  text-transform: capitalize;
+  color: var(--cyrano-pink-shade-1);
+  text-shadow: 0 0 16px var(--cyrano-pink-shade-1);
+  display: flex;
+  min-width: auto;
+  border: none;
+  cursor: pointer;
+  img {
+    margin: 5px 5px 0 0;
+    width: 18px;
+  }
+  &.normal-text {
+    font-size: 16px;
+  }
+  &.disable {
+    background: #adadad;
+    opacity: 0.6;
+  }
+  &:active {
+    box-shadow:
+      0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+      0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  }
+}

package/src/lib/shared-styles/common/cards.scss

@@ -1,163 +1,163 @@
-.message-box {
-  padding: 1px;
-  border-radius: 12px;
-  overflow: hidden;
-  position: relative;
-  opacity: 1;
-  pointer-events: all;
-  background-image: var(--message-box-bg-color, linear-gradient(160.44deg, #8a75da 1%, #574e96 20%, #736980 50%, #332e39 80%));
-  &:before {
-    position: absolute;
-    content: '';
-    background-image: radial-gradient(#f7bdde, #fff0 55%);
-    height: 100%;
-    width: 50%;
-    top: -40px;
-    left: 50%;
-    transform: translateX(-50%);
-    -webkit-animation: translateX(-50%);
-    -moz-transform: translateX(-50%);
-  }
-
-  &:after {
-    position: absolute;
-    content: '';
-    left: 50%;
-    bottom: -30px;
-    height: 100%;
-    width: 61%;
-    transform: translateX(-50%);
-    opacity: 0.1;
-    background-image: var(--message-box-bg-transparent-color, radial-gradient(#fe3c72, #fff0 55%));
-    filter: blur(10px);
-    -webkit-filter: blur(10px);
-  }
-
-  .message-box-wrapper {
-      align-items: flex-start;
-      border-radius: 12px;
-      display: flex;
-      padding: 10px 20px;
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-      gap: 20px;
-
-      &:before {
-        position: absolute;
-        content: '';
-        left: 0;
-        top: 0;
-        height: 100%;
-        width: 100%;
-        opacity: 0.8;
-        filter: blur(2px);
-        -webkit-filter: blur(2px);
-        background-image: linear-gradient(94.44deg, #574a91 1%, #3a3541 20%);
-      }
-
-      &:after {
-        position: absolute;
-        content: '';
-        left: 50%;
-        bottom: -60px;
-        height: 100%;
-        width: 61%;
-        transform: translateX(-50%);
-        opacity: 0.3;
-        background-image: var(--message-box-bg-transparent-color, radial-gradient(#fe3c72, #fff0 55%));
-        filter: blur(10px);
-        -webkit-filter: blur(10px);
-      }
-
-      * {
-        position: relative;
-        z-index: 9;
-      }
-
-      .message-box-icon {
-        width: 26px;
-        min-width: 26px;
-      }
-
-
-      .message-box-content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-        p {
-          color: var(--primary-white-color);
-          font-size: 11.25px;
-          line-height: 17.38px;
-          color: var(--tertiary-color);
-        }
-        h2 {
-          color: var(--primary-white-color);
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 22.2px;
-        }
-        &__button-wrapper {
-          &__button {
-            color: var(--cyrano-pink-shade-1);
-          }
-        }
-      }
-    }
-}
-
-/* code to manage the different Screen resolutions */
-@media only screen and (min-width: 767px) {
-  .message-box {
-    max-width: 290px;
-  }
-}
-
-@media only screen and (max-width: 767px) {
-  .message-box {
-    max-width: 100%;
-  }
-}
-
-.tooltip-element--bottom, .tooltip-element--top {
-  position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    left: calc(50% - 10px);
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-  }
-}
-
-.tooltip-element--right, .tooltip-element--left {
-  position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    top: calc(50% - 10px);
-    border-top: 10px solid transparent;
-    border-bottom: 10px solid transparent;
-  }
-}
-
-.tooltip-element--left::after {
-  border-left: 10px solid var(--tooltip-bg-color, #4f4150);;
-  left: -14px;
-}
-
-.tooltip-element--right::after {
-  border-right: 10px solid var(--tooltip-bg-color, #4f4150);;
-  right: -14px;
-}
-
-.tooltip-element--bottom::after {
-  bottom: -14px;
-  border-bottom: 10px solid var(--tooltip-bg-color, #4f4150);;
-}
-
-.tooltip-element--top::after {
-  top: -14px;
-  border-top: 10px solid var(--tooltip-bg-color, #4f4150);
-}
+.message-box {
+  padding: 1px;
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  opacity: 1;
+  pointer-events: all;
+  background-image: var(--message-box-bg-color, linear-gradient(160.44deg, #8a75da 1%, #574e96 20%, #736980 50%, #332e39 80%));
+  &:before {
+    position: absolute;
+    content: '';
+    background-image: radial-gradient(#f7bdde, #fff0 55%);
+    height: 100%;
+    width: 50%;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit-animation: translateX(-50%);
+    -moz-transform: translateX(-50%);
+  }
+
+  &:after {
+    position: absolute;
+    content: '';
+    left: 50%;
+    bottom: -30px;
+    height: 100%;
+    width: 61%;
+    transform: translateX(-50%);
+    opacity: 0.1;
+    background-image: var(--message-box-bg-transparent-color, radial-gradient(#fe3c72, #fff0 55%));
+    filter: blur(10px);
+    -webkit-filter: blur(10px);
+  }
+
+  .message-box-wrapper {
+      align-items: flex-start;
+      border-radius: 12px;
+      display: flex;
+      padding: 10px 20px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      gap: 20px;
+
+      &:before {
+        position: absolute;
+        content: '';
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        opacity: 0.8;
+        filter: blur(2px);
+        -webkit-filter: blur(2px);
+        background-image: linear-gradient(94.44deg, #574a91 1%, #3a3541 20%);
+      }
+
+      &:after {
+        position: absolute;
+        content: '';
+        left: 50%;
+        bottom: -60px;
+        height: 100%;
+        width: 61%;
+        transform: translateX(-50%);
+        opacity: 0.3;
+        background-image: var(--message-box-bg-transparent-color, radial-gradient(#fe3c72, #fff0 55%));
+        filter: blur(10px);
+        -webkit-filter: blur(10px);
+      }
+
+      * {
+        position: relative;
+        z-index: 9;
+      }
+
+      .message-box-icon {
+        width: 26px;
+        min-width: 26px;
+      }
+
+
+      .message-box-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        p {
+          color: var(--primary-white-color);
+          font-size: 11.25px;
+          line-height: 17.38px;
+          color: var(--tertiary-color);
+        }
+        h2 {
+          color: var(--primary-white-color);
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 22.2px;
+        }
+        &__button-wrapper {
+          &__button {
+            color: var(--cyrano-pink-shade-1);
+          }
+        }
+      }
+    }
+}
+
+/* code to manage the different Screen resolutions */
+@media only screen and (min-width: 767px) {
+  .message-box {
+    max-width: 290px;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .message-box {
+    max-width: 100%;
+  }
+}
+
+.tooltip-element--bottom, .tooltip-element--top {
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    left: calc(50% - 10px);
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+  }
+}
+
+.tooltip-element--right, .tooltip-element--left {
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - 10px);
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+  }
+}
+
+.tooltip-element--left::after {
+  border-left: 10px solid var(--tooltip-bg-color, #4f4150);;
+  left: -14px;
+}
+
+.tooltip-element--right::after {
+  border-right: 10px solid var(--tooltip-bg-color, #4f4150);;
+  right: -14px;
+}
+
+.tooltip-element--bottom::after {
+  bottom: -14px;
+  border-bottom: 10px solid var(--tooltip-bg-color, #4f4150);;
+}
+
+.tooltip-element--top::after {
+  top: -14px;
+  border-top: 10px solid var(--tooltip-bg-color, #4f4150);
+}

package/src/lib/shared-styles/common/client-dash.scss

@@ -1,5 +1,5 @@
-lib-client-dashboard {
-  * {
-    -webkit-tap-highlight-color: transparent;
-  }
-}
+lib-client-dashboard {
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+}