[FINNA-2636] Add breakpoints

EreMaijala · Oct 8, 2024 · e19e125 · e19e125
1 parent 3ee4816
commit e19e125
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/themes/finna2/less/global/base-variables.less b/themes/finna2/less/global/base-variables.less
@@ -30,6 +30,25 @@
 @body-bg: #fff;
 
 
+//== Breakpoints
+/* #SCSS>
+$screen-xs:              map-get($grid-breakpoints, "xs");
+$screen-xs-min:          $screen-xs;
+$screen-sm:              map-get($grid-breakpoints, "sm");
+$screen-sm-min:          $screen-sm;
+$screen-md:              map-get($grid-breakpoints, "md");
+$screen-md-min:          $screen-md;
+$screen-lg:              map-get($grid-breakpoints, "lg");
+$screen-lg-min:          $screen-lg;
+$screen-xl:              map-get($grid-breakpoints, "xl");
+$screen-xl-min:          $screen-xl;
+
+$screen-xs-max:          ($screen-sm-min - 1);
+$screen-sm-max:          ($screen-md-min - 1);
+$screen-md-max:          ($screen-lg-min - 1);
+$screen-lg-max:          ($screen-xl-min - 1);
+<#SCSS */
+
 // Extra extra small screen / phone (e.g. iPhone 5)
 @screen-xxs: 400px;
 @screen-xxs-min: @screen-xxs;

diff --git a/themes/finna2/scss/global/base-variables.scss b/themes/finna2/scss/global/base-variables.scss
@@ -30,6 +30,25 @@ $brand-info: #007c90 !default;
 $body-bg: #fff !default;
 
 
+//== Breakpoints
+/* #SCSS> */
+$screen-xs:              map-get($grid-breakpoints, "xs") !default;
+$screen-xs-min:          $screen-xs !default;
+$screen-sm:              map-get($grid-breakpoints, "sm") !default;
+$screen-sm-min:          $screen-sm !default;
+$screen-md:              map-get($grid-breakpoints, "md") !default;
+$screen-md-min:          $screen-md !default;
+$screen-lg:              map-get($grid-breakpoints, "lg") !default;
+$screen-lg-min:          $screen-lg !default;
+$screen-xl:              map-get($grid-breakpoints, "xl") !default;
+$screen-xl-min:          $screen-xl !default;
+
+$screen-xs-max:          ($screen-sm-min - 1) !default;
+$screen-sm-max:          ($screen-md-min - 1) !default;
+$screen-md-max:          ($screen-lg-min - 1) !default;
+$screen-lg-max:          ($screen-xl-min - 1) !default;
+/* <#SCSS */
+
 // Extra extra small screen / phone (e.g. iPhone 5)
 $screen-xxs: 400px !default;
 $screen-xxs-min: $screen-xxs !default;