@egovernments/digit-ui-components-css 0.0.2-beta.7 → 0.2.0-beta.1

package/src/digitv2/components/sidePanelV2.scss

@@ -0,0 +1,222 @@
+.digit-slider-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  transition: transform 0.3s ease;
+  z-index: 1000;
+  overflow: hidden;
+  border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+  background: theme(digitv2.lightTheme.paper-secondary);
+  box-shadow: -0.125rem -0.25rem 0.356rem 0rem #00000026;
+}
+
+.digit-slider-container.left {
+  left: 0;
+  transform: translateX(-100%);
+  width: 18.75rem;
+}
+
+.digit-slider-container.right {
+  right: 0;
+  transform: translateX(100%);
+  width: 18.75rem;
+}
+
+.digit-slider-container.open.left,
+.digit-slider-container.open.right {
+  transform: translateX(0);
+}
+
+.digit-slider-container.closed {
+  width: 4rem;
+}
+
+.digit-slider-container.closed.left {
+  transform: translateX(0);
+}
+
+.digit-slider-container.closed.right {
+  transform: translateX(0);
+}
+
+
+.section-divider-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: theme(digitv2.spacers.spacer4);
+}
+
+.slider-handler {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  padding-left: theme(digitv2.spacers.spacer1);
+  border-radius: 50%;
+  z-index: 1001;
+  display: flex;
+  gap: theme(digitv2.spacers.spacer1);
+  align-items: center;
+
+  .scroll-bar {
+    height: 11.25rem;
+    width: theme(digitv2.spacers.spacer2);
+    border-radius: 0.563rem;
+    background-color: #D9D9D9;
+  }
+
+  .slider-handler-svg {
+    background: theme(digitv2.lightTheme.paper-primary);
+    box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
+    width: theme(digitv2.spacers.spacer8);
+    height: 3.25rem;
+    display: flex !important;
+    align-items: center;
+    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+  }
+
+  &.dynamic {
+    &.left {
+      right: 0;
+      flex-direction: row-reverse;
+    }
+  }
+}
+
+.slider-bg-active {
+  position: fixed;
+  top: 0;
+  left: 0;
+  backdrop-filter: blur(0.125rem);
+  -webkit-backdrop-filter: blur(0.125rem);
+  right: 0;
+  bottom: 0;
+  background: rgba(11, 12, 12, 0.7);
+  z-index: 999;
+}
+
+.slider-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.slider-header {
+  @extend .typography.heading-m;
+  flex-shrink: 0;
+  padding: theme(digitv2.spacers.spacer4);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-style: theme(digitv2.fontStyle.normal);
+  font-weight: theme(digitv2.fontWeight.bold);
+  line-height: theme(digitv2.lineHeight.lineheight1);
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    font-size: theme(digitv2.fontSize.heading-m.mobile);
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    /* Media query for tablets */
+    font-size: theme(digitv2.fontSize.heading-m.tablet);
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    font-size: theme(digitv2.fontSize.heading-m.desktop);
+  }
+  border-bottom: 0.063rem solid #d6d5d4;
+
+  .close-icon {
+    cursor: pointer;
+    position: absolute;
+    top: theme(digitv2.spacers.spacer2);
+    right: theme(digitv2.spacers.spacer2);
+    width: theme(digitv2.spacers.spacer8);
+    height: theme(digitv2.spacers.spacer8);
+  }
+}
+
+.slider-section {
+  display: flex;
+  flex-direction: column;
+  gap: theme(digitv2.spacers.spacer2);
+  flex-grow: 1;
+
+}
+
+.section-divider {
+  border-top: 0.063rem solid #d6d5d4;
+}
+
+.slider-footer {
+  bottom: 0;
+  width: 100%;
+  z-index: 5;
+  padding: theme(digitv2.spacers.spacer4);
+  border-top: 0.063rem solid #d6d5d4;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.slider-body {
+  display: flex;
+  flex-grow: 1;
+  padding: theme(digitv2.spacers.spacer4);
+  gap: theme(digitv2.spacers.spacer4);
+  @extend .typography.body-s;
+  flex-direction: column;
+  color: theme(digitv2.lightTheme.text-primary);
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    font-size: theme(digitv2.fontSize.body-s.mobile);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    /* Media query for tablets */
+    font-size: theme(digitv2.fontSize.body-s.tablet);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    font-size: theme(digitv2.fontSize.body-s.desktop);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+  }
+
+  &.with-sections {
+    padding: theme(digitv2.spacers.spacer0);
+
+    .slider-section {
+      padding: theme(digitv2.spacers.spacer4);
+    }
+  }
+}
+
+
+.slider-body::-webkit-scrollbar {
+  width: 0.375rem;
+  background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+.slider-body::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
+}
+
+.slider-body::-webkit-scrollbar-thumb {
+  background-color: theme(digitv2.lightTheme.generic-divider);
+  border-radius: 0.563rem;
+}