Skip to content

K
kpp
Commit aa5ab54a authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Перевел все компоненты на rem

parent d2d292e8
Show whitespace changes
Inline Side-by-side
Showing with 237 additions and 195 deletions
src/blocks-demo.pug
View file @ aa5ab54a
...@@ -91,7 +91,7 @@ block content ...@@ -91,7 +91,7 @@ block content
h1 Блоки стартового репозитория #[a(href='index.html') проекта] h1.blocks-library__title Блоки стартового репозитория #[a(href='index.html') проекта]
+block-lib('page', 'Страница', false) +block-lib('page', 'Страница', false)
include:markdown-it(linkify, html='true', typographer='true', quotes='«»') blocks/page/readme.md include:markdown-it(linkify, html='true', typographer='true', quotes='«»') blocks/page/readme.md
...@@ -379,6 +379,9 @@ block content ...@@ -379,6 +379,9 @@ block content
.embed-responsive-demo__item:last-child { .embed-responsive-demo__item:last-child {
padding-left: 5px; padding-left: 5px;
} }
.embed-responsive-demo .embed-responsive {
margin: 0;
}
} }
.embed-responsive-demo .embed-responsive-demo
.embed-responsive-demo__item .embed-responsive-demo__item
...@@ -760,7 +763,7 @@ block content ...@@ -760,7 +763,7 @@ block content
+block-lib('nouislider', 'Выбор диапазона с <a href="https://refreshless.com/nouislider/">noUiSlider</a>', false) +block-lib('nouislider', 'Выбор диапазона с <a href="https://refreshless.com/nouislider/">noUiSlider</a>', false)
include:markdown-it(linkify, html='true', typographer='true', quotes='«»') blocks/nouislider/readme.md include:markdown-it(linkify, html='true', typographer='true', quotes='«»') blocks/nouislider/readme.md
+nouislider('demo-nouislider') +nouislider('demo-nouislider')
p p(style='margin-top: 1rem;')
input#demo-nouislider-start(type='number', value='10') input#demo-nouislider-start(type='number', value='10')
input#demo-nouislider-end(type='number', value='80') input#demo-nouislider-end(type='number', value='80')
+block-lib-code() +block-lib-code()
......
src/blocks/alert/alert.scss
View file @ aa5ab54a
...@@ -7,8 +7,10 @@ $color-success: hsl(120, 39%, 54%) !default; ...@@ -7,8 +7,10 @@ $color-success: hsl(120, 39%, 54%) !default;
$color-danger: hsl(2, 64%, 58%) !default; $color-danger: hsl(2, 64%, 58%) !default;
$color-warning: hsl(35, 84%, 62%) !default; $color-warning: hsl(35, 84%, 62%) !default;
$text-color: hsl(0, 0%, 10%) !default; $text-color: hsl(0, 0%, 10%) !default;
$font-size--h3: 1.5em !default;
$border-radius: 3px !default; $font-size--h3: rem(24px) !default;
$border-radius: rem(3px) !default;
.alert { .alert {
...@@ -23,31 +25,34 @@ $border-radius: 3px !default; ...@@ -23,31 +25,34 @@ $border-radius: 3px !default;
color: $text-color; color: $text-color;
background-color: #fff; background-color: #fff;
> * { & > * {
&:first-child {
margin-top: 0; margin-top: 0;
}
&:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
& > * + * {
margin-top: 1rem;
} }
&__header { &__header {
display: block; display: block;
margin-top: 0; margin-top: 0;
margin-bottom: 0.4em; margin-bottom: 0.5rem;
font-size: $font-size--h3; font-size: $font-size--h3;
font-weight: 400; font-weight: 400;
line-height: 1.2; line-height: 1.2;
color: inherit; color: inherit;
& + * {
margin-top: 0;
}
} }
&__close { &__close {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
margin: 0;
} }
......
src/blocks/breadcrumbs/breadcrumbs.scss
View file @ aa5ab54a
...@@ -2,8 +2,6 @@ ...@@ -2,8 +2,6 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий... // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$line-height: 1.375em !default;
$text-color: hsl(0, 0%, 10%) !default; $text-color: hsl(0, 0%, 10%) !default;
.breadcrumbs { .breadcrumbs {
...@@ -13,7 +11,8 @@ $text-color: hsl(0, 0%, 10%) !default; ...@@ -13,7 +11,8 @@ $text-color: hsl(0, 0%, 10%) !default;
padding: 0; padding: 0;
list-style: none; list-style: none;
margin: $line-height 0; margin-top: 1rem;
margin-bottom: 1rem;
color: $text-color; color: $text-color;
a { a {
...@@ -35,7 +34,7 @@ $text-color: hsl(0, 0%, 10%) !default; ...@@ -35,7 +34,7 @@ $text-color: hsl(0, 0%, 10%) !default;
&:not(:last-child):after { &:not(:last-child):after {
content: '>'; content: '>';
display: inline-block; display: inline-block;
margin-left: 0.8em; margin-left: 0.8rem;
color: $gray; color: $gray;
} }
} }
......
src/blocks/btn/btn.scss
View file @ aa5ab54a
...@@ -5,12 +5,12 @@ ...@@ -5,12 +5,12 @@
$gray-lighter: hsl(0, 0%, 80%) !default; $gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default; $gray-lightest: hsl(0, 0%, 90%) !default;
$text-color: hsl(0, 0%, 10%) !default; $text-color: hsl(0, 0%, 10%) !default;
$line-height: 1.375em; $line-height: 1.5 !default;
$field-padding-vertical: 0.3em !default; $field-padding-vertical: 0.3em !default;
$field-padding-horizontal: 0.7em !default; $field-padding-horizontal: 0.7em !default;
$border-radius: 3px !default; $border-radius: rem(3px) !default;
.btn { .btn {
...@@ -44,6 +44,10 @@ $border-radius: 3px !default; ...@@ -44,6 +44,10 @@ $border-radius: 3px !default;
border-color: darken($gray-lighter, 12%); border-color: darken($gray-lighter, 12%);
} }
&:visited {
color: $text-color;
}
&:active, &:active,
&:focus { &:focus {
@include field-focus; @include field-focus;
......
src/blocks/code/code.scss
View file @ aa5ab54a
...@@ -5,9 +5,7 @@ ...@@ -5,9 +5,7 @@
$gray-lighter: hsl(0, 0%, 80%) !default; $gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default; $gray-lightest: hsl(0, 0%, 90%) !default;
$line-height: 1.375em !default; $border-radius: rem(3px) !default;
$border-radius: 3px !default;
.code { .code {
...@@ -16,8 +14,8 @@ $border-radius: 3px !default; ...@@ -16,8 +14,8 @@ $border-radius: 3px !default;
display: block; display: block;
width: 100%; width: 100%;
max-height: 50rem; max-height: 50rem;
padding: 1em; padding: 0.5rem 1rem;
margin-bottom: ($line-height / 2); margin-bottom: 1rem;
overflow-x: auto; overflow-x: auto;
background-color: $gray-lightest; background-color: $gray-lightest;
border-radius: $border-radius; border-radius: $border-radius;
......
src/blocks/comment/comment.scss
View file @ aa5ab54a
...@@ -2,17 +2,19 @@ ...@@ -2,17 +2,19 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий... // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$screen-md: 768px !default;
.comment { .comment {
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
margin-top: $line-height; margin-top: 1rem;
margin-bottom: $line-height; margin-bottom: 1rem;
@media (min-width: $screen-md) { @media (min-width: $screen-md) {
& & { & & {
padding-left: calc(60px + 1em); padding-left: calc(60px + 1rem);
} }
& & & & { & & & & {
...@@ -26,7 +28,7 @@ ...@@ -26,7 +28,7 @@
&__avatar-wrap { &__avatar-wrap {
flex-shrink: 0; flex-shrink: 0;
margin-right: 1em; margin-right: 1rem;
img { img {
display: block; display: block;
......
src/blocks/dropdown/dropdown.scss
View file @ aa5ab54a
...@@ -6,7 +6,7 @@ $text-color: hsl(0, 0%, 10%) !default; ...@@ -6,7 +6,7 @@ $text-color: hsl(0, 0%, 10%) !default;
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
$border-radius: 3px !default; $border-radius: rem(3px) !default;
$transition-time: 0.3s !default; $transition-time: 0.3s !default;
......
src/blocks/embed-responsive/embed-responsive.scss
View file @ aa5ab54a
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 100%;
margin-top: $line-height; margin-top: 1rem;
margin-bottom: $line-height; margin-bottom: 1rem;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
......
src/blocks/field-actions/field-actions.scss
View file @ aa5ab54a
...@@ -4,22 +4,22 @@ ...@@ -4,22 +4,22 @@
$text-color--muted: hsl(0, 0%, 50%) !default; $text-color--muted: hsl(0, 0%, 50%) !default;
$font-size--small: 0.75em !default; $font-size--small: 80% !default;
$line-height: 1.375em !default; $line-height: 1.5 !default;
.field-actions { .field-actions {
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
display: block; display: block;
margin-top: $line-height; margin-top: 1rem;
margin-bottom: ($line-height / 2); margin-bottom: 1rem;
&__text { &__text {
display: block; display: block;
margin-top: ($line-height / 2); margin-top: 1rem;
margin-bottom: ($line-height / 2); margin-bottom: 1rem;
font-size: $font-size--small; font-size: $font-size--small;
color: $text-color--muted; color: $text-color--muted;
line-height: 1.2em; line-height: 1.2em;
......
src/blocks/field-checkbox/field-checkbox.scss
View file @ aa5ab54a
...@@ -2,14 +2,16 @@ ...@@ -2,14 +2,16 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий... // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$line-height: 1.375em !default; $line-height: 1.5 !default;
$border-radius: rem(3px) !default;
.field-checkbox { .field-checkbox {
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: 1rem;
&__title { &__title {
display: block; display: block;
...@@ -21,7 +23,7 @@ $line-height: 1.375em !default; ...@@ -21,7 +23,7 @@ $line-height: 1.375em !default;
&__input-wrap { &__input-wrap {
& + & { & + & {
margin-top: ($line-height / 2); margin-top: 1rem;
} }
} }
...@@ -35,16 +37,17 @@ $line-height: 1.375em !default; ...@@ -35,16 +37,17 @@ $line-height: 1.375em !default;
} }
&__name-text { &__name-text {
display: inline-block;
// свой чекбокс с картинкой // свой чекбокс с картинкой
// &:before { // &:before {
// content: ''; // content: '';
// position: absolute; // position: absolute;
// top: 0.1em; // top: rem(5px);
// left: 0; // left: 0;
// width: 14px; // width: rem(14px);
// height: 14px; // height: rem(14px);
// background-image: svg-load('../blocks/field-checkbox/bg-img/checkbox.svg'); // background-image: svg-load('../blocks/field-checkbox/bg-img/checkbox.svg');
// background-size: 100%; // background-size: 100%;
// } // }
...@@ -59,10 +62,10 @@ $line-height: 1.375em !default; ...@@ -59,10 +62,10 @@ $line-height: 1.375em !default;
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0.1em; top: rem(5px);
left: 0; left: 0;
width: 14px; width: rem(14px);
height: 14px; height: rem(14px);
border: 2px solid currentColor; border: 2px solid currentColor;
border-radius: $border-radius; border-radius: $border-radius;
} }
...@@ -74,10 +77,10 @@ $line-height: 1.375em !default; ...@@ -74,10 +77,10 @@ $line-height: 1.375em !default;
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
top: calc(0.1em + 1px); top: rem(6px);
left: 3px; left: 3px;
width: 14px; width: rem(14px);
height: 6px; height: rem(6px);
opacity: 0; opacity: 0;
border-left: 2px solid currentColor; border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor; border-bottom: 2px solid currentColor;
......
src/blocks/field-file/field-file.scss
View file @ aa5ab54a
...@@ -5,19 +5,19 @@ ...@@ -5,19 +5,19 @@
$gray-lightest: hsl(0, 0%, 90%); $gray-lightest: hsl(0, 0%, 90%);
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.375em !default; $line-height: 1.5 !default;
$field-padding-vertical: 0.3em !default; $field-padding-vertical: 0.3em !default;
$field-padding-horizontal: 0.7em !default; $field-padding-horizontal: 0.7em !default;
$border-radius: 3px !default; $border-radius: rem(3px) !default;
.field-file { .field-file {
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: 1rem;
&__name { &__name {
@include field-name; @include field-name;
...@@ -30,8 +30,8 @@ $border-radius: 3px !default; ...@@ -30,8 +30,8 @@ $border-radius: 3px !default;
&__input { &__input {
position: absolute; position: absolute;
width: 1px; width: 0;
height: 1px; height: 0;
opacity: 0; opacity: 0;
&:active ~ .field-file__name-text, &:active ~ .field-file__name-text,
......
src/blocks/field-radio/field-radio.scss
View file @ aa5ab54a
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий... // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$line-height: 1.375em !default; $line-height: 1.5 !default;
.field-radio { .field-radio {
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: 1rem;
&__title { &__title {
display: block; display: block;
...@@ -21,7 +21,7 @@ $line-height: 1.375em !default; ...@@ -21,7 +21,7 @@ $line-height: 1.375em !default;
&__input-wrap { &__input-wrap {
& + & { & + & {
margin-top: ($line-height / 2); margin-top: 1rem;
} }
} }
...@@ -35,16 +35,17 @@ $line-height: 1.375em !default; ...@@ -35,16 +35,17 @@ $line-height: 1.375em !default;
} }
&__name-text { &__name-text {
display: inline-block;
// своя радиокнопка с картинкой // своя радиокнопка с картинкой
// &:before { // &:before {
// content: ''; // content: '';
// position: absolute; // position: absolute;
// top: 0.1em; // top: rem(5px);
// left: 0; // left: 0;
// width: 14px; // width: rem(14px);
// height: 14px; // height: rem(14px);
// background-image: svg-load('../blocks/field-radio/bg-img/radiobutton.svg'); // background-image: svg-load('../blocks/field-radio/bg-img/radiobutton.svg');
// background-size: 100%; // background-size: 100%;
// } // }
...@@ -59,10 +60,10 @@ $line-height: 1.375em !default; ...@@ -59,10 +60,10 @@ $line-height: 1.375em !default;
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0.1em; top: rem(5px);
left: 0; left: 0;
width: 14px; width: rem(14px);
height: 14px; height: rem(14px);
border: 2px solid currentColor; border: 2px solid currentColor;
border-radius: 50%; border-radius: 50%;
} }
...@@ -74,10 +75,10 @@ $line-height: 1.375em !default; ...@@ -74,10 +75,10 @@ $line-height: 1.375em !default;
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
top: calc(0.1em + 4px); top: rem(9px);
left: 4px; left: rem(4px);
width: 6px; width: rem(6px);
height: 6px; height: rem(6px);
opacity: 0; opacity: 0;
border-radius: 50%; border-radius: 50%;
background-color: currentColor; background-color: currentColor;
......
src/blocks/field-range/field-range.scss
View file @ aa5ab54a
...@@ -5,16 +5,16 @@ ...@@ -5,16 +5,16 @@
$gray-lightest: hsl(0, 0%, 90%) !default; $gray-lightest: hsl(0, 0%, 90%) !default;
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.375em !default; $line-height: 1.5 !default;
$border-radius: 3px !default; $border-radius: rem(3px) !default;
.field-range { .field-range {
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: 1rem;
&__name { &__name {
@include field-name; @include field-name;
...@@ -22,13 +22,14 @@ $border-radius: 3px !default; ...@@ -22,13 +22,14 @@ $border-radius: 3px !default;
&__input-wrap { &__input-wrap {
position: relative; position: relative;
display: block;
} }
&__input { &__input {
align-self: center; align-self: center;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 2em; height: 2rem;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0; border: 0;
background: none; background: none;
......
src/blocks/field-select/field-select.scss
View file @ aa5ab54a
...@@ -5,16 +5,16 @@ ...@@ -5,16 +5,16 @@
$gray-lightest: hsl(0, 0%, 90%); $gray-lightest: hsl(0, 0%, 90%);
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.375em !default; $line-height: 1.5 !default;
$border-radius: 3px !default; $border-radius: rem(3px) !default;
.field-select { .field-select {
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: 1rem;
&__name { &__name {
@include field-name; @include field-name;
......
src/blocks/field-text/field-text.scss
View file @ aa5ab54a
...@@ -7,19 +7,19 @@ $border-color: hsl(0, 0%, 60%) !default; ...@@ -7,19 +7,19 @@ $border-color: hsl(0, 0%, 60%) !default;
$text-color--muted: hsl(0, 0%, 50%) !default; $text-color--muted: hsl(0, 0%, 50%) !default;
$line-height: 1.375em !default; $line-height: 1.5 !default;
$field-padding-vertical: 0.3em !default; $field-padding-vertical: 0.3em !default;
$field-padding-horizontal: 0.7em !default; $field-padding-horizontal: 0.7em !default;
$border-radius: 3px !default; $border-radius: rem(3px) !default;
.field-text { .field-text {
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: 1rem;
&__name { &__name {
@include field-name; @include field-name;
......
src/blocks/field-toggler/field-toggler.scss
View file @ aa5ab54a
...@@ -5,14 +5,14 @@ ...@@ -5,14 +5,14 @@
$gray-lightest: hsl(0, 0%, 90%); $gray-lightest: hsl(0, 0%, 90%);
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.375em !default; $line-height: 1.5 !default;
.field-toggler { .field-toggler {
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
display: block; display: block;
margin-bottom: ($line-height / 2); margin-bottom: 1rem;
&__title { &__title {
@include field-name; @include field-name;
...@@ -21,29 +21,29 @@ $line-height: 1.375em !default; ...@@ -21,29 +21,29 @@ $line-height: 1.375em !default;
&__input-wrap { &__input-wrap {
& + & { & + & {
margin-top: ($line-height / 2); margin-top: 1rem;
} }
} }
&__name { &__name {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding-left: 3.2em; padding-left: 3.2rem;
margin-right: 0.6em; margin-right: 0.6rem;
font-weight: 400; font-weight: 400;
line-height: $line-height; line-height: $line-height;
} }
&__name-text { &__name-text {
display: inline-block;
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0.6em; top: rem(3px);
left: 0; left: 0;
width: px-to-em(35); width: rem(35px);
height: px-to-em(18); height: rem(18px);
transform: translateY(-50%);
background-color: #fff; background-color: #fff;
border: 1px solid $border-color; border: 1px solid $border-color;
...@@ -55,18 +55,17 @@ $line-height: 1.375em !default; ...@@ -55,18 +55,17 @@ $line-height: 1.375em !default;
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0.6em; top: rem(5px);
left: 2px; left: 2px;
width: px-to-em(14); width: rem(14px);
height: px-to-em(14); height: rem(14px);
transform: translateY(-50%);
background-color: $gray-lightest; background-color: $gray-lightest;
border: 1px solid $border-color; border: 1px solid $border-color;
transition: all 0.3s; transition: all 0.3s;
} }
@at-root input:checked ~ &:after { @at-root input:checked ~ &:after {
transform: translate(px-to-em(17), -50%); transform: translate(rem(17px), 0);
} }
} }
......
src/blocks/fields-group/fields-group.scss
View file @ aa5ab54a
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
margin-bottom: ($line-height / 2); margin-bottom: 1rem;
.btn, .btn,
select, // обычно, не участвует в группировке select, // обычно, не участвует в группировке
......
src/blocks/form/form.pug
View file @ aa5ab54a
...@@ -6,7 +6,20 @@ mixin form(mods) ...@@ -6,7 +6,20 @@ mixin form(mods)
//- Принимает: //- Принимает:
//- mods {string} - список модификаторов //- mods {string} - список модификаторов
//- Вызов: //- Вызов:
+form('mod') +form()
+fieldset('Название1')
+field-text({
helpText: 'Подсказка',
attrs: {
placeholder: 'Пример'
}
})
+field-text({
helpText: 'Подсказка',
attrs: {
placeholder: 'Пример'
}
})
- -
// список модификаторов // список модификаторов
...@@ -29,7 +42,13 @@ mixin fieldset(legend, mods) ...@@ -29,7 +42,13 @@ mixin fieldset(legend, mods)
//- legend {string} - название группы полей //- legend {string} - название группы полей
//- mods {string} - список модификаторов //- mods {string} - список модификаторов
//- Вызов: //- Вызов:
+form('mod') +fieldset('Название1')
+field-text({
helpText: 'Подсказка',
attrs: {
placeholder: 'Пример'
}
})
- -
// список модификаторов // список модификаторов
......
src/blocks/form/form.scss
View file @ aa5ab54a
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий... // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$font-family--headings: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif !default; $font-family--headings: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
$font-size--h3: 1.5em !default; $font-size--h3: rem(24px) !default;
$line-height: 1.375em !default; $line-height: 1.5 !default;
.form { .form {
...@@ -19,7 +19,7 @@ $line-height: 1.375em !default; ...@@ -19,7 +19,7 @@ $line-height: 1.375em !default;
border: 0; border: 0;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: $line-height; margin-bottom: 1rem;
} }
} }
...@@ -27,8 +27,8 @@ $line-height: 1.375em !default; ...@@ -27,8 +27,8 @@ $line-height: 1.375em !default;
display: block; display: block;
width: 100%; width: 100%;
max-width: 100%; // Привет IE max-width: 100%; // Привет IE
margin-top: $line-height; margin-top: 1rem;
margin-bottom: ($line-height / 2); margin-bottom: 1rem;
font-size: $font-size--h3; font-size: $font-size--h3;
font-family: $font-family--headings; font-family: $font-family--headings;
font-weight: 700; font-weight: 700;
......
src/blocks/label/label.scss
View file @ aa5ab54a
...@@ -8,7 +8,7 @@ $color-main: hsl(208, 98%, 43%) !default; ...@@ -8,7 +8,7 @@ $color-main: hsl(208, 98%, 43%) !default;
$text-color: hsl(0, 0%, 10%) !default; $text-color: hsl(0, 0%, 10%) !default;
$border-radius: 3px !default; $border-radius: rem(3px) !default;
.label { .label {
......
src/blocks/loader/loader.scss
View file @ aa5ab54a
...@@ -14,8 +14,8 @@ $gray-lightest: hsl(0, 0%, 90%) !default; ...@@ -14,8 +14,8 @@ $gray-lightest: hsl(0, 0%, 90%) !default;
&:before { &:before {
content: ''; content: '';
display: block; display: block;
width: 3em; width: 3rem;
height: 3em; height: 3rem;
border: 3px solid $gray-lightest; border: 3px solid $gray-lightest;
border-top: 3px solid $gray-lighter; border-top: 3px solid $gray-lighter;
border-radius: 50%; border-radius: 50%;
......
src/blocks/main-nav/main-nav.scss
View file @ aa5ab54a
...@@ -75,7 +75,7 @@ $transition-time: 0.3s !default; ...@@ -75,7 +75,7 @@ $transition-time: 0.3s !default;
&__link { &__link {
display: block; display: block;
padding: 0.5em; padding: 0.5em 1em;
text-decoration: none; text-decoration: none;
background-color: #fff; background-color: #fff;
......
src/blocks/menu/menu.scss
View file @ aa5ab54a
...@@ -12,7 +12,7 @@ $border-color: hsl(0, 0%, 60%) !default; ...@@ -12,7 +12,7 @@ $border-color: hsl(0, 0%, 60%) !default;
min-width: 10em; min-width: 10em;
margin: 0; margin: 0;
padding: 0.3em 0; padding: 0;
list-style: none; list-style: none;
&__item { &__item {
...@@ -20,8 +20,8 @@ $border-color: hsl(0, 0%, 60%) !default; ...@@ -20,8 +20,8 @@ $border-color: hsl(0, 0%, 60%) !default;
&--separator { &--separator {
&:not(:last-child) { &:not(:last-child) {
padding-bottom: 0.3em; padding-bottom: 0.3rem;
margin-bottom: 0.3em; margin-bottom: 0.3rem;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
} }
} }
...@@ -33,11 +33,14 @@ $border-color: hsl(0, 0%, 60%) !default; ...@@ -33,11 +33,14 @@ $border-color: hsl(0, 0%, 60%) !default;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 0.3em 1em; padding: 0.5rem 1rem;
color: $text-color; color: $text-color;
text-decoration: none; text-decoration: none;
&:hover, &:hover,
&:focus {} &:focus {
text-decoration: none;
background-color: $gray-lightest;
}
} }
} }
src/blocks/modal/modal.scss
View file @ aa5ab54a
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
$font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif !default; $font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif !default;
$font-family--headings: $font-family !default; $font-family--headings: $font-family !default;
$font-size--h4: 1.25em !default; $font-size--h4: rem(18px) !default;
$line-height: 1.375em !default; $line-height: 1.5 !default;
$screen-lg: 992px !default; $screen-lg: 992px !default;
...@@ -66,13 +66,13 @@ $z-index-modal: 100 !default; ...@@ -66,13 +66,13 @@ $z-index-modal: 100 !default;
} }
&__header { &__header {
padding: 5px 40px 0 10px; padding: 0 rem(40px) 0 rem(15px);
flex-shrink: 0; flex-shrink: 0;
} }
&__title { &__title {
margin-top: ($line-height / 2); margin-top: 0.5rem;
margin-bottom: ($line-height / 2); margin-bottom: 0.5rem;
font-size: $font-size--h4; font-size: $font-size--h4;
line-height: 1.4; line-height: 1.4;
font-weight: 700; font-weight: 700;
...@@ -86,12 +86,12 @@ $z-index-modal: 100 !default; ...@@ -86,12 +86,12 @@ $z-index-modal: 100 !default;
} }
&__body { &__body {
padding: 0 10px; padding: 0 rem(15px);
flex-grow: 1; flex-grow: 1;
} }
&__footer { &__footer {
padding: 10px; padding: rem(15px);
flex-shrink: 0; flex-shrink: 0;
} }
......
src/blocks/off-canvas/off-canvas.scss
View file @ aa5ab54a
...@@ -41,6 +41,7 @@ $off-canvas-width: 250px !default; // ширина этого бло ...@@ -41,6 +41,7 @@ $off-canvas-width: 250px !default; // ширина этого бло
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: #fff;
background-color: transparent;
} }
} }
} }
......
src/blocks/pagination/pagination.scss
View file @ aa5ab54a
...@@ -2,8 +2,6 @@ ...@@ -2,8 +2,6 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий... // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$line-height: 1.375em !default;
$text-color: hsl(0, 0%, 10%) !default; $text-color: hsl(0, 0%, 10%) !default;
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
...@@ -14,13 +12,13 @@ $border-color: hsl(0, 0%, 60%) !default; ...@@ -14,13 +12,13 @@ $border-color: hsl(0, 0%, 60%) !default;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: $line-height; margin-top: 1rem;
margin-bottom: $line-height; margin-bottom: 1rem;
&__item { &__item {
display: block; display: block;
padding: 0.5em; padding: 0.5rem;
min-width: 2.5em; min-width: 2.5rem;
border: 1px solid $border-color; border: 1px solid $border-color;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
......
src/blocks/pie-chart/pie-chart.scss
View file @ aa5ab54a
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$text-color: hsl(0, 0%, 10%) !default; $text-color: hsl(0, 0%, 10%) !default;
$font-size: 14px !default; $font-size: 1rem !default;
$gray-light: hsl(0, 0%, 60%) !default; $gray-light: hsl(0, 0%, 60%) !default;
$gray-lighter: hsl(0, 0%, 80%) !default; $gray-lighter: hsl(0, 0%, 80%) !default;
......
src/blocks/progress/progress.scss
View file @ aa5ab54a
...@@ -5,9 +5,7 @@ ...@@ -5,9 +5,7 @@
$gray-lightest: hsl(0, 0%, 90%) !default; $gray-lightest: hsl(0, 0%, 90%) !default;
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.375em !default; $border-radius: rem(3px) !default;
$border-radius: 3px !default;
$transition-time: 0.3s !default; $transition-time: 0.3s !default;
...@@ -15,8 +13,8 @@ $transition-time: 0.3s !default; ...@@ -15,8 +13,8 @@ $transition-time: 0.3s !default;
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
margin-top: $line-height; margin-top: 1rem;
margin-bottom: $line-height; margin-bottom: 1rem;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: $border-radius; border-radius: $border-radius;
text-align: center; text-align: center;
......
src/blocks/table-responsive/table-responsive.scss
View file @ aa5ab54a
...@@ -4,8 +4,6 @@ ...@@ -4,8 +4,6 @@
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.375em !default;
$screen-xs: 0 !default; $screen-xs: 0 !default;
$screen-sm: 480px !default; $screen-sm: 480px !default;
$screen-md: 768px !default; $screen-md: 768px !default;
...@@ -17,8 +15,7 @@ $screen-xxl: 1800px !default; ...@@ -17,8 +15,7 @@ $screen-xxl: 1800px !default;
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
margin-top: $line-height; margin-bottom: 1rem;
margin-bottom: $line-height;
border-collapse: collapse; border-collapse: collapse;
border: 1px solid $border-color; border: 1px solid $border-color;
width: 100%; width: 100%;
......
src/blocks/table/table.scss
View file @ aa5ab54a
...@@ -6,9 +6,7 @@ $text-color--muted: hsl(0, 0%, 50%) !default; ...@@ -6,9 +6,7 @@ $text-color--muted: hsl(0, 0%, 50%) !default;
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
$font-size--small: 0.75em !default; $font-size--small: 80% !default;
$line-height: 1.375em !default;
$field-padding-vertical: 0.3em !default; $field-padding-vertical: 0.3em !default;
$field-padding-horizontal: 0.7em !default; $field-padding-horizontal: 0.7em !default;
...@@ -19,6 +17,7 @@ $field-padding-horizontal: 0.7em !default; ...@@ -19,6 +17,7 @@ $field-padding-horizontal: 0.7em !default;
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: 1rem;
overflow-x: auto; overflow-x: auto;
border: 1px solid $border-color; border: 1px solid $border-color;
...@@ -65,7 +64,7 @@ $field-padding-horizontal: 0.7em !default; ...@@ -65,7 +64,7 @@ $field-padding-horizontal: 0.7em !default;
caption { caption {
caption-side: top; caption-side: top;
text-align: left; text-align: left;
padding: 0.4em $field-padding-horizontal; padding: 0.4rem $field-padding-horizontal;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
font-size: $font-size--small; font-size: $font-size--small;
line-height: 1em; line-height: 1em;
......
src/blocks/tabs/tabs.scss
View file @ aa5ab54a
...@@ -9,7 +9,7 @@ $text-color--muted: hsl(0, 0%, 50%) !default; ...@@ -9,7 +9,7 @@ $text-color--muted: hsl(0, 0%, 50%) !default;
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.375em !default; $line-height: 1.5 !default;
$field-padding-vertical: 0.3em !default; $field-padding-vertical: 0.3em !default;
$field-padding-horizontal: 0.7em !default; $field-padding-horizontal: 0.7em !default;
...@@ -18,8 +18,8 @@ $field-padding-horizontal: 0.7em !default; ...@@ -18,8 +18,8 @@ $field-padding-horizontal: 0.7em !default;
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
margin-top: $line-height; margin-top: 1rem;
margin-bottom: $line-height; margin-bottom: 1rem;
&__links { &__links {
margin: 0; margin: 0;
...@@ -59,8 +59,12 @@ $field-padding-horizontal: 0.7em !default; ...@@ -59,8 +59,12 @@ $field-padding-horizontal: 0.7em !default;
&--active { &--active {
@media (min-width: $screen-md) {
border-bottom: 1px solid transparent;
}
#{$block-name}__link { #{$block-name}__link {
color: $text-color; color: $text-color !important;
background-color: #fff; background-color: #fff;
} }
} }
...@@ -77,6 +81,10 @@ $field-padding-horizontal: 0.7em !default; ...@@ -77,6 +81,10 @@ $field-padding-horizontal: 0.7em !default;
&:focus { &:focus {
color: $text-color--muted; color: $text-color--muted;
} }
&:visited {
color: $text-color--muted;
}
} }
&__content-wrapper { &__content-wrapper {
...@@ -95,6 +103,10 @@ $field-padding-horizontal: 0.7em !default; ...@@ -95,6 +103,10 @@ $field-padding-horizontal: 0.7em !default;
display: none; display: none;
} }
& > *:last-child {
margin-bottom: 0;
}
&--active { &--active {
.js & { .js & {
......
src/blocks/to-top/to-top.scss
View file @ aa5ab54a
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий... // модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$transition-time: 0.3s !default;
.to-top { .to-top {
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
...@@ -10,8 +12,8 @@ ...@@ -10,8 +12,8 @@
right: 1rem; right: 1rem;
bottom: 1rem; bottom: 1rem;
z-index: 1; z-index: 1;
width: 4rem; width: 3rem;
height: 4rem; height: 3rem;
border-radius: 50%; border-radius: 50%;
background-color: #000; background-color: #000;
color: transparent; color: transparent;
......
src/blocks/tooltip/tooltip.scss
View file @ aa5ab54a
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
$gray: hsl(0, 0%, 50%) !default; $gray: hsl(0, 0%, 50%) !default;
$line-height: 1.375em !default; $line-height: 1.5 !default;
.tooltip { .tooltip {
...@@ -16,8 +16,8 @@ $line-height: 1.375em !default; ...@@ -16,8 +16,8 @@ $line-height: 1.375em !default;
&__btn { &__btn {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
width: $line-height; width: ($line-height * 1em);
height: $line-height; height: ($line-height * 1em);
overflow: hidden; overflow: hidden;
border: none; border: none;
color: transparent; color: transparent;
...@@ -32,9 +32,9 @@ $line-height: 1.375em !default; ...@@ -32,9 +32,9 @@ $line-height: 1.375em !default;
position: absolute; position: absolute;
top: calc(100% + 8px); top: calc(100% + 8px);
left: 0; left: 0;
min-width: 150px; min-width: rem(150px);
max-width: 250px; max-width: rem(250px);
padding: 10px 15px; padding: 0.8rem 1rem;
background-color: #fff; background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
......
src/blocks/typo/readme.md
View file @ aa5ab54a
...@@ -65,19 +65,19 @@ ...@@ -65,19 +65,19 @@
</tr> </tr>
<tr> <tr>
<td><code>&lt;strong></code></td> <td><code>&lt;strong></code></td>
<td>**действительно значимый текст**</td> <td><strong>действительно значимый текст</strong></td>
</tr> </tr>
<tr> <tr>
<td><code>&lt;b></code></td> <td><code>&lt;b></code></td>
<td>**просто выделенный текст, лид**</td> <td><b>просто выделенный текст, лид</b></td>
</tr> </tr>
<tr> <tr>
<td><code>&lt;i></code></td> <td><code>&lt;i></code></td>
<td>_иностранное слово или термин_</td> <td><i>иностранное слово или термин</i></td>
</tr> </tr>
<tr> <tr>
<td><code>&lt;em></code></td> <td><code>&lt;em></code></td>
<td>_эмфатическое ударение_</td> <td><em>эмфатическое ударение</em></td>
</tr> </tr>
<tr> <tr>
<td><code>&lt;s></code></td> <td><code>&lt;s></code></td>
......
src/blocks/typo/typo.scss
View file @ aa5ab54a
...@@ -86,7 +86,7 @@ h6 { ...@@ -86,7 +86,7 @@ h6 {
h1, h1,
h2, h2,
h3 { h3 {
margin-top: 2rem; margin-top: 3rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
...@@ -96,7 +96,7 @@ h3 { ...@@ -96,7 +96,7 @@ h3 {
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0.5rem; margin-top: 1rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
...@@ -156,7 +156,7 @@ address { ...@@ -156,7 +156,7 @@ address {
ul, ul,
ol { ol {
padding-left: 1.2em; padding-left: 1.5rem;
} }
ol ol, ol ol,
...@@ -179,7 +179,7 @@ dd { ...@@ -179,7 +179,7 @@ dd {
margin-left: 0; margin-left: 0;
@media (min-width: $screen-sm) { @media (min-width: $screen-sm) {
margin-left: 1.8em; margin-left: 1.5rem;
} }
& + dt { & + dt {
...@@ -188,8 +188,8 @@ dd { ...@@ -188,8 +188,8 @@ dd {
} }
hr { hr {
margin-top: $line-height; margin-top: 2rem;
margin-bottom: $line-height; margin-bottom: 2rem;
border: 0; border: 0;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
} }
......
src/scss/blocks-library.scss
View file @ aa5ab54a
...@@ -3,22 +3,24 @@ ...@@ -3,22 +3,24 @@
.blocks-library { .blocks-library {
&__title {
font-weight: 400;
}
&__item { &__item {
position: relative; position: relative;
padding: 1rem; padding: 1rem;
border: 2px dashed $gray-lighter; border: 2px dashed $gray-lighter;
margin: 2.5em 0; margin: 2.5rem 0;
@media (min-width: $screen-md) { @media (min-width: $screen-md) {
padding: 1.5rem 2rem 1.5rem 5rem; padding: 1.5rem 2rem 0.5rem 3rem;
// min-height: 18rem;
margin: 5rem 0;
} }
&:before { &:before {
content: '.' attr(data-id); content: '.' attr(data-id);
position: absolute; position: absolute;
top: -1.2em; top: -1.2rem;
left: 0; left: 0;
font-weight: 700; font-weight: 700;
text-transform: lowercase; text-transform: lowercase;
...@@ -30,8 +32,8 @@ ...@@ -30,8 +32,8 @@
color: $gray-lighter; color: $gray-lighter;
@media (min-width: $screen-md) { @media (min-width: $screen-md) {
left: 2.5rem; left: 1.4rem;
top: 20rem; top: 20.5rem;
width: 21rem; width: 21rem;
transform: rotate(-90deg); transform: rotate(-90deg);
transform-origin: 0 100%; transform-origin: 0 100%;
...@@ -40,62 +42,59 @@ ...@@ -40,62 +42,59 @@
} }
&__item-title { &__item-title {
margin: 0.3em 0; margin: 0 0 0.5rem;
} }
&__item-title-link { &__item-title-link {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 0.8rem;
svg { svg {
display: block; display: block;
fill: $gray;
} }
} }
&__sub-item {}
&__sub-item-title {}
&__code-wrapper { &__code-wrapper {
position: relative; position: relative;
} }
&__code-show-trigger { &__code-show-trigger {
display: block; display: block;
width: 3rem; width: 30px;
height: 20px; height: 30px;
cursor: pointer; cursor: pointer;
margin-bottom: 0.3em; margin-bottom: 0.3em;
@media (min-width: $screen-md) { @media (min-width: $screen-md) {
position: absolute; position: absolute;
top: -1.8rem; top: -1.65rem;
left: -4rem; left: -2.5rem;
} }
} }
&__code-icon { &__code-icon {
display: block; display: block;
width: 3rem; width: 30px;
height: 2px; height: 3px;
background-color: $gray-light; background-color: $gray-lighter;
&:before, &:before,
&:after { &:after {
position: absolute; position: absolute;
background-color: $gray-light; background-color: $gray-lighter;
width: 3rem; width: 30px;
height: 2px; height: 3px;
left: 0; left: 0;
content: ''; content: '';
} }
&:before { &:before {
top: 8px; top: 10px;
} }
&:after { &:after {
top: 16px; top: 20px;
} }
} }
...@@ -115,7 +114,6 @@ ...@@ -115,7 +114,6 @@
} }
pre { pre {
// margin: 0;
max-height: 500px; max-height: 500px;
} }
} }
......
src/scss/variables.scss
View file @ aa5ab54a
...@@ -34,18 +34,18 @@ $border-color: $gray-light; ...@@ -34,18 +34,18 @@ $border-color: $gray-light;
// Базовая типографика // Базовая типографика
$font-size--root: 16px !default; $font-size--root: 16px;
$font-size: 1rem !default; // rem(16px) $font-size: 1rem; // rem(16px)
$font-size--h1: rem(40px) !default; $font-size--h1: rem(40px);
$font-size--h2: rem(32px) !default; $font-size--h2: rem(32px);
$font-size--h3: rem(24px) !default; $font-size--h3: rem(24px);
$font-size--h4: rem(18px) !default; $font-size--h4: rem(18px);
$font-size--h5: rem(16px) !default; $font-size--h5: rem(16px);
$font-size--h6: rem(16px) !default; $font-size--h6: rem(16px);
$font-size--small: 80% !default; $font-size--small: 80%;
$line-height: 1.5; $line-height: 1.5;
...@@ -76,7 +76,7 @@ $container-xxl: $screen-xxl - 30; ...@@ -76,7 +76,7 @@ $container-xxl: $screen-xxl - 30;
// Модульная сетка // Модульная сетка
$grid-columns: 12; $grid-columns: 12;
$grid-gutter-width: 30px; $grid-gutter-width: rem(30px);
...@@ -85,7 +85,7 @@ $grid-gutter-width: 30px; ...@@ -85,7 +85,7 @@ $grid-gutter-width: 30px;
$field-padding-vertical: 0.3em; $field-padding-vertical: 0.3em;
$field-padding-horizontal: 0.7em; $field-padding-horizontal: 0.7em;
$border-radius: 3px; $border-radius: rem(3px);
$opacity: 0.7; $opacity: 0.7;
$transition-time: 0.3s; $transition-time: 0.3s;
$shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3); $shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3);
......
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