@cityway/basic-ui 1.0.1

package/lib/assets/styles/scss/styles-fo.scss

@@ -0,0 +1,115 @@
+@use "cw-ds/reboot";
+@use "cw-ds/root-fo";
+
+// Utilities
+@use "cw-ds/utilities/flex";
+@use "cw-ds/utilities/spacing";
+@use "cw-ds/utilities/type";
+@use "cw-ds/utilities/alignment";
+
+// Helpers
+@use "cw-ds/helpers/visually-hidden";
+@use "cw-ds/helpers/stretched-link";
+@use "cw-ds/helpers/spinner";
+
+// Components
+@use "cw-ds/components/button/button";
+@use "cw-ds/components/button/button-fo-variant";
+@use "cw-ds/components/badge";
+@use "cw-ds/components/icon";
+@use "cw-ds/components/icon-notification";
+@use "cw-ds/components/alert";
+@use "cw-ds/components/toast";
+@use "cw-ds/components/close";
+@use "cw-ds/components/btn-collapse";
+@use "cw-ds/components/card";
+@use "cw-ds/components/tab";
+@use "cw-ds/components/stepper";
+@use "cw-ds/components/file-to-download";
+@use "cw-ds/components/numerical-range";
+
+
+//## Import des variables de couleurs
+//--------------------------------------------------------
+//@import "scss/variables-colors";
+
+//## Import de bootstrap contrôlé
+//--------------------------------------------------------
+//@import "bootstrap";
+@import "bootstrap/scss/mixins/banner";
+@include bsBanner("");
+
+
+// scss-docs-start import-stack
+// Configuration
+@import "bootstrap/scss/functions";
+@import "variables/custom";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// Layout & components
+@import "bootstrap/scss/root";
+//@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+//@import "bootstrap/scss/buttons";
+//@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+//@import "bootstrap/scss/nav";
+//@import "bootstrap/scss/navbar";
+//@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+//@import "bootstrap/scss/breadcrumb";
+//@import "bootstrap/scss/pagination";
+//@import "bootstrap/scss/badge";
+//@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+//@import "bootstrap/scss/close";
+//@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+//@import "bootstrap/scss/carousel";
+//@import "bootstrap/scss/offcanvas";
+//@import "bootstrap/scss/placeholders";
+
+// Helpers
+//@import "bootstrap/scss/helpers";
+
+// Utilities
+@import "bootstrap/scss/utilities/api";
+// scss-docs-end import-stack
+
+//## Mixins
+//--------------------------------------------------------
+//@import "mixins/utilities";
+
+//## Import des variables propres au site
+//--------------------------------------------------------
+@import "variables/site";
+
+//## Import des fonts
+//--------------------------------------------------------
+@import "../../fonts/nunito/nunito";
+@import "../../fonts/optyweb/optyweb";
+@import "../../fonts/bo/bo";
+
+
+//## Import styles
+//--------------------------------------------------------
+@import "custom-bootstrap";
+@import "components";
+
+// Tools
+//--------------------------------------------------------
+//@import "tools/loader";
+//@import "tools/focus";

package/lib/assets/styles/scss/variables/_colors.scss

@@ -0,0 +1,43 @@
+
+// Neutral
+$dark:    #1F1F1F;
+$grey1:   #F9F9F9;
+$grey2:   #F5F5F5;
+$grey3:   #E9E9E9;
+$grey4:   #E9ECEF;
+$grey5:   #E2E5E9;
+$grey6:   #8996A9;
+$grey7:   #D6D6D6;
+$grey8:   #797676;
+$grey9:   #6A6A6A;
+$grey10:  #6C757D;
+$white:   #ffffff;
+
+// Primary
+$primary-default: #0B4F6C;
+$primary-hover: #083f56;
+$primary-link: #1378A8;
+
+// Info
+$info-default: #0480A9;
+$info-hover: #036484;
+
+// Warning
+$warning-default: #F39E02;
+$warning-hover: #CD8502;
+
+// Danger
+$danger-default: #E1001A;
+$danger-hover: #BB0016;
+
+// Success
+$success-default: #238909;
+$success-hover: #2F7C20;
+
+// Success
+$light-default: $grey2;
+$light-hover: $grey4;
+
+// Table
+$alice-blue: #ECF8FD;
+

package/lib/assets/styles/scss/variables/_custom.scss

