bootstrap-italia 2.12.1 → 2.13.1

package/src/scss/forms/_input-group.scss

@@ -0,0 +1,129 @@
+//
+// Base styles
+//
+
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap; // For form validation feedback
+  align-items: stretch;
+  width: 100%;
+
+  > .form-control,
+  > .form-select,
+  > .form-floating {
+    position: relative; // For focus state's z-index
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
+  }
+
+  // Bring the "active" form control to the top of surrounding elements
+  > .form-control:focus,
+  > .form-select:focus,
+  > .form-floating:focus-within {
+    z-index: 5;
+  }
+
+  // Ensure buttons are always above inputs for more visually pleasing borders.
+  // This isn't needed for `.input-group-text` since it shares the same border-color
+  // as our inputs.
+  .btn {
+    position: relative;
+    z-index: 2;
+
+    &:focus {
+      z-index: 5;
+    }
+  }
+}
+
+// Textual addons
+//
+// Serves as a catch-all element for any text or radio/checkbox input you wish
+// to prepend or append to an input.
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: $input-group-addon-padding-y $input-group-addon-padding-x;
+  @include font-size($input-font-size); // Match inputs
+  font-weight: $input-group-addon-font-weight;
+  line-height: $input-line-height;
+  color: $input-group-addon-color;
+  text-align: center;
+  white-space: nowrap;
+  background-color: $input-group-addon-bg;
+  border: $input-border-width solid $input-group-addon-border-color;
+  @include border-radius($input-border-radius);
+}
+
+// Sizing
+//
+// Remix the default form control sizing classes into new ones for easier
+// manipulation.
+
+.input-group-lg > .form-control,
+.input-group-lg > .form-select,
+.input-group-lg > .input-group-text,
+.input-group-lg > .btn {
+  padding: $input-padding-y-lg $input-padding-x-lg;
+  @include font-size($input-font-size-lg);
+  @include border-radius($input-border-radius-lg);
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .form-select,
+.input-group-sm > .input-group-text,
+.input-group-sm > .btn {
+  padding: $input-padding-y-sm $input-padding-x-sm;
+  @include font-size($input-font-size-sm);
+  @include border-radius($input-border-radius-sm);
+}
+
+.input-group-lg > .form-select,
+.input-group-sm > .form-select {
+  padding-right: $form-select-padding-x + $form-select-indicator-padding;
+}
+
+// Rounded corners
+//
+// These rulesets must come after the sizing ones to properly override sm and lg
+// border-radius values when extending. They're more specific than we'd like
+// with the `.input-group >` part, but without it, we cannot override the sizing.
+
+// stylelint-disable-next-line no-duplicate-selectors
+.input-group {
+  &:not(.has-validation) {
+    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+    > .dropdown-toggle:nth-last-child(n + 3),
+    > .form-floating:not(:last-child) > .form-control,
+    > .form-floating:not(:last-child) > .form-select {
+      @include border-end-radius(0);
+    }
+  }
+
+  &.has-validation {
+    > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+    > .dropdown-toggle:nth-last-child(n + 4),
+    > .form-floating:nth-last-child(n + 3) > .form-control,
+    > .form-floating:nth-last-child(n + 3) > .form-select {
+      @include border-end-radius(0);
+    }
+  }
+
+  $validation-messages: '';
+  @each $state in map-keys($form-validation-states) {
+    $validation-messages: $validation-messages + ':not(.' + unquote($state) + '-tooltip)' + ':not(.' + unquote($state) + '-feedback)';
+  }
+
+  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+    margin-left: -$input-border-width;
+    @include border-start-radius(0);
+  }
+
+  > .form-floating:not(:first-child) > .form-control,
+  > .form-floating:not(:first-child) > .form-select {
+    @include border-start-radius(0);
+  }
+}

package/src/scss/forms/_labels.scss

@@ -0,0 +1,36 @@
+//
+// Labels
+//
+
+.form-label {
+  margin-bottom: $form-label-margin-bottom;
+  @include font-size($form-label-font-size);
+  font-style: $form-label-font-style;
+  font-weight: $form-label-font-weight;
+  color: $form-label-color;
+}
+
+// For use with horizontal and inline forms, when you need the label (or legend)
+// text to align with the form controls.
+.col-form-label {
+  padding-top: add($input-padding-y, $input-border-width);
+  padding-bottom: add($input-padding-y, $input-border-width);
+  margin-bottom: 0; // Override the `<legend>` default
+  @include font-size(inherit); // Override the `<legend>` default
+  font-style: $form-label-font-style;
+  font-weight: $form-label-font-weight;
+  line-height: $input-line-height;
+  color: $form-label-color;
+}
+
+.col-form-label-lg {
+  padding-top: add($input-padding-y-lg, $input-border-width);
+  padding-bottom: add($input-padding-y-lg, $input-border-width);
+  @include font-size($input-font-size-lg);
+}
+
+.col-form-label-sm {
+  padding-top: add($input-padding-y-sm, $input-border-width);
+  padding-bottom: add($input-padding-y-sm, $input-border-width);
+  @include font-size($input-font-size-sm);
+}

