vipassana-design-standards 0.0.23 → 0.0.25

package/src/stylesheets/custom-bootstrap-utilities.scss

@@ -0,0 +1,143 @@
+
+:root {
+  // Generate missing CSS Variables
+  @each $color, $value in $blues {
+    --#{$prefix}#{$color}: #{$value};
+  }
+  @each $color, $value in $golds {
+    --#{$prefix}#{$color}: #{$value};
+  }
+  @each $color, $value in $greens {
+    --#{$prefix}#{$color}: #{$value};
+  }
+  @each $color, $value in $reds {
+    --#{$prefix}#{$color}: #{$value};
+  }
+  --bs-border-color: #{$border-color};
+  --bs-font-heading: #{$headings-font-family};
+
+  --bs-spacer-x: #{$spacer-x};
+  @include media-breakpoint-down(md) {
+    --bs-spacer-x: 1rem;
+  }
+  --bs-box-shadow: #{$box-shadow};
+  --bs-box-shadow-sm: #{$box-shadow-sm};
+  --bs-box-shadow-lg: #{$box-shadow-lg};
+  // those variables are used to make custom inputs similar to bootstrap inputs
+  --bs-input-padding: #{$input-padding-y} #{$input-padding-x};
+  --bs-form-floating-padding-x: #{$form-floating-padding-x};
+  --bs-form-floating-padding-y: #{$form-floating-padding-y};
+  --bs-form-floating-input-padding-t: #{$form-floating-input-padding-t};
+  --bs-form-floating-input-padding-b: #{$form-floating-input-padding-b};
+
+  // adds other variables
+  --layout-padding: 1rem;
+  @include media-breakpoint-up(md) {
+    --layout-padding: 1.5rem;
+  }
+  @include media-breakpoint-up(xl) {
+    --layout-padding: 2rem;
+  }
+}
+
+// Font-family helpers
+.ff-normal {
+  font-family: $font-family-sans-serif;
+}
+.ff-heading {
+  font-family: $headings-font-family;
+  margin-bottom: -0.3em; // strange, but the Footlight font does not seems to be properly aligned with baseline
+}
+
+// Font-size helpers
+.fs-normal {
+  font-size: 1rem !important;
+}
+
+// fs-09-rem, fs-085-em..
+.fs-05-rem { font-size: .5rem !important; }
+.fs-05-em { font-size: .5em !important; }
+.fs-055-rem { font-size: .55rem !important; }
+.fs-055-em { font-size: .55em !important; }
+
+.fs-06-rem { font-size: .6rem !important; }
+.fs-06-em { font-size: .6em !important; }
+.fs-065-rem { font-size: .65rem !important; }
+.fs-065-em { font-size: .65em !important; }
+
+.fs-07-rem { font-size: .7rem !important; }
+.fs-07-em { font-size: .7em !important; }
+.fs-075-rem { font-size: .75rem !important; }
+.fs-075-em { font-size: .75em !important; }
+
+.fs-08-rem { font-size: .8rem !important; }
+.fs-08-em { font-size: .8em !important; }
+.fs-085-rem { font-size: .85rem !important; }
+.fs-085-em { font-size: .85em !important; }
+
+.fs-09-rem { font-size: .9rem !important; }
+.fs-09-em { font-size: .9em !important; }
+.fs-095-rem { font-size: .95rem !important; }
+.fs-095-em { font-size: .95em !important; }
+
+// fs-11-rem, fs-125-em...
+.fs-11-rem { font-size: 1.1rem !important; }
+.fs-11-em { font-size: 1.1em !important; }
+.fs-115-rem { font-size: 1.15rem !important; }
+.fs-115-em { font-size: 1.15em !important; }
+
+.fs-12-rem { font-size: 1.2rem !important; }
+.fs-12-em { font-size: 1.2em !important; }
+.fs-125-rem { font-size: 1.25rem !important; }
+.fs-125-em { font-size: 1.25em !important; }
+
+.fs-13-rem { font-size: 1.3rem !important; }
+.fs-13-em { font-size: 1.3em !important; }
+.fs-135-rem { font-size: 1.35rem !important; }
+.fs-135-em { font-size: 1.35em !important; }
+
+.fs-14-rem { font-size: 1.4rem !important; }
+.fs-14-em { font-size: 1.4em !important; }
+.fs-145-rem { font-size: 1.45rem !important; }
+.fs-145-em { font-size: 1.45em !important; }
+
+.fs-15-rem { font-size: 1.5rem !important; }
+.fs-15-em { font-size: 1.5em !important; }
+.fs-155-rem { font-size: 1.55rem !important; }
+.fs-155-em { font-size: 1.55em !important; }
+
+.full-width-sm {
+  @include media-breakpoint-down(md) {
+    margin-left: -1rem !important;
+    margin-right: -1rem !important;
+    width: calc(100% + 2rem) !important;
+    box-shadow: none !important;
+    --bs-card-border-radius: 0;
+    --bs-card-inner-border-radius: 0;
+  }
+}
+
+.btn-floating-sm {
+  @include media-breakpoint-down(md) {
+    position: fixed !important;
+    bottom: 3rem !important;
+    z-index: 200 !important;
+    right: 1rem !important;
+    box-shadow: 0 3px 1rem #21252985 !important;
+  }
+}
+
+// Make this section take the whole page when printing
+@media print {
+  .full-page-print {
+    background-color: white;
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 2rem;
+    z-index: 500;
+  }
+}

