Merge pull request #1853 from bem/update-design@v4

Update design
bem · May 24, 2016 · e9917e5 · e9917e5
2 parents 106d592 + a28ca38
commit e9917e5
Show file tree

Hide file tree

Showing 504 changed files with 181 additions and 109 deletions.
diff --git a/.gemini.yml b/.gemini.yml
@@ -3,20 +3,20 @@ rootUrl: http://localhost:8000/
 windowSize: 1024x768
 
 httpTimeout: 40000
-suitesPerSession: 50
+suitesPerSession: 20
 sessionsPerBrowser: 3
-retry: 2
+retry: 4
 
 browsers:
   firefox-latest:
     desiredCapabilities:
-      version: "38.0"
+      version: "45.0"
       browserName: firefox
       platform: LINUX
 
   chrome-latest:
     desiredCapabilities:
-      version: "42.0"
+      version: "48.0"
       browserName: chrome
       platform: LINUX
       chromeOptions:

diff --git a/.travis.yml b/.travis.yml
@@ -1,14 +1,15 @@
 language: node_js
 
 node_js:
-  - "0.12"
+  - "4"
 
 # sudo=false to run builds inside container infrastructure
 # see https://github.com/bem/bem-components/issues/1528
 sudo: false
 
 env:
   global:
+    - CXX: g++-4.8
     - GH_REF: github.com/bem/bem-components.git
     - ISTANBUL_COVERAGE: yes
     # SAUCE_USERNAME
@@ -26,6 +27,13 @@ env:
 matrix:
   fast_finish: true
 
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - g++-4.8
+
 branches:
   except:
     - v1

diff --git a/common.blocks/button/button.tests/gemini.bemjson.js b/common.blocks/button/button.tests/gemini.bemjson.js
@@ -65,6 +65,13 @@
                 mods : { theme : 'islands', size : 'm', view : 'action', disabled : true },
                 text : 'action',
                 cls : 'gemini-test-button-action-disabled'
+            },
+            '&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;',
+            {
+                block : 'button',
+                mods : { theme : 'islands', size : 'm', togglable : 'radio', disabled : true, checked : true },
+                text : 'radio disabled checked',
+                cls : 'gemini-test-button-radio-checked-disabled'
             }
         ] },
 

diff --git a/common.blocks/button/button.tests/simple.bemjson.js b/common.blocks/button/button.tests/simple.bemjson.js
@@ -395,6 +395,18 @@
                 text : 'radio'
             },
             ' ',