@@ -0,0 +1,451 @@
+@import "bootstrap/scss/functions";
+@import "colors";
+// ATTENTION : ne pas inclure les variables bootstrap ici
+// sinon la surcharge ne fonctionne pas
+//@import "variables";
+
+
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+//
+// Color system
+//
+$primary: $primary-default;
+$secondary: $white;
+$success: $success-default;
+$info: $info-default;
+$warning: $warning-default;
+$danger: $danger-default;
+$light: $light-default;
+$dark: $dark;
+$primary-hover: $primary-hover;
+
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark": $dark,
+  "primary-link": $primary-link,
+  "primary-hover": $primary-hover,
+  "success-hover": $success-hover,
+  "info-hover": $info-hover,
+  "warning-hover": $warning-hover,
+  "danger-hover": $danger-hover,
+  "light-hover": $light-hover,
+  "grey1": $grey1,
+  "grey2": $grey2,
+  "grey3": $grey3,
+  "grey4": $grey4,
+  "grey5": $grey5,
+  "grey6": $grey6,
+  "grey7": $grey7,
+  "grey8": $grey8,
+  "grey9": $grey9,
+  "grey10": $grey10,
+  "alice-blue": $alice-blue
+);
+
+$primary-border-subtle: tint-color($primary, 72%);
+$secondary-border-subtle: tint-color($secondary, 72%);
+$success-border-subtle: tint-color($success, 72%);
+$info-border-subtle: tint-color($info, 72%);
+$warning-border-subtle: tint-color($warning, 72%);
+$danger-border-subtle: tint-color($danger, 72%);
+
+$emphasis-colors: (
+  "primary": shade-color($primary, 60%),
+  "secondary": shade-color($secondary, 60%),
+  "success": shade-color($success, 60%),
+  "info": shade-color($info, 60%),
+  "warning": shade-color($warning, 60%),
+  "danger": shade-color($danger, 60%),
+);
+
+$bg-subtle-colors: (
+  "primary": tint-color($primary, 80%),
+  "secondary": tint-color($secondary, 80%),
+  "success": tint-color($success, 80%),
+  "info": tint-color($info, 80%),
+  "warning": tint-color($warning, 80%),
+  "danger": tint-color($danger, 80%),
+);
+
+
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-cssgrid:          true;
+$enable-negative-margins: true;
+
+// Body
+//
+// Settings for the `<body>` element.
+
+
+$body-bg: #f9f9f9;
+$body-color: $dark;
+
+// Links
+//
+// Style anchor elements.
+$link-color: $primary-link;
+$link-decoration: underline;
+$link-hover-color: $primary;
+$link-hover-decoration: none;
+
+// Grid breakpoints
+//
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+  xxxl: 1600px
+);
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1340px,
+  xxxl: 1540px
+);
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12;
+$grid-gutter-width: 1.25rem;
+
+$paragraph-margin-bottom: calc($grid-gutter-width / 2);
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+
+$border-radius: .25rem;
+$border-radius-sm: 0.125rem;
+$border-radius-lg: 0.75rem;
+
+// Box-shadow de base
+$box-shadow: 0px 0px 16px -1px #8996A91A;
+
+
+$component-active-color: $white;
+$component-active-bg: $primary;
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif: -apple-system, "Nunito", Times, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+  sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-monospace: "Space Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+$font-family-base: $font-family-sans-serif;
+
+$font-size-base: 0.875rem; // 14px
+$font-size-sm: 0.75rem; //14px
+$font-size-lg: 1.5625rem; // 25px
+
+
+
+$h1-font-size: 1.125rem; // 18px
+$h2-font-size: 1.125rem; // 18px
+$h3-font-size: 1rem; // 16px
+$h4-font-size: $font-size-base;
+$h5-font-size: 0.875;
+
+$headings-font-weight: normal;
+$headings-line-height: 1;
+
+$text-muted: $body-color;
+$small-font-size: .875em;
+$hr-margin-y: 1.5rem;
+$hr-color: $grey4;
+$hr-border-width: 1px;
+
+$list-inline-padding: 1.25rem;
+
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+
+
+$table-bg: transparent;
+$table-border-color: $grey5;
+$table-striped-bg: $grey1;
+
+
+$table-th-font-weight: bold;
+$table-hover-bg: $alice-blue;
+$table-border-color: $grey5;
+
+// Buttons
+
+$btn-padding-y: 0.47rem;
+$btn-padding-x: 0.75rem;
+$btn-font-size: $font-size-base;
+$btn-line-height-sm: 1.5;
+
+$btn-padding-y-sm: 0.5rem;
+$btn-padding-x-sm: $btn-padding-y;
+$btn-font-size-sm: $btn-font-size;
+
+$btn-border-width: 0.063rem;
+$btn-border-radius: $border-radius;
+$btn-border-radius-sm: $btn-border-radius;
+
+// Forms
+
+// scss-docs-start form-label-variables
+$form-label-margin-bottom: .25rem;
+$form-label-font-weight: bold;
+
+$form-text-margin-top: 0.25rem;
+
+
+$input-bg: $white;
+$input-padding-y: 0.6875rem;
+$input-line-height: 1.5;
+
+$input-disabled-bg: $grey4;
+$input-disabled-border-color: $input-disabled-bg;
+
+
+$input-padding-y-sm: $input-padding-y;
+$input-padding-x-sm: 0.5rem;
+$input-font-size-sm: $font-size-base;
+
+
+$input-color: $body-color;
+$input-border-color: $grey6;
+$input-border-width: 0.063rem;
+
+
+$input-focus-border-color: #1D9EDE;
+$input-focus-box-shadow: 0 0 0 0.2rem rgba($primary, 0.25);
+
+$input-placeholder-color: $grey10;
+
+$input-height: 2.5rem;
+$input-height-sm: $input-height;
+
+$input-group-addon-bg: $grey4;
+
+$form-select-bg-size: 8px 10px;
+$form-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
+
+$form-check-input-checked-color: $white;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");
+
+$form-check-input-width: 1.429em;
+$form-check-input-border: 1px solid $input-border-color;
+
+$form-switch-width: 2.286em;
+
+
+
+/////////////////////////////////////////////////////////////////////
+/////////////////////////////////////////////////////////////////////
+// Forms
+// $custom-file-text: (
+//   en: "Browse",
+//   fr: "Parcourir",
+// );
+
+// $form-check-indicator-checked-bg: $primary;
+
+// $form-switch-width:                           $form-check-indicator-size * 1.75 !default;
+// $form-switch-indicator-border-radius:         $form-check-indicator-size * .5 !default;
+// $form-switch-indicator-size: 0.75rem;
+// $form-check-indicator-checked-disabled-bg: rgba($primary, 0.5);
+// $form-check-indicator-size: 1.25rem;
+// $form-check-indicator-border-color: $input-border-color;
+// $custom-select-line-height: 1.25;
+/////////////////////////////////////////////////////////////////////
+/////////////////////////////////////////////////////////////////////
+
+
+
+// Form validation
+
+$form-feedback-font-size: $small-font-size;
+
+
+// Navs
+$nav-tabs-border-color: transparent;
+$nav-tabs-border-width: 0;
+$nav-tabs-link-active-color: $body-color;
+$nav-tabs-link-active-bg: $white;
+
+
+// Dropdowns
+$dropdown-padding-y: 0;
+$dropdown-font-size: 0.875rem;
+$dropdown-bg: $white;
+
+$dropdown-divider-bg: $grey4;
+
+
+$dropdown-border-color: $input-border-color;
+$dropdown-border-width: $input-border-width;
+$dropdown-inner-border-radius: 0;
+$dropdown-link-color: $body-color;
+$dropdown-link-hover-bg: $alice-blue;
+$dropdown-link-active-color: $body-color;
+$dropdown-link-active-bg: #DBE5E9;
+
+$dropdown-item-padding-y: $btn-padding-y;
+$dropdown-item-padding-x: $btn-padding-x;
+
+// Pagination
+
+$pagination-border-color: $grey5;
+$pagination-hover-bg: $alice-blue;
+$pagination-active-bg: $primary;
+$pagination-disabled-border-color: $grey5;
+
+
+// Cards
+$card-spacer-y: 1.25rem;
+$card-spacer-x: 1.25rem;
+$card-border-width: 0.063rem;
+$card-border-color: #E9ECEF;
+$card-border-radius: 0.5rem;
+$card-cap-padding-y: $card-spacer-y;
+$card-cap-padding-x: $card-spacer-x;
+$card-bg: $white;
+$card-cap-bg: $card-bg;
+
+// Accordion
+
+// scss-docs-start accordion-variables
+$accordion-padding-y:                     $card-spacer-y;
+$accordion-padding-x:                     $card-spacer-x;
+// $accordion-color:                         var(--#{$prefix}body-color) !default;
+$accordion-bg:                            $card-bg;
+$accordion-border-width:                  $card-border-width;
+$accordion-border-color:                  $card-border-color;
+$accordion-border-radius:                 $card-border-radius;
+// $accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;
+
+// $accordion-body-padding-y:                $accordion-padding-y !default;
+// $accordion-body-padding-x:                $accordion-padding-x !default;
+
+// $accordion-button-padding-y:              $accordion-padding-y !default;
+// $accordion-button-padding-x:              $accordion-padding-x !default;
+// $accordion-button-color:                  var(--#{$prefix}body-color) !default;
+// $accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
+// $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
+$accordion-button-active-bg:                $accordion-bg;
+$accordion-button-active-color:             $accordion-bg;
+
+// // fusv-disable
+// $accordion-button-focus-border-color:     $input-focus-border-color !default; // Deprecated in v5.3.3
+// // fusv-enable
+// $accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
+
+// $accordion-icon-width:                    1.25rem !default;
+$accordion-icon-color:                    $primary;
+$accordion-icon-active-color:             $accordion-icon-color;
+// $accordion-icon-transition:               transform .2s ease-in-out !default;
+// $accordion-icon-transform:                rotate(-180deg) !default;
+
+// $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
+// $accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
+// scss-docs-end accordion-variables
+
+
+
+// Tooltip
+$tooltip-font-size: $font-size-base;
+$tooltip-bg: $body-color;
+$tooltip-border-radius: 0.25rem;
+$tooltip-opacity: 1;
+$tooltip-padding-y: 0.5rem;
+$tooltip-padding-x: 0.5rem;
+
+
+// Popovers
+$popover-font-size: $font-size-base;
+$popover-border-width: 2px;
+$popover-border-color: $grey5;
+$popover-border-radius: $border-radius;
+$popover-border-color: $grey5;
+$popover-header-bg: $grey2;
+$popover-header-padding-y: 0.5rem;
+$popover-header-padding-x: 0.75rem;
+$popover-body-padding-y: 0.5rem;
+$popover-body-padding-x: 0.75rem;
+
+
+// Badge
+$badge-font-size: 0.75rem;
+$badge-font-weight: normal;
+
+$badge-padding-y: 0.125rem;
+$badge-padding-x: 0.75rem;
+$badge-border-radius: 0.563rem;
+
+
+
+// Modals
+$modal-inner-padding: $grid-gutter-width;
+
+$modal-content-bg: $white;
+$modal-content-border-color: transparent;
+$modal-content-border-width: 0;
+$modal-content-border-radius: 0.75rem;
+$modal-header-border-width: 0;
+$modal-footer-border-width: 0;
+$modal-header-padding-y: 0.75rem;
+$modal-header-padding-x: $grid-gutter-width;
+
+
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-x: $grid-gutter-width;
+$alert-padding-y: .75rem;
+$alert-link-font-weight: normal;
+
+
+
+
+// Progress bars
+$progress-font-size: 0.625rem;
+$progress-bg: $grey4;
+
+
+// Breadcrumbs
+$breadcrumb-padding-y: 0;
+$breadcrumb-padding-x: 0;
+$breadcrumb-margin-bottom: 0;
+$breadcrumb-bg: transparent;
+$breadcrumb-divider-color: $grey9;
+$breadcrumb-active-color: $body-color;
+$breadcrumb-divider: "\e0ad";
+
+
+// Close
+
+$btn-close-color: $white;