package/src/scss/forms/_validation.scss

@@ -0,0 +1,12 @@
+// Form validation
+//
+// Provide feedback to users when form field values are valid or invalid. Works
+// primarily for client-side validation via scoped `:invalid` and `:valid`
+// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
+// server-side validation.
+
+// scss-docs-start form-validation-states-loop
+@each $state, $data in $form-validation-states {
+  @include form-validation-state($state, $data...);
+}
+// scss-docs-end form-validation-states-loop

package/src/scss/utilities/icons.scss

@@ -3,34 +3,34 @@
   height: 32px;
   vertical-align: middle;
   &.icon-padded {
-    padding: 8px;
+    margin: 8px;
   }
   &.icon-xs {
     width: 16px;
     height: 16px;
     &.icon-padded {
-      padding: 4px;
+      margin: 4px;
     }
   }
   &.icon-sm {
     width: 24px;
     height: 24px;
     &.icon-padded {
-      padding: 6px;
+      margin: 6px;
     }
   }
   &.icon-lg {
     width: 48px;
     height: 48px;
     &.icon-padded {
-      padding: 12px;
+      margin: 12px;
     }
   }
   &.icon-xl {
     width: 64px;
     height: 64px;
     &.icon-padded {
-      padding: 16px;
+      margin: 16px;
     }
   }
 }

package/types/index.d.ts

@@ -1,6 +1,6 @@
 import { Alert } from './plugins/alert'
 import { Accordion } from './plugins/accordion'
-import { BackToTop } from './plugins/backToTop'
+import { BackToTop } from './plugins/back-to-top'
 import { Button } from './plugins/button'
 import { Carousel } from './plugins/carousel'
 import { CarouselBI } from './plugins/carousel-bi'
@@ -36,6 +36,8 @@ import { Tooltip } from './plugins/tooltip'
 import { TrackFocus } from './plugins/track-focus'
 import { Transfer } from './plugins/transfer'
 import { UploadDragDrop } from './plugins/upload-dragdrop'
