stylobate-islands - npm Package Compare versions

Comparing version 0.25.1 to 0.26.0

CHANGELOG.md

@@ -5,2 +5,10 @@ ---
 
+## v0.26.0 (2014-04-10)
+
+- Added a way to configure border-alpha of pseudo-buttons.
+- Added a way to center the content of simple inputs.
+- Fixed the difference in box-shadow for promo-buttons.
+- Changed default text color to black, #67.
+- Updated Stylus to `0.43` and tests for it.
+
 ## v0.25.1 (2014-03-31)
@@ -7,0 +15,0 @@

lib/skins/input/skin-islands-input.md

@@ -28,22 +28,2 @@ ---
 
-
-#### Группировка {#field-group}
-
-Для такого инпута хорошо работает группировка с кнопками:
-
-> <div class="group">
->     <button class="button group-item" type="button">
->         <span class="button-content">–</span>
->     </button
->     ><input class="input group-item" type="text" style="width:100px"
->     /><button class="button group-item" type="button">
->         <span class="button-content">⟷</span>
->     </button
->     ><input class="input group-item" type="text" style="width:100px"
->     /><button class="button group-item" type="button">
->         <span class="button-content">+</span>
->     </button>
-> </div>
-
-
 ### Сложные инпуты {#fields}
@@ -121,3 +101,20 @@
 
+#### Группировка {#field-group}
 
+Для такого инпута хорошо работает группировка с кнопками:
+
+> <div class="group">
+>     <button class="button group-item" type="button">
+>         <span class="button-content">–</span>
+>     </button
+>     ><input class="input group-item" type="text" style="width:100px"
+>     /><button class="button group-item" type="button">
+>         <span class="button-content">⟷</span>
+>     </button
+>     ><input class="input group-item" type="text" style="width:100px"
+>     /><button class="button group-item" type="button">
+>         <span class="button-content">+</span>
+>     </button>
+> </div>
+
 #### Имя сервиса внутри инпута {#field-label}
@@ -255,1 +252,13 @@
 > <div class="example:input_error"></div>
+
+### Центрированный инпут {#centered-input}
+
+Чтобы центрировать контент инпута достаточно добавить параметр `centered`:
+
+    skin: input centered
+
+> <input class="centered-input" type="text" value="Буквы" />
+>
+> <div class="example:centered-input"></div>
+
+Для сложных инпутов с плейсхолдерами пока простого пути нет, нужно просто прокинуть `text-align: center` куда нужно. Когда будет полноценный отдельный скин для сложных инпутов, станет попроще.

lib/skins/promo-button/skin-islands-promo-button.md

@@ -30,2 +30,22 @@ ---
 
+    skin: promo-button large
+
+> <div>
+>     <button class="large-promo-button" type="button">
+>         <span class="button-content">Большая промо кнопка</span>
+>     </button>
+> </div>
+>
+> <div class="example:large-promo-button"></div>
+
+    skin: promo-button xlarge
+
+> <div>
+>     <button class="xlarge-promo-button" type="button">
+>         <span class="button-content">Очень большая промо кнопка</span>
+>     </button>
+> </div>
+>
+> <div class="example:xlarge-promo-button"></div>
+
 ### «Летающая» кнопка
@@ -32,0 +52,0 @@

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

@@ -14,3 +14,3 @@ ---
 
-Аналогично обычной кнопке, псевдо-кнопка может быть обычного размера, и маленькая — если использовать параметр `small`:
+Аналогично обычной кнопке, псевдокнопка может быть обычного размера, и маленькая — если использовать параметр `small`:
 
@@ -25,3 +25,3 @@ skin: pseudo-button small
 
-### Инвертированная псевдо-кнопка {#inverted-pseudo-button}
+### Инвертированная псевдокнопка {#inverted-pseudo-button}
 
@@ -49,1 +49,23 @@ Так как псевдокнопка не имеет фона, то если понадобится использовать её на тёмном фоне, то нужно будет воспользоваться модификатором `_inverted`:
 > <div class="example:pseudo-button_inverted"></div>
+
+### Настраиваемая прозрачность границ {#pseudo-button-border-alpha}
+
+Основная задача псевдокнопки — быть кнопкой, но при этом и не притягивать к себе внимание. В некоторых случаях обычная псевдокнопка может оказаться или слишком бледной, или слишком яркой, в этом случае можно исправить это, воспользовавшись параметром `border-alpha`, изменив значение полупрозрачности границы.
+
+    skin: pseudo-button (border-alpha 0.15)
+
+Это будет работать и для обычной псевдокнопки:
+
+> <div>
+>     <button class="dimmed-pseudo-button" type="button">Чуть приглушенная псевдокнопка</button>
+> </div>
+>
+> <div class="example:dimmed-pseudo-button"></div>
+
+И для инвертированной:
+
+> <div style="background: #000; padding: 20px;">
+>     <button class="brighten-inverted-pseudo-button" type="button">Яркая инвертированная псевдокнопка</button>
+> </div>
+>
+> <div class="example:brighten-inverted-pseudo-button"></div>

package.json

 {
   "name": "stylobate-islands",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "author": "Roman Komarov <[e-mail]> (http://kizu.ru/en/)",
@@ -22,3 +22,3 @@ "licence": "MIT",
     "csscomb": "2.0.x",
-    "stylus": "0.42.x",
+    "stylus": "0.43.x",
     "glob": "3.2.x",
@@ -25,0 +25,0 @@ "mocha": "*",

No alert changes

Improved metrics

Total package byte prevSize

125746

increased by3.17%

No dependency changes