Skip to content

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

Рефакторинг собственных стилей

parent 4c4a54d7
Hide whitespace changes
Inline Side-by-side
Showing with 277 additions and 112 deletions
src/blocks/alert/alert--danger-invert.less
View file @ e622ccdf
......@@ -14,10 +14,10 @@
color: inherit;
text-decoration: underline;
&:hover, &:focus {
&:hover,
&:focus {
text-decoration: none;
}
}
}
}
src/blocks/alert/alert--icon.less
View file @ e622ccdf
......@@ -28,6 +28,5 @@
margin-left: 2em;
}
}
}
}
src/blocks/alert/alert--success-invert.less
View file @ e622ccdf
......@@ -14,10 +14,10 @@
color: inherit;
text-decoration: underline;
&:hover, &:focus {
&:hover,
&:focus {
text-decoration: none;
}
}
}
}
src/blocks/alert/alert.less
View file @ e622ccdf
......@@ -14,9 +14,11 @@
margin-bottom: 1em;
> * {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
......@@ -37,31 +39,34 @@
}
&--danger {
background-color: lighten(saturate(spin(@color-danger, 2.2609), 35.5140%), 38%);
background-color: lighten(saturate(spin(@color-danger, 2.2609), 35.514%), 38%);
border: 1px solid lighten(saturate(spin(@color-danger, 8.2609), 6.9426%), 25.4902%);
color: @color-danger;
a {
color: inherit;
text-decoration: underline;
&:hover, &:focus {
&:hover,
&:focus {
text-decoration: none;
}
}
}
&--success {
background-color: lighten(saturate(spin(@color-success, 2.2609), 35.5140%), 38%);
background-color: lighten(saturate(spin(@color-success, 2.2609), 35.514%), 38%);
border: 1px solid lighten(saturate(spin(@color-success, 8.2609), 6.9426%), 25.4902%);
color: @color-success;
a {
color: inherit;
text-decoration: underline;
&:hover, &:focus {
&:hover,
&:focus {
text-decoration: none;
}
}
}
}
src/blocks/alert/alert__close.less
View file @ e622ccdf
......@@ -27,10 +27,10 @@
margin-top: 0;
}
&:hover, &:focus {
&:hover,
&:focus {
opacity: 1;
background-color: rgba(255,255,255,0.15);
background-color: rgba(255, 255, 255, 0.15);
}
}
}
src/blocks/blocks-library/blocks-library.less
View file @ e622ccdf
......@@ -2,6 +2,7 @@
.blocks-library {
&__item {
position: relative;
padding: 1rem;
......@@ -114,19 +115,20 @@
position: relative;
@media (min-width: @screen-md) {
&:hover {
.js-font-resizer__btns {
opacity: 1;
}
}
}
}
.js-font-resizer__btns {
margin-bottom: 1em;
font-size: 2rem;
transition: opacity .3s;
transition: opacity 0.3s;
@media (min-width: @screen-md) {
opacity: 0.2;
......
src/blocks/btn-group/btn-group.less
View file @ e622ccdf
......@@ -24,6 +24,7 @@
> * {
&:not(:last-child) {
.btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
......
src/blocks/code/code.less
View file @ e622ccdf
......@@ -43,7 +43,7 @@
.hljs-selector-tag,
.hljs-subst {
color: #333;
font-weight: bold;
font-weight: 700;
}
.hljs-number,
......@@ -63,24 +63,24 @@
.hljs-section,
.hljs-selector-id {
color: #900;
font-weight: bold;
font-weight: 700;
}
.hljs-subst {
font-weight: normal;
font-weight: 400;
}
.hljs-type,
.hljs-class .hljs-title {
color: #458;
font-weight: bold;
font-weight: 700;
}
.hljs-tag,
.hljs-name,
.hljs-attribute {
color: #2f6f9f;
font-weight: normal;
font-weight: 400;
}
.hljs-regexp,
......@@ -100,7 +100,7 @@
.hljs-meta {
color: #999;
font-weight: bold;
font-weight: 700;
}
.hljs-deletion {
......@@ -116,14 +116,16 @@
}
.hljs-strong {
font-weight: bold;
font-weight: 700;
}
.less {
.hljs-selector-tag {
font-weight: 400;
}
.hljs-variable {
color: #F60;
color: #f60;
}
}
src/blocks/dl-horizontal/dl-horizontal.less
View file @ e622ccdf
......@@ -4,7 +4,9 @@
.dl-horizontal {
@media (min-width: @screen-md) {
& > dt {
width: 19rem;
float: left;
......
src/blocks/dropdown/dropdown.less
View file @ e622ccdf
......@@ -8,6 +8,7 @@
display: inline-block;
&--open & {
&__menu {
z-index: @z-index-dropdown;
visibility: visible;
......@@ -76,7 +77,8 @@
color: @text-color;
text-decoration: none;
&:hover, &:focus {
&:hover,
&:focus {
background-color: @gray-lighter;
}
}
......@@ -88,6 +90,7 @@
}
&__menu-separator {
&:not(:last-child) {
padding-bottom: 0.3em;
margin-bottom: 0.3em;
......
src/blocks/field-file/field-file.less
View file @ e622ccdf
......@@ -60,12 +60,13 @@
border-bottom-left-radius: @border-radius;
}
&:hover, &:focus {
&:hover,
&:focus {
&:before {
background-color: darken(@gray-lighter, 10%); // как у обычных кнопок
}
}
}
&__help-text {
......
src/blocks/field-range/field-range.less
View file @ e622ccdf
......@@ -26,11 +26,11 @@
background: none;
font-size: inherit;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
&::-webkit-slider-runnable-track,
&::-webkit-slider-thumb {
-webkit-appearance: none;
-webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
}
&:focus {
......@@ -45,7 +45,6 @@
// Да, да, и это — локальная примесь.
.field-range-runnable-track() {
box-sizing: border-box;
border: 0;
width: 100%;
height: 0.75em;
border-radius: @border-radius;
......@@ -57,9 +56,11 @@
&::-webkit-slider-runnable-track {
.field-range-runnable-track(); // локальная примесь!
}
&::-moz-range-track {
.field-range-runnable-track(); // локальная примесь!
}
&::-ms-track {
.field-range-runnable-track(); // локальная примесь!
color: transparent;
......@@ -71,7 +72,6 @@
// Да, да, и это — локальная примесь.
.field-range-slider-thumb() {
box-sizing: border-box;
border: 0;
padding: 0;
width: 2em;
height: 2em;
......@@ -86,12 +86,15 @@
margin-top: -0.68em;
.field-range-slider-thumb(); // локальная примесь!
}
&::-moz-range-thumb {
.field-range-slider-thumb(); // локальная примесь!
}
&::-ms-thumb {
.field-range-slider-thumb(); // локальная примесь!
}
&::-ms-fill-lower,
&::-ms-tooltip {
display: none;
......
src/blocks/field-range/field-range__line.less
View file @ e622ccdf
......@@ -7,8 +7,8 @@
&__line {
position: relative;
margin-left: e("calc(1em + 1px)");
margin-right: e("calc(1em + 1px)");
margin-left: e('calc(1em + 1px)');
margin-right: e('calc(1em + 1px)');
display: flex;
justify-content: space-between;
}
......@@ -30,7 +30,7 @@
position: absolute;
right: 0;
transform: translateX(50%);
bottom: e("calc(100% + 0.3em)");
bottom: e('calc(100% + 0.3em)');
font-size: @font-size--small;
line-height: 1;
white-space: nowrap;
......@@ -41,7 +41,6 @@
left: 0;
bottom: 0;
}
}
}
src/blocks/field-text/field-text.less
View file @ e622ccdf
......@@ -28,7 +28,7 @@
background-color: #fff;
border: 1px solid @border-color;
border-radius: @border-radius;
-webkit-appearance: textfield;
appearance: textfield;
&:focus {
.focus();
......@@ -42,7 +42,7 @@
&[type='search']::-webkit-search-cancel-button,
&[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
-webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
}
&[type='number']::-webkit-inner-spin-button,
......@@ -62,7 +62,7 @@
textarea& {
height: auto;
min-height: (@line-height * 2) + @field-padding-top + @field-padding-bottom + .2; // .2 — поправка на бордюр
min-height: (@line-height * 2) + @field-padding-top + @field-padding-bottom + 0.2; // 0.2 — поправка на бордюр
resize: vertical;
}
}
......
src/blocks/fields-group/fields-group.less
View file @ e622ccdf
......@@ -45,6 +45,7 @@
// &--dropdown {} // Вынесено в отдельный файл, т.к. ситуация специфическая, редкая
&:not(:last-child) {
.field-text__input,
.field-select__select {
border-top-right-radius: 0;
......@@ -69,7 +70,8 @@
position: relative;
z-index: 0;
&:hover, &:focus {
&:hover,
&:focus {
z-index: 1;
}
}
......
src/blocks/fields-group/fields-group__item--dropdown.less
View file @ e622ccdf
......@@ -4,9 +4,13 @@
.fields-group {
&__item {
&--dropdown {
&:not(:last-child) {
.btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
......
src/blocks/form/form--horizontal.less
View file @ e622ccdf
......@@ -56,11 +56,11 @@
padding-bottom: 0.45em;
min-height: 7.1em;
}
}
.field-checkbox__title,
.field-radio__title {
&:empty {
margin-bottom: 0;
}
......
src/blocks/form/form--line.less
View file @ e622ccdf
......@@ -6,6 +6,7 @@
.form {
&--line {
&:not(:last-child) {
margin-bottom: 0;
}
......@@ -54,7 +55,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-top: e("calc(@{field-padding-top} + 1px)"); // 1px — бордюр инпута
padding-top: e('calc(@{field-padding-top} + 1px)'); // 1px — бордюр инпута
}
.field-checkbox__title,
......@@ -67,12 +68,9 @@
.field-radio__name,
.field-toggler__name {
margin-right: 0.6em;
margin-top: e("calc(@{field-padding-top} + 1px)");
margin-bottom: e("calc(@{field-padding-top} + 1px)");
margin-top: e('calc(@{field-padding-top} + 1px)');
margin-bottom: e('calc(@{field-padding-top} + 1px)');
}
}
}
}
src/blocks/form/form.less
View file @ e622ccdf
......@@ -31,5 +31,4 @@
margin-top: @line-height;
margin-bottom: (@line-height / 2);
}
}
src/blocks/label/label--tag.less
View file @ e622ccdf
// Для импорта в диспетчер подключений: @import './src/blocks/label/label--tag.less';
@import "../../less/variables.less"; // только для удобства обращения к переменным
@import '../../less/variables.less'; // только для удобства обращения к переменным
.label {
......@@ -16,7 +16,7 @@
// Изображение: svg_to_bg/tag-bg.svg
// ВНИМАНИЕ! В строку с URL-кодированным SVG интерполирована переменная с цветом!
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="@{gray-lighter}" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
background-image: url('data:image/svg+xml,@{svg}');
background-repeat: no-repeat;
background-size: auto 100%;
background-position: 100% 0;
......@@ -30,19 +30,19 @@
.label--main& {
// ВНИМАНИЕ! В строку с URL-кодированным SVG интерполирована переменная с цветом!
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="@{color-main}" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
background-image: url('data:image/svg+xml,@{svg}');
}
.label--danger& {
// ВНИМАНИЕ! В строку с URL-кодированным SVG интерполирована переменная с цветом!
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="@{color-danger}" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
background-image: url('data:image/svg+xml,@{svg}');
}
.label--success& {
// ВНИМАНИЕ! В строку с URL-кодированным SVG интерполирована переменная с цветом!
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="24" viewBox="0 0 15 24"><path fill="@{color-success}" d="M12.03 0L0 12l12.03 12H15V0z"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
background-image: url('data:image/svg+xml,@{svg}');
}
}
......@@ -56,7 +56,7 @@
width: 0.5em;
height: 0.5em;
border-radius: 50%;
box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.3);
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);
}
}
}
src/blocks/label/label.less
View file @ e622ccdf
......@@ -19,7 +19,8 @@
white-space: nowrap;
border-radius: @border-radius;
&:hover, &:focus {
&:hover,
&:focus {
color: @text-color;
text-decoration: none;
}
......@@ -32,7 +33,8 @@
background-color: @color-main;
color: #fff;
&:hover, &:focus {
&:hover,
&:focus {
color: #fff;
}
......@@ -45,7 +47,8 @@
background-color: @color-danger;
color: #fff;
&:hover, &:focus {
&:hover,
&:focus {
color: #fff;
}
......@@ -58,7 +61,8 @@
background-color: @color-success;
color: #fff;
&:hover, &:focus {
&:hover,
&:focus {
color: #fff;
}
......@@ -66,5 +70,4 @@
fill: #fff;
}
}
}
src/blocks/list-nums/list-nums--main.less
View file @ e622ccdf
......@@ -6,6 +6,7 @@
.list-nums {
&--main {
& > li {
&:before {
......@@ -14,5 +15,4 @@
}
}
}
}
src/blocks/list-nums/list-nums.less
View file @ e622ccdf
......@@ -14,6 +14,7 @@
& > li,
& > &__item {
&:before {
content: counter(li) '.' counter(li-in);
counter-increment: li-in;
......
src/blocks/list-nums/list-nums__item.less
View file @ e622ccdf
......@@ -5,8 +5,11 @@
.list-nums {
& > &__item {
&--main {
&:before {
color: #fff;
background-color: @color-main;
......
src/blocks/loader/loader.less
View file @ e622ccdf
......@@ -13,7 +13,7 @@
// background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/loader/img_to_bg/loader.svg');
// ВНИМАНИЕ! В строку с URL-кодированным SVG интерполированы переменные с цветом!
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path d="M15 0A15 15 0 0 0 0 15a15 15 0 0 0 15 15 15 15 0 0 0 15-15h-1.707c0 3.48-1.432 6.938-3.893 9.398-2.46 2.46-5.92 3.895-9.4 3.895-3.48 0-6.94-1.434-9.4-3.895C3.14 21.938 1.707 18.48 1.707 15c0-3.48 1.432-6.94 3.893-9.4 2.46-2.46 5.92-3.893 9.4-3.893V0z" fill="@{gray-light}"/><path d="M15 0v1.707c3.48 0 6.94 1.432 9.4 3.893 2.46 2.46 3.893 5.92 3.893 9.4H30A15 15 0 0 0 15 0z" fill="@{gray}"/></svg>');
background-image: url("data:image/svg+xml,@{svg}");
background-image: url('data:image/svg+xml,@{svg}');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
......@@ -24,6 +24,12 @@
@keyframes loader-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
src/blocks/main-nav/main-nav.less
View file @ e622ccdf
......@@ -59,7 +59,6 @@
top: 0;
left: 100%;
background-color: @gray-lightest;
padding-top: 0.3em;
width: auto;
padding-top: 0;
border-top: 1px solid @gray-lighter;
......@@ -99,6 +98,7 @@
}
&:hover {
& > .main-nav__nested-lvl {
display: block;
}
......@@ -116,7 +116,8 @@
text-decoration: none;
cursor: pointer;
&:hover, &:focus {
&:hover,
&:focus {
color: @text-color;
background-color: @gray-lighter;
text-decoration: none;
......
src/blocks/navbar/navbar.less
View file @ e622ccdf
......@@ -40,7 +40,8 @@
color: @text-color;
text-decoration: none;
&:hover, &:focus {
&:hover,
&:focus {
text-decoration: none;
color: @text-color;
}
......@@ -63,6 +64,7 @@
// На большой ширине показываем вне зависимости от работы JS
.js &,
.no-js & {
@media (min-width: @screen-lg) {
display: flex !important; // он может иметь инлайновый display: none из-за JS
}
......
src/blocks/step-list/step-list.less
View file @ e622ccdf
......@@ -38,6 +38,7 @@
// На узких ширинах показываем цифру в заголовке
& .step-list__title {
&:before {
content: counter(step-list) '. ';
counter-increment: step-list;
......@@ -51,18 +52,21 @@
}
&--main {
.step-list__title {
border-color: @color-main;
}
}
&--danger {
.step-list__title {
border-color: @color-danger;
}
}
&--success {
.step-list__title {
border-color: @color-success;
}
......@@ -81,5 +85,4 @@
&__text {
margin-bottom: 2rem;
}
}
src/blocks/table-responsive-rotate/table-responsive-rotate.less
View file @ e622ccdf
......@@ -44,7 +44,9 @@
}
tfoot {
tr:last-child {
th,
td {
border-right: 0;
......
src/blocks/table-responsive-scroll/table-responsive-scroll.less
View file @ e622ccdf
......@@ -17,10 +17,16 @@
width: 100%;
}
tbody, thead, tfoot {
tbody,
thead,
tfoot {
&:last-child {
tr:last-child {
td, th {
td,
th {
border-bottom: 0;
}
}
......
src/blocks/table/table--hover.less
View file @ e622ccdf
......@@ -6,11 +6,12 @@
.table {
&--hover {
tbody {
tr:hover {
background-color: @gray-lightest;
}
}
}
}
src/blocks/table/table--not-greed.less
View file @ e622ccdf
......@@ -8,5 +8,4 @@
&--not-greed {
width: auto;
}
}
src/blocks/table/table--striped.less
View file @ e622ccdf
......@@ -6,11 +6,12 @@
.table {
&--striped {
tbody {
tr:nth-child(2n) {
background-color: @gray-lightest;
}
}
}
}
src/blocks/table/table.less
View file @ e622ccdf
......@@ -4,7 +4,6 @@
.table {
border: 0;
border-collapse: collapse;
width: 100%;
border: 1px solid @border-color;
......
src/blocks/toggler-burger/toggler-burger.less
View file @ e622ccdf
......@@ -21,6 +21,7 @@
border-radius: @border-radius;
&--open {
.toggler-burger__icon {
transition: background 0.2s 0;
background: transparent;
......
src/docs-files/docs.less
View file @ e622ccdf
* {box-sizing: border-box;}
body{margin: 0; font-size: 14px; font-family: 'Open Sans', sans-serif; line-height: 1.3;min-width: 320px; color: #333;}
a{color: #0000EE;text-decoration: underline;&:hover{text-decoration: none;}}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
line-height: 1.3;
min-width: 320px;
color: #333;
}
a {
color: #0000ee;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
.docs-header {
position: fixed;
......@@ -8,7 +26,7 @@ a{color: #0000EE;text-decoration: underline;&:hover{text-decoration: none;}}
left: 0;
right: 0;
min-height: 50px;
background-color: rgba(0,0,0,1);
background-color: rgba(0, 0, 0, 1);
color: #fff;
&__inner {
......@@ -38,7 +56,7 @@ a{color: #0000EE;text-decoration: underline;&:hover{text-decoration: none;}}
.docs-search {
margin-right: 0.5em;
input[type="text"] {
input[type='text'] {
border: 1px solid #555;
padding: 0.5em;
margin: 0;
......@@ -107,7 +125,7 @@ a{color: #0000EE;text-decoration: underline;&:hover{text-decoration: none;}}
font-size: 0.8em;
text-align: center;
cursor: pointer;
color: #0000EE;
color: #0000ee;
margin: 0;
padding: 1em 0;
......@@ -136,7 +154,7 @@ a{color: #0000EE;text-decoration: underline;&:hover{text-decoration: none;}}
&__demo {
display: block;
background-color: #F4F4F4;
background-color: #f4f4f4;
padding: 1em;
border: 1px solid #ddd;
}
......@@ -149,7 +167,7 @@ a{color: #0000EE;text-decoration: underline;&:hover{text-decoration: none;}}
width: 100%;
margin: 0;
overflow-x: auto;
background-color: #F4F4F4;
background-color: #f4f4f4;
padding: 1em;
border: 1px solid #ddd;
white-space: normal;
......
src/less/global/global-grid.less
View file @ e622ccdf
......@@ -10,41 +10,58 @@
.row();
}
// Классы модульной сетки для XS — срабатывают на всех ширинах
.make-column-list-general-rules(xs); // список всех селекторов .col-xs-... и их обще свойства
.make-columns(@grid-columns, xs); // ширины для каждого селектора .col-xs-... отдельно
.make-offsets(@grid-columns, xs); // левые отступы для каждого селектора .col-xs-offset-...
// Классы модульной сетки для SM — срабатывают на ширине @screen-sm (по умолчанию: 480px)
.make-column-list-general-rules(sm); // список всех селекторов .col-sm-... и их обще свойства
@media (min-width: @screen-sm) {
.make-columns(@grid-columns, sm); // ширины для каждого селектора .col-sm-... отдельно
.make-offsets(@grid-columns, sm); // левые отступы для каждого селектора .col-sm-offset-...
}
// Классы модульной сетки для MD — срабатывают на ширине @screen-md (по умолчанию: 768px)
.make-column-list-general-rules(md); // список всех селекторов .col-md-... и их обще свойства
@media (min-width: @screen-md) {
.make-columns(@grid-columns, md); // ширины для каждого селектора .col-md-... отдельно
.make-offsets(@grid-columns, md); // левые отступы для каждого селектора .col-md-offset-...
}
// Классы модульной сетки для LG — срабатывают на ширине @screen-lg (по умолчанию: 992px)
.make-column-list-general-rules(lg); // список всех селекторов .col-lg-... и их обще свойства
@media (min-width: @screen-lg) {
.make-columns(@grid-columns, lg); // ширины для каждого селектора .col-lg-... отдельно
.make-offsets(@grid-columns, lg); // левые отступы для каждого селектора .col-lg-offset-...
}
// Классы модульной сетки для XL — срабатывают на ширине @screen-xl (по умолчанию: 1200px)
.make-column-list-general-rules(xl); // список всех селекторов .col-xl-... и их обще свойства
@media (min-width: @screen-xl) {
.make-columns(@grid-columns, xl); // ширины для каждого селектора .col-xl-... отдельно
.make-offsets(@grid-columns, xl); // левые отступы для каждого селектора .col-xl-offset-...
}
// Классы модульной сетки для XXL — срабатывают на ширине @screen-xxl (по умолчанию: 1890px)
// .make-column-list-general-rules(xxl); // список всех селекторов .col-xxl-... и их обще свойства
//
// @media (min-width: @screen-xxl) {
// .make-columns(@grid-columns, xxl); // ширины для каждого селектора .col-xxl-... отдельно
// .make-offsets(@grid-columns, xxl); // левые отступы для каждого селектора .col-xxl-offset-...
......
src/less/global/global-print.less
View file @ e622ccdf
@media print {
*,
*:before,
*:after {
......
src/less/global/global-scaffolding.less
View file @ e622ccdf
......@@ -16,7 +16,8 @@
// Make viewport responsive
// see http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@at-root {
@-ms-viewport {
@-ms-viewport { /* stylelint-disable-line at-rule-no-vendor-prefix */
width: device-width;
}
}
......@@ -56,7 +57,9 @@ textarea {
// Базис
//------------------------------------------------------------------------------
*, *:before, *:after {
*,
*:before,
*:after {
box-sizing: inherit;
}
......@@ -65,10 +68,9 @@ html {
font-size: 8px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-overflow-style: scrollbar;
-ms-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; /* stylelint-disable-line property-no-vendor-prefix */
min-width: 320px;
min-height: 100%;
site: be cool; // :)
@media (min-width: @screen-sm) {
font-size: 10px;
......@@ -113,29 +115,44 @@ img {
h1 {
font-size: @font-size--h1;
}
// .h2,
h2 {
font-size: @font-size--h2;
}
// .h3,
h3 {
font-size: @font-size--h3;
}
// .h4,
h4 {
font-size: @font-size--h4;
}
// .h5,
h5 {
font-size: @font-size--h5;
}
// .h6,
h6 {
font-size: @font-size--h6;
}
// .h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
// .h1,
// .h2,
// .h3,
// .h4,
// .h5,
// .h6,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: @font-family--headings;
font-weight: 700;
line-height: 1.4;
......@@ -147,14 +164,22 @@ h1, h2, h3, h4, h5, h6 {
// }
}
// .h1, .h2, .h3,
h1, h2, h3 {
// .h1,
// .h2,
// .h3,
h1,
h2,
h3 {
margin-top: @line-height;
margin-bottom: (@line-height / 2);
}
// .h4, .h5, .h6,
h4, h5, h6 {
// .h4,
// .h5,
// .h6,
h4,
h5,
h6 {
margin-top: (@line-height / 2);
margin-bottom: (@line-height / 2);
}
......@@ -257,9 +282,11 @@ blockquote {
p,
ul,
ol {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
......
src/less/mixins/grid-mixins.less
View file @ e622ccdf
......@@ -58,49 +58,52 @@
// Если первая переданная переменная не ноль — выводим margin-ы по умолчанию
& when not (@xs-grid-gutter = 0) {
margin-left: (@xs-grid-gutter / -2);
margin-left: (@xs-grid-gutter / -2);
margin-right: (@xs-grid-gutter / -2);
}
// Если первая переданная переменная не ноль — выводим padding-и по умолчанию для прямых потомков
& when not (@xs-grid-gutter = 0) {
// Если первая переданная переменная не ноль — выводим padding-и по умолчанию для прямых потомков
& > * {
padding-left: (@grid-gutter-width / 2);
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
& when not (@sm-grid-gutter = @xs-grid-gutter) {
@media (min-width: @screen-sm) {
margin-left: (@sm-grid-gutter / -2);
margin-left: (@sm-grid-gutter / -2);
margin-right: (@sm-grid-gutter / -2);
}
}
& when not (@md-grid-gutter = @sm-grid-gutter) {
@media (min-width: @screen-md) {
margin-left: (@md-grid-gutter / -2);
margin-left: (@md-grid-gutter / -2);
margin-right: (@md-grid-gutter / -2);
}
}
& when not (@lg-grid-gutter = @md-grid-gutter) {
@media (min-width: @screen-lg) {
margin-left: (@lg-grid-gutter / -2);
margin-left: (@lg-grid-gutter / -2);
margin-right: (@lg-grid-gutter / -2);
}
}
& when not (@xl-grid-gutter = @lg-grid-gutter) {
@media (min-width: @screen-xl) {
margin-left: (@xl-grid-gutter / -2);
margin-left: (@xl-grid-gutter / -2);
margin-right: (@xl-grid-gutter / -2);
}
}
& when not (@xxl-grid-gutter = @xl-grid-gutter) {
@media (min-width: @screen-xxl) {
margin-left: (@xxl-grid-gutter / -2);
margin-left: (@xxl-grid-gutter / -2);
margin-right: (@xxl-grid-gutter / -2);
}
}
......@@ -135,7 +138,6 @@
.make-col(@column: 1, @columns: @grid-columns, @gutter: @grid-gutter-width) {
.get-width(@column, @columns); // Вернёт @width с шириной в процентах
display: block;
flex: 0 0 @width;
max-width: @width;
......@@ -162,30 +164,41 @@
//------------------------------------------------------------------------------
.col(@screen: xs, @column: 1, @columns: @grid-columns, @gutter: @grid-gutter-width) {
& when (@screen = xs) {
.make-col(@column, @columns, @gutter);
}
& when (@screen = sm) {
@media (min-width: @screen-sm) {
.make-col(@column, @columns, @gutter);
}
}
& when (@screen = md) {
@media (min-width: @screen-md) {
.make-col(@column, @columns, @gutter);
}
}
& when (@screen = lg) {
@media (min-width: @screen-lg) {
.make-col(@column, @columns, @gutter);
}
}
& when (@screen = xl) {
@media (min-width: @screen-xl) {
.make-col(@column, @columns, @gutter);
}
}
& when (@screen = xxl) {
@media (min-width: @screen-xxl) {
.make-col(@column, @columns, @gutter);
}
......@@ -204,30 +217,41 @@
//------------------------------------------------------------------------------
.col-offset(@screen: xs, @column: 1, @columns: @grid-columns) {
& when (@screen = xs) {
margin-left: (@column * 100% / @columns);
}
& when (@screen = sm) {
@media (min-width: @screen-sm) {
margin-left: (@column * 100% / @columns);
}
}
& when (@screen = md) {
@media (min-width: @screen-md) {
margin-left: (@column * 100% / @columns);
}
}
& when (@screen = lg) {
@media (min-width: @screen-lg) {
margin-left: (@column * 100% / @columns);
}
}
& when (@screen = xl) {
@media (min-width: @screen-xl) {
margin-left: (@column * 100% / @columns);
}
}
& when (@screen = xxl) {
@media (min-width: @screen-xxl) {
margin-left: (@column * 100% / @columns);
}
......@@ -244,15 +268,19 @@
//------------------------------------------------------------------------------
.make-column-list-general-rules(@screen: xs) {
.column-list(@index) {
@item: ~".col-@{screen}-@{index}";
@item: ~'.col-@{screen}-@{index}';
.column-list((@index + 1), @item);
}
.column-list(@index, @list) when (@index =< @grid-columns) {
@item: ~".col-@{screen}-@{index}";
.column-list((@index + 1), ~"@{list}, @{item}");
@item: ~'.col-@{screen}-@{index}';
.column-list((@index + 1), ~'@{list}, @{item}');
}
.column-list(@index, @list) when (@index > @grid-columns) {
@{list} {
display: block;
flex: 0 0 100%;
......@@ -261,6 +289,7 @@
padding-right: (@grid-gutter-width / 2);
}
}
.column-list(1);
}
......@@ -275,9 +304,11 @@
//------------------------------------------------------------------------------
.make-columns(@n: @grid-columns, @screen: xs, @i: 1) when (@i =< @n) {
.col-@{screen}-@{i} {
.make-col(@i, @n, false)
}
.make-columns(@n, @screen, (@i + 1));
}
......@@ -292,8 +323,10 @@
//------------------------------------------------------------------------------
.make-offsets(@n: @grid-columns, @screen: xs, @i: 1) when (@i =< @n) {
.col-@{screen}-offset-@{i} {
margin-left: (@i * 100% / @n);
}
.make-offsets(@n, @screen, (@i + 1));
}
src/less/mixins/responsive-mixins.less
View file @ e622ccdf
......@@ -7,44 +7,67 @@
// }
//------------------------------------------------------------------------------
/* stylelint-disable block-no-single-line */
/* stylelint-disable block-opening-brace-newline-after */
/* stylelint-disable block-closing-brace-newline-before */
/* stylelint-disable at-rule-empty-line-before */
.hidden-up(@screen: xs) {
// & when (@screen = xs) { // XS по умолчанию 0, так что это бессмысленно
// @media (min-width: @screen-xs) { display: none; }
// }
& when (@screen = sm) {
@media (min-width: @screen-sm) { display: none; }
}
& when (@screen = md) {
@media (min-width: @screen-md) { display: none; }
}
& when (@screen = lg) {
@media (min-width: @screen-lg) { display: none; }
}
& when (@screen = xl) {
@media (min-width: @screen-xl) { display: none; }
}
& when (@screen = xxl) {
@media (min-width: @screen-xxl) { display: none; }
}
}
.hidden-down(@screen: xs) {
& when (@screen = xs) {
@media (max-width: (@screen-sm - 1)) { display: none; }
}
& when (@screen = sm) {
@media (max-width: (@screen-md - 1)) { display: none; }
}
& when (@screen = md) {
@media (max-width: (@screen-lg - 1)) { display: none; }
}
& when (@screen = lg) {
@media (max-width: (@screen-xl - 1)) { display: none; }
}
& when (@screen = xl) {
@media (max-width: (@screen-xxl - 1)) { display: none; }
}
& when (@screen = xxl) {
@media (max-width: (@screen-xxl - 1)) { display: none; }
}
}
/* stylelint-enable block-no-single-line */
/* stylelint-enable block-opening-brace-newline-after */
/* stylelint-enable block-closing-brace-newline-before */
/* stylelint-enable at-rule-empty-line-before */
src/less/variables.less
View file @ e622ccdf
......@@ -31,10 +31,10 @@
// Для лёгкого пересчёта: http://pxtoem.com/
@font-size: 1.6rem;
@font-size--h1: 2.250em; // 3.6rem;
@font-size--h1: 2.25em; // 3.6rem;
@font-size--h2: 1.875em; // 3rem;
@font-size--h3: 1.500em; // 2.4rem;
@font-size--h4: 1.250em; // 2.0rem;
@font-size--h3: 1.5em; // 2.4rem;
@font-size--h4: 1.25em; // 2.0rem;
@font-size--h5: 1em; // 1.6rem
@font-size--h6: 1em; // 1.6rem
@font-size--small: 0.75em;
......@@ -89,7 +89,7 @@
// Разное
@border-radius: .3rem; // универсальное сглаживание углов бордюра
@opacity: .7; // универсальная прозрачность
@transition-time: .3s; // время плавных переходов
@shadow: 0 4px 2px -2px rgba(0,0,0,0.3); // универсальная тень
@border-radius: 0.3rem;
@opacity: 0.7;
@transition-time: 0.3s;
@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