From e19e1250f7c546cafa7f52724fea8c5dc3c7e5bf Mon Sep 17 00:00:00 2001
From: Ere Maijala <ere.maijala@helsinki.fi>
Date: Tue, 8 Oct 2024 14:10:03 +0300
Subject: [PATCH] [FINNA-2636] Add breakpoints

---
 themes/finna2/less/global/base-variables.less | 19 +++++++++++++++++++
 themes/finna2/scss/global/base-variables.scss | 19 +++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/themes/finna2/less/global/base-variables.less b/themes/finna2/less/global/base-variables.less
index 80adde1190e..67769f5eccb 100644
--- 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
index b0c0eac12c7..6a4b8062422 100644
--- 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;