package/lib/assets/styles/scss/variables/_site.scss

@@ -0,0 +1,68 @@
+
+@import "bootstrap/scss/functions";
+@import "custom";
+
+// Variables Theme
+//
+$transition-duration: 200ms !default;
+$sidebar-width: 17.5rem !default;
+$sidebar-small-menu-width: 5rem !default;
+$header-height: 3.5rem !default;
+$header-footer-height: ($header-height * 2) !default;
+
+$font-size-base-icon: 1.1875rem !default;
+
+/////////////////////////////////////////////////////
+// Variables to US
+
+$cw-font-size:              1.25rem;
+
+$loader-size:               3.75rem;
+$loader-color:              var(--bs-primary);
+$loader-border-size:        0.563rem;
+$loader-bg-color:         #dddddd;
+$loader-bg-color-opacity:   0.35;
+$loader-animation-duration: 0.8s;
+
+// Footer
+$footer-height: 3.5rem;
+
+// Menu
+$sidebar-menu-brand-font-size: 1.375rem;
+$sidebar-menu-bg: var(--bs-primary);
+$sidebar-menu-color: $white;
+$sidebar-menu-link-height: 3rem;
+$sidebar-menu-link-hover: var(--bs-primary)-hover;
+$sidebar-menu-link-font-size: 1.125rem;
+$sidebar-menu-submenu-link-font-size: 1rem;
+$sidebar-menu-submenu-link-height: 2.125rem;
+$sidebar-menu-collapsed-width: 3.25rem;
+
+// Navs
+$nav-tabs-content-bg:             $white !default;
+
+// Form
+$form-group-margin-bottom: 1rem;
+
+// Button
+$btn-min-width: 12.5rem;
+$btn-disabled-bg: $grey10;
+$btn-disabled-color: $white;
+
+// size 100% - margin
+$width-minus-container: calc(100% + #{$grid-gutter-width * 2});
+$width-minus-container-rwd: calc(100% + 2rem);
+$width-minus-card: calc(100% + #{$card-spacer-y * 2});
+
+// Font size
+$font-sizes: () !default;
+$font-sizes: map-merge(
+  (
+    "xs": $font-size-base * 0.8,
+    "sm": $font-size-base * 0.9,
+    "md": $font-size-base * 1,
+    "lg": $font-size-base * 1.1,
+    "xl": $font-size-base * 1.2,
+  ),
+  $font-sizes
+);