+            {
+                block : 'button',
+                mods : { theme : 'islands', size : 'm', togglable : 'radio', disabled : true },
+                text : ' radio disabled'
+            },
+            ' ',
+            {
+                block : 'button',
+                mods : { theme : 'islands', size : 'm', togglable : 'radio', disabled : true, checked : true },
+                text : 'radio disabled checked'
+            },
+            ' ',
             {
                 block : 'button',
                 mods : { theme : 'islands', size : 'm', togglable : 'check', view : 'pseudo' },

diff --git a/common.blocks/control-group/control-group.tests/gemini.bemjson.js b/common.blocks/control-group/control-group.tests/gemini.bemjson.js
@@ -8,7 +8,7 @@
     ],
     content : [
         { tag : 'h3', content : 'search form' },
-        { tag : 'p', content : {
+        { block : 'test', content : {
             block : 'control-group',
             content : [
                 {
@@ -34,7 +34,7 @@
         } },
 
         { tag : 'h3', content : 'multiple form' },
-        { tag : 'p', content : {
+        { block : 'test', content : {
             block : 'control-group',
             content : [
                 {

diff --git a/common.blocks/control-group/control-group.tests/gemini.blocks/test/test.styl b/common.blocks/control-group/control-group.tests/gemini.blocks/test/test.styl
@@ -0,0 +1,4 @@
+.test
+{
+    display:inline-block;
+}
diff --git a/common.blocks/link/link.tests/gemini.bemjson.js b/common.blocks/link/link.tests/gemini.bemjson.js
@@ -6,22 +6,25 @@
         { elem : 'css', url : 'gemini.css' },
         { elem : 'js', url : 'gemini.js' }
     ],
-    content : ['islands'].map(function(theme, i) {
+    content : ['islands'].map(function(theme) {
         var content = [
                 { block : 'link', content : 'with no url', cls : theme + '-no-url' },
                 { block : 'link', url : '#', content : 'plain url', cls : theme + '-url' },
-                { block : 'link', mods : { pseudo : true }, content : 'pseudo link', cls : theme + '-pseudo' }
+                { block : 'link', mods : { pseudo : true }, content : 'pseudo link', cls : theme + '-pseudo' },
+                { block : 'link', mods : { view : 'minor' }, url : '#', content : '_view_minor' },
+                { block : 'link', mods : { view : 'external' }, url : '#', content : '_view_external' },
+                { block : 'link', mods : { view : 'ghost' }, url : '#', content : '_view_ghost' },
+                { block : 'link', mods : { view : 'text' }, url : '#', content : '_view_text' },
+                { block : 'link', mods : { view : 'strong' }, url : '#', content : '_view_strong' }
             ].map(function(link, j) {
-                link.mods || (link.mods = {});
-                i && (link.mods.theme = theme);
+                (link.mods || (link.mods = {})).theme = theme;
                 return [
                     j > 0 && { block : 'separator' },
                     link
                 ]
             });
 
         content.unshift({ tag : 'h2', content : theme });
-        i && content.unshift({ tag : 'hr' });
 
         return content;
     })

diff --git a/common.blocks/link/link.tests/simple.bemjson.js b/common.blocks/link/link.tests/simple.bemjson.js
@@ -12,6 +12,9 @@
                 { block : 'link', url : 'http://example.com/', content : 'plain url' },
                 { block : 'link', mods : { view : 'minor' }, url : 'http://example.com/help/', content : 'minor' },
                 { block : 'link', mods : { view : 'external' }, url : 'http://www.w3.org/', content : 'external' },
+                { block : 'link', mods : { view : 'ghost' }, url : 'http://example.com/', content : 'ghost' },
+                { block : 'link', mods : { view : 'text' }, url : 'http://example.com/', content : 'text' },
+                { block : 'link', mods : { view : 'strong' }, url : 'http://example.com/', content : 'strong' },
                 {
                     block : 'link',
                     mods : { disabled : true },

diff --git a/common.blocks/select/select.tests/gemini.blocks/test/test.styl b/common.blocks/select/select.tests/gemini.blocks/test/test.styl
@@ -1,7 +1,5 @@
 .test
 {
-    display: inline-block;
-
-    width: 20%;
+    width: 220px;
     padding: 0 40px 150px 0;
 }
diff --git a/design/common.blocks/button/_theme/button_theme_islands.styl b/design/common.blocks/button/_theme/button_theme_islands.styl
@@ -77,7 +77,11 @@ ctx = '.button_theme_islands'
         z-index: 1;
 
         background: rgba(178, 142, 0, 0.6);
-        box-shadow: 0 0 0 1px #ffcc00, inset 0 0 0 1px #ffcc00;
+
+        &.button:before
+        {
+            box-shadow: 0 0 0 1px #ffcc00, inset 0 0 0 1px #ffcc00;
+        }
     }
 
     &.button_pressed:before
@@ -114,11 +118,6 @@ ctx = '.button_theme_islands'
     {
         background: none;
 
-        &:before
-        {
-            display: none;
-        }
-
         &.button_pressed
         {
             background: #f6f5f3;
@@ -142,21 +141,28 @@ ctx = '.button_theme_islands'
 
     &.button_view_action
     {
-        background: rgba(191, 153, 0, 0.8);
+        background: #ffdb4d;
 
         &:before
         {
-            background: #ffdb4d;
+            display: none;
         }
 
-        &.button_pressed:before
+        &.button_hovered
         {
-            background: #fc0;
+            background: #ffd633;
         }
 
-        &.button_hovered
+        &.button_pressed
+        {
+            background: #ffcc00;
+        }
+
+        &.button_focused-hard
         {
-            background: rgba(159, 127, 0, 0.8);
+            animation: button-action-focus 0.5s infinite linear alternate;
+
+            box-shadow: none;
         }
     }
 
@@ -177,11 +183,6 @@ ctx = '.button_theme_islands'
             box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
         }
 
-        &.button_focused-hard:before
-        {
-            box-shadow: none;
-        }
-
         &.button_pressed:before
         {
             background: rgba(0, 0, 0, 0.05);
@@ -217,16 +218,14 @@ ctx = '.button_theme_islands'
             display: none;
         }
 
-        &.button_checked:before
+        &.button_checked
         {
-            display: block;
-
-            background: #ffeba0;
+            background: rgba(0, 0, 0, 0.15);
         }
 
         .button__text
         {
-            color: #aaa;
+            color: #767676;
         }
 
         .icon
@@ -310,6 +309,19 @@ ctx = '.button_theme_islands'
     }
 }
 
+@keyframes button-action-focus
+{
+    from
+    {
+        background-color: #ffdb4d;
+    }
+
+    to
+    {
+        background-color: #fc0;
+    }
+}
+
 .control-group
 {
     .button_checked + {ctx}:before
@@ -329,13 +341,9 @@ ctx = '.button_theme_islands'
             border-radius: 0;
         }
 
-        &.button_checked,
-        &.button_focused-hard.button // Weight of selector should be greater for focused button (#1170)
+        &.button_checked:before
         {
-            &:before
-            {
-                right: 1px;
-            }
+            right: 0;
         }
 
         &.button_focused-hard.button:before

diff --git a/design/common.blocks/checkbox/_theme/checkbox_theme_islands.styl b/design/common.blocks/checkbox/_theme/checkbox_theme_islands.styl
@@ -134,7 +134,7 @@
 
     &.checkbox_focused
     {
-        .checkbox__box
+        .checkbox__box:before
         {
             box-shadow: 0 0 0 1px #ffcc00, inset 0 0 0 1px #ffcc00;
         }
@@ -169,9 +169,14 @@
             }
         }
 
-        &.checkbox_checked .checkbox__box:after
+        &.checkbox_checked .checkbox__box
         {
-            opacity: 0.4;
+            background: rgba(0, 0, 0, 0.15);
+
+            &:after
+            {
+                opacity: 0.4;
+            }
         }
     }
 

diff --git a/design/common.blocks/input/_theme/input_theme_islands.styl b/design/common.blocks/input/_theme/input_theme_islands.styl
@@ -123,7 +123,10 @@ ctx = '.input_theme_islands'
     {
         z-index: 1;
 
-        box-shadow: 0 0 0 1px #ffcc00, inset 0 0 0 1px #ffcc00;
+        &:before
+        {
+            box-shadow: 0 0 0 1px #ffcc00, inset 0 0 0 1px #ffcc00;
+        }
 
         .input__control
         {
@@ -167,7 +170,7 @@ ctx = '.input_theme_islands'
         .input__control
         {
             height: 24px;
-            padding: 0 6px;
+            padding: 0 7px;
         }
 
         &.input_has-clear .input__control
@@ -277,11 +280,6 @@ ctx = '.input_theme_islands'
         {
             right: 0;
         }
-
-        &.input_focused:before
-        {
-            right: 1px;
-        }
     }
 
     > {ctx}:last-child,

diff --git a/design/common.blocks/link/_theme/link_theme_islands.styl b/design/common.blocks/link/_theme/link_theme_islands.styl
@@ -1,6 +1,6 @@
 .link_theme_islands
 {
-    color: #44b;
+    color: #04b;
     cursor: pointer;
     transition: color 0.15s ease-out;
     text-decoration: none;
@@ -18,6 +18,26 @@
         {
             color: #070;
         }
+
+        &_ghost
+        {
+            color: #999;
+
+            &:hover
+            {
+                color: #000;
+            }
+        }
+
+        &_text
+        {
+            color: #000;
+        }
+
+        &_strong
+        {
+            font-weight: bold;
+        }
     }
 
     &:hover

diff --git a/design/common.blocks/page/_theme/page_theme_islands.styl b/design/common.blocks/page/_theme/page_theme_islands.styl
@@ -5,7 +5,7 @@ html
 
 .page_theme_islands
 {
-    font: 13px/15px Arial, Helvetica, sans-serif;
+    font: 13px Arial, sans-serif;
 
     min-height: 100%;
     margin: 0;