/*!
* Main styles
*
* @author delphinpro <delphinpro@gmail.com>
* @copyright copyright © 2018 delphinpro
* @license licensed under the MIT license
*/
//==
//== Config & mixins
//== ======================================= ==//
$DEV_MODE: true;
@import "vrhythm.cfg.scss";
@import "grid.cfg.scss";
@import "../../node_modules/bs-grid-system/source/scss/bs-grid";
@import "../../node_modules/vrhythm/source/mixins/rhythm";
@import "main.cfg.scss";
@import "mixins.scss";
@import "../../node_modules/tiny-slider/src/tiny-slider";
//==
//== Global styles
//== ======================================= ==//
@import "webfonts.scss";
@import "vendor/normalize";
@import "base/global.scss";
@import "base/grid-system.scss";
@import "base/page.scss";
@import "base/site.scss";
@import "base/table.scss";
@import "base/input.scss";
@import "base/uploadbox.scss";
@import "base/buttons.scss";
@import "base/checkbox.scss";
@import "base/radio.scss";
@import "base/radio-button.scss";
@import "base/radio-panel.scss";
@import "base/controls-group.scss";
@import "base/form-field.scss";
@import "base/auto-height.scss";
@import "base/transitions.scss";
//==
//== Blocks
//== ======================================= ==//
@import "blocks/availability.scss";
@import "blocks/availability-details.scss";
@import "blocks/back-link.scss";
@import "blocks/benefit-block.scss";
@import "blocks/block-heading.scss";
@import "blocks/breadcrumb.scss";
@import "blocks/btn-close.scss";
@import "blocks/callback-link.scss";
@import "blocks/checked-list.scss";
@import "blocks/ci.scss";
@import "blocks/clear-link.scss";
@import "blocks/document-list.scss";
@import "blocks/download-link.scss";
@import "blocks/email-link.scss";
@import "blocks/entry-item.scss";
@import "blocks/expert-consult.scss";
@import "blocks/goods-attributes.scss";
@import "blocks/heading.scss";
@import "blocks/icons.scss";
@import "blocks/info-text.scss";
@import "blocks/logo.scss";
@import "blocks/paginate.scss";
@import "blocks/phone-link.scss";
@import "blocks/phone-with-icon.scss";
@import "blocks/phone.scss";
@import "blocks/popular-links.scss";
@import "blocks/price.scss";
@import "blocks/print-link.scss";
@import "blocks/section.scss";
@import "blocks/service-description.scss";
@import "blocks/services.scss";
@import "blocks/share-block.scss";
@import "blocks/show-all.scss";
@import "blocks/smenu-box.scss";
@import "blocks/smenu.scss";
@import "blocks/tags.scss";
@import "blocks/unordered-list.scss";
@import "blocks/worktime.scss";
@import "blocks/zoom.scss";
//==
//== Blocks
//== ======================================= ==//
@import "blocks/about-us-section.scss";
@import "blocks/article-section.scss";
@import "blocks/benefits.scss";
@import "blocks/carousel.scss";
@import "blocks/cart.scss";
@import "blocks/delivery-map.scss";
@import "blocks/delivery-partners.scss";
@import "blocks/delivery.scss";
@import "blocks/footer.scss";
@import "blocks/header.scss";
@import "blocks/help-me.scss";
@import "blocks/load-more.scss";
@import "blocks/nav-catalog.scss";
@import "blocks/nav.scss";
@import "blocks/navbar.scss";
@import "blocks/news-section.scss";
@import "blocks/panel.scss";
@import "blocks/params-panel.scss";
@import "blocks/payment-block.scss";
@import "blocks/search.scss";
@import "blocks/catalog-table.scss";
@import "blocks/catalog-grid.scss";
@import "blocks/time-range.scss";
//==
//== Components
//== ======================================= ==//
@import "components/spin.scss";
@import "components/selector.scss";
@import "components/tabs.scss";
@import "components/hamburger.scss";
@import "components/fixed-bar.scss";
@import "components/step-indicator.scss";
@import "components/complete-screen.scss";
@import "components/ordering.scss";
@import "components/order-complete.scss";
@import "components/summary.scss";
@import "components/goods.scss";
@import "components/basket-contains.scss";
@import "components/basket-goods.scss";
@import "components/basket.scss";
@import "components/icon-complete.scss";
@import "components/big-order-form.scss";
@import "components/feedback-form.scss";
@import "components/modal.scss";
@import "components/vue-scrollbar.scss";
@import "components/mobile-menu.scss";
@import "components/gallery.scss";
//==
//== Page specific classes
//== ======================================= ==//
@import "pages/home.scss";
@import "pages/articles.scss";
@import "pages/catalog.scss";
@import "pages/product.scss";
@import "pages/terms.scss";
@import "pages/services.scss";
@import "pages/news.scss";
@import "pages/feedback.scss";
@import "pages/page404.scss";
//==
//== Helpers & other classes
//== ======================================= ==//
@import "base/helpers.scss";
@import "base/printer.scss";
.progress
.cell
.progress { display: table; table-layout: fixed; width: 100%; }
.cell { display: table-cell; }
box-shadow: inset 0 3px 5px 0 rgba(0,0,0, 0.21);
/*== Какой-то блок на странице */
.class-1 {
/* стили для экранов 767px и менее */
}
@media (max-width: 767px) {
.class-1 {
/* стили для экранов 767px и менее */
}
}
/*== Какой-то другой блок на странице */
.class-2 {
/* стили для экранов 767px и менее */
}
@media (max-width: 767px) {
.class-2 {
/* стили для экранов 767px и менее */
}
}
/*== И так далее… */
…
$screen-xs-min: 520px;
$container-xs: 480px;
.container {
@include container-fixed;
@media (min-width: $screen-xs-min) {
width: $container-xs;
}
// … Дальше оставляем как было
}
@mixin make-grid-columns($i: 1, $list: ".col-xxs-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-xxs-#{$i} .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
}
…
@include make-grid-columns();
@include make-grid(xs);
@include make-grid(xxs);
@media (min-width: $screen-xs-min) {
@include make-grid(xs);
}
Вопрос - как по вашему правильно отдавать файлы клиенту все и что лучше? Минифицированное все или нет?
почему абс. позиционированные блоки порождают отступ снизу? Ведь они же не в потоке?
Надеюсь кто-нибудь объяснить мне почему так происходит.
Ведь они же не в потоке?
$('[data-carousel]').each((index, el) => {
const $carousel = $(el);
let what = $carousel.data('carousel');
if (!carouselConfig.hasOwnProperty(what)) return;
let $arrows = $carousel.parents('.carousel-wrapper').find('.arrows').children();
$carousel.slick({
arrows : true,
infinite : true,
prevArrow: $arrows.filter('.arrows__prev'),
nextArrow: $arrows.filter('.arrows__next'),
...carouselConfig[what],
});
});