/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/string-replace-loader/index.js??ruleSet[1].rules[3]!./cartridges/plugin_page_designer_ext/cartridge/client/default/scss/page_designer.scss ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /*md @no-stat # Breakpoints ## Boilerplate breakpoints Boilerplate has 4 main breakpoints that targeted to [supported devices](https://confluence.ontrq.com/display/RSB/SFRA+BP+-+Supported+Browsers+and+Devices) - iPhone X, iPad, MS Windows desktop / Macbook Pro retina ** Please not iPad landscape - is LG breakpoint ** [See more info](https://confluence.ontrq.com/display/RSB/SFRA+-+Site+Layout+Conception) ## Supported screen resolutions Boilerplate is come "Retina ready". It supports MDPI and XHDPI pixel density across all site. | Device | Screen Resolution, CSS pixels | Pixel density | |--------------------|-------------------------------|---------------| | Desktop Windows PC | 1920x1080 | MDPI | | Macbook pro 13 | 1280x800 / 1440x900 | XHDPI | | iPad Air 2 | 1024x768 | XHDPI | | iPhone X | 375x812 | XHDPI | | Samsung Galaxy S9 | 360x740 | XHDPI | ## Supported screen scaling Boilerplate comes with support of 1:1, 1:1.25, 1.5, 1:2 screen scaling. To do so you need to take care not only by whole pixel but pixel fractions that is used. */ /*md @no-stat # Media queries (breakpoints) We have a `media` mixin for make it easier to implement responsive styling via media queries. You can nest them right within other blocks of CSS,which puts the properties and values you are changing right next to each other. That creates an obvious connection between them, which is a much nicer authoring experience than trying to maintain those changes separated by tons of other code or in a different file. ## Configuration **Site Layout Conception** details with examples you can find [here](https://confluence.ontrq.com/display/RSB/SFRA+-+Site+Layout+Conception) `media` mixin works with `$media` map where `media-name: media query` This is how `$media` map looks: ```scss $media: ( sm: 'screen and (max-width: 767px)', md: 'screen and (min-width: 768px) and (max-width: 1199px)', lg: 'screen and (min-width: 1024px) and (max-width: 1366px)', xl: 'screen and (min-width: 1201px)', md-up: 'screen and (min-width: 768px)', md-down: 'screen and (max-width: 1023px)', lg-up: 'screen and (min-width: 1024px)', lg-down: 'screen and (max-width: 1367px)' ); ``` ## Usage Here is how to use `media()` mixin: ```scss .b-block { // styles outside of a media query @include media(sm) { // styles for "s" viewports }; @include media(md-up) { // styles for "m" and "l" viewports }; } ``` Simply edit this file and add your own media queries to `$media` map. */ /*md @no-stat # Grids ## How to setup grids config for project ### Several grid configs for project We can use several grid configs per project. To do this, we need to add a new grid name to the `$grids` map with settings. ```scss $grids: ( default: ( //... ), altered: ( //... ) ); ``` ### Gaps / margin / column span configuration: ```scss $grids: ( default: ( grid-columns: ('xl': 12, 'lg': 12, 'md': 12, 'sm': 6), grid-gutter: ('xl': 20px, 'lg': 20px, 'md': 20px, 'sm': 20px), grid-margin: ('xl': 60px, 'lg': 40px, 'md': 20px, 'sm': 20px), ) ); ``` ## Working with grids ### Development approaches #### 1. Using `g-grid` mixin when css grid is applicable. With features of `display: grid`. Please see [g-grid](02-components-g-grid.html) details. #### 2. Using `grid-span` function to create custom layout based on (flex, float, inline-block, table etc.) Could be used in conjunction with different display properties while maintaining their common features(floating, centering, etc.). Please see [grid-span](01-core-functions-grid-span.html) details. As example please see [flex based non semantic grid](05-blocks-guide-l-cols.html) like you could see before CSS grid era (Foundation, Bootstrap etc.). #### 3. Get gaps / margin / column span to create your own grid layout system. For that we have the next grid functions in `_grids_tools.scss`: - grid-gutter - grid-margin - grid-columns Please see [grid functions](00-configuration-grids_tools.html) details with usage examples. */ /*md @no-stat # grid-* (grid config get functions) This functions designed to get data from grid configuration config and use it for creating grids or reuse grid configuration into different components. * `grid-gutter` * `grid-columns` * `grid-margin` ## Usage ```scss // Configuration: $grids: ( default: ( grid-columns: ('xl': 12, 'lg': 12, 'md': 12, 'sm': 6), grid-gutter: ('xl': 20px, 'lg': 20px, 'md': 20px, 'sm': 20px), grid-margin: ('xl': 60px, 'lg': 40px, 'md': 20px, 'sm': 20px), ), altered: ( grid-columns: ('xl': 10, 'lg': 10, 'md': 10, 'sm': 6), grid-gutter: ('xl': 10px, 'lg': 10px, 'md': 10px, 'sm': 10px), grid-margin: ('xl': 40px, 'lg': 30px, 'md': 30px, 'sm': 20px), ) ); // Usage: .component { padding: grid-gutter('lg'); // => grids -> 'default' -> grid-gutter -> lg = 20px padding: grid-gutter('lg', 'altered'); // => => grids -> 'altered' -> grid-gutter -> lg = 10px } .component-b { margin: grid-margin('lg'); margin: grid-margin('lg', 'altered'); @include media(sm) { margin: grid-margin('sm'); } } .component-c { width: percentage(grid-columns('lg') / 4); @include media(sm) { width: percentage(grid-columns('sm') / 2); } } ``` */ /*md @no-stat # Globals variables This variables are set of different global settings that is used across sets of components. It include: * globals * depth of components (box-shadow) * motion of components */ /*md @no-stat # Z-indexes Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is difficult. With different stacking orders and contexts, keeping track of them as their numbers increase can be hard.

We use sass function to help manage z-indexes from single place. The most important requirement of this technique is sticking to it. Any rogue hard-coded z-index values could compromise the integrity of those derived from your list. ## Usage **We don't use hardcoded integer `z-index` values. Instead, we use indexes from the map `$z-indexes`** ### 1. Set up `$z-indexes` map ```scss $z-indexes: ( components: ( component_name: (), checkbox: ( before: (), after: (), icon: (), ) ), content: (), popup-menu: () ); ``` ### 2. Add values in SCSS classes using `z()` function #### Global components ```scss .b-components { z-index: z(components); } .b-content { z-index: z(content); } .b-pop_up-menu { z-index: z(popup-menu); } ``` #### Inside a component ```scss .b-component_name { z-index: z(components, component_name); } .b-checkbox { &-before { z-index: z(components, checkbox, before); } &-after { z-index: z(components, checkbox, after); } &-icon { z-index: z(components, checkbox, icon); } } ``` ### 3. Get resulting CSS ```scss .b-components { z-index: 1; } .b-content { z-index: 2; } .b-pop_up-menu { z-index: 3; } .b-component_name { z-index: 1; } .b-checkbox-before { z-index: 1; } .b-checkbox-after { z-index: 2; } .b-checkbox-icon { z-index: 3; } ``` */ /*md @no-stat # adjust-color-to-bg This function used to adjust color of some element depending on provided background color. As basis function use luminance human persived criteria as breakpoint for colors [See more details](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef). It is especially useful for crating flexible themes. ## Arguments ``` $backgroundColor - bg color $colorInverse - color if bg is dark. If not provided would return $color-white $colorNormal - color if bg is light. If not provided would return $color-black adjust-color-to-bg($backgroundColor, $colorInverse, $colorNormal) ``` ## Usage ```scss .component { color: adjust-color-to-bg($color-white); // => results default 'white' if background dark // => results default 'black' if background is light } .component-custom-inverse-color { color: adjust-color-to-bg($color-light-gray, grey); // => results 'grey' if background dark // => results default 'black' if background is light } .component-all-custom-colors { color: adjust-color-to-bg($color-light-gray, green, red); // => result 'green' if background dark // => result 'red' if background is light } ``` Based on Hugo Giraudel [work](https://css-tricks.com/snippets/sass/luminance-color-function/) */ /*md @no-stat # grid-span `grid-span` function returns the width which 1 or several columns are takes (including inner gutters). It returns value in percents. This could be used for direct set to **width, max-width, flex-basis, etc.** to create custom grid layout. ### Parameters ```scss @function grid-span($column: 1, $break: 'lg', $with-gutter: false, $grid: 'default') ``` ## Examples ### Flex-basis example ```scss .b-grid { display: flex; .b-grid__item { flex-basis: grid-span($column: 3); } } ``` ### Floated items example ```scss .b-grid { .b-grid__item { float: left; width: grid-span($column: 2); } } ``` ### Inline-block items example ```scss .b-grid { .b-grid__item { display: inline-block; max-width: grid-span($column: 2); } } ``` Please see [grid](00-configuration-grids.html) for more grid usage examples. */ /*md @no-stat # aspect-ratio This function used to get percentage value of aspect ratio color to use in `padding` to create container for images. This technique used to prevent content bouncing during load and create layout shifts. Calculation. 16:9 Aspect Ratio would result `(9 / 16) * 100 = 0.5625%`. See proposed [specs](https://drafts.csswg.org/css-sizing-4/#aspect-ratio) ## Arguments ``` $width - width of element $height - height of element => percentage aspect-ratio($width, $height) ``` ## Usage ```scss .component { padding-bottom: aspect-ratio(16, 9); padding-bottom: aspect-ratio(1920, 1080); padding-bottom: aspect-ratio(1920px, 1080px); } .b-suggestions-item_image { @include g-image_container(_container, aspect-ratio(16, 9)); img { @include g-image_container(_img); } } ``` */ /*md @no-stat # Hide This mixin is especially useful for hiding text or visually hide needed elements Here is a list of parameters you can use: * text - helps to hide text without loosing visibility for parsers * visually - like for text but for the whole element ## Usage ```scss .component { @include hide(visually); } .h-hide_vis { @include hide(visually, true); } ``` */ /*md @no-stat # Hover-supported This mixin is designed to address iOS standard behavior of first tap - hover, second tap - click that is engaged when control has hover styles applied. This is critical for functionality like back-top-button. If we apply hover styles as is. It would be activated only after second tap. If rules are wrapped into this media it applied only in case if device have fine pointer mechanism. [See more info](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer). Please note about mixed input devices - touch screen + mouse + touchpad, touchpad + trackpoint, touch screen + stylus ("apple pencil") etc. - sometimes browser do not report it properly, so logic should be builded around exclusions. ## Usage ```scss .component { @include hover-supported { &:hover { // Hover styles that should not be applied to touch } }; } ``` */ /*md @no-stat # RTL selector This mixin is designed to alter styles for RTL languages. It mostly needed for alter position:absolute left|right coords, but could be used as facade for different selectors. ## Usage ```scss .component { left: 0; @include rtl { left: initial; right: 0; }; } ``` */ /*md # g-text_overflow This is global component designed to reduce text lines and add "..." in the end. ## Usage ```scss .component-link { @include g-text_overflow; } .component-link { @include g-text_overflow(2); } ``` */ /*md # g-button component Designed to provide the same styles for buttons across different components. It can be used with `