+import { VideoPlayer } from './plugins/video'
+
 import { loadFonts } from './plugins/fonts-loader'
 
 export {
@@ -78,5 +80,6 @@ export {
   TrackFocus,
   Transfer,
   UploadDragDrop,
+  VideoPlayer,
   loadFonts
 }

package/types/plugins/video.ts

@@ -0,0 +1,33 @@
+import { default as BaseComponent } from 'bootstrap/js/dist/base-component'
+import { GetInstanceFactory, GetOrCreateInstanceFactory } from 'bootstrap/js/dist/base-component';
+
+import Player from "video.js/dist/types/player"
+
+declare class VideoPlayer extends BaseComponent {
+
+  player: Player;
+
+  static get NAME(): string
+
+  /**
+   * Static method which allows you to get the instance associated
+   * with a DOM element.
+   */
+  static getInstance: GetInstanceFactory<VideoPlayer>;
+  /**
+   * Static method which allows you to get the modal instance associated with
+   * a DOM element, or create a new one in case it wasn’t initialised
+   */
+  static getOrCreateInstance: GetOrCreateInstanceFactory<
+  VideoPlayer
+  >;
+
+  constructor(element: HTMLElement)
+
+  setYouTubeVideo(url: String): void
+
+  _getConfig(config: any): any
+
+}
+
+export { VideoPlayer }

package/dist/plugins/backToTop.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"backToTop.js","sources":["../../src/js/plugins/backToTop.js"],"sourcesContent":["import BaseComponent from 'bootstrap/js/src/base-component.js'\n\nimport EventHandler from 'bootstrap/js/src/dom/event-handler'\nimport SelectorEngine from 'bootstrap/js/src/dom/selector-engine'\nimport Manipulator from 'bootstrap/js/src/dom/manipulator'\n\nimport onDocumentScroll from './util/on-document-scroll'\nimport { documentScrollTo } from './util/tween'\n\nconst NAME = 'backtotop'\nconst DATA_KEY = 'bs.backtotop'\nconst EVENT_KEY = `.${DATA_KEY}`\n//const DATA_API_KEY = '.data-api'\n\n//const EVENT_SCROLL = `scroll${EVENT_KEY}`\nconst EVENT_CLICK = `click${EVENT_KEY}`\n\nconst CLASS_NAME_SHOW = 'back-to-top-show'\n\nconst SELECTOR_TOGGLE = '[data-bs-toggle=\"backtotop\"]'\n\nconst Default = {\n  positionTop: 0,\n  scrollLimit: 100,\n  duration: 800,\n  easing: 'easeInOutSine',\n}\n\nclass BackToTop extends BaseComponent {\n  constructor(element, config) {\n    super(element)\n\n    this._config = this._getConfig(config)\n    this._scrollCb = null\n    this._isAnim = false\n    this._prevScrollBehavior = ''\n\n    this._bindEvents()\n  }\n\n  // Getters\n\n  static get NAME() {\n    return NAME\n  }\n\n  // Public\n  show() {\n    if (!this._element.classList.contains(CLASS_NAME_SHOW)) {\n      this._element.classList.add(CLASS_NAME_SHOW)\n    }\n  }\n\n  hide() {\n    if (this._element.classList.contains(CLASS_NAME_SHOW)) {\n      this._element.classList.remove(CLASS_NAME_SHOW)\n    }\n  }\n\n  toggleShow() {\n    if (typeof document !== 'undefined' && document.scrollingElement.scrollTop > this._config.scrollLimit) {\n      this.show()\n    } else {\n      this.hide()\n    }\n  }\n\n  scrollToTop() {\n    if (!this._isAnim) {\n      this._isAnim = true\n      documentScrollTo(this._config.positionTop, {\n        duration: this._config.duration,\n        easing: this._config.easing,\n        complete: () => {\n          this._isAnim = false\n        },\n      })\n    }\n  }\n\n  dispose() {\n    if (this._scrollCb) {\n      this._scrollCb.dispose()\n    }\n\n    super.dispose()\n  }\n\n  // Private\n  _getConfig(config) {\n    config = {\n      ...Default,\n      ...Manipulator.getDataAttributes(this._element),\n      ...(typeof config === 'object' ? config : {}),\n    }\n    return config\n  }\n\n  _bindEvents() {\n    this._scrollCb = onDocumentScroll(() => this.toggleShow())\n\n    EventHandler.on(this._element, EVENT_CLICK, (evt) => {\n      evt.preventDefault()\n      this.scrollToTop()\n    })\n  }\n}\n\n/**\n * ------------------------------------------------------------------------\n * Data Api implementation\n * ------------------------------------------------------------------------\n */\n/*const toggles = SelectorEngine.find(SELECTOR_TOGGLE)\ntoggles.forEach((toggle) => {\n  BackToTop.getOrCreateInstance(toggle)\n})*/\n\nonDocumentScroll(() => {\n  const toggles = SelectorEngine.find(SELECTOR_TOGGLE)\n  toggles.map((toggle) => {\n    BackToTop.getOrCreateInstance(toggle)\n  })\n})\n\nexport default BackToTop\n"],"names":[],"mappings":"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"}

package/src/scss/_functions.scss

@@ -1,38 +0,0 @@
-// Custom functions (not available in Bootstrap)
-@function hsb($h-hsb, $s-hsb, $b-hsb) {
-  // Checking hsb values for 0 and turning them into 1 to avoid issues with SASS compiler
-  @if $h-hsb < 1 {
-    $h-hsb: 1;
-  }
-  @if $s-hsb < 1 {
-    $s-hsb: 1;
-  }
-  @if $b-hsb < 1 {
-    $b-hsb: 1;
-  }
-
-  @if $b-hsb < 1 {
-    @return hsl(0, 0%, 0%);
-  } @else {
-    $l-hsl: calc($b-hsb / 2) * (2 - calc($s-hsb / 100));
-    $s-hsl: calc(($b-hsb * $s-hsb) / if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2));
-    @return hsl($h-hsb, $s-hsl * 1%, $l-hsl * 1%);
-  }
-}
-
-@function hsb-with-brightness-modifier($h-hsb, $s-hsb, $b-hsb, $b-variant) {
-  $b-hsb: $b-hsb + $b-variant;
-  @return hsb($h-hsb, $s-hsb, $b-hsb);
-}
-
-@function color-hover($color) {
-  @return desaturate(shade-color($color, 10%), 20%);
-}
-
-@function url-friendly-color($color) {
-  @if str-slice('#{$color}', 1, 1) == '#' {
-    @return '%23' + str-slice('#{$color}', 2, -1);
-  } @else {
-    @return $color;
-  }
-}