sdga-ui 1.0.2 → 1.0.4

package/theme/components/_forms-switch.scss

@@ -1,64 +1,64 @@
-// Bootstrap 5.3 - Form Switch Variables
-
-// ============================================
-// FORM SWITCH
-// ============================================
-
-$form-switch-color: $gray-950;
-$form-switch-width: 3em;
-$form-switch-padding-start: $form-switch-width + .5em;
-$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>");
-$form-switch-border-radius: $form-switch-width;
-$form-switch-transition: background-position .15s ease-in-out;
-
-$form-switch-focus-color: $gray-950;
-$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");
-
-$form-switch-checked-color: $component-active-color;
-$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>");
-$form-switch-checked-bg-position: right center;
-
-// ============================================
-// FORM SWITCH HOVER STATES
-// ============================================
-
-// Unchecked
-$form-switch-unchecked-hover-bg: $white;
-$form-switch-unchecked-hover-border: $neutral-600;
-$form-switch-unchecked-hover-color: $neutral-600;
-
-
-// Checked
-$form-switch-checked-hover-bg: $primary-700;
-$form-switch-checked-hover-border: $primary-700;
-$form-switch-checked-hover-color: $form-switch-checked-color;
-
-
-// ============================================
-// FORM SWITCH ACTIVE/PRESSED STATES
-// ============================================
-
-// Unchecked
-$form-switch-unchecked-active-bg: $white;
-$form-switch-unchecked-active-border: $neutral-500;
-$form-switch-unchecked-active-color: $neutral-500;
-
-// Checked
-$form-switch-checked-active-bg: $primary-900;
-$form-switch-checked-active-border: $primary-900;
-$form-switch-checked-active-color: $form-switch-checked-color;
-
-// ============================================
-// FORM SWITCH DISABLED STATES
-// ============================================
-
-// Unchecked
-$form-switch-unchecked-disabled-bg: $white;
-$form-switch-unchecked-disabled-border: $gray-400;
-$form-switch-unchecked-disabled-color: $gray-300;
-
-
-// checked
-$form-switch-checked-disabled-bg: $gray-300;
-$form-switch-checked-disabled-border: $gray-300;
+// Bootstrap 5.3 - Form Switch Variables
+
+// ============================================
+// FORM SWITCH
+// ============================================
+
+$form-switch-color: $gray-950;
+$form-switch-width: 3em;
+$form-switch-padding-start: $form-switch-width + .5em;
+$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>");
+$form-switch-border-radius: $form-switch-width;
+$form-switch-transition: background-position .15s ease-in-out;
+
+$form-switch-focus-color: $gray-950;
+$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");
+
+$form-switch-checked-color: $component-active-color;
+$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>");
+$form-switch-checked-bg-position: right center;
+
+// ============================================
+// FORM SWITCH HOVER STATES
+// ============================================
+
+// Unchecked
+$form-switch-unchecked-hover-bg: $white;
+$form-switch-unchecked-hover-border: $neutral-600;
+$form-switch-unchecked-hover-color: $neutral-600;
+
+
+// Checked
+$form-switch-checked-hover-bg: $primary-700;
+$form-switch-checked-hover-border: $primary-700;
+$form-switch-checked-hover-color: $form-switch-checked-color;
+
+
+// ============================================
+// FORM SWITCH ACTIVE/PRESSED STATES
+// ============================================
+
+// Unchecked
+$form-switch-unchecked-active-bg: $white;
+$form-switch-unchecked-active-border: $neutral-500;
+$form-switch-unchecked-active-color: $neutral-500;
+
+// Checked
+$form-switch-checked-active-bg: $primary-900;
+$form-switch-checked-active-border: $primary-900;
+$form-switch-checked-active-color: $form-switch-checked-color;
+
+// ============================================
+// FORM SWITCH DISABLED STATES
+// ============================================
+
+// Unchecked
+$form-switch-unchecked-disabled-bg: $white;
+$form-switch-unchecked-disabled-border: $gray-400;
+$form-switch-unchecked-disabled-color: $gray-300;
+
+
+// checked
+$form-switch-checked-disabled-bg: $gray-300;
+$form-switch-checked-disabled-border: $gray-300;
 $form-switch-checked-disabled-color: $white;

package/theme/components/_forms-validation.scss

@@ -1,16 +1,16 @@
-// Bootstrap 5.3 - Form Validation Variables
-
-// ============================================
-// FORM VALIDATION
-// ============================================
-
-$form-feedback-margin-top: $form-text-margin-top;
-$form-feedback-font-size: $form-text-font-size;
-$form-feedback-font-style: $form-text-font-style;
-$form-feedback-valid-color: $success;
-$form-feedback-invalid-color: $danger;
-
-$form-feedback-icon-valid-color: $form-feedback-valid-color;
-$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
-$form-feedback-icon-invalid-color: $form-feedback-invalid-color;
-$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");
+// Bootstrap 5.3 - Form Validation Variables
+
+// ============================================
+// FORM VALIDATION
+// ============================================
+
+$form-feedback-margin-top: $form-text-margin-top;
+$form-feedback-font-size: $form-text-font-size;
+$form-feedback-font-style: $form-text-font-style;
+$form-feedback-valid-color: $success;
+$form-feedback-invalid-color: $danger;
+
+$form-feedback-icon-valid-color: $form-feedback-valid-color;
+$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color;
+$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");

