/*
* Category page specific styles
*/
/*
* Styles, which don't generate any output and can be safely imported from
* all root level stylesheets
*/
/*
* Paths
*/
/**
* Animation & transition settings
*/
/*
* Color Palette
*/
/*
* Form color palette
*/
/*
* Footer color palette
*/
/*
* Settings for the `` element
*/
/*
* Text
*
* Settings for text, fonts, sizes
*/
/**
* Text sizes
*
* Resolution specific font sizes, line height, etc.
* All styles cascade up
*
* For each style is generated "%text--size-NAME" placeholder selector
* Each style can also be used included using mixin "@include text--size(NAME);"
*
* See extends/_text-styles.scss
*/
/**
* Link styles
*
* Settings for the anchor elements
* For each link style is generated "%link--style-NAME" placeholder selector
*
* See extends/_links.scss
*
* @demo
* @extend %link--style-heading;
*/
/**
* Grid
*
* Grid system settings
* All resolution styles cascade up from mobile to desktop
*
* @demo
*
...
*
...
*/
/**
* For each grid container is generated ".container--NAME" classname, except
* for "default", for which ".container" classname is generated
*
* @demo
*
*
*/
/**
* Spacing
*
* Settings for spacing between most of the elements
*
* @demo
* @include margins($spacing);
* @include margins($spacing-medium);
*/
/**
* Breakpoints for devices / orientations / screens
* Following already are default values, uncomment if needed
*/
/**
* Minimal body width
*/
/**
* Returns nth property from css property list
*
* @property {map} $list List
* @property {number} $index Item index
*/
/**
* In each $list pair of $breakpoint: $value replaces all values with 'inherit'
* except for one in $index position
*
* @code
* $spacer: (xs: 10px 11px 12px 13px, md: 20px 0);
* $spacer-top-only: pick-css-nth($spacer, 1); // => (xs: 10px inherit inherit inherit, md: 20px inherit inherit inherit)
* $spacer-bottom-only: pick-css-nth($spacer, 3); // => (xs: inherit inherit 12px inherit, md: inherit inherit 20px inherit)
*/
/**
* @function map-deep-get Deep get for sass maps
* @author https://css-tricks.com/snippets/sass/deep-getset-maps/
* @description
* Returns deeply nested property from a map
*
* $paddings: map-deep-get($grid-containers, default, paddings, xs);
*/
/**
* Mixin for object-fit plugin
*
* @see https://github.com/bfred-it/object-fit-images
* @see components/_background.scss
* @example
* @include object-fit(contain);
* @include object-fit(cover, top);
*/
/**
* Converts SVG into data url so that this SVG could be used as a
* background image
*
* @demo
* background-image: svg-to-data-url('');
*/
/**
* Selectors to target specific browsers without affecting specificity or
* limiting use in media queries
*
* Pros:
* - Works with media queries
*
* Conts:
* - Can't be used with @extend as that will invalidate other selectors
*
* See http://browserstrangeness.bitbucket.org/css_hacks.html
*/
/**
* Target Internet Explorer, but not Edge
*
* @demo
* div {
* @include browser-ie () {
* // ...
* }
* }
*/
/**
* Target Edge
*/
/**
* Target Firefox
*/
/**
* Target Safari
*/
/**
* Target all WebKit browsers
*/
/**
* Breakpoints for devices / orientations / screens
*
* @code
* @include media-breakpoint (lg-up) {
* // ...
* }
*/
/**
* Returns if media query name is valid and values exist
*/
/**
* Output content in a media query
*
* @code
* .icon {
* @include media-breakpoint (sm-down) {
* // ...
* }
* }
*/
/**
* Output content in retina display media query
*
* @code
* .icon {
* @include media-retina () {
* // ...
* }
* }
*/
/**
* Output content in non-retina display media query
*
* @code
* .icon {
* @include media-non-retina () {
* // ...
* }
* }
*/
/**
* Image rendering quality
* In Chrome background image quality is not the best when using background-size
*/
/**
* @function placeholder Set input placeholder styles
* @demo
* input {
* @include placeholder () {
* color: #000;
* }
* }
*/
/**
* Margins mixin
*/
/**
* In each $list pair of $breakpoint: $value replaces all values with 'inherit'
* except for one in $index position
*
* @demo
* @include padding(inherit 20px);
*
* @demo
* @include padding((
* xs: inherit 20px,
* md: inherit 40px
* ));
*/
/*
* Grid generator mixins
*/
/**
* Mixin to generate grid container classnames
*
* @property {map} $containers Containers
* @property {number?} $gutter Gutter between grid columns
*/
/**
* Mixins to generate content for grid container classname
*
* @property {map} $container Container
* @property {map} $container.max-width List of max-widths
* @property {map} $container.paddings List of paddings
* @property {number?} $gutter Gutter between grid columns
*/
/**
* Mixin to generate column classnames for each resolutions
*
* @property {number} $columns Number of columns
* @property {list} $breakpoints Responsive breakpoints
*/
/**
* Mixin to generate column paddings for each resolutions
*
* @property {number} $columns Number of columns
* @property {list} $breakpoints Responsive breakpoints
* @property {number?} $gutter Gutter between columns
*/
/*
* 1. Fix for IE where paddings are not taken into account even with box-sizing
* 2. Fix for Firefox
*/
/*
* Button normal state style mixin
*
* Sets styles to button normal state
* 1. We overwrite disabled state too because if classname is used, then :hover, :active will take precedent
*/
/*
* Button hover state style mixin
*
* Sets styles to button hover, focused states
*/
/*
* Button active state style mixin
*
* Sets styles to active state
*/
/*
* Button hover + active state style mixin
*
* Sets styles to button active, hover, focused states
*/
/*
* Active button state style mixin
*
* Sets styles to button active, hover, focused states
*/
/*
* Button disabled state style mixin
*/
/*
* Button style
*
* Sets hover, active, focus, disabled styles
*/
/*
* Button size
*
* Sets different size for different breakpoints
*/
/*
* Square button modifier mixin
*/
/*
* Text size
*
* Sets different size for different breakpoints
*/
/*
* Link normal state style mixin
*
* Sets styles to link normal state
*/
/*
* Link hover state style mixin
*
* Sets styles to link hover and focused states
*/
/*
* Link active state style mixin
*
* Sets styles to link active state
*/
/*
* Link hover and active state style mixin
*
* Sets styles to link hover, focused and active states
*/
/*
* Link disabled state style mixin
*
* Sets styles to link disabled state
*/
/*
* Image icon generator mixin
*/
/*
* Retina image for icon
*/
/**
* Animations
*
* Enables transition for all properties for elements
*
* @demo
* div { @extend %transition; }
*/
.category:before, .category__subcategory:before, .category--with-subcategory .category__title a:after, .category--with-subcategory .category__subcategory li {
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.25, 0.74, 0.22, 0.99); }
/**
* Layout component mixin and placeholder classname, which is above other components
*
* @demo
* .lightbox { @extend %layout-order-above-top; }
* .header { @extend %layout-order-top; }
*
* .lightbox { @include layout-order-above-top(); }
* .header { @include layout-order-top(); }
*/
/**
* Layout component mixin and placeholder classname which covers parent
*
* @demo
* .btn-large:before { @extend %layout-position-overlay; }
* .btn-small:before { @extend %layout-position-overlay-extended; }
*
* .btn-large:before { @include layout-position-overlay(); }
* .btn-small:before { @include layout-position-overlay-extended(); }
*/
/**
* Text style mixin and placeholder classnames
*
* Used to keep all standard text and all headings consistent without code
* duplication / to improve maintainability
*
* See settings/_text.scss
*
* @demo
* body { @extend %text--default; }
* h1 { @extend %text--heading; }
*
* body { @include text--default(); }
* h1 { @include text--heading(); }
*/
.category__title {
font-family: "Museo Sans Cyrl", Helvetica, Arial, sans-serif;
font-weight: 500;
letter-spacing: 0;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1;
font-kerning: normal;
text-transform: none;
color: #333333; }
/**
* Text size / style mixin and placeholder classname generator
* For each style is generated "%text--size-NAME" placeholder selector
*
* See settings/_text.scss
*
* @demo
* .class { @extend %text--size-h1; }
*
* .class { @include text--size(h1); }
*
* .class {
* @include text--size((
* xs: ( 'font-size': 1.4rem, 'line-height': 24 / 14 * 1em )
* ));
* }
*/
.category__title {
font-size: 1.4rem;
line-height: 1.42857em; }
.category__count {
font-size: 1.2rem;
line-height: 1.33333em; }
.product-card .product-card__title {
font-size: 1.6rem;
line-height: 1.125em; }
/**
* Link style mixin and placeholder classname generator
*
* For each link theme defined in settings/_colors.scss creates
* a %link--style-NAME placeholder classname
*
* See settings/_links.scss
*
* @demo
* a { @extend %link--style-default; }
* nav a { @extend %link--style-text; }
*
* a { @include link--style(default); }
* nav a { @include link--style(text); }
*/
.category--more .category__image .icon,
.category--more .category__title a {
color: #306bf5; }
.has-hover .category--more .category__image .icon:focus, .category--more .category__image .has-hover .icon:focus,
.has-hover .category--more .category__title a:focus,
.category--more .category__title .has-hover a:focus, .has-hover .category--more .category__image .icon:hover, .category--more .category__image .has-hover .icon:hover,
.has-hover .category--more .category__title a:hover,
.category--more .category__title .has-hover a:hover {
color: #333333; }
.category--more .category__image .icon:active,
.category--more .category__title a:active, .category--more .category__image .is-active.icon,
.category--more .category__title a.is-active {
color: #333333; }
.category__title a {
color: #333333; }
.has-hover .category__title a:focus, .category__title .has-hover a:focus, .has-hover .category__title a:hover, .category__title .has-hover a:hover {
color: #306bf5; }
.category__title a:active, .category__title a.is-active {
color: #306bf5; }
/**
* Buttons
* Switch input button style
*
* @demo
* Normal state
* Active state
* Disabled state
*/
.has-hover .btn--switch:active {
box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2) inset; }
.btn--switch.is-active {
pointer-events: none;
cursor: default; }
.has-hover .btn--switch:hover, .has-hover .btn--switch:focus {
color: #333333;
background-color: #ebeff4; }
.btn--switch:active, .has-hover .btn--switch:active, .btn--switch.is-active {
color: #333333;
background-color: #acb5bb; }
.btn--switch, .btn--switch.is-disabled, .btn--switch:disabled, .btn--switch[disabled] {
color: #333333;
background-color: #f5f6fa; }
.btn--switch.is-disabled, .btn--switch:disabled, .btn--switch[disabled] {
color: #b4bcc3;
background-color: #f5f6fa; }
.btn--switch.loading {
color: transparent !important; }
.btn--switch.is-disabled, .btn--switch:disabled, .btn--switch[disabled] {
opacity: 1; }
/*
* Category list
*/
.category-list {
background: #ffffff;
border-radius: 4px; }
.category-list .category {
border-right: 1px solid #edeef0;
border-bottom: 1px solid #edeef0; }
.category-list .category:nth-child(5n) {
border-right: 0; }
.category-list:nth-child(5n) {
border-right: 0; }
/*
* Category item
*/
.category {
position: relative;
height: 220px; }
.category__image {
height: 140px;
display: flex;
align-items: center;
justify-content: center; }
.category__image img {
display: block; }
.category__title {
text-align: center;
margin: 0;
padding-left: 2.2rem;
padding-right: 2.2rem; }
.category__count {
margin: 0;
position: absolute;
z-index: 1;
right: 20px;
top: 18px;
color: rgba(144, 152, 159, 0.5); }
.category__count span {
display: block;
text-indent: -9000px; }
.category .overlay {
z-index: 2;
position: absolute; }
.has-hover .category .overlay:focus ~ .category__title a, .has-hover .category .overlay:hover ~ .category__title a {
color: #306bf5; }
.category:before, .category__subcategory:before {
content: "";
display: block;
background: #ffffff;
box-shadow: 0 10px 40px rgba(18, 42, 96, 0.1);
position: absolute;
left: -1px;
top: -1px;
bottom: -1px;
right: -1px;
transition-property: opacity, transform;
opacity: 0;
transform: scale(0.9);
pointer-events: none; }
.category__title, .category__image, .category__subcategory li {
position: relative;
z-index: 1; }
.has-hover .category:focus, .has-hover .category:hover, .category:active, .category.is-active {
z-index: 3; }
.has-hover .category:focus:before,
.has-hover .category:focus .category__subcategory:before, .has-hover .category:hover:before,
.has-hover .category:hover .category__subcategory:before, .category:active:before,
.category:active .category__subcategory:before, .category.is-active:before,
.category.is-active .category__subcategory:before {
opacity: 1;
transform: scale(1);
pointer-events: all; }
.category.is-touch-hovered {
z-index: 3; }
.category.is-touch-hovered:before,
.category.is-touch-hovered .category__subcategory:before {
opacity: 1;
transform: scale(1);
pointer-events: all; }
/*
* Categoy item with dropdown
*/
.category--with-subcategory .category__title a:after {
content: "";
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 5 5'%3E%3Cpath fill='%23c0c2c7' d='M2.5 5L0 0h5L2.5 5'/%3E%3C/svg%3E") 100% 0 no-repeat;
display: inline-block;
width: 10px;
height: 5px;
margin: 0 -10px 1px 0;
transition-property: transform;
transform-origin: 7.5px 2.5px; }
.category--with-subcategory:before {
display: none; }
.category--with-subcategory .category__subcategory:before {
top: -221px; }
.category--with-subcategory .category__subcategory {
position: absolute;
left: 0;
top: 220px;
width: 100%;
pointer-events: none; }
.category--with-subcategory .category__subcategory li {
transition-property: opacity, transform;
opacity: 0;
transform: translateY(-10px); }
.category--with-subcategory .category__subcategory li a {
display: block;
padding: 7px 20px 0; }
.category--with-subcategory .category__subcategory li:first-child {
border-top: 1px solid #edeef0; }
.category--with-subcategory .category__subcategory li:first-child a {
padding-top: 15px; }
.category--with-subcategory .category__subcategory li:last-child a {
padding-bottom: 21px; }
.has-hover .category--with-subcategory:focus .category__title a:after, .has-hover .category--with-subcategory:hover .category__title a:after, .category--with-subcategory:active .category__title a:after, .category--with-subcategory.is-active .category__title a:after {
transform: rotate(180deg); }
.has-hover .category--with-subcategory:focus .category__subcategory, .has-hover .category--with-subcategory:hover .category__subcategory, .category--with-subcategory:active .category__subcategory, .category--with-subcategory.is-active .category__subcategory {
pointer-events: all; }
.has-hover .category--with-subcategory:focus .category__subcategory li, .has-hover .category--with-subcategory:hover .category__subcategory li, .category--with-subcategory:active .category__subcategory li, .category--with-subcategory.is-active .category__subcategory li {
opacity: 1;
transform: translateY(0px); }
.category--with-subcategory.is-touch-hovered .category__title a:after {
transform: rotate(180deg); }
.category--with-subcategory.is-touch-hovered .category__subcategory {
pointer-events: all; }
.category--with-subcategory.is-touch-hovered .category__subcategory li {
opacity: 1;
transform: translateY(0px); }
/*
* "More" category item
*/
.category--more .category__title a:after {
display: none; }
.has-hover .category--more .overlay:focus ~ .category__title a, .has-hover .category--more .overlay:focus ~ .category__image .icon, .has-hover .category--more .overlay:hover ~ .category__title a, .has-hover .category--more .overlay:hover ~ .category__image .icon {
color: #333333; }
/*
* Category list following card group
*/
.card-group + .category-list {
margin-top: 2rem; }
/*
* Highlighted product list / product item
*/
.product-card {
position: relative;
background: #ffffff;
box-shadow: 0 8px 24px 0 rgba(0, 12, 40, 0.08);
border-radius: 4px;
padding: 0 40px 40px; }
.product-card .product-card__background {
position: absolute;
left: 0;
top: 0; }
.product-card .product-card__background,
.product-card .product-card__background img {
display: block;
border-radius: 4px;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center; }
.product-card .product-card__title {
color: #ffffff;
background: #306bf5;
margin: 0 -40px;
padding: 0 40px;
position: relative;
line-height: 64px;
height: 60px;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
.product-card .badge--product {
top: -30px;
right: -30px; }
/*
* Product card with list of items
*/
.product-card .product-list {
position: relative;
margin: 0 -40px -40px; }
.product-card .product-list .product {
padding: 40px 40px 40px;
position: relative;
border-right: 1px solid #edeef0;
margin: 0; }
.product-card .product-list .product:first-child .overlay {
left: -18px; }
.product-card .product-list .product:last-child {
border-right-color: transparent; }
.product-card .product-list .product:last-child .overlay {
right: -18px; }
.product-card .product-list .price {
display: inline-block;
background: #ffd600;
padding: 1px 6px 0;
border-radius: 4px;
height: 27px;
line-height: 27px; }
.is-edge .product-card .product-list .price {
padding-top: 0; }
.is-ie .product-card .product-list .price {
padding-top: 1px; }
@-moz-document url-prefix() {
.product-card .product-list .price {
padding-top: 0; } }
/*
* Product card in the left side content, reduce right side overflow
*/
.product-card--in-left-side {
padding: 30px; }
.brand-secret-sale {
background: url("../images/category/brand-secret-sale-background.jpg") 50% 0 no-repeat;
background-size: cover; }
.brand-secret-sale .breadcrumbs {
color: #fff; }
.brand-secret-sale .breadcrumbs a {
color: #fff; }
.has-hover .brand-secret-sale .breadcrumbs a:focus, .has-hover .brand-secret-sale .breadcrumbs a:hover {
color: #fff; }
.brand-secret-sale .page-title {
color: #fff; }
.brand-zone-samsung {
background: url("../images/category/brand-samsung-background.jpg") 50% 0 no-repeat;
background-size: cover; }
.brand-zone-samsung .breadcrumbs {
color: #6a94c5; }
.brand-zone-samsung .breadcrumbs a {
color: #6a94c5; }
.has-hover .brand-zone-samsung .breadcrumbs a:focus, .has-hover .brand-zone-samsung .breadcrumbs a:hover {
color: #fff; }
.brand-zone-samsung .page-title {
margin-top: 0.9rem;
margin-bottom: 6.5rem; }
.is-ie .brand-zone__promos {
background: #ffffff;
border-radius: 4px; }
/*# sourceMappingURL=category.css.map */