stylobate-islands - npm Package Compare versions

Comparing version 0.10.4 to 0.11.0

button/skin-islands-button_checked.md

@@ -26,7 +26,3 @@ ---
 >
->     .toggle-button
->       &.is-checked,
->       &.is-checked:hover
->         skin: button_checked
-> {:.styl}
+> <div class="example:toggle-button"></div>
 
@@ -89,15 +85,4 @@ И работать оно будет для любых типов кнопок:
 >
->     .toggler
->       kind: block inline
->
->       &-controller
->         kind: hidden visually
->
->       input:checked + &-view
->         skin: button_checked
->
->       :focus + &-view
->         skin: button_focus
-> {:.styl}
+> <div class="example:toggler"></div>
 
 Видно, что для CSS-only варианта приходится использовать чуть более сложную html-структуру, но зато всё это дело получается очень гибким и это хороший пример того, как можно сверстать один и тот же блок на разной HTML-структуре и логике, но используя один скин.

button/skin-islands-button.md

@@ -14,6 +14,3 @@ ---
 >
->     .button
->       kind: button
->       skin: button
-> {:.styl}
+> <div class="example:button"></div>
 
@@ -38,6 +35,3 @@ ### Параметры кнопки
 >
->     .small-button
->       kind: button
->       skin: button small
-> {:.styl}
+> <div class="example:small-button"></div>
 
@@ -66,6 +60,3 @@ Кроме того, есть пара «служебных» размеров: адаптивный — `adaptive`, и отсутствие заданных размеров — `sizeless`:
 >
->     .fly-button
->       kind: button
->       skin: button fly
-> {:.styl}
+> <div class="example:fly-button"></div>
 
@@ -92,6 +83,3 @@ ##### «Отключённая кнопка»
 >
->     .simple-button
->       kind: button
->       skin: button one-element
-> {:.styl}
+> <div class="example:simple-button"></div>
 
@@ -120,6 +108,3 @@ ##### Отключение активности
 >
->     .action-button
->       kind: button
->       skin: action-button
-> {:.styl}
+> <div class="example:action-button"></div>
 
@@ -134,6 +119,3 @@ Конечно же, можно использовать всё те же модификаторы, что есть и у обычной кнопки:
 >
->     .small-action-button
->       kind: button
->       skin: action-button small
-> {:.styl}
+> <div class="example:small-action-button"></div>
 
@@ -150,6 +132,3 @@ ### Комбинирование модификаций
 >
->     .super-button
->       kind: button
->       skin: action-button fly small
-> {:.styl}
+> <div class="example:super-button"></div>
 
@@ -169,5 +148,3 @@ ### Кнопка добавления файла
 >
->     .file-input
->       kind: file-input 6px (-input '&-controller')
-> {:.styl}
+> <div class="example:file-input"></div>
 
@@ -192,9 +169,3 @@ Тут видно, что мы задаём дополнительный отступ в `6px` на родителе — для того, чтобы у файлового инпута не обрезалось состояние фокуса. Побочный эффект: кликабельная область чуть увеличивается, но это не страшно.
 >
->     .file-intruder
->       kind: file-intruder (-inner '&-inner') (-input '&-input')
->
->     .file-intruder-input:focus + .file-intruder-focus
->       kind: fill
->       skin-islands-button_focus_style()
-> {:.styl}
+> <div class="example:file-intruder"></div>
 
@@ -201,0 +172,0 @@ Тут нужно заметить, что требуются дополнительные стили для фокуса — возможно в будущем это как-то упростится, но пока только так.

package.json

 {
   "name": "stylobate-islands",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "author": "Roman Komarov <[e-mail]> (http://kizu.ru/en/)",
@@ -5,0 +5,0 @@ "licence": "MIT",

pseudo-button/skin-islands-pseudo-button.md

@@ -12,6 +12,3 @@ ---
 >
->     .pseudo-button
->       kind: button
->       skin: pseudo-button
-> {:.styl}
+> <div class="example:pseudo-button"></div>
 
@@ -26,17 +23,2 @@ Аналогично обычной кнопке, псевдо-кнопка может быть обычного размера, и маленькая — если использовать параметр `small`:
 >
->     .small-pseudo-button
->       kind: button
->       skin: pseudo-button small
-> {:.styl}
-
-
-Кнопка с рамкой по ховеру и тогглу
-
-> <div>
->     <button class="pseudo-button toggle-button is-ghost" type="button"><span class="button-content">Пыщь</span></button>
-> </div>
->
->     .pseudo-button.is-ghost:not(:hover):not(:focus):not(.is-checked)
->       box-shadow: none
-> {:.styl}
-
+> <div class="example:small-pseudo-button"></div>

select/skin-islands-select.md

@@ -23,12 +23,3 @@ ---
 >
->     .select
->       kind: block
->       skin: select
->
->     .select-wrap
->       skin: select-wrap
->
->     .select-focus
->       skin: select_focus
-> {:.styl}
+> <div class="example:select"></div>
 
@@ -48,6 +39,3 @@ И маленький селект (для маленькой кнопки)
 >
->     .small-select
->       kind: block
->       skin: select small
-> {:.styl}
+> <div class="example:small-select"></div>
 
@@ -78,4 +66,3 @@ С изменённой шириной
 >
->     .button-arrow
->       skin: icon_dropdown selecty
+> <div class="example:button-arrow"></div>
 
@@ -91,3 +78,2 @@ Для маленькой кнопки нужен соответствующий `small` параметр. Ну и можно менять ширину кнопки в большую сторону, иконка будет в правильном месте:
 >
->     .small-button .button-arrow
->       skin: icon_dropdown selecty small
+> <div class="example:small-button-arrow"></div>

No alert changes

Worsened metrics

Total package byte prevSize

75210

decreased by-1.72%

No dependency changes