package/theme/components/_forms.scss

@@ -1,14 +1,14 @@
-// Bootstrap 5.3 - Form Variables
-
-// ============================================
-// FORM COMPONENTS
-// Import all form-related variable files
-// ============================================
-
-@import 'forms-inputs';
-@import 'forms-select';
-@import 'forms-check';
-@import 'forms-switch';
-@import 'forms-range';
-@import 'forms-validation';
-@import 'forms-floating';
+// Bootstrap 5.3 - Form Variables
+
+// ============================================
+// FORM COMPONENTS
+// Import all form-related variable files
+// ============================================
+
+@import 'forms-inputs';
+@import 'forms-select';
+@import 'forms-check';
+@import 'forms-switch';
+@import 'forms-range';
+@import 'forms-validation';
+@import 'forms-floating';

package/theme/components/_list-group.scss

@@ -1,26 +1,26 @@
-// Bootstrap 5.3 - List Group Component Variables
-
-$list-group-color: var(--#{$prefix}body-color);
-$list-group-bg: $white;
-$list-group-border-color: rgba($black, 0.125);
-$list-group-border-width: $border-width;
-$list-group-border-radius: $radius-sm;
-
-$list-group-item-padding-y: 0.5rem;
-$list-group-item-padding-x: 1rem;
-$list-group-item-bg-scale: -80%;
-$list-group-item-color-scale: 40%;
-
-$list-group-hover-bg: $gray-100;
-$list-group-active-color: $white;
-$list-group-active-bg: $primary;
-$list-group-active-border-color: $list-group-active-bg;
-
-$list-group-disabled-color: $gray-600;
-$list-group-disabled-bg: $list-group-bg;
-
-$list-group-action-color: $gray-700;
-$list-group-action-hover-color: $list-group-action-color;
-
-$list-group-action-active-color: var(--#{$prefix}body-color);
-$list-group-action-active-bg: $gray-200;
+// Bootstrap 5.3 - List Group Component Variables
+
+$list-group-color: var(--#{$prefix}body-color);
+$list-group-bg: $white;
+$list-group-border-color: rgba($black, 0.125);
+$list-group-border-width: 1px;
+$list-group-border-radius: $radius-sm;
+
+$list-group-item-padding-y: 0.5rem;
+$list-group-item-padding-x: 1rem;
+$list-group-item-bg-scale: -80%;
+$list-group-item-color-scale: 40%;
+
+$list-group-hover-bg: $gray-100;
+$list-group-active-color: $white;
+$list-group-active-bg: $primary;
+$list-group-active-border-color: $list-group-active-bg;
+
+$list-group-disabled-color: $gray-600;
+$list-group-disabled-bg: $list-group-bg;
+
+$list-group-action-color: $gray-700;
+$list-group-action-hover-color: $list-group-action-color;
+
+$list-group-action-active-color: var(--#{$prefix}body-color);
+$list-group-action-active-bg: $gray-200;

package/theme/components/_modals.scss

@@ -1,42 +1,42 @@
-// Bootstrap 5.3 - Modal Component Variables
-
-$modal-inner-padding: 1rem;
-
-$modal-footer-margin-between: 0.5rem;
-
-$modal-dialog-margin: 0.5rem;
-$modal-dialog-margin-y-sm-up: 1.75rem;
-
-$modal-title-line-height: $line-height-base;
-
-$modal-content-color: null;
-$modal-content-bg: $white;
-$modal-content-border-color: rgba($black, 0.2);
-$modal-content-border-width: $border-width;
-$modal-content-border-radius: $radius-lg;
-$modal-content-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width});
-$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5);
-$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5);
-
-$modal-backdrop-bg: $black;
-$modal-backdrop-opacity: 0.5;
-
-$modal-header-border-color: $border-color;
-$modal-header-border-width: $modal-content-border-width;
-$modal-header-padding-y: 1rem;
-$modal-header-padding-x: 1rem;
-$modal-header-padding: $modal-header-padding-y $modal-header-padding-x;
-
-$modal-footer-bg: null;
-$modal-footer-border-color: $modal-header-border-color;
-$modal-footer-border-width: $modal-header-border-width;
-
-$modal-sm: 300px;
-$modal-md: 500px;
-$modal-lg: 800px;
-$modal-xl: 1140px;
-
-$modal-fade-transform: translate(0, -50px);
-$modal-show-transform: none;
-$modal-transition: transform 0.3s ease-out;
-$modal-scale-transform: scale(1.02);
+// Bootstrap 5.3 - Modal Component Variables
+
+$modal-inner-padding: 1rem;
+
+$modal-footer-margin-between: 0.5rem;
+
+$modal-dialog-margin: 0.5rem;
+$modal-dialog-margin-y-sm-up: 1.75rem;
+
+$modal-title-line-height: $line-height-base;
+
+$modal-content-color: null;
+$modal-content-bg: $white;
+$modal-content-border-color: rgba($black, 0.2);
+$modal-content-border-width: 1px;
+$modal-content-border-radius: $radius-lg;
+$modal-content-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width});
+$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5);
+$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5);
+
+$modal-backdrop-bg: $black;
+$modal-backdrop-opacity: 0.5;
+
+$modal-header-border-color: $border-color;
+$modal-header-border-width: $modal-content-border-width;
+$modal-header-padding-y: 1rem;
+$modal-header-padding-x: 1rem;
+$modal-header-padding: $modal-header-padding-y $modal-header-padding-x;
+
+$modal-footer-bg: null;
+$modal-footer-border-color: $modal-header-border-color;
+$modal-footer-border-width: $modal-header-border-width;
+
+$modal-sm: 300px;
+$modal-md: 500px;
+$modal-lg: 800px;
+$modal-xl: 1140px;
+
+$modal-fade-transform: translate(0, -50px);
+$modal-show-transform: none;
+$modal-transition: transform 0.3s ease-out;
+$modal-scale-transform: scale(1.02);