package/src/stylesheets/custom-bootstrap-variables.scss

@@ -0,0 +1,123 @@
+// Color Palette
+$blue-100: #f8f9fa; // #f8f9fa; // #ececec; // primevue #e8eaf6 //#f1eff1;
+$blue-150: #f0f2f4; //#e6e5ec;
+$blue-200: #D2D6DF; //#e6e5ec; //#ced4da;
+$blue-300: #8586a2;
+$blue-400: #707595;
+$blue-500: #5b6588;
+$blue-600: #47547b;
+$blue-700: #32446e;
+$blue-800: #1E3461;
+$blue-900: #121f3a;
+
+$blue: $blue-800;
+
+$gold-100: #FCFAF7;
+$gold-200: #f0e7d5;
+$gold-300: #deccad;
+$gold-400: #c6a364;
+$gold-500: #B78730;
+$gold-600: #9c6b14;
+$gold-700: #7D550C;
+$gold-800: #493613;
+$gold-900: #241a09;
+
+$gold: $gold-500;
+
+$blues: (
+  "blue-100": $blue-100,
+  "blue-150": $blue-150,
+  "blue-200": $blue-200,
+  "blue-300": $blue-300,
+  "blue-400": $blue-400,
+  "blue-500": $blue-500,
+  "blue-600": $blue-600,
+  "blue-700": $blue-700,
+  "blue-800": $blue-800,
+  "blue-900": $blue-900
+);
+
+$golds: (
+  "gold-100": $gold-100,
+  "gold-200": $gold-200,
+  "gold-300": $gold-300,
+  "gold-400": $gold-400,
+  "gold-500": $gold-500,
+  "gold-600": $gold-600,
+  "gold-700": $gold-700,
+  "gold-800": $gold-800,
+  "gold-900": $gold-900
+);
+
+$green-200: #D5E4C3;
+$green: #3d6b00;
+$green-700: #203800;
+
+$red-200: #ECCCCC;
+$red: #8e3333;
+$red-700: #720000;
+
+$primary: $blue-800;
+$secondary: $gold-500;
+$info: $secondary;
+
+$dark: #4F4d47;
+$light: $blue-150;
+
+$dark-100: tint-color($dark, 80%);
+$dark-200: tint-color($dark, 60%);
+$dark-300: tint-color($dark, 40%);
+$dark-400: tint-color($dark, 20%);
+$dark-500: $dark;
+$dark-600: shade-color($dark, 20%);
+$dark-700: shade-color($dark, 40%);
+$dark-800: shade-color($dark, 60%);
+$dark-900: shade-color($dark, 80%);
+
+// Customize Bootstrap
+$font-family-sans-serif: var(--vds-font-family), 'Noto Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$line-height-base: 1.7;
+
+$headings-font-family: var(--vds-headings-font-family), 'FootLight', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$headings-color: $blue;
+$headings-font-weight: 600;
+$headings-line-height: 1.5;
+
+$border-radius: .25rem;
+$border-color: $blue-200;
+$body-bg: $gold-100;
+
+$spacer: 1rem;
+$spacer-x: 1.5rem;
+
+$input-bg: white;
+$input-btn-padding-x: 1rem;
+$input-btn-padding-x-sm: .75rem;
+$input-border-color: $border-color;
+
+$alert-border-width: 0;
+
+$card-spacer-x: $spacer-x;
+$card-cap-padding-x: $spacer-x;
+$card-cap-padding-y: .75rem;
+$card-border-width: 0;
+
+$accordion-padding-x: $spacer-x;
+
+$list-group-item-padding-x: $spacer-x;
+
+$badge-font-weight: 400;
+
+$offcanvas-horizontal-width: auto;
+$offcanvas-padding-x: 1.5rem;
+$offcanvas-transition-duration: .25s;
+
+$modal-inner-padding: $spacer-x;
+$modal-content-border-radius: $border-radius;
+$modal-content-border-width: 0;
+$modal-header-border-width: 0;
+$modal-header-padding: 1rem $modal-inner-padding 0 $modal-inner-padding;
+$modal-fade-transform: translate(0, 0) scale(.8);
+$modal-transition: transform .15s ease-out;
+
+$enable-negative-margins: true;

