/*
* Account questions, answers, reviews 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; }
*/
/**
* 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(); }
*/
/**
* 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 )
* ));
* }
*/
.comment__time {
font-size: 1.2rem;
line-height: 1.33333em; }
.comment--main .comment__text,
.comment--review .comment__text {
font-size: 1.6rem;
line-height: 1.3125em; }
/**
* 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); }
*/
.rating {
color: transparent !important;
width: 137px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='22' viewBox='0 0 29 22'%3E%3Cpath fill='%23d6dce1' d='M4.6 21.98a.68.68 0 0 1-.43-.15.94.94 0 0 1-.3-.94l1-6.16a1.54 1.54 0 0 0-.34-1.12L.33 9.27a.94.94 0 0 1-.28-.94.87.87 0 0 1 .75-.58l5.8-.9a1.4 1.4 0 0 0 .9-.68l2.6-5.6a.88.88 0 0 1 .75-.58.86.86 0 0 1 .75.57l2.6 5.6a1.4 1.4 0 0 0 .9.68l5.8.9a.87.87 0 0 1 .75.58.96.96 0 0 1-.28.94l-4.2 4.35a1.53 1.53 0 0 0-.35 1.1l1 6.16a.94.94 0 0 1-.3.93.83.83 0 0 1-.92 0l-5.2-2.9a1.33 1.33 0 0 0-1.1 0l-5.2 2.9a1.12 1.12 0 0 1-.5.16z'/%3E%3C/svg%3E"); }
.rating span {
display: block;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='22' viewBox='0 0 29 22'%3E%3Cpath fill='%23ffc600' d='M4.6 21.98a.68.68 0 0 1-.43-.15.94.94 0 0 1-.3-.94l1-6.16a1.54 1.54 0 0 0-.34-1.12L.33 9.27a.94.94 0 0 1-.28-.94.87.87 0 0 1 .75-.58l5.8-.9a1.4 1.4 0 0 0 .9-.68l2.6-5.6a.88.88 0 0 1 .75-.58.86.86 0 0 1 .75.57l2.6 5.6a1.4 1.4 0 0 0 .9.68l5.8.9a.87.87 0 0 1 .75.58.96.96 0 0 1-.28.94l-4.2 4.35a1.53 1.53 0 0 0-.35 1.1l1 6.16a.94.94 0 0 1-.3.93.83.83 0 0 1-.92 0l-5.2-2.9a1.33 1.33 0 0 0-1.1 0l-5.2 2.9a1.12 1.12 0 0 1-.5.16z'/%3E%3C/svg%3E");
height: 22px; }
.rating--small {
width: 76px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 29 22'%3E%3Cpath fill='%23d6dce1' d='M4.6 21.98a.68.68 0 0 1-.43-.15.94.94 0 0 1-.3-.94l1-6.16a1.54 1.54 0 0 0-.34-1.12L.33 9.27a.94.94 0 0 1-.28-.94.87.87 0 0 1 .75-.58l5.8-.9a1.4 1.4 0 0 0 .9-.68l2.6-5.6a.88.88 0 0 1 .75-.58.86.86 0 0 1 .75.57l2.6 5.6a1.4 1.4 0 0 0 .9.68l5.8.9a.87.87 0 0 1 .75.58.96.96 0 0 1-.28.94l-4.2 4.35a1.53 1.53 0 0 0-.35 1.1l1 6.16a.94.94 0 0 1-.3.93.83.83 0 0 1-.92 0l-5.2-2.9a1.33 1.33 0 0 0-1.1 0l-5.2 2.9a1.12 1.12 0 0 1-.5.16z'/%3E%3C/svg%3E"); }
.rating--small span {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 29 22'%3E%3Cpath fill='%23ffc600' d='M4.6 21.98a.68.68 0 0 1-.43-.15.94.94 0 0 1-.3-.94l1-6.16a1.54 1.54 0 0 0-.34-1.12L.33 9.27a.94.94 0 0 1-.28-.94.87.87 0 0 1 .75-.58l5.8-.9a1.4 1.4 0 0 0 .9-.68l2.6-5.6a.88.88 0 0 1 .75-.58.86.86 0 0 1 .75.57l2.6 5.6a1.4 1.4 0 0 0 .9.68l5.8.9a.87.87 0 0 1 .75.58.96.96 0 0 1-.28.94l-4.2 4.35a1.53 1.53 0 0 0-.35 1.1l1 6.16a.94.94 0 0 1-.3.93.83.83 0 0 1-.92 0l-5.2-2.9a1.33 1.33 0 0 0-1.1 0l-5.2 2.9a1.12 1.12 0 0 1-.5.16z'/%3E%3C/svg%3E");
height: 12px; }
/**
* Comment list / comment components
*/
.comment-list {
position: relative; }
/**
* First level comment list
*/
.comments-list--main,
.comments-list--reviews {
padding-left: 160px;
margin-top: 1.9rem; }
.comments-list--main:first-child,
.comments-list--reviews:first-child {
margin-top: 3.8rem; }
.comments-list--main > li,
.comments-list--reviews > li {
margin-top: 40px; }
.comments-list--main > li:first-child,
.comments-list--reviews > li:first-child {
margin-top: 0; }
/**
* Second level comment list
*/
.comments-list--inner {
border: 1px solid #ebecee;
border-radius: 0 0 4px 4px;
border-top: 0;
list-style: decimal;
}
.comments-list--inner:empty {
display: none; }
.comments-list--inner li {
margin-top: 7px;
}
.comments-list--inner li:first-child {
margin-top: 0;
}
/**
* Comment component
*/
.comment {
position: relative;
padding: 32px 38px;
border-radius: 4px 4px 0 0; }
.comment:last-child {
border-radius: 4px; }
.comment__time {
color: #90989f; }
.comment__text {
margin: 0; }
.comment__vote {
position: relative;
margin: -19px -38px -16px 54px; }
.comment__vote .btn {
width: 71px;
justify-content: flex-start; }
.comment .comment__is-visible-removed {
display: none; }
.comment--removed .comment__text, .comment--removed .comment__product, .comment--removed .comment__author, .comment--removed .comment__time, .comment--removed .comment__vote {
opacity: 0.2;
pointer-events: none; }
.comment--removed .comment__is-hidden-removed {
display: none; }
.comment--removed .comment__is-visible-removed {
display: block; }
/**
* First level comment
*/
.comment--main,
.comment--review {
display: flex;
background: #f7f9fc; }
.comment--main:before, .comment--main:after,
.comment--review:before,
.comment--review:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-color: transparent #f7f9fc transparent transparent;
position: absolute;
left: -15px;
top: 39px; }
.comment--main:after,
.comment--review:after {
display: none; }
.comment--main .comment__author,
.comment--review .comment__author {
position: absolute;
left: -160px;
top: 36px; }
.comment--main .comment__time,
.comment--review .comment__time {
position: absolute;
left: -160px;
top: 59px;
display: block; }
.comment--main .comment__rating,
.comment--review .comment__rating {
position: absolute;
left: -160px;
top: 90px; }
.comment--main .comment__controls,
.comment--review .comment__controls {
flex-grow: 0;
flex-shrink: 0;
width: 270px;
text-align: right;
margin: 4px 2px 0 0; }
.comment--main .comment__product,
.comment--review .comment__product {
position: absolute;
width: 130px;
left: -160px;
top: 0; }
.comment--main .comment__product .product figure,
.comment--review .comment__product .product figure {
justify-content: flex-start; }
.comment--main .comment__product .comment__time, .comment--main .comment__product .comment__rating,
.comment--review .comment__product .comment__time,
.comment--review .comment__product .comment__rating {
position: static;
left: auto;
top: auto;
margin-top: 1.5rem; }
/**
* Second level comment
*/
.comment--inner {
padding: 34px 38px; }
.comment--inner .comment__footer {
display: flex;
align-items: center;
margin-bottom: 5px; }
.comment--inner .comment__author {
color: #90989f;
flex-grow: 1; }
.comment--inner .comment--inner__is-visible-removed {
display: none; }
.comment--inner--removed .comment__author, .comment--inner--removed .comment__time, .comment--inner--removed .comment__text {
opacity: 0.2;
pointer-events: none; }
.comment--inner--removed .comment--inner__is-hidden-removed {
display: none; }
.comment--inner--removed .comment--inner__is-visible-removed {
display: block; }
/**
* Review
*/
.comment--review {
border: 1px solid #ebecee;
background: #ffffff; }
.comment--review:before {
border-color: transparent #ebecee transparent transparent; }
.comment--review:after {
border-color: transparent #ffffff transparent transparent;
display: block;
top: 40px;
left: -13px; }
.comment--review .comment__text {
position: relative;
margin-top: 2.0rem;
padding-left: 40px;
display: flex; }
.comment--review .comment__text .icon {
position: absolute;
left: -1px;
top: 0; }
.comment--review .comment__text p {
margin: 0; }
.comment--review .comment__text:first-child {
margin-top: 0; }
.comment--review .comment__text-list {
flex-basis: 100%; }
.comment--review .comment__text--pros .icon {
color: #0cb799; }
.comment--review .comment__text--cons .icon {
color: #de2152; }
.comment--review .comment__text--comment .icon {
color: #969da4;
left: 1px;
top: 5px; }
/**
* Comment form
*/
.comment-form {
position: relative;
background: #f7f9fc;
padding: 40px 240px 40px 38px;
margin: 40px 0 0 160px;
border-radius: 4px; }
.comment-form__header {
margin-bottom: 3.5rem; }
.comments-list .comment-form {
margin: 0;
border-radius: 0;
border-top: 1px solid rgba(194, 203, 210, 0.75); }
.comments-list .comment-form:before, .comments-list .comment-form:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: transparent transparent transparent rgba(194, 203, 210, 0.75);
position: absolute;
left: 38px;
top: -10px; }
.comments-list .comment-form:after {
border-width: 8px 0 0 8px;
border-color: transparent transparent transparent #f7f9fc;
left: 39px;
top: -8px; }
.comments-list--main > li,
.comments-list--reviews > li {
margin-top: 60px; }
.comments-list--main .comment-form,
.comment-list--inner .comment-form {
border-radius: 4px;
border-top: none; }
.comments-list--main .comment-form:before, .comments-list--main .comment-form:after,
.comment-list--inner .comment-form:before,
.comment-list--inner .comment-form:after {
display: none; }
.comments-list--main .comment__controls,
.comment-list--inner .comment__controls {
width: 165px;
display: flex;
justify-content: flex-end; }
.comments-list--main .comment__controls > .btn,
.comment-list--inner .comment__controls > .btn {
margin-left: 0.8rem; }
.comment--main .comment__time {
position: static;
left: auto;
top: auto;
white-space: nowrap; }
.comment--main .comment__footer {
display: flex;
margin-left: 5rem;
margin-top: 4px;
flex-grow: 1;
flex-shrink: 0; }
.comment--main .comment__controls {
margin: -11px 0 0 0; }
.comment--main .comment__product .product figure img {
width: auto; }
.comment--inner .comment__controls {
margin: -19px 0 -16px 0; }
.comment--inner .comment__controls .comment__vote {
margin-top: 0;
margin-bottom: 0; }
.comment--inner .comment__footer {
margin-bottom: 15px; }
.comment--review .comment__controls {
margin: 0;
display: flex;
justify-content: flex-end; }
.comment--review .comment__controls > .btn {
margin-left: 0.8rem; }
.comment--review .comment__vote {
position: absolute;
right: 38px;
bottom: 32px;
margin-top: 0;
margin-left: 0; }
/*# sourceMappingURL=answers.css.map */