package/theme/components/_navbar.scss

@@ -1,40 +1,40 @@
-// Bootstrap 5.3 - Navbar Component Variables
-
-$navbar-padding-y: 0.5rem;
-$navbar-padding-x: 1rem;
-
-$navbar-nav-link-padding-x: 0.5rem;
-
-$navbar-brand-font-size: $font-size-lg;
-$navbar-brand-height: null;
-$navbar-brand-padding-y: 0.3125rem;
-$navbar-brand-margin-end: 1rem;
-
-$navbar-toggler-padding-y: 0.25rem;
-$navbar-toggler-padding-x: 0.75rem;
-$navbar-toggler-font-size: $font-size-lg;
-$navbar-toggler-border-radius: $btn-border-radius;
-$navbar-toggler-focus-width: $btn-focus-width;
-$navbar-toggler-transition: box-shadow 0.15s ease-in-out;
-
-// Navbar dark theme
-$navbar-dark-color: rgba($white, 0.55);
-$navbar-dark-hover-color: rgba($white, 0.75);
-$navbar-dark-active-color: $white;
-$navbar-dark-disabled-color: rgba($white, 0.25);
-$navbar-dark-icon-color: $navbar-dark-color;
-$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
-$navbar-dark-toggler-border-color: rgba($white, 0.1);
-$navbar-dark-brand-color: $navbar-dark-active-color;
-$navbar-dark-brand-hover-color: $navbar-dark-active-color;
-
-// Navbar light theme
-$navbar-light-color: rgba($black, 0.55);
-$navbar-light-hover-color: rgba($black, 0.7);
-$navbar-light-active-color: rgba($black, 0.9);
-$navbar-light-disabled-color: rgba($black, 0.3);
-$navbar-light-icon-color: rgba($black, 0.5);
-$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
-$navbar-light-toggler-border-color: rgba($black, 0.1);
-$navbar-light-brand-color: $navbar-light-active-color;
-$navbar-light-brand-hover-color: $navbar-light-active-color;
+// Bootstrap 5.3 - Navbar Component Variables
+
+$navbar-padding-y: 0.5rem;
+$navbar-padding-x: 1rem;
+
+$navbar-nav-link-padding-x: 0.5rem;
+
+$navbar-brand-font-size: $font-size-lg;
+$navbar-brand-height: null;
+$navbar-brand-padding-y: 0.3125rem;
+$navbar-brand-margin-end: 1rem;
+
+$navbar-toggler-padding-y: 0.25rem;
+$navbar-toggler-padding-x: 0.75rem;
+$navbar-toggler-font-size: $font-size-lg;
+$navbar-toggler-border-radius: $btn-border-radius;
+$navbar-toggler-focus-width: $btn-focus-width;
+$navbar-toggler-transition: box-shadow 0.15s ease-in-out;
+
+// Navbar dark theme
+$navbar-dark-color: rgba($white, 0.55);
+$navbar-dark-hover-color: rgba($white, 0.75);
+$navbar-dark-active-color: $white;
+$navbar-dark-disabled-color: rgba($white, 0.25);
+$navbar-dark-icon-color: $navbar-dark-color;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
+$navbar-dark-toggler-border-color: rgba($white, 0.1);
+$navbar-dark-brand-color: $navbar-dark-active-color;
+$navbar-dark-brand-hover-color: $navbar-dark-active-color;
+
+// Navbar light theme
+$navbar-light-color: rgba($black, 0.55);
+$navbar-light-hover-color: rgba($black, 0.7);
+$navbar-light-active-color: rgba($black, 0.9);
+$navbar-light-disabled-color: rgba($black, 0.3);
+$navbar-light-icon-color: rgba($black, 0.5);
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
+$navbar-light-toggler-border-color: rgba($black, 0.1);
+$navbar-light-brand-color: $navbar-light-active-color;
+$navbar-light-brand-hover-color: $navbar-light-active-color;