bootstrap-italia 2.17.2 → 3.0.0-alpha.0

package/src/scss/components/_pagination.scss

@@ -1,108 +1,163 @@
+// Component: pagination
+//
+// Description: Component styles for pagination
+//
+
+// Variables
+//
+
+// Properties
+//
+
 .pagination {
-  // scss-docs-start pagination-css-vars
-  --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
-  --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
-  @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
-  --#{$prefix}pagination-color: #{$pagination-color};
-  --#{$prefix}pagination-bg: #{$pagination-bg};
-  --#{$prefix}pagination-border-width: #{$pagination-border-width};
-  --#{$prefix}pagination-border-color: #{$pagination-border-color};
-  --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
-  --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
-  --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
-  --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
-  --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
-  --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
-  --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
-  --#{$prefix}pagination-active-color: #{$pagination-active-color};
-  --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
-  --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
-  --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
-  --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
-  --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
-  // scss-docs-end pagination-css-vars
+  --#{$prefix}pagination-background: transparent; // Controls the background for the pagination.
+  --#{$prefix}pagination-border-width: 2px; // Controls the border width for the pagination.
+  --#{$prefix}pagination-border-color: transparent; // Controls the border color for the pagination.
+  --#{$prefix}pagination-border-radius: var(--#{$prefix}radius-smooth); // Controls the border radius for the pagination.
+  --#{$prefix}pagination-font-size: var(--#{$prefix}label-font-size); // Controls the font size for the pagination, using font tokens.
+  --#{$prefix}pagination-item-size: 3rem; // Controls the item size for the pagination.
+  --#{$prefix}pagination-link-color: var(--#{$prefix}color-link); // Controls the link color for the pagination, using color tokens.
+  --#{$prefix}pagination-padding-x: var(--#{$prefix}spacing-s); // Controls the horizontal padding for the pagination, using spacing tokens.
+  --#{$prefix}pagination-padding-y: var(--#{$prefix}spacing-xxs); // Controls the vertical padding for the pagination, using spacing tokens.
+}
 
