sedona-blocks
Advanced tools
Comparing version 3.13.0 to 3.13.1
{ | ||
"name": "sedona-blocks", | ||
"version": "3.13.0", | ||
"version": "3.13.1", | ||
"description": "", | ||
@@ -5,0 +5,0 @@ "repository": { |
@@ -22,4 +22,4 @@ # Набор типовых блоков для составления структуры страниц | ||
* [footer](https://github.com/constlab/sedona-blocks/tree/master/src/footer) | ||
* [header](https://github.com/constlab/sedona-blocks/tree/master/src/header) | ||
* [footer](https://github.com/constlab/sedona-blocks/tree/master/src/footer) ([пример](http://sedona.stage.constlab.ru/blocks/footer/)) | ||
* [header](https://github.com/constlab/sedona-blocks/tree/master/src/header) ([пример](http://sedona.stage.constlab.ru/blocks/header/)) | ||
* heading | ||
@@ -26,0 +26,0 @@ * [notify](https://github.com/constlab/sedona-blocks/tree/master/src/notify) ([пример](http://sedona.stage.constlab.ru/blocks/notify/)) |
@@ -15,6 +15,16 @@ # Карточка | ||
@card-padding: @indent; | ||
@card-background-color: transparent; | ||
@card-background-image: none; | ||
@card-background-repeat: repeat; | ||
@card-background-position: 0 0; | ||
@card-background-size: auto auto; | ||
@card-border-width: 1px; | ||
@card-border-color: @base-divider; | ||
@card-border-radius: @radius; | ||
@card-padding: @indent; | ||
@card-frame-opacity: 0.2; | ||
@card-media-ratio: 56.25%; | ||
@@ -24,5 +34,10 @@ | ||
@card-darken-color: @light-primary; | ||
@card-darken-background: @dark-primary; | ||
@card-darken-background-color: @dark-primary; | ||
@card-darken-background-image: none; | ||
@card-darken-background-repeat: repeat; | ||
@card-darken-background-position: 0 0; | ||
@card-darken-background-size: auto auto; | ||
@card-darken-border-color: @light-divider; | ||
@card-darken-frame-opacity: @card-frame-opacity; | ||
@@ -32,5 +47,10 @@ | ||
@card-lighten-color: @dark-primary; | ||
@card-lighten-background: @light-primary; | ||
@card-lighten-background-color: @light-primary; | ||
@card-lighten-background-image: none; | ||
@card-lighten-background-repeat: repeat; | ||
@card-lighten-background-position: 0 0; | ||
@card-lighten-background-size: auto auto; | ||
@card-lighten-border-color: @dark-divider; | ||
@card-lighten-frame-opacity: @card-frame-opacity; | ||
@@ -37,0 +57,0 @@ ``` |
@@ -15,1 +15,7 @@ # Файл | ||
``` | ||
## Разметка | ||
```html | ||
<input type="file" class="file"> | ||
``` |
# Подвал | ||
Шаблонный тип. | ||
Шаблонный тип. [Пример](http://sedona.stage.constlab.ru/blocks/footer/). | ||
@@ -9,3 +9,2 @@ ## Особенности | ||
* По-умолчанию элементы идут друг под другом. Начиная с ширины `@footer-breakpoints-desktop`, выстраиваются на 100% ширину родителя с воздухом между (space-between) | ||
* По-умолчанию имеет тон всего сайта. Может принудительно иметь светлый и темный тон | ||
@@ -15,4 +14,2 @@ ## Настройка | ||
```less | ||
// Base | ||
@footer-padding-top-smaller: 0; | ||
@@ -27,19 +24,12 @@ @footer-padding-top-larger: 0; | ||
@footer-color: inherit; | ||
@footer-background: none; | ||
@footer-link-color: @link-primary; | ||
@footer-background-color: transparent; | ||
@footer-background-image: none; | ||
@footer-background-repeat: repeat; | ||
@footer-background-position: 0 0; | ||
@footer-background-size: auto auto; | ||
@footer-breakpoints: @grid-breakpoints-md; | ||
@footer-max-width: @grid-breakpoints-xl; | ||
// Darken | ||
@footer-darken-color: @light-primary; | ||
@footer-darken-background: @dark-primary; | ||
@footer-darken-link-color: @footer-link-color; | ||
// Lighten | ||
@footer-lighten-color: @dark-primary; | ||
@footer-lighten-background: @light-primary; | ||
@footer-lighten-link-color: @footer-link-color; | ||
``` | ||
@@ -53,23 +43,8 @@ | ||
<div class="footer__content"> | ||
© «Рога и копыта», 2000–2018 | ||
… | ||
</div> | ||
<div class="footer__content"> | ||
<a href="#">Конфиденциальность</a> | ||
∼ | ||
<a href="#">Правила пользования</a> | ||
</div> | ||
<div class="footer__content"> | ||
Создано в <a href="https://constlab.ru" target="_blank">Const Lab</a> в 2018 году | ||
</div> | ||
… | ||
</div> | ||
</footer> | ||
``` | ||
## Модификаторы | ||
### `footer` | ||
* `footer--darken` — делает подвал в темных тонах | ||
* `footer--lighten` — делает подвал в светлых тонах |
@@ -8,6 +8,5 @@ # Form | ||
```less | ||
// Proportions | ||
// Base | ||
@form-control-border-width: 1px; | ||
@form-control-border-radius: @radius; | ||
@form-control-height: (@line-height + @form-control-padding-top + @form-control-padding-bottom); | ||
@@ -19,6 +18,5 @@ @form-control-padding-top: (@indent / 2); | ||
@form-control-height: (@line-height + @form-control-padding-top + @form-control-padding-bottom); | ||
@form-control-border-width: 1px; | ||
@form-control-border-radius: @radius; | ||
// Breakpoints | ||
@form-breakpoints: @grid-breakpoints-md; | ||
@@ -28,6 +26,2 @@ | ||
@form-control-color: @base-primary; | ||
@form-control-border-color: @base-divider; | ||
@form-control-background-color: @light-primary; | ||
@@ -39,18 +33,20 @@ @form-control-background-image: none; | ||
@form-control-border-color: @base-divider; | ||
@form-control-hover-background-color: @form-control-background-color; | ||
@form-control-hover-border-color: darken(@form-control-border-color, 15%); | ||
@form-control-hover-background-color: @form-control-background-color; | ||
@form-control-focus-background-color: @form-control-hover-background-color; | ||
@form-control-focus-border-color: @form-control-hover-border-color; | ||
@form-control-focus-outline-color: @form-control-border-color; | ||
@form-control-focus-border-color: @form-control-hover-border-color; | ||
@form-control-focus-background-color: @form-control-hover-background-color; | ||
@form-control-danger-background-color: @form-control-background-color; | ||
@form-control-danger-border-color: lighten(@alert-danger, 25%); | ||
@form-control-danger-background-color: @form-control-background-color; | ||
@form-control-danger-hover-background-color: @form-control-danger-background-color; | ||
@form-control-danger-hover-border-color: darken(@form-control-danger-border-color, 10%); | ||
@form-control-danger-hover-background-color: @form-control-danger-background-color; | ||
@form-control-danger-focus-background-color: @form-control-danger-hover-background-color; | ||
@form-control-danger-focus-border-color: @form-control-danger-hover-border-color; | ||
@form-control-danger-focus-outline-color: @form-control-danger-border-color; | ||
@form-control-danger-focus-border-color: @form-control-danger-hover-border-color; | ||
@form-control-danger-focus-background-color: @form-control-danger-hover-background-color; | ||
@@ -61,4 +57,2 @@ // Accent | ||
@form-accent-border-color: @base-secondary; | ||
@form-accent-background-color: @form-accent-border-color; | ||
@@ -70,4 +64,6 @@ @form-accent-background-image: none; | ||
@form-accent-border-color: @base-secondary; | ||
@form-accent-hover-background-color: darken(@form-accent-background-color, 10%); | ||
@form-accent-hover-border-color: darken(@form-accent-border-color, 10%); | ||
@form-accent-hover-background-color: darken(@form-accent-background-color, 10%); | ||
@@ -92,6 +88,2 @@ // Hint | ||
@form-darken-control-color: @light-primary; | ||
@form-darken-control-border-color: @light-divider; | ||
@form-darken-control-background-color: @dark-primary; | ||
@@ -103,18 +95,20 @@ @form-darken-control-background-image: none; | ||
@form-darken-control-border-color: @light-divider; | ||
@form-darken-control-hover-background-color: @form-darken-control-background-color; | ||
@form-darken-control-hover-border-color: lighten(@form-darken-control-border-color, 15%); | ||
@form-darken-control-hover-background-color: @form-darken-control-background-color; | ||
@form-darken-control-focus-background-color: @form-darken-control-hover-background-color; | ||
@form-darken-control-focus-border-color: @form-darken-control-hover-border-color; | ||
@form-darken-control-focus-outline-color: @form-darken-control-border-color; | ||
@form-darken-control-focus-border-color: @form-darken-control-hover-border-color; | ||
@form-darken-control-focus-background-color: @form-darken-control-hover-background-color; | ||
@form-darken-control-danger-background-color: @form-darken-control-background-color; | ||
@form-darken-control-danger-border-color: lighten(@alert-danger, 5%); | ||
@form-darken-control-danger-background-color: @form-darken-control-background-color; | ||
@form-darken-control-danger-hover-background-color: @form-darken-control-danger-background-color; | ||
@form-darken-control-danger-hover-border-color: darken(@form-darken-control-danger-border-color, 5%); | ||
@form-darken-control-danger-hover-background-color: @form-darken-control-danger-background-color; | ||
@form-darken-control-danger-focus-background-color: @form-darken-control-danger-hover-background-color; | ||
@form-darken-control-danger-focus-border-color: @form-darken-control-danger-hover-border-color; | ||
@form-darken-control-danger-focus-outline-color: @form-darken-control-danger-border-color; | ||
@form-darken-control-danger-focus-border-color: @form-darken-control-danger-hover-border-color; | ||
@form-darken-control-danger-focus-background-color: @form-darken-control-danger-hover-background-color; | ||
@@ -125,4 +119,2 @@ // Darken accent | ||
@form-darken-accent-border-color: @light-secondary; | ||
@form-darken-accent-background-color: @form-darken-accent-border-color; | ||
@@ -134,4 +126,6 @@ @form-darken-accent-background-image: none; | ||
@form-darken-accent-border-color: @light-secondary; | ||
@form-darken-accent-hover-background-color: lighten(@form-darken-accent-background-color, 20%); | ||
@form-darken-accent-hover-border-color: lighten(@form-darken-accent-border-color, 20%); | ||
@form-darken-accent-hover-background-color: lighten(@form-darken-accent-background-color, 20%); | ||
@@ -153,6 +147,2 @@ // Darken hint | ||
@form-lighten-control-color: @dark-primary; | ||
@form-lighten-control-border-color: @dark-divider; | ||
@form-lighten-control-background-color: @light-primary; | ||
@@ -164,18 +154,20 @@ @form-lighten-control-background-image: none; | ||
@form-lighten-control-border-color: @dark-divider; | ||
@form-lighten-control-hover-background-color: @form-lighten-control-background-color; | ||
@form-lighten-control-hover-border-color: darken(@form-lighten-control-border-color, 15%); | ||
@form-lighten-control-hover-background-color: @form-lighten-control-background-color; | ||
@form-lighten-control-focus-background-color: @form-lighten-control-hover-background-color; | ||
@form-lighten-control-focus-border-color: @form-lighten-control-hover-border-color; | ||
@form-lighten-control-focus-outline-color: @form-lighten-control-border-color; | ||
@form-lighten-control-focus-border-color: @form-lighten-control-hover-border-color; | ||
@form-lighten-control-focus-background-color: @form-lighten-control-hover-background-color; | ||
@form-lighten-control-danger-background-color: @form-lighten-control-background-color; | ||
@form-lighten-control-danger-border-color: lighten(@alert-danger, 25%); | ||
@form-lighten-control-danger-background-color: @form-lighten-control-background-color; | ||
@form-lighten-control-danger-hover-background-color: @form-lighten-control-danger-background-color; | ||
@form-lighten-control-danger-hover-border-color: darken(@form-lighten-control-danger-border-color, 10%); | ||
@form-lighten-control-danger-hover-background-color: @form-lighten-control-danger-background-color; | ||
@form-lighten-control-danger-focus-background-color: @form-lighten-control-danger-hover-background-color; | ||
@form-lighten-control-danger-focus-border-color: @form-lighten-control-danger-hover-border-color; | ||
@form-lighten-control-danger-focus-outline-color: @form-lighten-control-danger-border-color; | ||
@form-lighten-control-danger-focus-border-color: @form-lighten-control-danger-hover-border-color; | ||
@form-lighten-control-danger-focus-background-color: @form-lighten-control-danger-hover-background-color; | ||
@@ -186,4 +178,2 @@ // Lighten accent | ||
@form-lighten-accent-border-color: @dark-secondary; | ||
@form-lighten-accent-background-color: @form-lighten-accent-border-color; | ||
@@ -195,4 +185,6 @@ @form-lighten-accent-background-image: none; | ||
@form-lighten-accent-border-color: @dark-secondary; | ||
@form-lighten-accent-hover-background-color: darken(@form-lighten-accent-background-color, 10%); | ||
@form-lighten-accent-hover-border-color: darken(@form-lighten-accent-border-color, 10%); | ||
@form-lighten-accent-hover-background-color: darken(@form-lighten-accent-background-color, 10%); | ||
@@ -213,2 +205,17 @@ // Lighten hint | ||
## Модификаторы | ||
### `form` | ||
* `form--darken` | ||
* `form--lighten` | ||
### `form__group` | ||
* `form__group--columns` | ||
### `form__control` | ||
* `form__control--danger` | ||
## Дополнительно | ||
@@ -215,0 +222,0 @@ |
# Шапка | ||
Шаблонный тип. | ||
Шаблонный тип. [Пример](http://sedona.stage.constlab.ru/blocks/header/). | ||
@@ -10,4 +10,2 @@ ## Особенности | ||
* По-умолчанию имеет мобильный вид. Разворачивается, начиная с ширины `@header-breakpoints-desktop` | ||
* Имеет встраиваемые дополнительные элементы и иконки (указаны в разметке) | ||
* По-умолчанию имеет тон всего сайта. Может принудительно иметь светлый и темный тон | ||
@@ -17,24 +15,16 @@ ## Настройка | ||
```less | ||
// Base | ||
@header-height: (@line-height + @indent * 2); | ||
@header-color: @base-primary; | ||
@header-background: none; | ||
@header-link-color: @link-primary; | ||
@header-background-color: transparent; | ||
@header-background-image: none; | ||
@header-background-repeat: repeat; | ||
@header-background-position: 0 0; | ||
@header-background-size: auto auto; | ||
@header-breakpoints: @grid-breakpoints-md; | ||
@header-max-width: @grid-breakpoints-xl; | ||
// Darken | ||
@header-darken-color: @light-primary; | ||
@header-darken-background: @dark-primary; | ||
@header-darken-link-color: @header-link-color; | ||
// Lighten | ||
@header-lighten-color: @dark-primary; | ||
@header-lighten-background: @light-primary; | ||
@header-lighten-link-color: @header-link-color; | ||
@header-gutter: @indent; | ||
``` | ||
@@ -56,4 +46,4 @@ | ||
<li><a href="#">Вход</a></li> | ||
<li class="header__icon header__icon--call"><a href="#">8 800 200-66-00</a></li> | ||
<li class="header__icon header__icon--search"><a href="#">Поиск</a></li> | ||
<li><a href="#">8 800 200-66-00</a></li> | ||
<li><a href="#">Поиск</a></li> | ||
<!-- / --> | ||
@@ -91,4 +81,4 @@ | ||
<ul class="header__extra header__extra--hidden-mobile"> | ||
<li class="header__icon header__icon--call"><a href="#">8 800 200-66-00</a></li> | ||
<li class="header__icon header__icon--search"><a href="#">Поиск</a></li> | ||
<li><a href="#">8 800 200-66-00</a></li> | ||
<li><a href="#">Поиск</a></li> | ||
</ul> | ||
@@ -103,7 +93,2 @@ <!-- / --> | ||
### `header` | ||
* `header--darken` — делает шапку в темных тонах | ||
* `header--lighten` — делает шапку в светлых тонах | ||
### `header__extra` | ||
@@ -110,0 +95,0 @@ |
@@ -12,2 +12,11 @@ # Уведомление | ||
```less | ||
@notify-color: inherit; | ||
@notify-link-color: @link-primary; | ||
@notify-background-color: @base-divider; | ||
@notify-background-image: none; | ||
@notify-background-repeat: repeat; | ||
@notify-background-position: 0 0; | ||
@notify-background-size: auto auto; | ||
@notify-border-width: 0; | ||
@@ -17,6 +26,2 @@ @notify-border-color: transparent; | ||
@notify-color: inherit; | ||
@notify-background: @base-divider; | ||
@notify-link-color: @link-primary; | ||
@notify-max-width: 500px; | ||
@@ -23,0 +28,0 @@ ``` |
@@ -14,6 +14,10 @@ # Диапазон | ||
```less | ||
// Base | ||
@range-height: @form-control-height; | ||
// Line | ||
@range-line-height: 2px; | ||
@range-line-border-radius: (@range-line-height / 2); | ||
@range-line-background-color: @form-control-border-color; | ||
@@ -25,2 +29,6 @@ @range-line-background-image: none; | ||
@range-line-border-radius: (@range-line-height / 2); | ||
// Bar | ||
@range-bar-background-color: @form-accent-border-color; | ||
@@ -32,7 +40,7 @@ @range-bar-background-image: none; | ||
// Slider | ||
@range-slider-width: @font-size; | ||
@range-slider-height: @font-size; | ||
@range-slider-border-width: 0; | ||
@range-slider-border-color: transparent; | ||
@range-slider-border-radius: 50%; | ||
@range-slider-background-color: @range-bar-background-color; | ||
@@ -44,5 +52,12 @@ @range-slider-background-image: none; | ||
@range-hint-color: @form-hint-color; | ||
@range-slider-border-width: 0; | ||
@range-slider-border-color: transparent; | ||
@range-slider-border-radius: 50%; | ||
// Hint | ||
@range-hint-font-size: @form-hint-font-size; | ||
@range-hint-line-height: @form-hint-line-height; | ||
@range-hint-color: @form-hint-color; | ||
``` |
@@ -16,13 +16,29 @@ # Сцена | ||
```less | ||
// Base | ||
@scene-background-color: transparent; | ||
@scene-background-image: none; | ||
@scene-background-repeat: repeat; | ||
@scene-background-position: 0 0; | ||
@scene-background-size: auto auto; | ||
// Darken | ||
@scene-darken-background-color: @dark-primary; | ||
@scene-darken-background-image: none; | ||
@scene-darken-background-repeat: repeat; | ||
@scene-darken-background-position: 0 0; | ||
@scene-darken-background-size: auto auto; | ||
@scene-darken-color: @light-primary; | ||
@scene-darken-background: @dark-primary; | ||
@scene-darken-link-color: @link-primary; | ||
// Lighten | ||
@scene-lighten-background-color: @light-primary; | ||
@scene-lighten-background-image: none; | ||
@scene-lighten-background-repeat: repeat; | ||
@scene-lighten-background-position: 0 0; | ||
@scene-lighten-background-size: auto auto; | ||
@scene-lighten-color: @dark-primary; | ||
@scene-lighten-background: @light-primary; | ||
@scene-lighten-link-color: @link-primary; | ||
``` | ||
@@ -36,2 +52,4 @@ | ||
</section> | ||
… | ||
``` | ||
@@ -38,0 +56,0 @@ |
@@ -16,5 +16,6 @@ # Слайдер | ||
```less | ||
// Base | ||
// Item | ||
@slider-item-background-color: transparent; | ||
@slider-item-background-image: none; | ||
@slider-item-background-repeat: no-repeat; | ||
@@ -24,13 +25,7 @@ @slider-item-background-position: 50%; | ||
// Bullet | ||
@slider-bullet-width: 7px; | ||
@slider-bullet-height: 7px; | ||
@slider-bullet-radius: 50%; | ||
// Darken | ||
@slider-item-darken-color: @light-primary; | ||
// Lighten | ||
@slider-item-lighten-color: @dark-primary; | ||
``` | ||
@@ -37,0 +32,0 @@ |
@@ -15,33 +15,52 @@ # Социальные кнопки | ||
@social-width: @line-height; | ||
@social-height: @social-width; | ||
@social-gutter: (@indent / 2); | ||
@social-border-radius: 50%; | ||
// Item | ||
@social-item-width: @line-height; | ||
@social-item-height: @social-item-width; | ||
@social-item-color: @light-primary; | ||
@social-item-background-color: transparent; | ||
@social-item-background-image: none; | ||
@social-item-background-repeat: repeat; | ||
@social-item-background-position: 0 0; | ||
@social-item-background-size: auto auto; | ||
@social-item-border-radius: 50%; | ||
@social-item-hover-color: @social-item-color; | ||
@social-item-hover-background-color: @social-item-background-color; | ||
// Icon | ||
@social-icon-width: 18px; | ||
@social-icon-height: @social-icon-width; | ||
@social-color: @light-primary; | ||
@social-background-color: transparent; | ||
// Darken item | ||
@social-hover-color: @social-color; | ||
@social-hover-background-color: @social-background-color; | ||
@social-darken-item-color: @light-primary; | ||
// Darken | ||
@social-darken-item-background-color: @dark-primary; | ||
@social-darken-item-background-image: none; | ||
@social-darken-item-background-repeat: repeat; | ||
@social-darken-item-background-position: 0 0; | ||
@social-darken-item-background-size: auto auto; | ||
@social-darken-color: @light-primary; | ||
@social-darken-background-color: @dark-primary; | ||
@social-darken-item-hover-color: @social-darken-item-color; | ||
@social-darken-item-hover-background-color: lighten(@social-darken-item-background-color, 10%); | ||
@social-darken-hover-color: @social-darken-color; | ||
@social-darken-hover-background-color: lighten(@social-darken-background-color, 10%); | ||
// Lighten item | ||
// Lighten | ||
@social-lighten-item-color: @dark-primary; | ||
@social-lighten-color: @dark-primary; | ||
@social-lighten-background-color: @light-primary; | ||
@social-lighten-item-background-color: @light-primary; | ||
@social-lighten-item-background-image: none; | ||
@social-lighten-item-background-repeat: repeat; | ||
@social-lighten-item-background-position: 0 0; | ||
@social-lighten-item-background-size: auto auto; | ||
@social-lighten-hover-color: @social-lighten-color; | ||
@social-lighten-hover-background-color: darken(@social-lighten-background-color, 20%); | ||
@social-lighten-item-hover-color: @social-lighten-item-color; | ||
@social-lighten-item-hover-background-color: darken(@social-lighten-item-background-color, 20%); | ||
``` | ||
@@ -48,0 +67,0 @@ |
@@ -17,9 +17,12 @@ # Таблица | ||
@table-divider: @base-divider; | ||
// Head | ||
@table-head-font-size: @font-size-smaller; | ||
@table-head-line-height: @line-height-smaller; | ||
@table-head-font-weight: normal; | ||
@table-head-font-family: @font-family-primary; | ||
@table-head-color: @base-secondary; | ||
@table-divider: @base-divider; | ||
// Tr | ||
@@ -30,5 +33,9 @@ @table-tr-hover-background-color: @table-divider; | ||
@table-darken-divider: @light-divider; | ||
// Darken head | ||
@table-darken-head-color: @light-secondary; | ||
@table-darken-divider: @light-divider; | ||
// Darken tr | ||
@@ -39,5 +46,9 @@ @table-darken-tr-hover-background-color: @table-darken-divider; | ||
@table-lighten-divider: @dark-divider; | ||
// Lighten head | ||
@table-lighten-head-color: @dark-secondary; | ||
@table-lighten-divider: @dark-divider; | ||
// Lighten tr | ||
@@ -44,0 +55,0 @@ @table-lighten-tr-hover-background-color: @table-lighten-divider; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
234509