package/src/stylesheets/custom-bootstrap.scss

@@ -0,0 +1,159 @@
+// Alerts
+.alert-danger {
+  --bs-alert-color: #{$red-700};
+  --bs-alert-bg: #{$red-200};
+}
+.alert-success {
+  --bs-alert-color: #{$green-700};
+  --bs-alert-bg: #{$green-200};
+}
+.alert-primary {
+  --bs-alert-color: #{$blue-800};
+  --bs-alert-bg: #{$blue-200};
+}
+.alert-secondary {
+  --bs-alert-color: #{$gold-800};
+  --bs-alert-bg: #{$gold-200};
+}
+
+// Buttons
+.btn {
+  display: inline-flex;
+  align-items: center;
+}
+.btn-secondary, .btn-info {
+  --bs-btn-color: white;
+  --bs-btn-hover-color: white;
+  --bs-btn-active-color: white;
+  --bs-btn-disabled-color: white;
+}
+.btn-light {
+  --bs-btn-color: $dark;
+  --bs-btn-hover-color: $dark;
+  --bs-btn-active-color: $dark;
+  --bs-btn-disabled-color: $dark;
+  --bs-btn-hover-bg: var(--bs-gray-200);
+  --bs-btn-bg: white;
+}
+.btn-outline-secondary:hover {
+  color: white;
+}
+.btn-with-icon {
+  display: inline-flex;
+  align-items: center;
+
+  img, i {
+    margin-right: .5rem;
+  }
+
+  img {
+    height: 1rem;
+  }
+}
+
+.text-bg-secondary {
+  color: white !important;
+}
+// Button Ripple effect
+.ripple-effect {
+  position: relative;
+  overflow: hidden;
+  transform: translate3d(0, 0, 0);
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
+    background-repeat: no-repeat;
+    background-position: 50%;
+    transform: scale(10, 10);
+    opacity: 0;
+    transition: transform .3s, opacity 1s;
+  }
+  &:active:after {
+    transform: scale(0, 0);
+    opacity: .2;
+    transition: 0s;
+  }
+}
+.btn:not(.btn-link) {
+  @extend .ripple-effect;
+}
+.btn.dropdown-toggle:after {
+  display: none; // remove caret
+}
+.btn[type=submit] {
+  width: 100%;
+  justify-content: center;
+}
+
+// Form
+.form-group {
+  margin-bottom: 1rem;
+}
+.form-check-input, .form-check-label {
+  cursor: pointer;
+}
+.form-label {
+  font-size: .9rem;
+  opacity: .8;
+  margin-bottom: 5px;
+}
+.form-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 18'%3e%3cpath fill='none' stroke='%23a1a1a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+  &.auto-resize {
+    padding-right: 2.3em;
+  }
+}
+.form-check {
+  margin-bottom: .25rem;
+}
+.input-group-text {
+  background-color: var(--bs-light);
+}
+// mandatory asterix for required inputs
+abbr[title], abbr[data-original-title] {
+  cursor: help;
+  color: var(--bs-danger);
+  border: none;
+  text-decoration: none !important;
+}
+
+// Card
+.card {
+  @extend .shadow-sm;
+  @include media-breakpoint-down(md) {
+    --bs-card-cap-padding-x: 1rem;
+    --bs-card-spacer-x: 1rem;
+  }
+}
+
+// Modal
+.modal .modal-dialog {
+  @extend .modal-fullscreen-md-down;
+  transform-origin: center bottom;
+
+  .modal-header {
+    .modal-title {
+      @extend .ff-heading;
+      @extend .fs-2;
+      @extend .text-primary;
+    }
+    .btn-close {
+      margin-top: 0;
+    }
+  }
+  .modal-footer {
+    padding-top: 0;
+  }
+}
+
+// Other
+.dropdown-item {
+  cursor: pointer;
+}