+// Styles
+/* stylelint-disable-next-line no-duplicate-selectors */
+.pagination {
   display: flex;
+  flex-wrap: wrap;
   @include list-unstyled();
+  @supports (gap: 8px) {
+    gap: 8px;
+  }
+}
+
+.pagination-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  //Tablet vertical
+  @include media-breakpoint-up(md) {
+    nav.pagination-wrapper {
+      justify-content: flex-start;
+      //page changer
+      .dropdown {
+        margin-left: var(--#{$prefix}spacing-l);
+      }
+    }
+  }
+
+  &.pagination-total {
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    ul {
+      margin-bottom: var(--#{$prefix}spacing-xxs);
+    }
+
+    p {
+      margin-bottom: var(--#{$prefix}spacing-s);
+      color: var(--#{$prefix}color-text-secondary);
+      font-size: var(--#{$prefix}label-font-size);
+      font-weight: var(--#{$prefix}font-weight-solid);
+      text-align: center;
+    }
+
+    &.justify-content-end {
+      display: grid;
+    }
+
+    &.justify-content-center {
+      width: 100%;
+      .pagination {
+        justify-content: center;
+      }
+    }
+  }
+
+  // Jump to page
+  .form-group {
+    width: 5rem;
+    margin-top: 0;
+    margin-left: var(--#{$prefix}spacing-l);
+    label {
+      color: var(--#{$prefix}color-text-secondary);
+      font-size: var(--#{$prefix}label-font-size);
+    }
+  }
 }
 
 .page-link {
   position: relative;
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--#{$prefix}pagination-item-size);
+  height: var(--#{$prefix}pagination-item-size);
   padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
-  @include font-size(var(--#{$prefix}pagination-font-size));
-  color: var(--#{$prefix}pagination-color);
-  text-decoration: if($link-decoration == none, null, none);
-  background-color: var(--#{$prefix}pagination-bg);
   border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
-  @include transition($pagination-transition);
+  background-color: var(--#{$prefix}pagination-background);
+  color: var(--#{$prefix}pagination-link-color);
+  font-size: var(--#{$prefix}pagination-font-size);
+  font-weight: var(--#{$prefix}font-weight-solid);
+  border-radius: var(--#{$prefix}pagination-border-radius);
+  text-decoration: none;
 
   &:hover {
-    z-index: 2;
-    color: var(--#{$prefix}pagination-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: var(--#{$prefix}pagination-hover-bg);
-    border-color: var(--#{$prefix}pagination-hover-border-color);
+    --#{$prefix}pagination-link-color: var(--#{$prefix}color-link-hover);
+    text-decoration: underline;
   }
 
-  &:focus {
-    z-index: 3;
-    color: var(--#{$prefix}pagination-focus-color);
-    background-color: var(--#{$prefix}pagination-focus-bg);
-    outline: $pagination-focus-outline;
-    box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
-  }
-
-  &.active,
-  .active > & {
-    z-index: 3;
-    color: var(--#{$prefix}pagination-active-color);
-    @include gradient-bg(var(--#{$prefix}pagination-active-bg));
-    border-color: var(--#{$prefix}pagination-active-border-color);
-  }
+  // &:focus {
+  //   z-index: 3;
+  //   outline: $pagination-focus-outline;
+  //   background-color: var(--#{$prefix}pagination-focus-bg);
+  //   box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
+  //   color: var(--#{$prefix}pagination-focus-color);
+  // }
 
   &.disabled,
   .disabled > & {
-    color: var(--#{$prefix}pagination-disabled-color);
+    --#{$prefix}pagination-border-color: transparent;
+    --#{$prefix}pagination-link-color: var(--#{$prefix}color-text-disabled);
+    --#{$prefix}pagination-icon-color: var(--#{$prefix}color-text-disabled);
     pointer-events: none;
-    background-color: var(--#{$prefix}pagination-disabled-bg);
-    border-color: var(--#{$prefix}pagination-disabled-border-color);
   }
-}
 
-.page-item {
-  &:not(:first-child) .page-link {
-    margin-left: $pagination-margin-start;
+  // Current page version
+  &[aria-current] {
+    --#{$prefix}pagination-border-color: var(--#{$prefix}color-border-primary-active);
+    --#{$prefix}pagination-link-color: var(--#{$prefix}color-link-active);
+    pointer-events: none;
   }
 
-  @if $pagination-margin-start == ($pagination-border-width * -1) {
-    &:first-child {
-      .page-link {
-        @include border-start-radius(var(--#{$prefix}pagination-border-radius));
-      }
-    }
-
-    &:last-child {
-      .page-link {
-        @include border-end-radius(var(--#{$prefix}pagination-border-radius));
-      }
-    }
-  } @else {
-    // Add border-radius to all pageLinks in case they have left margin
-    .page-link {
-      @include border-radius(var(--#{$prefix}pagination-border-radius));
-    }
+  // Icon & Text prev/next
+  &.text {
+    color: var(--#{$prefix}pagination-link-color);
   }
-}
 
-//
-// Sizing
-//
+  span.d-inline-block {
+    margin-right: var(--#{$prefix}spacing-xxs);
+  }
 
-.pagination-lg {
-  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
+  .icon {
+    fill: currentColor;
+  }
 }
 
-.pagination-sm {
-  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
+// Fallback for browsers that do not support gap
+@supports not (
+  (
+    gap: 8px,
+  )
+) {
+  .page-item {
+    margin-right: var(--#{$prefix}spacing-xxs);
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }

package/src/scss/components/_placeholders.scss

@@ -1,3 +1,17 @@
+// Component: placeholders
+//
+// Description: Component styles for placeholders
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .placeholder {
   display: inline-block;
   min-height: 1em;

package/src/scss/components/_point-list.scss

@@ -1,3 +1,17 @@
+// Component: point list
+//
+// Description: Component styles for point list
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .point-list-wrapper {
   .point-list {
     display: flex;
@@ -89,6 +103,7 @@
       }
     }
   }
+
   //Tablet horizontal / small desktop
   @include media-breakpoint-up(lg) {
     &.point-list-step-wrapper {

package/src/scss/components/_popover.scss

@@ -1,3 +1,17 @@
+// Component: popover
+//
+// Description: Component styles for popover
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .bs-popover-top {
   > .popover-arrow {
     bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
@@ -44,7 +58,6 @@
 }
 
 /* rtl:end:ignore */
-
 .bs-popover-bottom {
   > .popover-arrow {
     top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
@@ -139,30 +152,27 @@
   color: var(--#{$prefix}popover-body-color);
 }
 
-//mobile
 .popover {
-  // scss-docs-start popover-css-vars
-  --#{$prefix}popover-zindex: #{$zindex-popover};
-  --#{$prefix}popover-max-width: #{$popover-max-width};
-  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
+  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
+  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
+  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
+  --#{$prefix}popover-body-color: #{$popover-body-color};
+  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
+  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
   --#{$prefix}popover-bg: #{$popover-bg};
-  --#{$prefix}popover-border-width: #{$popover-border-width};
+  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
   --#{$prefix}popover-border-color: #{$popover-border-color};
   --#{$prefix}popover-border-radius: #{$popover-border-radius};
-  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
-  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
+  --#{$prefix}popover-border-width: #{$popover-border-width};
+  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
+  --#{$prefix}popover-header-bg: #{$popover-header-bg};
+  --#{$prefix}popover-header-color: #{$popover-header-color};
+  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
   --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
   --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
-  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
-  --#{$prefix}popover-header-color: #{$popover-header-color};
-  --#{$prefix}popover-header-bg: #{$popover-header-bg};
-  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
-  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
-  --#{$prefix}popover-body-color: #{$popover-body-color};
-  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
-  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
-  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
-  // scss-docs-end popover-css-vars
+  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
+  --#{$prefix}popover-max-width: #{$popover-max-width};
+  --#{$prefix}popover-zindex: #{$zindex-popover};
 
   z-index: var(--#{$prefix}popover-zindex);
   display: block;

package/src/scss/components/_print.scss

@@ -1,3 +1,17 @@
+// Component: print
+//
+// Description: Component styles for print
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 // Additional custom CSS for printed media
 
 @media print {

package/src/scss/components/_progress-bars.scss

@@ -1,3 +1,17 @@
+// Component: progress bars
+//
+// Description: Component styles for progress bars
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 // Disable animation if transitions are disabled
 
 // scss-docs-start progress-keyframes

package/src/scss/components/_progress-donuts.scss

@@ -1,3 +1,17 @@
+// Component: progress donuts
+//
+// Description: Component styles for progress donuts
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 //mobile
 .progress-donut-wrapper {
   width: 128px;

package/src/scss/components/_progress-spinners.scss

@@ -1,3 +1,17 @@
+// Component: progress spinners
+//
+// Description: Component styles for progress spinners
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 //mobile
 
 //basic animation

package/src/scss/components/_rating-list.scss

@@ -1,3 +1,17 @@
+// Component: rating list
+//
+// Description: Component styles for rating list
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .rating-list-wrapper {
   .rating-list {
     display: flex;

package/src/scss/components/_rating.scss

@@ -1,47 +1,80 @@
-//mobile
+// Component: rating
+//
+// Description: Component styles for rating
+//
 
+// Variables
+//
+
+// Properties
+//
+
+.rating {
+  --#{$prefix}rating-font-size: var(--#{$prefix}label-font-size-s); // Controls the font size for the rating, using font tokens.
+  --#{$prefix}rating-font-weight: var(--#{$prefix}font-weight-solid); // Controls the font weight for the rating, using font tokens.
+  --#{$prefix}rating-icon-fill: var(--#{$prefix}color-background-secondary-light); // Controls the icon fill for the rating, using color tokens.
+  --#{$prefix}rating-line-height: var(--#{$prefix}label-line-height); // Controls the line height for the rating, using font tokens.
+  --#{$prefix}rating-text: var(--#{$prefix}color-text-secondary); // Controls the text color for the rating, using color tokens.
+}
+
+// Styles
+//
+/* stylelint-disable-next-line no-duplicate-selectors */
 .rating {
   border: none;
-  float: left;
-  //hide radio
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  align-items: center;
+
+  // Hide radio input
   & > input {
     position: absolute;
     left: -9999px;
   }
-  //star container
+
+  // Star container
+  //
+
   & > label {
-    float: right;
-    //margin: 0 $v-gap/4 0 0;
     margin: 0;
-    padding-right: $v-gap * 0.25;
-    &:first-of-type {
-      margin-right: 0;
-    }
-    svg {
-      fill: #c3cfdb;
-      position: relative;
-      transform-origin: center center;
-      transition: transform 0.1s;
-    }
+    padding-right: 2px;
+
     &:hover {
       cursor: pointer;
+
       svg {
-        transform: scale(1.1);
+        transform: scale(1.2);
       }
     }
+
+    // Star icon
+    //
+
+    svg {
+      fill: var(--#{$prefix}rating-icon-fill);
+      position: relative;
+      transform-origin: center center;
+      transition: transform var(--#{$prefix}transition-instant);
+    }
   }
 
-  // #stars label
+  // Rating label
+  //
+
   & > legend {
-    color: $dark;
-    font-size: 0.875rem;
+    color: var(--#{$prefix}rating-text);
+    font-size: var(--#{$prefix}rating-font-size);
     float: right;
     width: auto;
-    margin: 6px 0 0 $v-gap * 2;
-    font-weight: 500;
-    line-height: 1.3;
+    margin-left: var(--#{$prefix}spacing-xxs);
+    font-weight: var(--#{$prefix}rating-font-weight);
+    line-height: var(--#{$prefix}rating-line-height);
   }
 
+  // Read only rating
+  //
+
   &.rating-read-only {
     & > input,
     & > label {
@@ -50,29 +83,27 @@
   }
 }
 
-.rating > input:checked ~ label, // show primary color star when clicked
-.rating:not(:checked) > label:hover, // hover current star
-.rating:not(:checked) > label:hover ~ label {
-  svg {
-    fill: $primary;
-  }
-} // hover previous stars in list
-
-.rating > input:checked + label:hover, // hover current star when changing rating
-.rating > input:checked ~ label:hover,
-.rating > label:hover ~ input:checked ~ label, // lighten current selection
-.rating > input:checked ~ label:hover ~ label {
-  + svg {
-    fill: $primary;
-  }
+// Interactive states
+//
+
+// Show primary color star when clicked
+.rating>input:checked~label,
+// show primary color star when clicked
+.rating:not(:checked)>label:hover,
+// hover current star
+.rating:not(:checked)>label:hover~label {
+  --#{$prefix}rating-icon-fill: var(--#{$prefix}icon-primary);
 }
 
-//small - tablet
-@include media-breakpoint-up(sm) {
-  .rating {
-    // #stars label
-    & > legend {
-      font-size: 0.75rem;
-    }
+// Hover previous stars in list
+.rating>input:checked+label:hover,
+// Hover current star when changing rating
+.rating>input:checked~label:hover,
+// Hover current star when changing rating
+.rating>label:hover~input:checked~label,
+// Lighten current selection
+.rating>input:checked~label:hover~label {
+  svg {
+    --#{$prefix}rating-icon-fill: var(--#{$prefix}icon-primary);
   }
 }