Commit 4e52c2a5 authored by Nikolay Gromov's avatar Nikolay Gromov

Добавил в стилевые файлы локальные переменные имен блока

parent 40412971
...@@ -12,6 +12,10 @@ $font-size--h3: 1.5em !default; ...@@ -12,6 +12,10 @@ $font-size--h3: 1.5em !default;
$border-radius: 3px !default; $border-radius: 3px !default;
.alert { .alert {
$block-name: &;
// #{$block-name}__element
position: relative; position: relative;
padding: 0.7em 1em; padding: 0.7em 1em;
background-color: $gray-lightest; background-color: $gray-lightest;
......
...@@ -7,6 +7,10 @@ $line-height: 1.375em !default; ...@@ -7,6 +7,10 @@ $line-height: 1.375em !default;
$text-color: hsl(0, 0%, 10%) !default; $text-color: hsl(0, 0%, 10%) !default;
.breadcrumbs { .breadcrumbs {
$block-name: &;
// #{$block-name}__element
padding: 0; padding: 0;
list-style: none; list-style: none;
margin: $line-height 0; margin: $line-height 0;
......
...@@ -13,6 +13,10 @@ $field-padding-horizontal: 0.7em !default; ...@@ -13,6 +13,10 @@ $field-padding-horizontal: 0.7em !default;
$border-radius: 3px !default; $border-radius: 3px !default;
.btn { .btn {
$block-name: &;
// #{$block-name}__element
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
......
...@@ -6,6 +6,10 @@ $toggler-part-height: 3px !default; ...@@ -6,6 +6,10 @@ $toggler-part-height: 3px !default;
$toggler-part-bg-color: #000 !default; $toggler-part-bg-color: #000 !default;
.burger { .burger {
$block-name: &;
// #{$block-name}__element
position: relative; position: relative;
z-index: 1; z-index: 1;
display: flex; display: flex;
......
...@@ -6,6 +6,10 @@ $toggler-part-height: 3px !default; ...@@ -6,6 +6,10 @@ $toggler-part-height: 3px !default;
$toggler-part-bg-color: #000 !default; $toggler-part-bg-color: #000 !default;
.close { .close {
$block-name: &;
// #{$block-name}__element
position: relative; position: relative;
z-index: 1; z-index: 1;
display: flex; display: flex;
......
...@@ -10,6 +10,10 @@ $line-height: 1.375em !default; ...@@ -10,6 +10,10 @@ $line-height: 1.375em !default;
$border-radius: 3px !default; $border-radius: 3px !default;
.code { .code {
$block-name: &;
// #{$block-name}__element
display: block; display: block;
width: 100%; width: 100%;
max-height: 50rem; max-height: 50rem;
......
...@@ -11,6 +11,10 @@ $border-radius: 3px !default; ...@@ -11,6 +11,10 @@ $border-radius: 3px !default;
$transition-time: 0.3s !default; $transition-time: 0.3s !default;
.dropdown { .dropdown {
$block-name: &;
// #{$block-name}__element
position: relative; position: relative;
display: inline-block; display: inline-block;
......
...@@ -9,6 +9,10 @@ $font-size--small: 0.75em !default; ...@@ -9,6 +9,10 @@ $font-size--small: 0.75em !default;
$line-height: 1.375em !default; $line-height: 1.375em !default;
.field-actions { .field-actions {
$block-name: &;
// #{$block-name}__element
display: block; display: block;
margin-top: $line-height; margin-top: $line-height;
margin-bottom: ($line-height / 2); margin-bottom: ($line-height / 2);
......
...@@ -5,6 +5,10 @@ ...@@ -5,6 +5,10 @@
$line-height: 1.375em !default; $line-height: 1.375em !default;
.field-checkbox { .field-checkbox {
$block-name: &;
// #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: ($line-height / 2);
......
...@@ -7,6 +7,7 @@ $color-danger: hsl(2, 64%, 58%) !default; ...@@ -7,6 +7,7 @@ $color-danger: hsl(2, 64%, 58%) !default;
.field-checkbox { .field-checkbox {
$block-name: &; $block-name: &;
// #{$block-name}__element
&__input-wrap--error { &__input-wrap--error {
......
...@@ -7,6 +7,7 @@ $color-danger: hsl(2, 64%, 58%) !default; ...@@ -7,6 +7,7 @@ $color-danger: hsl(2, 64%, 58%) !default;
.field-file { .field-file {
$block-name: &; $block-name: &;
// #{$block-name}__element
&--error { &--error {
......
...@@ -13,6 +13,10 @@ $field-padding-horizontal: 0.7em !default; ...@@ -13,6 +13,10 @@ $field-padding-horizontal: 0.7em !default;
$border-radius: 3px !default; $border-radius: 3px !default;
.field-file { .field-file {
$block-name: &;
// #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: ($line-height / 2);
......
...@@ -5,6 +5,10 @@ ...@@ -5,6 +5,10 @@
$line-height: 1.375em !default; $line-height: 1.375em !default;
.field-radio { .field-radio {
$block-name: &;
// #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: ($line-height / 2);
......
...@@ -7,6 +7,7 @@ $color-danger: hsl(2, 64%, 58%) !default; ...@@ -7,6 +7,7 @@ $color-danger: hsl(2, 64%, 58%) !default;
.field-radio { .field-radio {
$block-name: &; $block-name: &;
// #{$block-name}__element
&__input-wrap--error { &__input-wrap--error {
......
...@@ -10,6 +10,10 @@ $line-height: 1.375em !default; ...@@ -10,6 +10,10 @@ $line-height: 1.375em !default;
$border-radius: 3px !default; $border-radius: 3px !default;
.field-range { .field-range {
$block-name: &;
// #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: ($line-height / 2);
......
...@@ -7,6 +7,7 @@ $color-danger: hsl(2, 64%, 58%) !default; ...@@ -7,6 +7,7 @@ $color-danger: hsl(2, 64%, 58%) !default;
.field-select { .field-select {
$block-name: &; $block-name: &;
// #{$block-name}__element
&--error { &--error {
......
...@@ -10,6 +10,10 @@ $line-height: 1.375em !default; ...@@ -10,6 +10,10 @@ $line-height: 1.375em !default;
$border-radius: 3px !default; $border-radius: 3px !default;
.field-select { .field-select {
$block-name: &;
// #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: ($line-height / 2);
......
...@@ -7,6 +7,7 @@ $color-danger: hsl(2, 64%, 58%) !default; ...@@ -7,6 +7,7 @@ $color-danger: hsl(2, 64%, 58%) !default;
.field-text { .field-text {
$block-name: &; $block-name: &;
// #{$block-name}__element
&--error { &--error {
......
...@@ -15,6 +15,10 @@ $field-padding-horizontal: 0.7em !default; ...@@ -15,6 +15,10 @@ $field-padding-horizontal: 0.7em !default;
$border-radius: 3px !default; $border-radius: 3px !default;
.field-text { .field-text {
$block-name: &;
// #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: ($line-height / 2);
......
...@@ -8,6 +8,10 @@ $border-color: hsl(0, 0%, 60%) !default; ...@@ -8,6 +8,10 @@ $border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.375em !default; $line-height: 1.375em !default;
.field-toggler { .field-toggler {
$block-name: &;
// #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: ($line-height / 2);
......
...@@ -10,6 +10,9 @@ $line-height: 1.375em !default; ...@@ -10,6 +10,9 @@ $line-height: 1.375em !default;
.form { .form {
$block-name: &;
// #{$block-name}__element
&:not(:last-child) { &:not(:last-child) {
margin-bottom: $line-height; margin-bottom: $line-height;
} }
......
...@@ -11,6 +11,10 @@ $text-color: hsl(0, 0%, 10%) !default; ...@@ -11,6 +11,10 @@ $text-color: hsl(0, 0%, 10%) !default;
$border-radius: 3px !default; $border-radius: 3px !default;
.label { .label {
$block-name: &;
// #{$block-name}__element
display: inline-block; display: inline-block;
position: relative; position: relative;
margin: 0 0.1em; margin: 0 0.1em;
......
...@@ -6,6 +6,10 @@ $gray-lighter: hsl(0, 0%, 80%) !default; ...@@ -6,6 +6,10 @@ $gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default; $gray-lightest: hsl(0, 0%, 90%) !default;
.loader { .loader {
$block-name: &;
// #{$block-name}__element
display: inline-block; display: inline-block;
&:before { &:before {
......
...@@ -3,6 +3,10 @@ ...@@ -3,6 +3,10 @@
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.logo { .logo {
$block-name: &;
// #{$block-name}__element
display: block; display: block;
white-space: nowrap; white-space: nowrap;
} }
...@@ -20,6 +20,7 @@ $transition-time: 0.3s !default; ...@@ -20,6 +20,7 @@ $transition-time: 0.3s !default;
.main-nav { .main-nav {
$block-name: &; $block-name: &;
// #{$block-name}__element
position: relative; position: relative;
z-index: 10; z-index: 10;
......
...@@ -3,6 +3,10 @@ ...@@ -3,6 +3,10 @@
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.media { .media {
$block-name: &;
// #{$block-name}__element
display: flex; display: flex;
margin-top: $line-height; margin-top: $line-height;
margin-bottom: $line-height; margin-bottom: $line-height;
......
...@@ -7,6 +7,10 @@ $text-color: hsl(0, 0%, 10%) !default; ...@@ -7,6 +7,10 @@ $text-color: hsl(0, 0%, 10%) !default;
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
.menu { .menu {
$block-name: &;
// #{$block-name}__element
min-width: 10em; min-width: 10em;
margin: 0; margin: 0;
padding: 0.3em 0; padding: 0.3em 0;
......
...@@ -23,6 +23,7 @@ $z-index-modal: 100 !default; ...@@ -23,6 +23,7 @@ $z-index-modal: 100 !default;
.modal { .modal {
$block-name: &; $block-name: &;
// #{$block-name}__element
display: none; display: none;
overflow: hidden; overflow: hidden;
......
...@@ -16,6 +16,7 @@ $off-canvas-width: 250px !default; ...@@ -16,6 +16,7 @@ $off-canvas-width: 250px !default;
.off-canvas { .off-canvas {
$block-name: &; $block-name: &;
// #{$block-name}__element
position: relative; position: relative;
overflow: hidden; overflow: hidden;
......
...@@ -2,4 +2,8 @@ ...@@ -2,4 +2,8 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий... // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.owl-carousel {} .owl-carousel {
// В сборку стилей берется стилевой файл по умолчанию,
// поставляемый вместе с этим плагином: owl.carousel.css
// см. ./projectConfig.json
}
...@@ -4,4 +4,6 @@ ...@@ -4,4 +4,6 @@
.page-footer { .page-footer {
$block-name: &;
// #{$block-name}__element
} }
...@@ -4,4 +4,6 @@ ...@@ -4,4 +4,6 @@
.page-header { .page-header {
$block-name: &;
// #{$block-name}__element
} }
...@@ -9,6 +9,10 @@ ...@@ -9,6 +9,10 @@
} }
.page { // html .page { // html
$block-name: &;
// #{$block-name}__element
box-sizing: border-box; box-sizing: border-box;
font-size: 10px; font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
...@@ -54,8 +58,8 @@ body { ...@@ -54,8 +58,8 @@ body {
} }
// We love Safari // We love Safari
input[type="search"] { input[type='search'] {
-webkit-appearance: textfield; -webkit-appearance: textfield; /* stylelint-disable-line property-no-vendor-prefix */
} }
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
......
...@@ -9,6 +9,10 @@ $text-color: hsl(0, 0%, 10%) !default; ...@@ -9,6 +9,10 @@ $text-color: hsl(0, 0%, 10%) !default;
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
.pagination { .pagination {
$block-name: &;
// #{$block-name}__element
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: $line-height; margin-top: $line-height;
......
...@@ -12,6 +12,10 @@ $border-radius: 3px !default; ...@@ -12,6 +12,10 @@ $border-radius: 3px !default;
$transition-time: 0.3s !default; $transition-time: 0.3s !default;
.progress { .progress {
$block-name: &;
// #{$block-name}__element
margin-top: $line-height; margin-top: $line-height;
margin-bottom: $line-height; margin-bottom: $line-height;
border: 1px solid $border-color; border: 1px solid $border-color;
......
...@@ -3,6 +3,10 @@ ...@@ -3,6 +3,10 @@
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.swipe { .swipe {
$block-name: &;
// #{$block-name}__element
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
position: relative; position: relative;
......
...@@ -7,6 +7,10 @@ $line-height: 1.375em !default; ...@@ -7,6 +7,10 @@ $line-height: 1.375em !default;
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
.table-mobile-scroll { .table-mobile-scroll {
$block-name: &;
// #{$block-name}__element
display: block; display: block;
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
......
...@@ -15,6 +15,9 @@ $screen-xxl: 1800px !default; ...@@ -15,6 +15,9 @@ $screen-xxl: 1800px !default;
.table-responsive { .table-responsive {
$block-name: &;
// #{$block-name}__element
@media (max-width: ($screen-md - 1)) { @media (max-width: ($screen-md - 1)) {
display: block; display: block;
border: 0; border: 0;
......
...@@ -16,6 +16,10 @@ $field-padding-vertical: 0.3em !default; ...@@ -16,6 +16,10 @@ $field-padding-vertical: 0.3em !default;
$field-padding-horizontal: 0.7em !default; $field-padding-horizontal: 0.7em !default;
.table { .table {
$block-name: &;
// #{$block-name}__element
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
border: 1px solid $border-color; border: 1px solid $border-color;
......
...@@ -17,6 +17,7 @@ $field-padding-horizontal: 0.7em !default; ...@@ -17,6 +17,7 @@ $field-padding-horizontal: 0.7em !default;
.tabs { .tabs {
$block-name: &; $block-name: &;
// #{$block-name}__element
margin-top: $line-height; margin-top: $line-height;
margin-bottom: $line-height; margin-bottom: $line-height;
......
...@@ -10,6 +10,10 @@ $border-radius: 3px !default; ...@@ -10,6 +10,10 @@ $border-radius: 3px !default;
$transition-time: 0.3s !default; $transition-time: 0.3s !default;
.thumb { .thumb {
$block-name: &;
// #{$block-name}__element
display: inline-block; display: inline-block;
padding: 0.4rem; padding: 0.4rem;
line-height: $line-height; line-height: $line-height;
......
...@@ -3,6 +3,10 @@ ...@@ -3,6 +3,10 @@
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.to-top { .to-top {
$block-name: &;
// #{$block-name}__element
position: fixed; position: fixed;
right: 1rem; right: 1rem;
bottom: 1rem; bottom: 1rem;
......
// Этот блок ответственнен за типографику проекта. // Этот блок ответственен за типографику проекта.
// Не пишите тут какую-либо стороннюю стилизацию. // Не пишите тут какую-либо стороннюю стилизацию.
$gray: hsl(0, 0%, 50%) !default; $gray: hsl(0, 0%, 50%) !default;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment