если не использовать SASS - а это зачастую не используется, так как работаю часто с готовыми проектами.
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 60 60" id="accounting" xmlns="http://www.w3.org/2000/svg">
<path d="M59 20....."/>
<path d="M35 32....."/>
<path d="M38 5h....."/>
</symbol>
<symbol viewBox="0 0 60 60" id="archive" xmlns="http://www.w3.org/2000/svg">
<path d="M59 20....."/>
<path d="M35 32....."/>
<path d="M38 5h....."/>
</symbol>
</svg>
<svg class="my-icon">
<use xlink:href="images/svg-sprite.svg#archive"></use>
</svg>
.my-icon {
width: 50px;
height: 50px;
fill: orange; /* Цвет заливки */
stroke: blue; /* Цвет обводки */
}
.my-icon {
fill: currentColor; /* Цвет заливки */
}
.my-container {
max-width: 1300px;
margin: auto;
@include media-breakpoint-up(xl){
padding: 0 80px;
}
}
Ставил overflow-x на хедер, но тогда меню обрезается вообще полностью по все осям и Х, и Y, что за бред? почему по Y вы высоту меню обрезается-то??
<div class="layout">
<main class="layout__main"></main>
<aside class="layout__aside1"></aside>
<aside class="layout__aside2"></aside>
</div>
.layout {
display: flex;
&__main { order: 2; width: auto; flex: 1 0 auto; }
&__aside1 { order: 1; width: 300px; flex: 0 0 auto; }
&__aside2 { order: 3; width: 200px; flex: 0 0 auto; }
}
/*!
* 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";