Remove the xxl breakpoint

swisspost · Nov 12, 2024 · 2275f1c · 2275f1c
1 parent 6aa530e
commit 2275f1c
Show file tree

Hide file tree

Showing 16 changed files with 10 additions and 112 deletions.
diff --git a/packages/documentation/.storybook/blocks/layout/layout.scss b/packages/documentation/.storybook/blocks/layout/layout.scss
@@ -26,12 +26,6 @@
   @include post.media-breakpoint-up(xl) {
     background-position: center right;
   }
-
-  @include post.media-breakpoint-up(xxl) {
-    .container {
-      padding-right: 30%;
-    }
-  }
 }
 
 .docs-alert {

diff --git a/packages/documentation/src/stories/components/buttons/button/button.docs.mdx b/packages/documentation/src/stories/components/buttons/button/button.docs.mdx
@@ -42,7 +42,7 @@ for example when the button is displayed on mobile and stacked vertically with o
 To achieve that, you can use classes in the format:
 
 - `.w-{size}` for the xs breakpoint,
-- `.w-{breakpoint}-{size}` for breakpoints from sm to xxl.
+- `.w-{breakpoint}-{size}` for breakpoints from sm to xl.
 
 For example, a button with classes `w-100 w-lg-auto` will use all available space only when the viewport size is smaller than `lg`.
 

diff --git a/packages/documentation/src/stories/foundation/layout/shared.module.scss b/packages/documentation/src/stories/foundation/layout/shared.module.scss
@@ -9,7 +9,6 @@ $breakpointNames: (
   md: Medium,
   lg: Large,
   xl: Extra large,
-  xxl: Extra extra large,
 );
 
 :export {

diff --git a/packages/documentation/src/stories/utilities/float/float.docs.mdx b/packages/documentation/src/stories/utilities/float/float.docs.mdx
@@ -26,7 +26,6 @@ import * as FloatStories from './float.stories';
 > - `float-md-{start|end|none}`
 > - `float-lg-{start|end|none}`
 > - `float-xl-{start|end|none}`
-> - `float-xxl-{start|end|none}`
 
 #### Example
 

diff --git a/packages/documentation/src/stories/utilities/float/float.stories.ts b/packages/documentation/src/stories/utilities/float/float.stories.ts
@@ -26,7 +26,7 @@ const meta: MetaExtended = {
       control: {
         type: 'select',
       },
-      options: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
       table: {
         category: 'Add float',
       },

diff --git a/packages/internet-header/src/components/post-main-navigation/post-main-navigation.scss b/packages/internet-header/src/components/post-main-navigation/post-main-navigation.scss
@@ -43,10 +43,6 @@
     font-size: functions.px-to-rem(18px);
   }
 
-  @include mixins.min(xxl) {
-    font-size: functions.px-to-rem(20px);
-  }
-
   @include mixins.max(lg) {
     position: absolute;
     top: var(--calculated-header-height);

diff --git a/packages/internet-header/src/utils/variables.scss b/packages/internet-header/src/utils/variables.scss
@@ -5,7 +5,6 @@ $meta-header-height: (
   md: 0px,
   lg: 3rem,
   xl: 3rem,
-  xxl: 3rem,
 );
 
 $header-height: (
@@ -15,7 +14,6 @@ $header-height: (
   md: 3.5rem,
   lg: 4rem,
   xl: 4.5rem,
-  xxl: 4.5rem,
 );
 
 $header-slide-in-transition: top 200ms ease-out;
diff --git a/packages/migrations/src/utils/constants.ts b/packages/migrations/src/utils/constants.ts
@@ -1,6 +1,6 @@
-export const breakpoints = [ 'xs', 'sm', 'rg', 'md', 'lg', 'xl', 'xxl' ];
+export const breakpoints = ['xs', 'sm', 'rg', 'md', 'lg', 'xl'];
 
-const bootstrapSizes = [ '0', '1', '2', '3', '4', '5', 'auto' ];
+const bootstrapSizes = ['0', '1', '2', '3', '4', '5', 'auto'];
 const postSizes = [
   'hair',
   'line',
@@ -19,7 +19,7 @@ const postSizes = [
   'bigger-giant',
 ];
 
-export const sizes = [ ...bootstrapSizes, ...postSizes ];
+export const sizes = [...bootstrapSizes, ...postSizes];
 
 export const themeColors = [
   'primary',
@@ -68,7 +68,4 @@ export const formControlProperties = [
 // list of all the template variable references of directives that can create an instance of formControl
 // - https://angular.io/api/forms/FormControlDirective#template-variable-references
 // - https://angular.io/api/forms/NgModel#template-variable-references
-export const formControlReferences = [
-  'ngForm',
-  'ngModel',
-];
+export const formControlReferences = ['ngForm', 'ngModel'];
diff --git a/packages/styles/src/components/alert.scss b/packages/styles/src/components/alert.scss
@@ -93,41 +93,6 @@
   margin-bottom: 0;
   border-radius: 0;
   z-index: commons.$zindex-fixed;
-
-  @include media-breakpoint-up(xxl) {
-    $container-max-width: map.get(breakpoints.$grid-breakpoints, 'xxl') - 1;
-    $container-padding-x: map.get(grid.$grid-container-padding, 'xxl');
-    $alert-padding-x: map.get(notification.$notification-padding-x-map, alert);
-    $alert-icon-size: map.get(notification.$notification-icon-size-map, alert);
-    $fixed-alert-padding-x: '(100% - #{$container-max-width}) / 2 + #{$container-padding-x} + #{$alert-padding-x}';
-
-    padding-inline-end: calc(#{$fixed-alert-padding-x});
-    padding-inline-start: calc(
-      #{$fixed-alert-padding-x} + #{$alert-icon-size} + #{notification.$notification-gap}
-    );
-
-    // for alerts with .pi-* icons (deprecated)
-    background-position-x: calc(#{$fixed-alert-padding-x} + #{0.5 * $alert-icon-size});
-
-    // for alerts with mask-image icons
-    &::before {
-      left: calc(#{$fixed-alert-padding-x});
-    }
-
-    &.no-icon {
-      padding-inline-start: calc(#{$fixed-alert-padding-x});
-    }
-
-    &.alert-dismissible {
-      padding-inline-end: calc(
-        #{$fixed-alert-padding-x} + #{notification.$notification-gap} + #{close.$close-size}
-      );
-
-      > .btn-close {
-        inset-inline-end: calc(#{$fixed-alert-padding-x});
-      }
-    }
-  }
 }
 
 @each $name, $color, $icon in notification.$notification-variants {

diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss
@@ -103,13 +103,9 @@
       padding: spacing.$size-large;
     }
 
-    @include media-breakpoint-between(md, xxl) {
+    @include media-breakpoint-up(md) {
       padding: spacing.$size-big;
     }
-
-    @include media-breakpoint-up(xxl) {
-      padding: spacing.$size-bigger-big;
-    }
   }
 
   .card-white & {

diff --git a/packages/styles/src/components/topic-teaser.scss b/packages/styles/src/components/topic-teaser.scss
@@ -13,19 +13,6 @@
 @use './../mixins/icons' as icons-mx;
 
 .topic-teaser {
-  &[class*='bg-'] {
-    @include media-breakpoint-up(xxl) {
-      background-color: transparent !important;
-    }
-  }
-
-  .topic-teaser-container {
-    @include media-breakpoint-up(xxl) {
-      padding-left: map.get(grid.$grid-container-padding, xxl) * 0.5;
-      padding-right: map.get(grid.$grid-container-padding, xxl) * 0.5;
-    }
-  }
-
   &:not(.topic-teaser-reverse) {
     @each $breakpoint in topic-teaser.$grid-breakpoints-upper {
       @include media-breakpoint-only($breakpoint) {
@@ -36,13 +23,6 @@
     }
 
     .topic-teaser-container {
-      @include media-breakpoint-up(xxl) {
-        padding-right: 0;
-        // webkit subpixel-issue fix
-        margin-right: -1px;
-        clip-path: inset(0 1px (map.get(spacing.$size-curve-huge, 'xxl') * -1) 0);
-      }
-
       > .row {
         justify-content: flex-end;
       }
@@ -68,10 +48,6 @@
   }
 
   .topic-teaser-container {
-    @include media-breakpoint-up(xxl) {
-      padding-left: 0;
-    }
-
     > .row {
       @include media-breakpoint-down(lg) {
         flex-direction: column-reverse;

diff --git a/packages/styles/src/variables/_breakpoints.scss b/packages/styles/src/variables/_breakpoints.scss
@@ -7,5 +7,4 @@ $grid-breakpoints: (
   md: 780px,
   lg: 1024px,
   xl: 1280px,
-  xxl: 1440px,
 ) !default;
diff --git a/packages/styles/src/variables/_grid.scss b/packages/styles/src/variables/_grid.scss
@@ -1,13 +1,12 @@
 @use 'sass:map';
+@use './breakpoints';
 
-/* Deprecated: "rg" breakpoint */
 // list of breakpoint giving the possibility to loop over them
-$grid-breakpoints-list: xs sm rg md lg xl xxl;
+$grid-breakpoints-list: map.keys(breakpoints.$grid-breakpoints);
 
 // Grid containers
 $container-max-widths: (
   xl: 1280px,
-  xxl: 1440px,
 ) !default;
 
 /* Deprecated: "rg" breakpoint */
@@ -18,7 +17,6 @@ $grid-container-padding: (
   md: 32px,
   lg: 32px,
   xl: 40px,
-  xxl: 120px,
 ) !default;
 
 /* Deprecated: "rg" breakpoint */
@@ -29,7 +27,6 @@ $grid-container-fluid-padding: (
   md: map.get($grid-container-padding, md),
   lg: map.get($grid-container-padding, lg),
   xl: map.get($grid-container-padding, lg),
-  xxl: map.get($grid-container-padding, lg),
 ) !default;
 
 // Grid columns
@@ -46,5 +43,4 @@ $grid-gutter-x: (
   md: 16px,
   lg: 16px,
   xl: 16px,
-  xxl: 16px,
 ) !default;
diff --git a/packages/styles/src/variables/_spacing.scss b/packages/styles/src/variables/_spacing.scss
@@ -76,7 +76,6 @@ $size-curve-giant: (
   'md': $size-giant,
   'lg': $size-giant,
   'xl': $size-giant,
-  'xxl': $size-giant,
 ) !default;
 
 // Abstand standard
@@ -87,7 +86,6 @@ $size-curve-huge: (
   'md': $size-bigger-big,
   'lg': $size-bigger-big,
   'xl': $size-huge,
-  'xxl': $size-huge,
 ) !default;
 
 // Abstand Section halb
@@ -98,7 +96,6 @@ $size-curve-bigger-big: (
   'md': $size-small-huge,
   'lg': $size-small-huge,
   'xl': $size-small-huge,
-  'xxl': $size-small-huge,
 ) !default;
 
 // Abstand Breadcrumb, Stepper
@@ -109,7 +106,6 @@ $size-curve-big: (
   'md': $size-big,
   'lg': $size-big,
   'xl': $size-bigger-big,
-  'xxl': $size-bigger-big,
 ) !default;
 
 // H2
@@ -120,7 +116,6 @@ $size-curve-large: (
   'md': $size-small-large,
   'lg': $size-small-large,
   'xl': $size-big,
-  'xxl': $size-big,
 ) !default;
 
 // Button
@@ -131,7 +126,6 @@ $size-curve-regular: (
   'md': $size-large,
   'lg': $size-large,
   'xl': $size-large,
-  'xxl': $size-large,
 ) !default;
 
 // Teaser
@@ -142,7 +136,6 @@ $size-curve-small: (
   'md': $size-regular,
   'lg': $size-regular,
   'xl': $size-regular,
-  'xxl': $size-regular,
 ) !default;
 
 // Eingabefelder, p, h3, h4
@@ -153,7 +146,6 @@ $size-curve-tiny: (
   'md': $size-regular,
   'lg': $size-regular,
   'xl': $size-regular,
-  'xxl': $size-regular,
 ) !default;
 
 // List of all adaptive size curves

diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss
@@ -94,7 +94,6 @@ $font-curve-tiny: (
   'md': $font-size-small,
   'lg': $font-size-regular,
   'xl': $font-size-regular,
-  'xxl': $font-size-bigger-regular,
 );
 $font-curve-small: (
   'xs': $font-size-small,
@@ -103,7 +102,6 @@ $font-curve-small: (
   'md': $font-size-regular,
   'lg': $font-size-bigger-regular,
   'xl': $font-size-bigger-regular,
-  'xxl': $font-size-bigger-regular,
 );
 $font-curve-regular: (
   'xs': $font-size-bigger-regular,
@@ -112,7 +110,6 @@ $font-curve-regular: (
   'md': $font-size-bigger-regular,
   'lg': $font-size-medium,
   'xl': $font-size-medium,
-  'xxl': $font-size-medium,
 );
 $font-curve-bigger-regular: (
   'xs': $font-size-bigger-regular,
@@ -121,7 +118,6 @@ $font-curve-bigger-regular: (
   'md': $font-size-medium,
   'lg': $font-size-large,
   'xl': $font-size-large,
-  'xxl': $font-size-large,
 );
 $font-curve-medium: (
   'xs': $font-size-medium,
@@ -130,7 +126,6 @@ $font-curve-medium: (
   'md': $font-size-medium,
   'lg': $font-size-large,
   'xl': $font-size-large,
-  'xxl': $font-size-small-big,
 );
 $font-curve-large: (
   'xs': $font-size-large,
@@ -139,7 +134,6 @@ $font-curve-large: (
   'md': $font-size-small-big,
   'lg': $font-size-big,
   'xl': $font-size-big,
-  'xxl': $font-size-bigger-big,
 );
 $font-curve-big: (
   'xs': $font-size-small-big,
@@ -148,7 +142,6 @@ $font-curve-big: (
   'md': $font-size-big,
   'lg': $font-size-bigger-big,
   'xl': $font-size-bigger-big,
-  'xxl': $font-size-small-huge,
 );
 
 // Deprecated
@@ -189,7 +182,6 @@ $blockquote-font-weight: $font-weight-bold !default;
 $blockquote-border-left: commons.$border-thick solid color.$black !default;
 $blockquote-border-left-width-md: spacing.$size-micro !default;
 $blockquote-padding-left: spacing.$size-small-regular !default;
-$blockquote-padding-left-xxl: spacing.$size-big !default;
 $blockquote-margin-top: spacing.$size-large !default;
 $blockquote-margin-y: spacing.$size-regular !default;
 $blockquote-footer-font-size: math.div(1em * sizing.strip-unit($small-font-size), 100) !default;

diff --git a/packages/styles/src/variables/components/_topic-teaser.scss b/packages/styles/src/variables/components/_topic-teaser.scss
@@ -1,7 +1,7 @@
 @use 'sass:list';
 
 $grid-breakpoints-lower: (xs, sm, rg, md);
-$grid-breakpoints-upper: (lg, xl, xxl);
+$grid-breakpoints-upper: (lg, xl);
 
 $content-cols: (
   xs: 12,
@@ -28,5 +28,4 @@ $image-aspectratio: (
   md: list.slash(1, 0.7),
   lg: list.slash(0.66, 1),
   xl: list.slash(0.9, 1),
-  xxl: list.slash(0.9, 1),
 );