jekyll-bulma 0.9.2 → 1.0.0

data/_sass/sass/components/modal.scss

@@ -0,0 +1,164 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$modal-z: 40 !default;
+
+$modal-background-background-color: hsla(
+  #{cv.getVar("scheme-h")},
+  #{cv.getVar("scheme-s")},
+  #{cv.getVar("scheme-invert-l")},
+  0.86
+) !default;
+
+$modal-content-width: 40rem !default;
+$modal-content-margin-mobile: 1.25rem !default;
+$modal-content-spacing-mobile: 10rem !default;
+$modal-content-spacing-tablet: 2.5rem !default;
+
+$modal-close-dimensions: 2.5rem !default;
+$modal-close-right: 1.25rem !default;
+$modal-close-top: 1.25rem !default;
+
+$modal-card-spacing: 2.5rem !default;
+
+$modal-card-head-background-color: cv.getVar("scheme-main") !default;
+$modal-card-head-padding: 2rem !default;
+$modal-card-head-radius: cv.getVar("radius-large") !default;
+
+$modal-card-title-color: cv.getVar("text-strong") !default;
+$modal-card-title-line-height: 1 !default;
+$modal-card-title-size: cv.getVar("size-4") !default;
+
+$modal-card-foot-background-color: cv.getVar("scheme-main-bis") !default;
+$modal-card-foot-radius: cv.getVar("radius-large") !default;
+
+$modal-card-body-background-color: cv.getVar("scheme-main") !default;
+$modal-card-body-padding: 2rem !default;
+
+$modal-breakpoint: iv.$tablet !default;
+
+.#{iv.$class-prefix}modal {
+  @include cv.register-vars(
+    (
+      "modal-z": #{$modal-z},
+      "modal-background-background-color": #{$modal-background-background-color},
+      "modal-content-width": #{$modal-content-width},
+      "modal-content-margin-mobile": #{$modal-content-margin-mobile},
+      "modal-content-spacing-mobile": #{$modal-content-spacing-mobile},
+      "modal-content-spacing-tablet": #{$modal-content-spacing-tablet},
+      "modal-close-dimensions": #{$modal-close-dimensions},
+      "modal-close-right": #{$modal-close-right},
+      "modal-close-top": #{$modal-close-top},
+      "modal-card-spacing": #{$modal-card-spacing},
+      "modal-card-head-background-color": #{$modal-card-head-background-color},
+      "modal-card-head-padding": #{$modal-card-head-padding},
+      "modal-card-head-radius": #{$modal-card-head-radius},
+      "modal-card-title-color": #{$modal-card-title-color},
+      "modal-card-title-line-height": #{$modal-card-title-line-height},
+      "modal-card-title-size": #{$modal-card-title-size},
+      "modal-card-foot-background-color": #{$modal-card-foot-background-color},
+      "modal-card-foot-radius": #{$modal-card-foot-radius},
+      "modal-card-body-background-color": #{$modal-card-body-background-color},
+      "modal-card-body-padding": #{$modal-card-body-padding},
+    )
+  );
+}
+
+.#{iv.$class-prefix}modal {
+  @extend %overlay;
+
+  align-items: center;
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  position: fixed;
+  z-index: cv.getVar("modal-z");
+
+  // Modifiers
+  &.#{iv.$class-prefix}is-active {
+    display: flex;
+  }
+}
+
+.#{iv.$class-prefix}modal-background {
+  @extend %overlay;
+  background-color: cv.getVar("modal-background-background-color");
+}
+
+.#{iv.$class-prefix}modal-content,
+.#{iv.$class-prefix}modal-card {
+  margin: 0 cv.getVar("modal-content-margin-mobile");
+  max-height: calc(100vh - #{cv.getVar("modal-content-spacing-mobile")});
+  overflow: auto;
+  position: relative;
+  width: 100%;
+
+  // Responsiveness
+  @include mx.from($modal-breakpoint) {
+    margin: 0 auto;
+    max-height: calc(100vh - #{cv.getVar("modal-content-spacing-tablet")});
+    width: cv.getVar("modal-content-width");
+  }
+}
+
+.#{iv.$class-prefix}modal-close {
+  @extend %delete;
+  background: none;
+  height: cv.getVar("modal-close-dimensions");
+  inset-inline-end: cv.getVar("modal-close-right");
+  position: fixed;
+  top: cv.getVar("modal-close-top");
+  width: cv.getVar("modal-close-dimensions");
+}
+
+.#{iv.$class-prefix}modal-card {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - #{cv.getVar("modal-card-spacing")});
+  overflow: hidden;
+  overflow-y: visible;
+}
+
+.#{iv.$class-prefix}modal-card-head,
+.#{iv.$class-prefix}modal-card-foot {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: flex-start;
+  padding: cv.getVar("modal-card-head-padding");
+  position: relative;
+}
+
+.#{iv.$class-prefix}modal-card-head {
+  background-color: cv.getVar("modal-card-head-background-color");
+  border-start-start-radius: cv.getVar("modal-card-head-radius");
+  border-start-end-radius: cv.getVar("modal-card-head-radius");
+  box-shadow: cv.getVar("shadow");
+}
+
+.#{iv.$class-prefix}modal-card-title {
+  color: cv.getVar("modal-card-title-color");
+  flex-grow: 1;
+  flex-shrink: 0;
+  font-size: cv.getVar("modal-card-title-size");
+  line-height: cv.getVar("modal-card-title-line-height");
+}
+
+.#{iv.$class-prefix}modal-card-foot {
+  background-color: cv.getVar("modal-card-foot-background-color");
+  border-end-start-radius: cv.getVar("modal-card-foot-radius");
+  border-end-end-radius: cv.getVar("modal-card-foot-radius");
+}
+
+.#{iv.$class-prefix}modal-card-body {
+  @include mx.overflow-touch;
+  background-color: cv.getVar("modal-card-body-background-color");
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: auto;
+  padding: cv.getVar("modal-card-body-padding");
+}