diff --git a/common.blocks/attach/attach.css b/common.blocks/attach/attach.css new file mode 100644 index 000000000..119865bbd --- /dev/null +++ b/common.blocks/attach/attach.css @@ -0,0 +1,9 @@ +.attach { + touch-action: manipulation; +} +.attach__file, + .attach__no-file, + .attach_disabled .attach__clear, + .attach .button__text { + display: none; +} diff --git a/common.blocks/button/button.css b/common.blocks/button/button.css new file mode 100644 index 000000000..4ef741750 --- /dev/null +++ b/common.blocks/button/button.css @@ -0,0 +1,3 @@ +.button { + touch-action: manipulation; +} diff --git a/common.blocks/checkbox-group/checkbox-group.tests/gemini.blocks/test/test.css b/common.blocks/checkbox-group/checkbox-group.tests/gemini.blocks/test/test.css new file mode 100644 index 000000000..438e5d776 --- /dev/null +++ b/common.blocks/checkbox-group/checkbox-group.tests/gemini.blocks/test/test.css @@ -0,0 +1,3 @@ +.test { + width: 150px; +} diff --git a/common.blocks/checkbox/_type/checkbox_type_button.css b/common.blocks/checkbox/_type/checkbox_type_button.css new file mode 100644 index 000000000..69067945c --- /dev/null +++ b/common.blocks/checkbox/_type/checkbox_type_button.css @@ -0,0 +1,5 @@ +.checkbox.checkbox_type_button .checkbox__control { + position: absolute; + + visibility: hidden; +} diff --git a/common.blocks/checkbox/checkbox.css b/common.blocks/checkbox/checkbox.css new file mode 100644 index 000000000..590b3d4dc --- /dev/null +++ b/common.blocks/checkbox/checkbox.css @@ -0,0 +1,3 @@ +.checkbox { + touch-action: manipulation; +} diff --git a/common.blocks/checkbox/checkbox.tests/gemini.blocks/test/test.css b/common.blocks/checkbox/checkbox.tests/gemini.blocks/test/test.css new file mode 100644 index 000000000..a3bfceffa --- /dev/null +++ b/common.blocks/checkbox/checkbox.tests/gemini.blocks/test/test.css @@ -0,0 +1,4 @@ +.test { + padding: 5px; + width: 150px; +} diff --git a/common.blocks/control-group/control-group.tests/gemini.blocks/test/test.css b/common.blocks/control-group/control-group.tests/gemini.blocks/test/test.css new file mode 100644 index 000000000..aac9d5f08 --- /dev/null +++ b/common.blocks/control-group/control-group.tests/gemini.blocks/test/test.css @@ -0,0 +1,3 @@ +.test { + display:inline-block; +} diff --git a/common.blocks/dropdown/dropdown.tests/gemini.blocks/separator/separator.css b/common.blocks/dropdown/dropdown.tests/gemini.blocks/separator/separator.css new file mode 100644 index 000000000..159c7ae1b --- /dev/null +++ b/common.blocks/dropdown/dropdown.tests/gemini.blocks/separator/separator.css @@ -0,0 +1,7 @@ +.separator { + width: 100%; + height: 1px; + margin: 25px 0; + + border-top: 1px solid #808080; +} diff --git a/common.blocks/dropdown/dropdown.tests/gemini.blocks/test/test.css b/common.blocks/dropdown/dropdown.tests/gemini.blocks/test/test.css new file mode 100644 index 000000000..d2063bb70 --- /dev/null +++ b/common.blocks/dropdown/dropdown.tests/gemini.blocks/test/test.css @@ -0,0 +1,5 @@ +.test { + display: inline-block; + + padding-right: 30px; +} diff --git a/common.blocks/icon/icon.css b/common.blocks/icon/icon.css new file mode 100644 index 000000000..5acd95d3a --- /dev/null +++ b/common.blocks/icon/icon.css @@ -0,0 +1,22 @@ +.icon { + display: inline-block; + + text-align: center; + + background: 50% no-repeat; +} +/* Hack for correct baseline positioning */ +.icon:empty:after { + visibility: hidden; + content: '\00A0'; +} +/* + * Чтобы иконка правильно позиционировалась внутри блочного контекста, + * нужно прописать родителю свойство line-height со значением, равным высоте иконки + */ +.icon > img, + .icon > svg { + margin: -5.15em 0 -5em; + /* 0.15 — magic number, empirically found */ + vertical-align: middle; +} diff --git a/common.blocks/image/image.css b/common.blocks/image/image.css new file mode 100644 index 000000000..2f5c922b1 --- /dev/null +++ b/common.blocks/image/image.css @@ -0,0 +1,3 @@ +.image { + border: 0; +} diff --git a/common.blocks/input/input.css b/common.blocks/input/input.css new file mode 100644 index 000000000..908aeaac3 --- /dev/null +++ b/common.blocks/input/input.css @@ -0,0 +1,3 @@ +.input { + touch-action: manipulation; +} diff --git a/common.blocks/input/input.tests/gemini.blocks/test/test.css b/common.blocks/input/input.tests/gemini.blocks/test/test.css new file mode 100644 index 000000000..9683e3971 --- /dev/null +++ b/common.blocks/input/input.tests/gemini.blocks/test/test.css @@ -0,0 +1,5 @@ +.test { + display: inline-block; + + margin-right: 10px; +} diff --git a/common.blocks/link/link.css b/common.blocks/link/link.css new file mode 100644 index 000000000..fb29f19c5 --- /dev/null +++ b/common.blocks/link/link.css @@ -0,0 +1,6 @@ +.link { + touch-action: manipulation; +} +.link_disabled { + pointer-events: none; +} diff --git a/common.blocks/link/link.tests/gemini.blocks/separator/separator.css b/common.blocks/link/link.tests/gemini.blocks/separator/separator.css new file mode 100644 index 000000000..567d177e9 --- /dev/null +++ b/common.blocks/link/link.tests/gemini.blocks/separator/separator.css @@ -0,0 +1,3 @@ +.separator { + padding-bottom: 15px; +} diff --git a/common.blocks/menu/__item/menu__item.css b/common.blocks/menu/__item/menu__item.css new file mode 100644 index 000000000..b9a04b4f7 --- /dev/null +++ b/common.blocks/menu/__item/menu__item.css @@ -0,0 +1,3 @@ +.menu__item { + touch-action: manipulation; +} diff --git a/common.blocks/menu/menu.css b/common.blocks/menu/menu.css new file mode 100644 index 000000000..d21a26a81 --- /dev/null +++ b/common.blocks/menu/menu.css @@ -0,0 +1,3 @@ +.menu { + overflow-y: auto; +} diff --git a/common.blocks/menu/menu.tests/gemini.blocks/test/test.css b/common.blocks/menu/menu.tests/gemini.blocks/test/test.css new file mode 100644 index 000000000..bcc498b30 --- /dev/null +++ b/common.blocks/menu/menu.tests/gemini.blocks/test/test.css @@ -0,0 +1,9 @@ +.test { + display: table-cell; + + width: 150px; + padding-right: 20px; +} +.test .menu { + border: 1px solid rgba(0, 0, 0, 0.1); +} diff --git a/common.blocks/menu/menu.tests/simple.blocks/test/test.css b/common.blocks/menu/menu.tests/simple.blocks/test/test.css new file mode 100644 index 000000000..2fc0a9d62 --- /dev/null +++ b/common.blocks/menu/menu.tests/simple.blocks/test/test.css @@ -0,0 +1,18 @@ +.test { + display: table-cell; + + width: 150px; + padding: 1px; + + border-right: 20px solid transparent; +} +.test h3 { + margin-top: 0; +} +.test .button { + display: block; + margin: 5px; +} +.test .menu[class*="menu_theme"] { + border: 1px solid rgba(0, 0, 0, 0.1); +} diff --git a/common.blocks/modal/modal.css b/common.blocks/modal/modal.css new file mode 100644 index 000000000..50a98742e --- /dev/null +++ b/common.blocks/modal/modal.css @@ -0,0 +1,26 @@ +.modal { + position: fixed; + top: 0; + left: 0; + + height: 100%; + width: 100%; + + overflow-y: auto; + + -webkit-overflow-scrolling: touch; +} +.modal__table { + display: table; + width: 100%; + height: 100%; + text-align: center; +} +.modal__cell { + display: table-cell; + vertical-align: middle; +} +.modal__content { + display: inline-block; + text-align: left; +} diff --git a/common.blocks/modal/modal.tests/simple.blocks/test/test.css b/common.blocks/modal/modal.tests/simple.blocks/test/test.css new file mode 100644 index 000000000..81da3760f --- /dev/null +++ b/common.blocks/modal/modal.tests/simple.blocks/test/test.css @@ -0,0 +1,13 @@ +.test { + margin: 10px 0; +} + +.test__content { + width: 450px; + padding: 20px; +} + +.page_hide-scroll { + overflow: hidden; + min-height: 100vh; +} diff --git a/common.blocks/popup/popup.css b/common.blocks/popup/popup.css new file mode 100644 index 000000000..60ab6e03d --- /dev/null +++ b/common.blocks/popup/popup.css @@ -0,0 +1,3 @@ +.popup { + position: absolute; +} diff --git a/common.blocks/popup/popup.examples/20-popup.blocks/directions/directions.css b/common.blocks/popup/popup.examples/20-popup.blocks/directions/directions.css new file mode 100644 index 000000000..d15316565 --- /dev/null +++ b/common.blocks/popup/popup.examples/20-popup.blocks/directions/directions.css @@ -0,0 +1,18 @@ +.directions { + padding: 70px; +} +.directions__cell { + padding: 8px; +} +.directions__cell_border_yes { + border: 1px solid #ccc; +} +.directions__cell_align_left { + text-align: left; +} +.directions__cell_align_center { + text-align: center; +} +.directions__cell_align_right { + text-align: right; +} diff --git a/common.blocks/popup/popup.examples/20-popup.blocks/page/page.css b/common.blocks/popup/popup.examples/20-popup.blocks/page/page.css new file mode 100644 index 000000000..22895fa8b --- /dev/null +++ b/common.blocks/popup/popup.examples/20-popup.blocks/page/page.css @@ -0,0 +1,3 @@ +.page { + padding: 15px; +} diff --git a/common.blocks/popup/popup.examples/20-popup.blocks/popup/popup.css b/common.blocks/popup/popup.examples/20-popup.blocks/popup/popup.css new file mode 100644 index 000000000..251e14bcd --- /dev/null +++ b/common.blocks/popup/popup.examples/20-popup.blocks/popup/popup.css @@ -0,0 +1,14 @@ +.popup:after { + font-size: 10px; + line-height: 10px; + + position: absolute; + top: 0; + right: 0; + + display: block; + + content: 'z-index: ' attr(zindex); + + color: #ddd; +} diff --git a/common.blocks/popup/popup.examples/20-popup.blocks/scrollable/scrollable.css b/common.blocks/popup/popup.examples/20-popup.blocks/scrollable/scrollable.css new file mode 100644 index 000000000..10cee67ac --- /dev/null +++ b/common.blocks/popup/popup.examples/20-popup.blocks/scrollable/scrollable.css @@ -0,0 +1,18 @@ +.scrollable { + overflow: auto; + + width: 300px; + height: 300px; + + background-color: #eee; +} +.scrollable .test { + position: relative; + width: 800px; + height: 800px; +} +.scrollable .test .link { + position: absolute; + top: 50%; + left: 50%; +} diff --git a/common.blocks/popup/popup.examples/20-popup.blocks/summon-test/summon-test.css b/common.blocks/popup/popup.examples/20-popup.blocks/summon-test/summon-test.css new file mode 100644 index 000000000..d53fc0e8f --- /dev/null +++ b/common.blocks/popup/popup.examples/20-popup.blocks/summon-test/summon-test.css @@ -0,0 +1,15 @@ +.summon-test { + display: inline-block; + + margin-bottom: 1em; + padding: 10px; + + background-color: #eee; +} +.summon-test__popup { + padding: 10px; +} +.summon-test .test { + display: inline-block; + margin-right: 100px; +} diff --git a/common.blocks/popup/popup.examples/20-popup.blocks/test/test.css b/common.blocks/popup/popup.examples/20-popup.blocks/test/test.css new file mode 100644 index 000000000..dd45263fc --- /dev/null +++ b/common.blocks/popup/popup.examples/20-popup.blocks/test/test.css @@ -0,0 +1,3 @@ +.test__popup { + padding: 16px; +} diff --git a/common.blocks/popup/popup.tests/gemini.blocks/test-wrap/test-wrap.css b/common.blocks/popup/popup.tests/gemini.blocks/test-wrap/test-wrap.css new file mode 100644 index 000000000..cf8618ffd --- /dev/null +++ b/common.blocks/popup/popup.tests/gemini.blocks/test-wrap/test-wrap.css @@ -0,0 +1,4 @@ +.test-wrap { + position: relative; + height: 400px; +} diff --git a/common.blocks/popup/popup.tests/gemini.blocks/test/test.css b/common.blocks/popup/popup.tests/gemini.blocks/test/test.css new file mode 100644 index 000000000..c4fce8644 --- /dev/null +++ b/common.blocks/popup/popup.tests/gemini.blocks/test/test.css @@ -0,0 +1,25 @@ +.test { + position: absolute; +} +.test_direction_all, + .test_direction_left, + .test_direction_right { + top: 200px; +} +.test_direction_all { + left: 300px; +} +.test_direction_left { + left: 170px; +} +.test_direction_right { + left: 410px; +} +.test_direction_bottom { + top: 250px; + left: 280px; +} +.test_direction_top { + top: 150px; + left: 290px; +} diff --git a/common.blocks/popup/popup.tests/simple.blocks/test-wrap/test-wrap.css b/common.blocks/popup/popup.tests/simple.blocks/test-wrap/test-wrap.css new file mode 100644 index 000000000..cf8618ffd --- /dev/null +++ b/common.blocks/popup/popup.tests/simple.blocks/test-wrap/test-wrap.css @@ -0,0 +1,4 @@ +.test-wrap { + position: relative; + height: 400px; +} diff --git a/common.blocks/popup/popup.tests/simple.blocks/test/test.css b/common.blocks/popup/popup.tests/simple.blocks/test/test.css new file mode 100644 index 000000000..c4fce8644 --- /dev/null +++ b/common.blocks/popup/popup.tests/simple.blocks/test/test.css @@ -0,0 +1,25 @@ +.test { + position: absolute; +} +.test_direction_all, + .test_direction_left, + .test_direction_right { + top: 200px; +} +.test_direction_all { + left: 300px; +} +.test_direction_left { + left: 170px; +} +.test_direction_right { + left: 410px; +} +.test_direction_bottom { + top: 250px; + left: 280px; +} +.test_direction_top { + top: 150px; + left: 290px; +} diff --git a/common.blocks/progressbar/progressbar.tests/gemini.blocks/test/test.css b/common.blocks/progressbar/progressbar.tests/gemini.blocks/test/test.css new file mode 100644 index 000000000..51b33bc02 --- /dev/null +++ b/common.blocks/progressbar/progressbar.tests/gemini.blocks/test/test.css @@ -0,0 +1,3 @@ +.test { + width: 300px; +} diff --git a/common.blocks/radio-group/radio-group.tests/gemini.blocks/test/test.css b/common.blocks/radio-group/radio-group.tests/gemini.blocks/test/test.css new file mode 100644 index 000000000..6f3fa0872 --- /dev/null +++ b/common.blocks/radio-group/radio-group.tests/gemini.blocks/test/test.css @@ -0,0 +1,5 @@ +.test { + display: inline-block; + + margin: 0 55px 10px 0; +} diff --git a/common.blocks/radio/_type/radio_type_button.css b/common.blocks/radio/_type/radio_type_button.css new file mode 100644 index 000000000..b334bc5f2 --- /dev/null +++ b/common.blocks/radio/_type/radio_type_button.css @@ -0,0 +1,5 @@ +.radio.radio_type_button .radio__control { + position: absolute; + + visibility: hidden; +} diff --git a/common.blocks/radio/radio.css b/common.blocks/radio/radio.css new file mode 100644 index 000000000..fed4b7488 --- /dev/null +++ b/common.blocks/radio/radio.css @@ -0,0 +1,3 @@ +.radio { + touch-action: manipulation; +} diff --git a/common.blocks/select/select.css b/common.blocks/select/select.css new file mode 100644 index 000000000..23eab6901 --- /dev/null +++ b/common.blocks/select/select.css @@ -0,0 +1,3 @@ +.select { + display: inline-block; +} diff --git a/common.blocks/select/select.tests/gemini.blocks/test/test.css b/common.blocks/select/select.tests/gemini.blocks/test/test.css new file mode 100644 index 000000000..138936bda --- /dev/null +++ b/common.blocks/select/select.tests/gemini.blocks/test/test.css @@ -0,0 +1,4 @@ +.test { + width: 220px; + padding: 0 40px 150px 0; +} diff --git a/common.blocks/textarea/textarea.css b/common.blocks/textarea/textarea.css new file mode 100644 index 000000000..28110680b --- /dev/null +++ b/common.blocks/textarea/textarea.css @@ -0,0 +1,3 @@ +.textarea { + touch-action: manipulation; +} diff --git a/common.blocks/textarea/textarea.tests/gemini.blocks/test/test.css b/common.blocks/textarea/textarea.tests/gemini.blocks/test/test.css new file mode 100644 index 000000000..598fb1332 --- /dev/null +++ b/common.blocks/textarea/textarea.tests/gemini.blocks/test/test.css @@ -0,0 +1,5 @@ +.test { + display: inline-block; + + margin-right: 10px; +} diff --git a/common.blocks/z-index-group/z-index-group.css b/common.blocks/z-index-group/z-index-group.css new file mode 100644 index 000000000..c23892dea --- /dev/null +++ b/common.blocks/z-index-group/z-index-group.css @@ -0,0 +1,30 @@ +.z-index-group_level_0 { + z-index: 1000 +} +.z-index-group_level_1 { + z-index: 2000 +} +.z-index-group_level_2 { + z-index: 3000 +} +.z-index-group_level_3 { + z-index: 4000 +} +.z-index-group_level_4 { + z-index: 5000 +} +.z-index-group_level_5 { + z-index: 6000 +} +.z-index-group_level_6 { + z-index: 7000 +} +.z-index-group_level_7 { + z-index: 8000 +} +.z-index-group_level_8 { + z-index: 9000 +} +.z-index-group_level_9 { + z-index: 10000 +} diff --git a/common.blocks/z-index-group/z-index-group.examples/10-z-index-group.blocks/popup/_size/popup_size_bigger.css b/common.blocks/z-index-group/z-index-group.examples/10-z-index-group.blocks/popup/_size/popup_size_bigger.css new file mode 100644 index 000000000..201437a35 --- /dev/null +++ b/common.blocks/z-index-group/z-index-group.examples/10-z-index-group.blocks/popup/_size/popup_size_bigger.css @@ -0,0 +1,3 @@ +.popup_size_bigger { + padding: 50px; +} diff --git a/design/common.blocks/attach/_theme/attach_theme_islands.css b/design/common.blocks/attach/_theme/attach_theme_islands.css new file mode 100644 index 000000000..90d598ceb --- /dev/null +++ b/design/common.blocks/attach/_theme/attach_theme_islands.css @@ -0,0 +1,73 @@ +.attach_theme_islands { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + + display: inline-block; + + white-space: nowrap; +} +.attach_theme_islands .attach__control { + position: absolute; + z-index: 2; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + cursor: pointer; + opacity: 0; +} +.attach_theme_islands .attach__file, + .attach_theme_islands .attach__no-file { + display: inline; + margin-left: 0.4em; +} +.attach_theme_islands .attach__clear { + display: inline-block; + margin-left: 0.4em; + cursor: pointer; + -webkit-transition: opacity 0.1s ease-out; + transition: opacity 0.1s ease-out; + vertical-align: middle; + opacity: 0.3; + background: center no-repeat; +} +.attach_theme_islands .attach__clear:hover { + opacity: 1; +} +.attach_theme_islands.attach_disabled .attach__file, + .attach_theme_islands.attach_disabled .attach__no-file { + opacity: 0.6; +} +.attach_theme_islands.attach_size_s { + font-size: 13px; +} +.attach_theme_islands.attach_size_m { + font-size: 13px; +} +.attach_theme_islands.attach_size_l { + font-size: 15px; +} +.attach_theme_islands.attach_size_xl { + font-size: 18px; +} +.attach_theme_islands.attach_size_s .attach__clear, + .attach_theme_islands.attach_size_m .attach__clear { + width: 10px; + height: 14px; + background-image: url(../../theme/_islands/clear_size_s.svg); +} +.attach_theme_islands.attach_size_l .attach__clear, + .attach_theme_islands.attach_size_xl .attach__clear { + width: 14px; + height: 14px; + background-image: url(../../theme/_islands/clear_size_l.svg); +} +.attach_theme_islands .button { + position: relative; +} +.attach_theme_islands .button__text { + display: inline; + z-index: 1; +} diff --git a/design/common.blocks/attach/_theme/attach_theme_simple.css b/design/common.blocks/attach/_theme/attach_theme_simple.css new file mode 100644 index 000000000..09beb5c6c --- /dev/null +++ b/design/common.blocks/attach/_theme/attach_theme_simple.css @@ -0,0 +1,40 @@ +.attach_theme_simple { + display: inline-block; + + white-space: nowrap; +} +.attach_theme_simple .attach__control { + position: absolute; + z-index: 2; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + margin: 0; + cursor: pointer; + opacity: 0; +} +.attach_theme_simple .attach__file, + .attach_theme_simple .attach__no-file { + display: inline; + margin-left: 0.5em; +} +.attach_theme_simple .attach__clear { + margin-left: 5px; + cursor: pointer; +} +.attach_theme_simple .attach__clear:before { + content: '×'; +} +.attach_theme_simple.attach_disabled .attach__file, + .attach_theme_simple.attach_disabled .attach__no-file { + opacity: 0.6; +} +.attach_theme_simple .button { + position: relative; +} +.attach_theme_simple .button__text { + display: inline; + z-index: 1; +} diff --git a/design/common.blocks/button/_theme/button_theme_islands.css b/design/common.blocks/button/_theme/button_theme_islands.css new file mode 100644 index 000000000..dce60ffe3 --- /dev/null +++ b/design/common.blocks/button/_theme/button_theme_islands.css @@ -0,0 +1,329 @@ +.button_theme_islands { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + + position: relative; + + display: inline-block; + + margin: 0; + padding: 0; + + -webkit-user-select: none; + + -moz-user-select: none; + + -ms-user-select: none; + + user-select: none; + + color: #000; + border: 0; + border-radius: 3px; + outline: 0; + background: rgba(0, 0, 0, 0.2); + + text-align: center; + white-space: nowrap; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.button_theme_islands::-moz-focus-inner { + padding: 0; + border: 0; +} + +.button_theme_islands .button__text { + position: relative; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; +} + +.button_theme_islands .icon { + position: relative; +} + +.button_theme_islands.button_type_link { + text-decoration: none; +} +/* Decorative element (inner background) */ + +.button_theme_islands:before { + position: absolute; + top: 1px; + right: 1px; + bottom: 1px; + left: 1px; + content: ''; + border-radius: 2px; + background: #fff; +} + +.button_theme_islands.button_hovered { + cursor: pointer; + background: rgba(0, 0, 0, 0.3); +} + +.button_theme_islands.button_focused-hard { + z-index: 1; + background: rgba(178, 142, 0, 0.6); +} + +.button_theme_islands.button_focused-hard.button:before { + box-shadow: 0 0 0 1px #ffcc00, inset 0 0 0 1px #ffcc00; +} + +.button_theme_islands.button_pressed:before { + background: #f6f5f3; +} + +.button_theme_islands.button_checked { + background: rgba(153, 122, 0, 0.5); +} + +.button_theme_islands.button_checked:before { + background: #ffeba0; +} + +.button_theme_islands.button_checked.button_pressed { + background: rgba(129, 103, 0, 0.6); +} + +.button_theme_islands.button_checked.button_pressed:before { + background: #fee481; +} + +.button_theme_islands.button_checked.button_hovered { + background: rgba(129, 103, 0, 0.6); +} + +.button_theme_islands.button_view_plain { + background: none; +} + +.button_theme_islands.button_view_plain.button_pressed { + background: #f6f5f3; +} + +.button_theme_islands.button_view_plain.button_checked { + background: #ffeba0; +} + +.button_theme_islands.button_view_plain.button_checked.button_pressed { + background: #fee481; +} + +.button_theme_islands.button_view_plain.button_disabled { + background: none; +} + +.button_theme_islands.button_view_action { + background: #ffdb4d; +} + +.button_theme_islands.button_view_action:before { + display: none; +} + +.button_theme_islands.button_view_action.button_hovered { + background: #ffd633; +} + +.button_theme_islands.button_view_action.button_pressed { + background: #ffcc00; +} + +.button_theme_islands.button_view_action.button_focused-hard { + -webkit-animation: button-action-focus 0.5s infinite linear alternate; + animation: button-action-focus 0.5s infinite linear alternate; + box-shadow: none; +} + +.button_theme_islands.button_view_pseudo { + overflow: hidden; + background: none; +} + +.button_theme_islands.button_view_pseudo:before { + background: none; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); +} + +.button_theme_islands.button_view_pseudo.button_hovered:before { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); +} + +.button_theme_islands.button_view_pseudo.button_pressed:before { + background: rgba(0, 0, 0, 0.05); +} + +.button_theme_islands.button_view_pseudo.button_checked:before { + background: #ffeba0; + box-shadow: 0 0 0 1px rgba(153, 122, 0, 0.5); +} + +.button_theme_islands.button_view_pseudo.button_checked.button_hovered:before { + box-shadow: 0 0 0 1px rgba(129, 103, 0, 0.6); +} + +.button_theme_islands.button_view_pseudo.button_checked.button_pressed:before { + background: #fee481; + box-shadow: 0 0 0 1px rgba(129, 103, 0, 0.6); +} + +.button_theme_islands.button_disabled { + background: rgba(0, 0, 0, 0.08); +} + +.button_theme_islands.button_disabled:before { + display: none; +} + +.button_theme_islands.button_disabled.button_checked { + background: rgba(0, 0, 0, 0.15); +} + +.button_theme_islands.button_disabled .button__text { + color: #767676; +} + +.button_theme_islands.button_disabled .icon { + opacity: 0.3; +} + +.button_theme_islands.button_size_s { + font-size: 13px; + line-height: 24px; +} + +.button_theme_islands.button_size_s .icon { + width: 24px; +} + +.button_theme_islands.button_size_s .button__text { + margin: 0 10px; +} + +.button_theme_islands.button_size_m { + font-size: 13px; + line-height: 28px; +} + +.button_theme_islands.button_size_m .icon { + width: 28px; +} + +.button_theme_islands.button_size_m .button__text { + margin: 0 13px; +} + +.button_theme_islands.button_size_l { + font-size: 15px; + line-height: 32px; +} + +.button_theme_islands.button_size_l .icon { + width: 32px; +} + +.button_theme_islands.button_size_l .button__text { + margin: 0 15px; +} + +.button_theme_islands.button_size_xl { + font-size: 18px; + line-height: 38px; +} + +.button_theme_islands.button_size_xl .icon { + width: 38px; +} + +.button_theme_islands.button_size_xl .button__text { + margin: 0 18px; +} + +.button_theme_islands .icon + .button__text { + margin-left: 0; +} + +.button_theme_islands .button__text:not(:last-child) { + margin-right: 0; +} + +@-webkit-keyframes button-action-focus { + from { + background-color: #ffdb4d; + } + + to { + background-color: #fc0; + } +} + +@keyframes button-action-focus { + from { + background-color: #ffdb4d; + } + + to { + background-color: #fc0; + } +} + +.control-group .button_checked + .button_theme_islands:before, + .control-group .radio_checked + .radio .button_theme_islands:before, + .control-group .checkbox_checked + .checkbox .button_theme_islands:before { + left: 0; +} + +.control-group .button_theme_islands { + border-radius: 0; +} + +.control-group .button_theme_islands:before { + right: 0; + border-radius: 0; +} + +.control-group .button_theme_islands.button_checked:before { + right: 1px; +} + +.control-group .button_theme_islands.button_focused-hard.button:before { + left: 0; +} + +.control-group > .button_theme_islands:first-child, + .control-group > :first-child .button_theme_islands, + .control-group > :first-child.popup + .button_theme_islands { + border-radius: 3px 0 0 3px; +} + +.control-group > .button_theme_islands:first-child:before, .control-group > :first-child .button_theme_islands:before, .control-group > :first-child.popup + .button_theme_islands:before { + border-radius: 2px 0 0 2px; +} + +.control-group > .button_theme_islands:first-child.button_focused-hard.button:before, .control-group > :first-child .button_theme_islands.button_focused-hard.button:before, .control-group > :first-child.popup + .button_theme_islands.button_focused-hard.button:before { + left: 1px; +} + +.control-group > .button_theme_islands:last-child, + .control-group > :last-child .button_theme_islands { + border-radius: 0 3px 3px 0; +} + +.control-group > .button_theme_islands:last-child:before, .control-group > :last-child .button_theme_islands:before { + border-radius: 0 2px 2px 0; + right: 1px; +} + +.control-group > :only-child .button_theme_islands { + border-radius: 3px; +} + +.control-group > :only-child .button_theme_islands:before { + border-radius: 2px; +} diff --git a/design/common.blocks/button/_theme/button_theme_simple.css b/design/common.blocks/button/_theme/button_theme_simple.css new file mode 100644 index 000000000..becbfe900 --- /dev/null +++ b/design/common.blocks/button/_theme/button_theme_simple.css @@ -0,0 +1,63 @@ +.button_theme_simple { + font-family: inherit; + font-size: 100%; + line-height: 100%; + + display: inline-block; + + margin: 0; + padding: 0.2em 1em; + + text-align: center; + + border: 1px solid rgba(0, 0, 0, 0.3); + outline: 0; + border-radius: 3px; + color: #000; + background: #fff; +} +.button_theme_simple::-moz-focus-inner { + padding: 0; + border: 0; +} +.button_theme_simple .button__text { + position: relative; +} +.button_theme_simple.button_type_link { + text-decoration: none; +} +.button_theme_simple.button_disabled { + opacity: 0.6; +} +.button_theme_simple.button_focused-hard { + box-shadow: 0 0 5px 1px #fc0; +} +.button_theme_simple.button_hovered { + border-color: rgba(0, 0, 0, 0.5); +} +.button_theme_simple.button_checked { + background: #fff7db; +} +.button_theme_simple.button_pressed { + background: #fff7db; + box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.1); +} +.button_theme_simple.button_pressed.button_focused-hard { + box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.1), + 0 0 5px 1px #fc0; +} +.button_theme_simple.button_pressed .button__text, + .button_theme_simple.button_pressed .icon { + position: relative; + top: 1px; +} +.button_theme_simple .icon { + width: 1em; + margin-left: -0.7em; +} +.button_theme_simple .icon + .button__text { + margin-left: 0.3em; +} +.button_theme_simple .icon:last-child { + margin-right: -0.7em; +} diff --git a/design/common.blocks/checkbox-group/_theme/checkbox-group_theme_islands.css b/design/common.blocks/checkbox-group/_theme/checkbox-group_theme_islands.css new file mode 100644 index 000000000..334b0cc17 --- /dev/null +++ b/design/common.blocks/checkbox-group/_theme/checkbox-group_theme_islands.css @@ -0,0 +1,13 @@ +.checkbox-group_theme_islands { + display: inline-block; +} +.checkbox-group_theme_islands.checkbox-group_size_m { + line-height: 24px; +} +.checkbox-group_theme_islands.checkbox-group_size_l { + line-height: 30px; +} +.checkbox-group_theme_islands.checkbox-group_type_button { + display: inline-block; + white-space: nowrap; +} diff --git a/design/common.blocks/checkbox-group/_theme/checkbox-group_theme_simple.css b/design/common.blocks/checkbox-group/_theme/checkbox-group_theme_simple.css new file mode 100644 index 000000000..f8b5d1c06 --- /dev/null +++ b/design/common.blocks/checkbox-group/_theme/checkbox-group_theme_simple.css @@ -0,0 +1,16 @@ +.checkbox-group_theme_simple .checkbox_type_button:first-of-type .button_togglable_check, + .checkbox-group_theme_simple .checkbox_type_button~ .checkbox_type_button .button_togglable_check { + border-right-width: 0; +} +.checkbox-group_theme_simple .checkbox_type_button~ .checkbox_type_button .button_togglable_check { + border-radius: 0; +} +.checkbox-group_theme_simple .checkbox_type_button:first-of-type .button_togglable_check { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.checkbox-group_theme_simple .checkbox_type_button:last-of-type .button_togglable_check { + border-right-width: 1px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} diff --git a/design/common.blocks/checkbox/_theme/checkbox_theme_islands.css b/design/common.blocks/checkbox/_theme/checkbox_theme_islands.css new file mode 100644 index 000000000..c1a31c32b --- /dev/null +++ b/design/common.blocks/checkbox/_theme/checkbox_theme_islands.css @@ -0,0 +1,164 @@ +.checkbox_theme_islands { + position: relative; /* fix #1538 */ + + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.checkbox_theme_islands:hover { + cursor: pointer; +} + +.checkbox_theme_islands .checkbox__control { + position: absolute; + z-index: -1; + margin: 0; + opacity: 0; +} + +.checkbox_theme_islands .checkbox__box { + position: relative; + display: inline-block; + border-radius: 3px; + background: rgba(0, 0, 0, 0.2); +} + +.checkbox_theme_islands .checkbox__box:before { + position: absolute; + top: 1px; + right: 1px; + bottom: 1px; + left: 1px; + content: ''; + border-radius: 2px; + background: #fff; +} + +.checkbox_theme_islands .checkbox__box:after { + position: absolute; + top: -5px; + left: 2px; + content: ''; + background-image: url(../../theme/_islands/tip.svg); + background-size: 100%; + visibility: hidden; + opacity: 0; + -webkit-transition: opacity .05s ease-out, visibility 0s linear .05s, -webkit-transform .05s ease-out; + transition: opacity .05s ease-out, visibility 0s linear .05s, -webkit-transform .05s ease-out; + transition: transform .05s ease-out, opacity .05s ease-out, visibility 0s linear .05s; + transition: transform .05s ease-out, opacity .05s ease-out, visibility 0s linear .05s, -webkit-transform .05s ease-out; +} + +.checkbox_theme_islands.checkbox_size_m { + font-size: 13px; +} + +.checkbox_theme_islands.checkbox_size_m .checkbox__box { + line-height: 14px; + top: 2px; + width: 14px; + height: 14px; + margin-right: 5px; +} + +.checkbox_theme_islands.checkbox_size_m .checkbox__box:after { + width: 15px; + height: 15px; + -webkit-transform: translateY(-5px); + transform: translateY(-5px); +} + +.checkbox_theme_islands.checkbox_size_l { + font-size: 15px; +} + +.checkbox_theme_islands.checkbox_size_l .checkbox__box { + line-height: 17px; + top: 3px; + width: 17px; + height: 17px; + margin-right: 7px; +} + +.checkbox_theme_islands.checkbox_size_l .checkbox__box:after { + width: 18px; + height: 18px; + -webkit-transform: translateY(-7px); + transform: translateY(-7px); +} + +.checkbox_theme_islands.checkbox_checked .checkbox__box { + background: rgba(153, 122, 0, 0.5); +} + +.checkbox_theme_islands.checkbox_checked .checkbox__box:before { + background: #ffeba0; +} + +.checkbox_theme_islands.checkbox_checked .checkbox__box:after { + visibility: visible; + opacity: 1; + -webkit-transform: translateY(0px); + transform: translateY(0px); + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + +.checkbox_theme_islands.checkbox_focused .checkbox__box:before { + box-shadow: 0 0 0 1px #ffcc00, inset 0 0 0 1px #ffcc00; +} + +.checkbox_theme_islands.checkbox_hovered .checkbox__box { + background: rgba(0, 0, 0, 0.3); +} + +.checkbox_theme_islands.checkbox_hovered.checkbox_checked .checkbox__box { + background: rgba(129, 103, 0, 0.6); +} + +.checkbox_theme_islands.checkbox_disabled { + cursor: default; + color: #999; +} + +.checkbox_theme_islands.checkbox_disabled .checkbox__box { + background: rgba(0, 0, 0, 0.08); +} + +.checkbox_theme_islands.checkbox_disabled .checkbox__box:before { + display: none; +} + +.checkbox_theme_islands.checkbox_disabled.checkbox_checked .checkbox__box { + background: rgba(0, 0, 0, 0.15); +} + +.checkbox_theme_islands.checkbox_disabled.checkbox_checked .checkbox__box:after { + opacity: 0.4; +} + +.checkbox_theme_islands.checkbox_type_button { + display: inline-block; +} + +.checkbox_theme_islands.checkbox_type_line.checkbox_size_m { + margin-right: 13px; +} + +.checkbox_theme_islands.checkbox_type_line.checkbox_size_l { + margin-right: 15px; +} + +.checkbox_theme_islands.checkbox_type_line:last-child + { + margin-right: 0; +} + +/* hack for Safari only */ + +_::-webkit-full-page-media, +_:future, +:root .checkbox_theme_islands .checkbox__box { + pointer-events: none; /* NOTE: Fix #1472 and #1590 */ +} diff --git a/design/common.blocks/checkbox/_theme/checkbox_theme_simple.css b/design/common.blocks/checkbox/_theme/checkbox_theme_simple.css new file mode 100644 index 000000000..dab7c39ab --- /dev/null +++ b/design/common.blocks/checkbox/_theme/checkbox_theme_simple.css @@ -0,0 +1,43 @@ +.checkbox_theme_simple { + position: relative; +} + +.checkbox_theme_simple .checkbox__control { + position: absolute; + z-index: -1; + visibility: hidden; +} + +.checkbox_theme_simple .checkbox__box { + display: inline-block; +} + +.checkbox_theme_simple .checkbox__box:before { + line-height: 0.6em; + display: inline-block; + width: 0.75em; + height: 0.75em; + margin: 0.1em 0.2em 0.3em; + content: ' '; + vertical-align: middle; + border-radius: 2px; + background: #fff; + box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.5); +} + +.checkbox_theme_simple.checkbox_disabled { + opacity: 0.6; +} + +.checkbox_theme_simple.checkbox_checked .checkbox__box:before { + content: '\2713'; + background: #fff7db; +} + +/* hack for Safari only */ + +_::-webkit-full-page-media, +_:future, +:root .checkbox_theme_islands .checkbox__box { + pointer-events: none; /* NOTE: Fix #1472 and #1590 */ +} diff --git a/design/common.blocks/input/_theme/input_theme_islands.css b/design/common.blocks/input/_theme/input_theme_islands.css new file mode 100644 index 000000000..4354e877a --- /dev/null +++ b/design/common.blocks/input/_theme/input_theme_islands.css @@ -0,0 +1,231 @@ +.input_theme_islands { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + + position: relative; + + display: inline-block; + + background: rgba(0, 0, 0, 0.2); + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +/* Decorative element (inner background) */ + +.input_theme_islands:before { + position: absolute; + top: 1px; + right: 1px; + bottom: 1px; + left: 1px; + content: ''; + background: #fff; +} + +.input_theme_islands .input__box { + position: relative; + display: block; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.input_theme_islands .input__control { + font: inherit; + line-height: inherit; + position: relative; + display: inline-block; + box-sizing: border-box; + padding: 0; + width: 100%; + border: 0; + outline: none; + background: none; + -webkit-appearance: none; +} +/*лишние отступы у текста*/ + +.input_theme_islands .input__control::-webkit-search-decoration { + -webkit-appearance: none; +} +/*нативный крестик*/ + +.input_theme_islands .input__control::-webkit-search-cancel-button { + display: none; +} + +.input_theme_islands .input__control::-webkit-input-placeholder { + color: #999; + text-indent: 0; +} + +.input_theme_islands .input__control::-moz-placeholder { + opacity: 1; + color: #999; +} + +.input_theme_islands .input__control::-ms-clear { + display: none; +} + +.input_theme_islands .input__control::-webkit-autofill { + border: 1px solid transparent; + background-clip: padding-box; +} + +.input_theme_islands.input_has-clear .input__control { + text-overflow: ellipsis; +} + +.input_theme_islands .input__clear { + position: absolute; + top: 0; + right: 0; + cursor: text; + -webkit-transition: opacity 0.1s ease-out; + transition: opacity 0.1s ease-out; + opacity: 0; + background: 50% 50% no-repeat; +} + +.input_theme_islands .input__clear_visible { + opacity: 0.3; +} + +.input_theme_islands .input__clear_visible:hover { + cursor: pointer; + opacity: 1; +} + +.input_theme_islands.input_focused { + z-index: 1; +} + +.input_theme_islands.input_focused:before { + box-shadow: 0 0 0 1px #ffcc00, inset 0 0 0 1px #ffcc00; +} + +.input_theme_islands.input_focused .input__control { + text-overflow: clip; + /* fix ellipsis bug in Chrome */ +} + +.input_theme_islands.input_disabled { + background: rgba(0, 0, 0, 0.08); +} + +.input_theme_islands.input_disabled:before, + .input_theme_islands.input_disabled .input__clear { + display: none; +} + +.input_theme_islands.input_disabled .input__box, + .input_theme_islands.input_disabled .input__control { + color: rgba(0, 0, 0, 0.4); + cursor: default; +} + +.input_theme_islands.input_size_s .input__clear, + .input_theme_islands.input_size_m .input__clear { + width: 24px; + height: 24px; + background-image: url(../../theme/_islands/clear_size_s.svg); + background-position: 7px 50%; +} + +.input_theme_islands.input_size_s { + font-size: 13px; + line-height: 16px; +} + +.input_theme_islands.input_size_s .input__control { + height: 24px; + padding: 0 7px; +} + +.input_theme_islands.input_size_s.input_has-clear .input__control { + padding-right: 24px; +} + +.input_theme_islands.input_size_m { + font-size: 13px; + line-height: 16px; +} + +.input_theme_islands.input_size_m .input__control { + height: 28px; + padding: 0 8px; +} + +.input_theme_islands.input_size_m.input_has-clear .input__control { + padding-right: 28px; +} + +.input_theme_islands.input_size_m .input__clear { + width: 28px; + height: 28px; + background-position: 9px 50%; +} + +.input_theme_islands.input_size_l .input__clear, + .input_theme_islands.input_size_xl .input__clear { + width: 32px; + height: 32px; + background-image: url(../../theme/_islands/clear_size_l.svg); + background-position: 9px 50%; +} + +.input_theme_islands.input_size_l { + font-size: 15px; + line-height: 18px; +} + +.input_theme_islands.input_size_l .input__control { + height: 32px; + padding: 0 10px; +} + +.input_theme_islands.input_size_l.input_has-clear .input__control { + padding-right: 32px; +} + +.input_theme_islands.input_size_xl { + font-size: 18px; + line-height: 22px; +} + +.input_theme_islands.input_size_xl .input__control { + height: 38px; + padding: 0 12px; +} + +.input_theme_islands.input_size_xl.input_has-clear .input__control { + padding-right: 38px; +} + +.input_theme_islands.input_size_xl .input__clear { + width: 38px; + height: 38px; + background-position: 12px 50%; +} + +.input_theme_islands.input_has-clear .input__control { + padding-right: 0; +} + +.input_theme_islands.input_width_available { + width: 100%; +} + +.input_theme_islands.input_type_password .input__control { + text-overflow: clip; +} + +.control-group .input_theme_islands:before { + right: 0; +} + +.control-group > .input_theme_islands:last-child:before, .control-group > :last-child .input_theme_islands:before { + right: 1px; +} diff --git a/design/common.blocks/input/_theme/input_theme_simple.css b/design/common.blocks/input/_theme/input_theme_simple.css new file mode 100644 index 000000000..f653bd7ca --- /dev/null +++ b/design/common.blocks/input/_theme/input_theme_simple.css @@ -0,0 +1,84 @@ +.input_theme_simple { + display: inline-block; +} +.input_theme_simple .input__box { + position: relative; + display: block; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: 1px solid rgba(0, 0, 0, 0.3); + background: #fff; +} +.input_theme_simple .input__control { + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + width: 100%; + margin: 0; + border: 0; + -webkit-appearance: none; +} +.input_theme_simple .input__control::-ms-clear { + display: none; +} +.input_theme_simple .input__control::-webkit-search-decoration { + -webkit-appearance: none; +} +.input_theme_simple .input__control::-webkit-search-cancel-button { + display: none; +} +.input_theme_simple .input__clear { + position: absolute; + z-index: 1; + top: 0; + right: 0; + bottom: 0; + display: none; + margin: 0; + padding: 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.input_theme_simple .input__clear:after { + font-size: 140%; + font-weight: bold; + line-height: 1; + display: block; + width: 1.2em; + content: '×'; + text-align: center; +} +.input_theme_simple .input__clear_visible { + display: block; + cursor: pointer; + opacity: 0.2; +} +.input_theme_simple .input__clear_visible:hover { + opacity: 1; +} +.input_theme_simple.input_disabled { + opacity: 0.6; +} +.input_theme_simple.input_disabled .input__control { + resize: none; +} +.input_theme_simple.input_disabled .input__clear { + display: none; +} +.input_theme_simple.input_disabled .input__box, + .input_theme_simple.input_disabled .input__control { + cursor: auto; +} +.input_theme_simple.input_width_available { + width: 100%; +} +.input_theme_simple.input_focused .input__box { + box-shadow: 0 0 5px 1px #fc0; +} +.input_theme_simple.input_focused .input__control:focus { + outline: none; +} diff --git a/design/common.blocks/link/_theme/link_theme_islands.css b/design/common.blocks/link/_theme/link_theme_islands.css new file mode 100644 index 000000000..8be403d02 --- /dev/null +++ b/design/common.blocks/link/_theme/link_theme_islands.css @@ -0,0 +1,47 @@ +.link_theme_islands { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + color: #04b; + cursor: pointer; + -webkit-transition: color 0.15s ease-out; + transition: color 0.15s ease-out; + text-decoration: none; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); +} +.link_theme_islands.link_view_minor { + color: #669; +} +.link_theme_islands.link_view_external { + color: #070; +} +.link_theme_islands.link_view_ghost { + color: #999; +} +.link_theme_islands.link_view_ghost:hover { + color: #000; +} +.link_theme_islands.link_view_text { + color: #000; +} +.link_theme_islands.link_view_strong { + font-weight: bold; +} +.link_theme_islands:hover { + color: #e00; +} +.link_theme_islands.link_size_s { + font-size: 13px; +} +.link_theme_islands.link_size_m { + font-size: 13px; +} +.link_theme_islands.link_size_l { + font-size: 15px; +} +.link_theme_islands.link_size_xl { + font-size: 18px; +} +.link_theme_islands.link_disabled { + color: #ddd; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} diff --git a/design/common.blocks/link/_theme/link_theme_simple.css b/design/common.blocks/link/_theme/link_theme_simple.css new file mode 100644 index 000000000..0bb13b916 --- /dev/null +++ b/design/common.blocks/link/_theme/link_theme_simple.css @@ -0,0 +1,14 @@ +.link_theme_simple { + cursor: pointer; + text-decoration: underline; +} +.link_theme_simple, + .link_theme_simple:link { + color: #008ace; +} +.link_theme_simple:visited { + color: #b40eb4; +} +.link_theme_simple:hover { + color: #c00; +} diff --git a/design/common.blocks/menu/__item/_theme/menu__item_theme_islands.css b/design/common.blocks/menu/__item/_theme/menu__item_theme_islands.css new file mode 100644 index 000000000..96940647f --- /dev/null +++ b/design/common.blocks/menu/__item/_theme/menu__item_theme_islands.css @@ -0,0 +1,98 @@ +.menu__item_theme_islands { + position: relative; + + white-space: nowrap; +} + +.menu__item_theme_islands.menu__item_disabled { + opacity: 0.3; +} + +.menu__item_theme_islands .link_disabled { + cursor: text; +} + +.menu__item_theme_islands.menu__item_checked { + background: 0 50% no-repeat url(../../../theme/_islands/tip.svg); +} + +.menu__item_theme_islands.menu__item_hovered { + cursor: pointer; + background-color: #ffeba0; +} + +.menu__item_theme_islands.menu__item_type_link .link { + text-decoration: none; + color: inherit; + outline: none; +} +/* Fit clickable area to `menu__item` size */ + +.menu__item_theme_islands.menu__item_type_link .link:after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + content: ''; +} + +.menu_size_s .menu__item_theme_islands { + padding: 0 10px; + background-size: 14px 14px; + background-position: 10px 50%; +} + +.menu_size_s .menu__group + .menu__item_theme_islands { + margin-top: 3px; +} + +.menu_size_s[class*='menu_mode'] .menu__item_theme_islands, + .menu_size_s .menu__group-title ~ .menu__item_theme_islands { + padding: 0 30px; +} + +.menu_size_m .menu__item_theme_islands { + padding: 0 13px; + background-size: 14px 14px; + background-position: 13px 50%; +} + +.menu_size_m .menu__group + .menu__item_theme_islands { + margin-top: 4px; +} + +.menu_size_m[class*='menu_mode'] .menu__item_theme_islands, + .menu_size_m .menu__group-title ~ .menu__item_theme_islands { + padding: 0 30px; +} + +.menu_size_l .menu__item_theme_islands { + padding: 0 15px; + background-size: 15px 15px; + background-position: 15px 50%; +} + +.menu_size_l .menu__group + .menu__item_theme_islands { + margin-top: 5px; +} + +.menu_size_l[class*='menu_mode'] .menu__item_theme_islands, + .menu_size_l .menu__group-title ~ .menu__item_theme_islands { + padding: 0 34px; +} + +.menu_size_xl .menu__item_theme_islands { + padding: 0 20px; + background-size: 15px 15px; + background-position: 20px 50%; +} + +.menu_size_xl .menu__group + .menu__item_theme_islands { + margin-top: 6px; +} + +.menu_size_xl[class*='menu_mode'] .menu__item_theme_islands, + .menu_size_xl .menu__group-title ~ .menu__item_theme_islands { + padding: 0 40px; +} diff --git a/design/common.blocks/menu/__item/_theme/menu__item_theme_simple.css b/design/common.blocks/menu/__item/_theme/menu__item_theme_simple.css new file mode 100644 index 000000000..e2ee4b087 --- /dev/null +++ b/design/common.blocks/menu/__item/_theme/menu__item_theme_simple.css @@ -0,0 +1,23 @@ +.menu__item_theme_simple { + padding: 4px 10px; + + white-space: nowrap; + text-overflow: ellipsis; +} +.menu__group .menu__item_theme_simple { + padding-left: 25px; +} +.menu__item_theme_simple.menu__item_disabled { + opacity: 0.3; +} +.menu__item_theme_simple .link_disabled { + cursor: text; +} +.menu__item_theme_simple.menu__item_checked { + font-weight: bold; + background: #fff7db; +} +.menu__item_theme_simple.menu__item_hovered { + cursor: pointer; + background: #ffc7c7; +} diff --git a/design/common.blocks/menu/_theme/menu_theme_islands.css b/design/common.blocks/menu/_theme/menu_theme_islands.css new file mode 100644 index 000000000..f5ec161ff --- /dev/null +++ b/design/common.blocks/menu/_theme/menu_theme_islands.css @@ -0,0 +1,111 @@ +.menu_theme_islands { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + + box-sizing: border-box; + + -webkit-user-select: none; + + -moz-user-select: none; + + -ms-user-select: none; + + user-select: none; + + outline: 0; + background: #fff; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +/* Using pseudo-elements intead of paddings because of Firefox bug with bottom padding (#1158): + * https://bugzilla.mozilla.org/show_bug.cgi?id=748518 */ +.menu_theme_islands:before, + .menu_theme_islands:after { + display: block; + content: ''; +} +.menu_theme_islands.menu_size_s { + font-size: 13px; + line-height: 24px; +} +.menu_theme_islands.menu_size_s:before, + .menu_theme_islands.menu_size_s:after { + height: 3px; +} +.menu_theme_islands.menu_size_s .menu__item + .menu__group { + margin-top: 3px; +} +.menu_theme_islands.menu_size_s .menu__group { + padding: 3px 0; +} +.menu_theme_islands.menu_size_s .menu__group-title { + padding: 0 10px; +} +.menu_theme_islands.menu_size_m { + font-size: 13px; + line-height: 24px; +} +.menu_theme_islands.menu_size_m:before, + .menu_theme_islands.menu_size_m:after { + height: 4px; +} +.menu_theme_islands.menu_size_m .menu__item + .menu__group { + margin-top: 4px; +} +.menu_theme_islands.menu_size_m .menu__group { + padding: 4px 0; +} +.menu_theme_islands.menu_size_m .menu__group-title { + padding: 0 13px; +} +.menu_theme_islands.menu_size_l { + font-size: 15px; + line-height: 28px; +} +.menu_theme_islands.menu_size_l:before, + .menu_theme_islands.menu_size_l:after { + height: 5px; +} +.menu_theme_islands.menu_size_l .menu__item + .menu__group { + margin-top: 5px; +} +.menu_theme_islands.menu_size_l .menu__group { + padding: 5px 0; +} +.menu_theme_islands.menu_size_l .menu__group-title { + padding: 0 15px; +} +.menu_theme_islands.menu_size_xl { + font-size: 15px; + line-height: 32px; +} +.menu_theme_islands.menu_size_xl:before, + .menu_theme_islands.menu_size_xl:after { + height: 6px; +} +.menu_theme_islands.menu_size_xl .menu__item + .menu__group { + margin-top: 6px; +} +.menu_theme_islands.menu_size_xl .menu__group { + padding: 6px 0; +} +.menu_theme_islands.menu_size_xl .menu__group-title { + padding: 0 20px; +} +.menu_theme_islands .menu__group { + border: 1px solid rgba(0, 0, 0, 0.1); + border-width: 1px 0; +} +.menu_theme_islands .menu__group-title { + color: #999; +} +.menu_theme_islands .menu__group + .menu__group { + border-top: 0; +} +.menu_theme_islands .menu__group:last-child { + padding-bottom: 0; + border-bottom: 0; +} +.menu_theme_islands .menu__group:first-child { + padding-top: 0; + border-top: 0; +} diff --git a/design/common.blocks/menu/_theme/menu_theme_simple.css b/design/common.blocks/menu/_theme/menu_theme_simple.css new file mode 100644 index 000000000..0750369c2 --- /dev/null +++ b/design/common.blocks/menu/_theme/menu_theme_simple.css @@ -0,0 +1,11 @@ +.menu_theme_simple { + outline: 0; +} +.menu_theme_simple.menu_focused { + border-color: rgba(0, 0, 0, 0.2); + box-shadow: 0 0 5px 1px #fc0; +} +.menu_theme_simple .menu__group-title { + font-style: italic; + padding: 4px 10px; +} diff --git a/design/common.blocks/modal/_theme/modal_theme_islands.css b/design/common.blocks/modal/_theme/modal_theme_islands.css new file mode 100644 index 000000000..32eed50dd --- /dev/null +++ b/design/common.blocks/modal/_theme/modal_theme_islands.css @@ -0,0 +1,173 @@ +.modal_theme_islands { + display: none; + visibility: hidden; + + margin: -9999px 0 0 -9999px; /* to prevent clickability and visiblity of internal elements with visiblity: visible */ + + background: rgba(50, 50, 50, 0.2); +} + +.modal_theme_islands, + .modal_theme_islands .modal__content { + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} + +.modal_theme_islands .modal__content { + margin: 5px; + border: 1px solid #bfbfbf; + background-color: #fff; +} + +.modal_theme_islands.modal_js_inited { + display: block; +} + +.modal_theme_islands.modal_has-animation { + -webkit-animation-name: modal_theme_islands; + animation-name: modal_theme_islands; +} + +.modal_theme_islands.modal_has-animation .modal__content { + -webkit-animation-name: modal_theme_islands__content; + animation-name: modal_theme_islands__content; +} + +.modal_theme_islands.modal_visible { + visibility: visible; + margin: 0; +} + +.modal_theme_islands.modal_visible.modal_has-animation { + -webkit-animation-name: modal_theme_islands_visible; + animation-name: modal_theme_islands_visible; +} + +.modal_theme_islands.modal_visible.modal_has-animation .modal__content { + -webkit-animation-name: modal_theme_islands_visible__content; + animation-name: modal_theme_islands_visible__content; +} + +/* closing modal */ + +@-webkit-keyframes modal_theme_islands { + 0% { + visibility: visible; + + margin: 0; + + opacity: 1; + } + + 99% { + margin: 0; + } + + 100% { + visibility: hidden; + + margin: -9999px 0 0 -9999px; + + opacity: 0; + } +} + +@keyframes modal_theme_islands { + 0% { + visibility: visible; + + margin: 0; + + opacity: 1; + } + + 99% { + margin: 0; + } + + 100% { + visibility: hidden; + + margin: -9999px 0 0 -9999px; + + opacity: 0; + } +} + +/* opening modal */ + +@-webkit-keyframes modal_theme_islands_visible { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes modal_theme_islands_visible { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +/* closing modal__content */ + +@-webkit-keyframes modal_theme_islands__content { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 100% { + -webkit-transform: scale(1.5); + transform: scale(1.5); + } +} + +@keyframes modal_theme_islands__content { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 100% { + -webkit-transform: scale(1.5); + transform: scale(1.5); + } +} + +/* opening modal__content */ + +@-webkit-keyframes modal_theme_islands_visible__content { + 0% { + -webkit-transform: scale(.75); + transform: scale(.75); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes modal_theme_islands_visible__content { + 0% { + -webkit-transform: scale(.75); + transform: scale(.75); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} diff --git a/design/common.blocks/modal/_theme/modal_theme_simple.css b/design/common.blocks/modal/_theme/modal_theme_simple.css new file mode 100644 index 000000000..d28fe23eb --- /dev/null +++ b/design/common.blocks/modal/_theme/modal_theme_simple.css @@ -0,0 +1,12 @@ +.modal_theme_simple { + display: none; + + background: rgba(50, 50, 50, .2); +} +.modal_theme_simple.modal_visible { + display: block; +} +.modal_theme_simple .modal__content { + background: #fff; + border: 1px solid #bfbfbf; +} diff --git a/design/common.blocks/page/_theme/page_theme_islands.css b/design/common.blocks/page/_theme/page_theme_islands.css new file mode 100644 index 000000000..d80f63864 --- /dev/null +++ b/design/common.blocks/page/_theme/page_theme_islands.css @@ -0,0 +1,13 @@ +html { + min-height: 100%; +} + +.page_theme_islands { + font: 13px 'Helvetica Neue', Helvetica, Arial, sans-serif; + + min-height: 100%; + margin: 0; + + color: #000; + background: #fff; +} diff --git a/design/common.blocks/popup/_theme/popup_theme_islands.css b/design/common.blocks/popup/_theme/popup_theme_islands.css new file mode 100644 index 000000000..03302a868 --- /dev/null +++ b/design/common.blocks/popup/_theme/popup_theme_islands.css @@ -0,0 +1,454 @@ +.popup_theme_islands { + display: none; + visibility: hidden; + + margin: -9999px 0 0 -9999px; + + -webkit-animation-duration: 0.1s; + + animation-duration: 0.1s; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + + background: #fff; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), + 0 10px 20px -5px rgba(0, 0, 0, 0.4); + + -webkit-animation-fill-mode: forwards; + + animation-fill-mode: forwards; +} + +.popup_theme_islands.popup_js_inited { + display: block; +} + +.popup_theme_islands.popup_visible { + visibility: visible; + margin: 0; +} +/* Divided into two parts for better optimization */ + +.popup_theme_islands.popup_direction_bottom-left { + -webkit-animation-name: popup_theme_islands_bottom; + animation-name: popup_theme_islands_bottom; +} + +.popup_theme_islands.popup_direction_bottom-left.popup_visible { + -webkit-animation-name: popup_theme_islands_bottom_visible; + animation-name: popup_theme_islands_bottom_visible; +} + +.popup_theme_islands.popup_direction_bottom-center { + -webkit-animation-name: popup_theme_islands_bottom; + animation-name: popup_theme_islands_bottom; +} + +.popup_theme_islands.popup_direction_bottom-center.popup_visible { + -webkit-animation-name: popup_theme_islands_bottom_visible; + animation-name: popup_theme_islands_bottom_visible; +} + +.popup_theme_islands.popup_direction_bottom-right { + -webkit-animation-name: popup_theme_islands_bottom; + animation-name: popup_theme_islands_bottom; +} + +.popup_theme_islands.popup_direction_bottom-right.popup_visible { + -webkit-animation-name: popup_theme_islands_bottom_visible; + animation-name: popup_theme_islands_bottom_visible; +} + +.popup_theme_islands.popup_direction_top-left { + -webkit-animation-name: popup_theme_islands_top; + animation-name: popup_theme_islands_top; +} + +.popup_theme_islands.popup_direction_top-left.popup_visible { + -webkit-animation-name: popup_theme_islands_top_visible; + animation-name: popup_theme_islands_top_visible; +} + +.popup_theme_islands.popup_direction_top-center { + -webkit-animation-name: popup_theme_islands_top; + animation-name: popup_theme_islands_top; +} + +.popup_theme_islands.popup_direction_top-center.popup_visible { + -webkit-animation-name: popup_theme_islands_top_visible; + animation-name: popup_theme_islands_top_visible; +} + +.popup_theme_islands.popup_direction_top-right { + -webkit-animation-name: popup_theme_islands_top; + animation-name: popup_theme_islands_top; +} + +.popup_theme_islands.popup_direction_top-right.popup_visible { + -webkit-animation-name: popup_theme_islands_top_visible; + animation-name: popup_theme_islands_top_visible; +} + +.popup_theme_islands.popup_direction_right-top { + -webkit-animation-name: popup_theme_islands_right; + animation-name: popup_theme_islands_right; +} + +.popup_theme_islands.popup_direction_right-top.popup_visible { + -webkit-animation-name: popup_theme_islands_right_visible; + animation-name: popup_theme_islands_right_visible; +} + +.popup_theme_islands.popup_direction_right-center { + -webkit-animation-name: popup_theme_islands_right; + animation-name: popup_theme_islands_right; +} + +.popup_theme_islands.popup_direction_right-center.popup_visible { + -webkit-animation-name: popup_theme_islands_right_visible; + animation-name: popup_theme_islands_right_visible; +} + +.popup_theme_islands.popup_direction_right-bottom { + -webkit-animation-name: popup_theme_islands_right; + animation-name: popup_theme_islands_right; +} + +.popup_theme_islands.popup_direction_right-bottom.popup_visible { + -webkit-animation-name: popup_theme_islands_right_visible; + animation-name: popup_theme_islands_right_visible; +} + +.popup_theme_islands.popup_direction_left-top { + -webkit-animation-name: popup_theme_islands_left; + animation-name: popup_theme_islands_left; +} + +.popup_theme_islands.popup_direction_left-top.popup_visible { + -webkit-animation-name: popup_theme_islands_left_visible; + animation-name: popup_theme_islands_left_visible; +} + +.popup_theme_islands.popup_direction_left-center { + -webkit-animation-name: popup_theme_islands_left; + animation-name: popup_theme_islands_left; +} + +.popup_theme_islands.popup_direction_left-center.popup_visible { + -webkit-animation-name: popup_theme_islands_left_visible; + animation-name: popup_theme_islands_left_visible; +} + +.popup_theme_islands.popup_direction_left-bottom { + -webkit-animation-name: popup_theme_islands_left; + animation-name: popup_theme_islands_left; +} + +.popup_theme_islands.popup_direction_left-bottom.popup_visible { + -webkit-animation-name: popup_theme_islands_left_visible; + animation-name: popup_theme_islands_left_visible; +} + +@-webkit-keyframes popup_theme_islands_bottom { + + 0% { + visibility: visible; + margin: 0; + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } + + 99% { + margin: 0; + -webkit-transform: translateY(10px); + transform: translateY(10px); + } + + 100% { + visibility: hidden; + margin: -9999px 0 0 -9999px; + opacity: 0; + } +} + +@keyframes popup_theme_islands_bottom { + + 0% { + visibility: visible; + margin: 0; + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } + + 99% { + margin: 0; + -webkit-transform: translateY(10px); + transform: translateY(10px); + } + + 100% { + visibility: hidden; + margin: -9999px 0 0 -9999px; + opacity: 0; + } +} + +@-webkit-keyframes popup_theme_islands_bottom_visible { + + 0% { + opacity: 0; + -webkit-transform: translateY(10px); + transform: translateY(10px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes popup_theme_islands_bottom_visible { + + 0% { + opacity: 0; + -webkit-transform: translateY(10px); + transform: translateY(10px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@-webkit-keyframes popup_theme_islands_top { + + 0% { + visibility: visible; + margin: 0; + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } + + 99% { + margin: 0; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } + + 100% { + visibility: hidden; + margin: -9999px 0 0 -9999px; + opacity: 0; + } +} + +@keyframes popup_theme_islands_top { + + 0% { + visibility: visible; + margin: 0; + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } + + 99% { + margin: 0; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } + + 100% { + visibility: hidden; + margin: -9999px 0 0 -9999px; + opacity: 0; + } +} + +@-webkit-keyframes popup_theme_islands_top_visible { + + 0% { + opacity: 0; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes popup_theme_islands_top_visible { + + 0% { + opacity: 0; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@-webkit-keyframes popup_theme_islands_right { + + 0% { + visibility: visible; + margin: 0; + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } + + 99% { + margin: 0; + -webkit-transform: translateX(10px); + transform: translateX(10px); + } + + 100% { + visibility: hidden; + margin: -9999px 0 0 -9999px; + opacity: 0; + } +} + +@keyframes popup_theme_islands_right { + + 0% { + visibility: visible; + margin: 0; + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } + + 99% { + margin: 0; + -webkit-transform: translateX(10px); + transform: translateX(10px); + } + + 100% { + visibility: hidden; + margin: -9999px 0 0 -9999px; + opacity: 0; + } +} + +@-webkit-keyframes popup_theme_islands_right_visible { + + 0% { + opacity: 0; + -webkit-transform: translateX(10px); + transform: translateX(10px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes popup_theme_islands_right_visible { + + 0% { + opacity: 0; + -webkit-transform: translateX(10px); + transform: translateX(10px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@-webkit-keyframes popup_theme_islands_left { + + 0% { + visibility: visible; + margin: 0; + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } + + 99% { + margin: 0; + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + 100% { + visibility: hidden; + margin: -9999px 0 0 -9999px; + opacity: 0; + } +} + +@keyframes popup_theme_islands_left { + + 0% { + visibility: visible; + margin: 0; + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } + + 99% { + margin: 0; + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + 100% { + visibility: hidden; + margin: -9999px 0 0 -9999px; + opacity: 0; + } +} + +@-webkit-keyframes popup_theme_islands_left_visible { + + 0% { + opacity: 0; + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes popup_theme_islands_left_visible { + + 0% { + opacity: 0; + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} diff --git a/design/common.blocks/popup/_theme/popup_theme_simple.css b/design/common.blocks/popup/_theme/popup_theme_simple.css new file mode 100644 index 000000000..9c8e17ed7 --- /dev/null +++ b/design/common.blocks/popup/_theme/popup_theme_simple.css @@ -0,0 +1,9 @@ +.popup_theme_simple { + display: none; + + background: #fff; + border: 1px solid rgba(0, 0, 0, 0.3); +} +.popup_theme_simple.popup_visible { + display: block; +} diff --git a/design/common.blocks/progressbar/_theme/progressbar_theme_islands.css b/design/common.blocks/progressbar/_theme/progressbar_theme_islands.css new file mode 100644 index 000000000..6c32dbb14 --- /dev/null +++ b/design/common.blocks/progressbar/_theme/progressbar_theme_islands.css @@ -0,0 +1,7 @@ +.progressbar_theme_islands { + overflow: hidden; +} +.progressbar_theme_islands .progressbar__bar { + height: 2px; + background: #fc0; +} diff --git a/design/common.blocks/progressbar/_theme/progressbar_theme_simple.css b/design/common.blocks/progressbar/_theme/progressbar_theme_simple.css new file mode 100644 index 000000000..96fa6b677 --- /dev/null +++ b/design/common.blocks/progressbar/_theme/progressbar_theme_simple.css @@ -0,0 +1,37 @@ +.progressbar_theme_simple { + font-size: 12px; + + display: -webkit-box; + + display: flex; + -webkit-box-align: center; + align-items: center; + + height: 40px; + padding: 0 8px; + + background: #f4f4f4; +} +.progressbar_theme_simple .progressbar__bar { + height: 100%; + background: rgba(255,255,255,.7); +} +.progressbar_theme_simple .progressbar__box { + position: relative; + overflow: hidden; + height: 20px; + padding: 1px; + background: -webkit-linear-gradient(left, rgba(45,226,84,1) 0%,rgba(71,160,229,1) 100%); + background: linear-gradient(to right, rgba(45,226,84,1) 0%,rgba(71,160,229,1) 100%); + -webkit-box-flex: 1; + flex: 1 0 auto; +} +.progressbar_theme_simple .progressbar__text { + font-family: Verdana, sans-serif; + min-width: 3em; + padding-left: 5px; + text-align: right; +} +.progressbar_theme_simple .progressbar__text:after { + content: '%'; +} diff --git a/design/common.blocks/radio-group/_theme/radio-group_theme_islands.css b/design/common.blocks/radio-group/_theme/radio-group_theme_islands.css new file mode 100644 index 000000000..922c0f5a2 --- /dev/null +++ b/design/common.blocks/radio-group/_theme/radio-group_theme_islands.css @@ -0,0 +1,13 @@ +.radio-group_theme_islands { + display: inline-block; +} +.radio-group_theme_islands.radio-group_size_m { + line-height: 24px; +} +.radio-group_theme_islands.radio-group_size_l { + line-height: 30px; +} +.radio-group_theme_islands.radio-group_type_button { + display: inline-block; + white-space: nowrap; +} diff --git a/design/common.blocks/radio-group/_theme/radio-group_theme_simple.css b/design/common.blocks/radio-group/_theme/radio-group_theme_simple.css new file mode 100644 index 000000000..659d1942f --- /dev/null +++ b/design/common.blocks/radio-group/_theme/radio-group_theme_simple.css @@ -0,0 +1,16 @@ +.radio-group_theme_simple .radio_type_button:first-of-type .button_togglable_radio, + .radio-group_theme_simple .radio_type_button~ .radio_type_button .button_togglable_radio { + border-right-width: 0; +} +.radio-group_theme_simple .radio_type_button~ .radio_type_button .button_togglable_radio { + border-radius: 0; +} +.radio-group_theme_simple .radio_type_button:first-of-type .button_togglable_radio { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.radio-group_theme_simple .radio_type_button:last-of-type .button_togglable_radio { + border-right-width: 1px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} diff --git a/design/common.blocks/radio/_theme/radio_theme_islands.css b/design/common.blocks/radio/_theme/radio_theme_islands.css new file mode 100644 index 000000000..aedadeb2c --- /dev/null +++ b/design/common.blocks/radio/_theme/radio_theme_islands.css @@ -0,0 +1,111 @@ +.radio_theme_islands { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +.radio_theme_islands:hover { + cursor: pointer; +} +.radio_theme_islands .radio__control { + position: absolute; + z-index: -1; + margin: 0; + opacity: 0; +} +.radio_theme_islands .radio__box { + position: relative; + display: inline-block; + border-radius: 50%; + background: rgba(0, 0, 0, 0.2); +} +.radio_theme_islands .radio__box:before { + position: absolute; + top: 1px; + right: 1px; + bottom: 1px; + left: 1px; + content: ''; + border-radius: 50%; + background: #fff; +} +.radio_theme_islands.radio_size_m { + font-size: 13px; +} +.radio_theme_islands.radio_size_m .radio__box { + line-height: 14px; + top: 2px; + width: 14px; + height: 14px; + margin-right: 5px; +} +.radio_theme_islands.radio_size_m .radio__box:after { + top: 4px; + left: 4px; + width: 6px; + height: 6px; +} +.radio_theme_islands.radio_size_l { + font-size: 15px; +} +.radio_theme_islands.radio_size_l .radio__box { + line-height: 17px; + top: 3px; + width: 17px; + height: 17px; + margin-right: 7px; +} +.radio_theme_islands.radio_size_l .radio__box:after { + top: 5px; + left: 5px; + width: 7px; + height: 7px; +} +.radio_theme_islands.radio_checked .radio__box { + background: rgba(153, 122, 0, 0.5); +} +.radio_theme_islands.radio_checked .radio__box:before { + background: #ffeba0; +} +.radio_theme_islands.radio_checked .radio__box:after { + position: absolute; + border-radius: 50%; + background: #000; + content: ''; +} +.radio_theme_islands.radio_focused .radio__box:before { + box-shadow: 0 0 0 1px #ffcc00, inset 0 0 0 1px #ffcc00; +} +.radio_theme_islands.radio_hovered .radio__box { + background: rgba(0, 0, 0, 0.3); +} +.radio_theme_islands.radio_hovered.radio_checked .radio__box { + background: rgba(129, 103, 0, 0.6); +} +.radio_theme_islands.radio_disabled { + cursor: default; + color: #999; +} +.radio_theme_islands.radio_disabled .radio__box { + background: rgba(0, 0, 0, 0.08); +} +.radio_checked.radio_theme_islands.radio_disabled .radio__box { + background: rgba(0, 0, 0, 0.15); +} +.radio_theme_islands.radio_disabled .radio__box:before { + display: none; +} +.radio_theme_islands.radio_disabled .radio__box:after { + background: rgba(0, 0, 0, 0.4); +} +.radio_theme_islands.radio_type_button { + display: inline-block; +} +.radio_theme_islands.radio_type_line.radio_size_m { + margin-right: 13px; +} +.radio_theme_islands.radio_type_line.radio_size_l { + margin-right: 15px; +} +.radio_theme_islands.radio_type_line:last-child { + margin-right: 0; +} diff --git a/design/common.blocks/radio/_theme/radio_theme_simple.css b/design/common.blocks/radio/_theme/radio_theme_simple.css new file mode 100644 index 000000000..b026c56df --- /dev/null +++ b/design/common.blocks/radio/_theme/radio_theme_simple.css @@ -0,0 +1,28 @@ +.radio_theme_simple .radio__control { + position: absolute; + z-index: -1; + opacity: 0; +} +.radio_theme_simple .radio__box:before { + line-height: 1em; + display: inline-block; + width: 1em; + height: 1em; + margin: 0.1em 0.2em 0.3em; + content: ' '; + text-align: center; + vertical-align: middle; + border-radius: 50%; + background: #fff; + box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.5); +} +.radio_theme_simple.radio_disabled { + opacity: 0.6; +} +.radio_theme_simple.radio_focused .radio__box:before { + box-shadow: 0 0 5px 1px #fc0; +} +.radio_theme_simple.radio_checked .radio__box:before { + content: '\2022'; + background: #fff7db; +} diff --git a/design/common.blocks/select/_theme/select_theme_islands.css b/design/common.blocks/select/_theme/select_theme_islands.css new file mode 100644 index 000000000..ddce0553f --- /dev/null +++ b/design/common.blocks/select/_theme/select_theme_islands.css @@ -0,0 +1,63 @@ +.select_theme_islands { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + + max-width: 100%; + + vertical-align: bottom; +} +.select_theme_islands .select__button { + width: 100%; + text-align: left; + vertical-align: top; +} +.select_theme_islands .select__button .button__text { + display: block; +} +.select_theme_islands .select__button .button__text:empty:before { + content: '\00a0'; +} +.select_theme_islands .select__button.button_size_s .button__text { + padding-right: 22px; +} +.select_theme_islands .select__button.button_size_s .icon { + width: 25px; +} +.select_theme_islands .select__button.button_size_m .button__text { + padding-right: 25px; +} +.select_theme_islands .select__button.button_size_m .icon { + width: 31px; +} +.select_theme_islands .select__button.button_size_l .button__text { + padding-right: 29px; +} +.select_theme_islands .select__button.button_size_l .icon { + width: 35px; +} +.select_theme_islands .select__button.button_size_xl .button__text { + padding-right: 33px; +} +.select_theme_islands .select__button.button_size_xl .icon + { + width: 39px; +} +.select_theme_islands .select__tick { + position: absolute; + top: 0; + right: 0; + background-image: url(../../theme/_islands/arrow.svg); + -webkit-transition: -webkit-transform 0.1s ease-out; + transition: -webkit-transform 0.1s ease-out; + transition: transform 0.1s ease-out; + transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out; +} +.select_theme_islands.select_size_s .select__tick { + background-image: url(../../theme/_islands/arrow-s.svg); +} +.select_theme_islands.select_opened .select__tick { + -webkit-transform: rotate(-180deg); + transform: rotate(-180deg); +} +.select_theme_islands.select_width_available { + width: 100%; +} diff --git a/design/common.blocks/spin/_theme/spin_theme_islands.css b/design/common.blocks/spin/_theme/spin_theme_islands.css new file mode 100644 index 000000000..4911a3873 --- /dev/null +++ b/design/common.blocks/spin/_theme/spin_theme_islands.css @@ -0,0 +1,93 @@ +.spin_theme_islands { + position: absolute; + + display: inline-block; + visibility: hidden; + + box-sizing: border-box; + border: 2px solid transparent; + border-radius: 50%; +} + +.spin_theme_islands:after { + content: '\00A0'; +} + +.spin_theme_islands.spin_visible { + position: relative; + visibility: visible; + -webkit-animation: spin_theme_islands 1s infinite linear; + animation: spin_theme_islands 1s infinite linear; + background: 0 0 no-repeat url(spin_theme_islands.gif); + /* `1deg` is needed to prevent FF bug after minification (`0deg` => `0`) */ + background: -webkit-linear-gradient(89deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + background: linear-gradient(1deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + /* Accelerate animation */ +} + +.spin_theme_islands.spin_size_xs { + line-height: 16px; + width: 16px; + height: 16px; + background-position: -2px -2px; +} + +.spin_theme_islands.spin_size_s { + line-height: 24px; + width: 24px; + height: 24px; + background-position: -2px -19px; +} + +.spin_theme_islands.spin_size_m { + line-height: 28px; + width: 28px; + height: 28px; + background-position: -2px -44px; +} + +.spin_theme_islands.spin_size_l { + line-height: 32px; + width: 32px; + height: 32px; + background-position: -2px -73px; +} + +.spin_theme_islands.spin_size_xl { + line-height: 38px; + width: 38px; + height: 38px; + background-position: -2px -106px; +} + +@-webkit-keyframes spin_theme_islands { + from { + border-top-color: #fc0; + border-left-color: #fc0; + -webkit-transform: rotate(0); + transform: rotate(0); + } + to { + border-top-color: #fc0; + border-left-color: #fc0; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes spin_theme_islands { + from { + border-top-color: #fc0; + border-left-color: #fc0; + -webkit-transform: rotate(0); + transform: rotate(0); + } + to { + border-top-color: #fc0; + border-left-color: #fc0; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} diff --git a/design/common.blocks/spin/_theme/spin_theme_simple.css b/design/common.blocks/spin/_theme/spin_theme_simple.css new file mode 100644 index 000000000..87c670b51 --- /dev/null +++ b/design/common.blocks/spin/_theme/spin_theme_simple.css @@ -0,0 +1,37 @@ +.spin_theme_simple { + display: none; + + width: 20px; + height: 20px; + + border: 2px dashed #000; + border-radius: 50%; +} + +.spin_theme_simple.spin_visible { + display: inline-block; + -webkit-animation: spin_theme_simple 2s infinite linear; + animation: spin_theme_simple 2s infinite linear; +} + +@-webkit-keyframes spin_theme_simple { + from { + -webkit-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes spin_theme_simple { + from { + -webkit-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} diff --git a/design/common.blocks/textarea/_theme/textarea_theme_islands.css b/design/common.blocks/textarea/_theme/textarea_theme_islands.css new file mode 100644 index 000000000..f63d7adc4 --- /dev/null +++ b/design/common.blocks/textarea/_theme/textarea_theme_islands.css @@ -0,0 +1,61 @@ +.textarea_theme_islands { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + + display: inline-block; + + background: #fff; + + box-sizing: border-box; + margin: 0; + padding: 0; + min-height: 2em; + + border: 1px solid rgba(0, 0, 0, 0.2); + outline: none; + + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +.textarea_theme_islands::-webkit-input-placeholder { + color: #999; + text-indent: 0; +} +.textarea_theme_islands::-moz-placeholder { + opacity: 1; + color: #999; +} +.textarea_theme_islands.textarea_focused { + border-color: #ffcc00; + box-shadow: 0 0 0 1px #ffcc00; +} +.textarea_theme_islands.textarea_width_available { + width: 100%; + resize: vertical; +} +.textarea_theme_islands.textarea_disabled { + resize: none; + cursor: default; + color: rgba(0, 0, 0, .4); + border-color: transparent; + background: rgba(0, 0, 0, .08); +} +.textarea_theme_islands.textarea_size_s { + font-size: 13px; + line-height: 16px; + padding-left: 6px; +} +.textarea_theme_islands.textarea_size_m { + font-size: 13px; + line-height: 18px; + padding: 3px 5px; +} +.textarea_theme_islands.textarea_size_l { + font-size: 15px; + line-height: 20px; + padding: 5px 7px; +} +.textarea_theme_islands.textarea_size_xl { + font-size: 18px; + line-height: 22px; + padding-left: 11px; +} diff --git a/design/common.blocks/textarea/_theme/textarea_theme_simple.css b/design/common.blocks/textarea/_theme/textarea_theme_simple.css new file mode 100644 index 000000000..13d6c3b03 --- /dev/null +++ b/design/common.blocks/textarea/_theme/textarea_theme_simple.css @@ -0,0 +1,29 @@ +.textarea_theme_simple { + font-family: inherit; + font-size: 100%; + + display: inline-block; + + box-sizing: border-box; + min-height: 2em; + margin: 0; + + cursor: auto; + + border: 1px solid rgba(0, 0, 0, 0.3); + background: #fff; + + -webkit-appearance: none; +} +.textarea_theme_simple.textarea_disabled { + opacity: 0.6; +} +.textarea_theme_simple.textarea_focused { + box-shadow: 0 0 5px 1px #fc0; +} +.textarea_theme_simple.textarea_focused:focus { + outline: none; +} +.textarea_theme_simple.textarea_width_available { + width: 100%; +} diff --git a/design/desktop.blocks/attach/_theme/attach_theme_islands.ie.css b/design/desktop.blocks/attach/_theme/attach_theme_islands.ie.css new file mode 100644 index 000000000..e06932d01 --- /dev/null +++ b/design/desktop.blocks/attach/_theme/attach_theme_islands.ie.css @@ -0,0 +1,20 @@ +.attach_theme_islands .attach__control { + position: static; + vertical-align: top; +} +.attach_theme_islands .button_size_s .button__control { + height: 24px; +} +.attach_theme_islands .button_size_m .button__control { + height: 28px; +} +.attach_theme_islands .button_size_l .button__control { + height: 32px; +} +.attach_theme_islands .button_size_xl .button__control { + height: 38px; +} +.attach_theme_islands .attach__no-file, + .attach_theme_islands .button__text { + display: none; +} diff --git a/design/desktop.blocks/button/_theme/button_theme_islands.ie.css b/design/desktop.blocks/button/_theme/button_theme_islands.ie.css new file mode 100644 index 000000000..025025cdc --- /dev/null +++ b/design/desktop.blocks/button/_theme/button_theme_islands.ie.css @@ -0,0 +1,93 @@ +.button_theme_islands { + border: 1px solid #cbcbcb; + background: #fff; +} +.button_theme_islands:before { + content: none; +} +.button_theme_islands.button_hovered { + border-color: #b2b2b2; +} +.button_theme_islands.button_focused-hard { + border-color: #fc0 !important; + outline: 1px solid #fc0; +} +.button_theme_islands.button_checked { + border-color: #cbbc7f; + background: #ffeba0; +} +.button_theme_islands.button_checked.button_pressed { + background: #fee481; +} +.button_theme_islands.button_checked.button_pressed, + .button_theme_islands.button_checked.button_hovered { + border-color: #b2a265; +} +.button_theme_islands.button_pressed { + background: #f6f5f3; +} +.button_theme_islands.button_view_action { + border-color: #caac32; + background: #ffdb4d; +} +.button_theme_islands.button_view_action.button_pressed { + background: #fc0; +} +.button_theme_islands.button_view_action.button_hovered { + border-color: #b19732; +} +.button_theme_islands.button_view_pseudo.button_pressed { + background: #f2f2f2; +} +.button_theme_islands.button_view_pseudo.button_checked.button_pressed { + background: #fee481; +} +.button_theme_islands.button_view_pseudo.button_checked.button_pressed, + .button_theme_islands.button_view_pseudo.button_checked.button_hovered { + border-color: #937d28; +} +.button_theme_islands.button_disabled { + border-color: #eaeaea; + background: #eaeaea; +} +.button_theme_islands.button_disabled.button_checked { + background: #ffeba0; +} +.button_theme_islands.button_size_s { + line-height: 22px; +} +.button_theme_islands.button_size_m { + line-height: 26px; +} +.button_theme_islands.button_size_l { + line-height: 30px; +} +.button_theme_islands.button_size_xl { + line-height: 36px; +} +.control-group .button_theme_islands { + border-left-width: 0; +} +.control-group .button_theme_islands:after { + position: absolute; + top: 0; + bottom: 0; + left: 0; + content: ''; + border-left: 1px solid transparent; +} +.control-group > :first-child .button_theme_islands, + .control-group > .button_theme_islands:first-child { + border-left-width: 1px; +} +.control-group > :first-child .button_theme_islands:after, .control-group > .button_theme_islands:first-child:after { + content: none !important; +} +.control-group.checkbox-group_type_button .button_theme_islands.button_focused-hard:after { + content: ' '; + border-color: #fc0; +} +.control-group.radio-group_type_button .button_theme_islands.button_focused-hard:after { + content: ' '; + border-color: #fc0; +} diff --git a/design/desktop.blocks/checkbox/_theme/checkbox_theme_islands.ie.css b/design/desktop.blocks/checkbox/_theme/checkbox_theme_islands.ie.css new file mode 100644 index 000000000..45ca3676f --- /dev/null +++ b/design/desktop.blocks/checkbox/_theme/checkbox_theme_islands.ie.css @@ -0,0 +1,42 @@ +.checkbox_theme_islands .checkbox__box { + background: #cbcbcb; +} +.checkbox_theme_islands .checkbox__box:after { + top: -4px; + filter: unquote('alpha(opacity=0)'); +} +.checkbox_theme_islands .checkbox__control { + outline: none; + filter: unquote('alpha(opacity=0)'); +} +.checkbox_theme_islands.checkbox_checked .checkbox__box { + background: #ccbd80; +} +.checkbox_theme_islands.checkbox_checked .checkbox__box:before { + content: ' '; +} +.checkbox_theme_islands.checkbox_checked .checkbox__box:after { + content: ' '; + filter: unquote('alpha(opacity=100)'); +} +.checkbox_theme_islands.checkbox_hovered .checkbox__box { + background: #b3b3b3; +} +.checkbox_theme_islands.checkbox_hovered.checkbox_checked .checkbox__box { + background: #b2a265; +} +.checkbox_theme_islands.checkbox_focused.checkbox .checkbox__box { + background: #fc0; +} +.checkbox_theme_islands.checkbox_disabled .checkbox__box { + background: #ebebeb; +} +.checkbox_theme_islands.checkbox_disabled.checkbox_checked .checkbox__box:after { + background-position: 0 100%; +} +.checkbox_theme_islands.checkbox_size_m .checkbox__box:after { + background-image: url('tip_size_m.png'); +} +.checkbox_theme_islands.checkbox_size_l .checkbox__box:after { + background-image: url('tip_size_l.png'); +} diff --git a/design/desktop.blocks/input/_theme/input_theme_islands.ie.css b/design/desktop.blocks/input/_theme/input_theme_islands.ie.css new file mode 100644 index 000000000..9d601c452 --- /dev/null +++ b/design/desktop.blocks/input/_theme/input_theme_islands.ie.css @@ -0,0 +1,40 @@ +.input_theme_islands { + border: 1px solid #ccc; +} +.input_theme_islands .input__clear { + visibility: hidden; +} +.input_theme_islands .input__clear_visible { + visibility: visible; +} +.input_theme_islands.input_focused { + border: 1px solid #fc0; + outline: 1px solid #fc0; +} +.input_theme_islands.input_disabled { + background: #ebebeb; +} +.input_theme_islands.input_disabled .input__box, + .input_theme_islands.input_disabled .input__control { + color: #999; +} +.input_theme_islands.input_size_s .input__control { + line-height: 24px; +} +.input_theme_islands.input_size_m .input__control { + line-height: 28px; +} +.input_theme_islands.input_size_l .input__control { + line-height: 32px; +} +.input_theme_islands.input_size_xl .input__control { + line-height: 38px; +} +.input_theme_islands.input_size_s .input__clear, + .input_theme_islands.input_size_m .input__clear { + background-image: url(clear_size_s.png); +} +.input_theme_islands.input_size_l .input__clear, + .input_theme_islands.input_size_xl .input__clear { + background-image: url(clear_size_l.png); +} diff --git a/design/desktop.blocks/link/_theme/link_theme_islands.css b/design/desktop.blocks/link/_theme/link_theme_islands.css new file mode 100644 index 000000000..1768c4cbf --- /dev/null +++ b/design/desktop.blocks/link/_theme/link_theme_islands.css @@ -0,0 +1,3 @@ +.link_theme_islands_disabled { + cursor: default; +} diff --git a/design/desktop.blocks/menu/__item/_theme/menu-item_theme_islands.ie.css b/design/desktop.blocks/menu/__item/_theme/menu-item_theme_islands.ie.css new file mode 100644 index 000000000..c67c6cf43 --- /dev/null +++ b/design/desktop.blocks/menu/__item/_theme/menu-item_theme_islands.ie.css @@ -0,0 +1,24 @@ +.menu__item_theme_islands.menu__item_disabled { + + color: #999; +} + +.menu_size_s .menu__item_theme_islands.menu__item_checked { + + background: 10px 50% no-repeat url('tip_size_s.png'); +} + +.menu_size_m .menu__item_theme_islands.menu__item_checked { + + background: 13px 50% no-repeat url('tip_size_s.png'); +} + +.menu_size_l .menu__item_theme_islands.menu__item_checked { + + background: 15px 50% no-repeat url('tip_size_l.png'); +} + +.menu_size_xl .menu__item_theme_islands.menu__item_checked { + + background: 20px 50% no-repeat url('tip_size_l.png'); +} diff --git a/design/desktop.blocks/menu/_theme/menu_theme_islands.ie.css b/design/desktop.blocks/menu/_theme/menu_theme_islands.ie.css new file mode 100644 index 000000000..8ef8cb373 --- /dev/null +++ b/design/desktop.blocks/menu/_theme/menu_theme_islands.ie.css @@ -0,0 +1,6 @@ +.menu_theme_islands { + border: 1px solid #ccc; +} +.menu_theme_islands .menu__group-title { + color: #999; +} diff --git a/design/desktop.blocks/modal/_theme/modal_theme_islands.ie.css b/design/desktop.blocks/modal/_theme/modal_theme_islands.ie.css new file mode 100644 index 000000000..582b20241 --- /dev/null +++ b/design/desktop.blocks/modal/_theme/modal_theme_islands.ie.css @@ -0,0 +1,3 @@ +.modal_theme_islands .modal__table { + background: repeat url(bg.png); +} diff --git a/design/desktop.blocks/popup/_theme/popup_theme_islands.ie.css b/design/desktop.blocks/popup/_theme/popup_theme_islands.ie.css new file mode 100644 index 000000000..0c9a8d2bb --- /dev/null +++ b/design/desktop.blocks/popup/_theme/popup_theme_islands.ie.css @@ -0,0 +1,3 @@ +.popup_theme_islands { + border: 1px solid #e4e4e4; +} diff --git a/design/desktop.blocks/radio/_theme/radio_theme_islands.ie.css b/design/desktop.blocks/radio/_theme/radio_theme_islands.ie.css new file mode 100644 index 000000000..a5cf8306b --- /dev/null +++ b/design/desktop.blocks/radio/_theme/radio_theme_islands.ie.css @@ -0,0 +1,28 @@ +.radio_theme_islands .radio__box { + background: #cbcbcb; +} +.radio_theme_islands .radio__control { + outline: none; + filter: unquote('alpha(opacity=0)'); +} +.radio_theme_islands.radio_checked .radio__box { + background: #ccbd80; +} +.radio_theme_islands.radio_checked .radio__box:before { + content: ' '; +} +.radio_theme_islands.radio_hovered .radio__box { + background: #b3b3b3; +} +.radio_theme_islands.radio_hovered.radio_checked .radio__box { + background: #b2a265; +} +.radio_theme_islands.radio_focused.radio .radio__box { + background: #fc0; +} +.radio_theme_islands.radio_disabled .radio__box { + background: #ebebeb; +} +.radio_theme_islands.radio_disabled .radio__box:after { + background: #8d8d8d; +} diff --git a/design/desktop.blocks/select/_theme/select_theme_islands.ie.css b/design/desktop.blocks/select/_theme/select_theme_islands.ie.css new file mode 100644 index 000000000..1a10c53cc --- /dev/null +++ b/design/desktop.blocks/select/_theme/select_theme_islands.ie.css @@ -0,0 +1,7 @@ +.select_theme_islands .select__tick { + background-image: url(arrow.png); + height: 100%; +} +.select_theme_islands.select_size_s .select__tick { + background-image: url(arrow-s.png); +} diff --git a/design/desktop.blocks/textarea/_theme/textarea_theme_islands.ie.css b/design/desktop.blocks/textarea/_theme/textarea_theme_islands.ie.css new file mode 100644 index 000000000..af97e9666 --- /dev/null +++ b/design/desktop.blocks/textarea/_theme/textarea_theme_islands.ie.css @@ -0,0 +1,13 @@ +.textarea_theme_islands { + border: 1px solid #ccc; +} +.textarea_theme_islands.textarea_focused { + border: 1px solid #fc0; + outline: 1px solid #fc0; +} +.textarea_theme_islands.textarea_disabled { + background: #ebebeb; +} +.textarea_theme_islands.textarea_disabled .textarea__control { + color: #999; +} diff --git a/desktop.pages/index/blocks/modal-example/modal-example.css b/desktop.pages/index/blocks/modal-example/modal-example.css new file mode 100644 index 000000000..1dc5c4c43 --- /dev/null +++ b/desktop.pages/index/blocks/modal-example/modal-example.css @@ -0,0 +1,9 @@ +.modal_theme_islands .modal__content { + width: 450px; + padding: 20px; + text-align: center; +} +.modal_theme_islands .modal__content .text { + font-size: 20px; + line-height: 24px; +} diff --git a/desktop.pages/showcase/blocks/input/input.css b/desktop.pages/showcase/blocks/input/input.css new file mode 100644 index 000000000..941f57145 --- /dev/null +++ b/desktop.pages/showcase/blocks/input/input.css @@ -0,0 +1,3 @@ +.input_theme_islands { + width: 200px; +} diff --git a/desktop.pages/showcase/blocks/layout/layout.css b/desktop.pages/showcase/blocks/layout/layout.css new file mode 100644 index 000000000..7ba8fa0e1 --- /dev/null +++ b/desktop.pages/showcase/blocks/layout/layout.css @@ -0,0 +1,14 @@ +.layout { + display: -webkit-box; + display: flex; + + max-width: 1440px; + + flex-wrap: wrap; + -webkit-box-pack: justify; + justify-content: space-between; +} +.layout__cell { + padding: 20px; + vertical-align: top; +} diff --git a/desktop.pages/showcase/blocks/link/link.css b/desktop.pages/showcase/blocks/link/link.css new file mode 100644 index 000000000..f6b5da351 --- /dev/null +++ b/desktop.pages/showcase/blocks/link/link.css @@ -0,0 +1,14 @@ +.link_type_docs { + display: inline-block; + + margin-bottom: 10px; +} + +.link_type_docs:after + { + content: ' ❏'; +} + +.radio-group_type_button ~ .link_type_docs { + margin-top: 20px; +} diff --git a/desktop.pages/showcase/blocks/menu/menu.css b/desktop.pages/showcase/blocks/menu/menu.css new file mode 100644 index 000000000..5f781baf0 --- /dev/null +++ b/desktop.pages/showcase/blocks/menu/menu.css @@ -0,0 +1,9 @@ +.menu_custom { + width: 200px; + max-height: 200px; + + border: 1px solid rgba(0,0,0,0.1); +} +.menu_custom .menu__item .link { + display: block; +} diff --git a/desktop.pages/showcase/blocks/progressbar-example/progressbar-example.css b/desktop.pages/showcase/blocks/progressbar-example/progressbar-example.css new file mode 100644 index 000000000..b02251f29 --- /dev/null +++ b/desktop.pages/showcase/blocks/progressbar-example/progressbar-example.css @@ -0,0 +1,7 @@ +.progressbar-example { + margin-top: 30px; +} +.progressbar-example .button { + margin-right: 10px; + margin-bottom: 10px; +} diff --git a/desktop.pages/showcase/blocks/spin-container/spin-container.css b/desktop.pages/showcase/blocks/spin-container/spin-container.css new file mode 100644 index 000000000..526742db3 --- /dev/null +++ b/desktop.pages/showcase/blocks/spin-container/spin-container.css @@ -0,0 +1,8 @@ +.spin-container { + display: -webkit-box; + display: flex; + + width: 300px; + + justify-content: space-around; +} diff --git a/desktop.pages/showcase/blocks/test/test.css b/desktop.pages/showcase/blocks/test/test.css new file mode 100644 index 000000000..1dc5c4c43 --- /dev/null +++ b/desktop.pages/showcase/blocks/test/test.css @@ -0,0 +1,9 @@ +.modal_theme_islands .modal__content { + width: 450px; + padding: 20px; + text-align: center; +} +.modal_theme_islands .modal__content .text { + font-size: 20px; + line-height: 24px; +} diff --git a/desktop.pages/showcase/blocks/textarea/textarea.css b/desktop.pages/showcase/blocks/textarea/textarea.css new file mode 100644 index 000000000..b1d42916c --- /dev/null +++ b/desktop.pages/showcase/blocks/textarea/textarea.css @@ -0,0 +1,4 @@ +.textarea_theme_islands { + width: 300px; + height: 150px; +} diff --git a/package.json b/package.json index 77c5014f4..a827e98c4 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "author": "", "license": "MPL-2.0", "name": "bem-components", - "version": "5.0.0", + "version": "5.1.0", "description": "BEM Components Library", "homepage": "https://bem.info/libs/bem-components/", "repository": { diff --git a/test.blocks/icon/_action/icon_action.css b/test.blocks/icon/_action/icon_action.css new file mode 100644 index 000000000..2fc101b29 --- /dev/null +++ b/test.blocks/icon/_action/icon_action.css @@ -0,0 +1,21 @@ +.icon_action_up, + .icon_action_right, + .icon_action_down, + .icon_action_left { + background-image: url(arrow.svg); +} +.icon_action_up { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +.icon_action_right { + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.icon_action_left { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} +.icon_action_download { + background-image: url(download.svg); +} diff --git a/test.blocks/icon/_social/icon_social.css b/test.blocks/icon/_social/icon_social.css new file mode 100644 index 000000000..1e1626c86 --- /dev/null +++ b/test.blocks/icon/_social/icon_social.css @@ -0,0 +1,6 @@ +.icon_social_twitter { + background-image: url(twitter.png) +} +.icon_social_vk { + background-image: url(vk.png) +} diff --git a/test.blocks/icon/icon.css b/test.blocks/icon/icon.css new file mode 100644 index 000000000..98e8d0002 --- /dev/null +++ b/test.blocks/icon/icon.css @@ -0,0 +1,3 @@ +.icon { + min-width: 1em; +} diff --git a/test.blocks/line/line.css b/test.blocks/line/line.css new file mode 100644 index 000000000..47190baf3 --- /dev/null +++ b/test.blocks/line/line.css @@ -0,0 +1,38 @@ +.line { + position: relative; + + box-sizing: content-box; + + border-width: 1px 0; + border-style: dashed; + border-color: rgba(0, 0, 0, 0.1); + + white-space: nowrap; +} +.line:after { + font-size: inherit; + line-height: inherit; + position: absolute; + top: 35%; + left: 0; + right: 0; + height: 1px; + content: ''; + background: rgba(0, 0, 0, 0.1); +} +.line_size_s { + font-size: 13px; + height: 24px; +} +.line_size_m { + font-size: 13px; + height: 28px; +} +.line_size_l { + font-size: 15px; + height: 32px; +} +.line_size_xl { + font-size: 18px; + height: 38px; +} diff --git a/test.blocks/link/link.css b/test.blocks/link/link.css new file mode 100644 index 000000000..346de509c --- /dev/null +++ b/test.blocks/link/link.css @@ -0,0 +1,7 @@ +.link_pseudo:not([class*="link_theme"]) { + cursor: pointer; + color: blue; +} +.link_pseudo:not([class*="link_theme"]):hover { + color: red; +} diff --git a/test.blocks/menu/menu.css b/test.blocks/menu/menu.css new file mode 100644 index 000000000..c3d2fbf4d --- /dev/null +++ b/test.blocks/menu/menu.css @@ -0,0 +1,4 @@ +.menu__item .icon { + width: 16px; + margin-right: 5px; +} diff --git a/test.blocks/page/page.css b/test.blocks/page/page.css new file mode 100644 index 000000000..754f17dd0 --- /dev/null +++ b/test.blocks/page/page.css @@ -0,0 +1,3 @@ +.page { + padding: 20px; +} diff --git a/test.blocks/popup/popup.css b/test.blocks/popup/popup.css new file mode 100644 index 000000000..9d3db2426 --- /dev/null +++ b/test.blocks/popup/popup.css @@ -0,0 +1,10 @@ +.popup:not(.modal):not([class*="popup_theme"]) { + display: none; + + background: #fff7db; + box-shadow: inset 0 0 1px red; +} + +.popup_visible:not(.modal):not([class*="popup_theme"]) { + display: block; +} diff --git a/test.blocks/select/select.css b/test.blocks/select/select.css new file mode 100644 index 000000000..f477b2c61 --- /dev/null +++ b/test.blocks/select/select.css @@ -0,0 +1,3 @@ +.page { + min-height: 150px; +} diff --git a/test.blocks/spin/_theme/spin_theme_islands.css b/test.blocks/spin/_theme/spin_theme_islands.css new file mode 100644 index 000000000..8e58ab3ab --- /dev/null +++ b/test.blocks/spin/_theme/spin_theme_islands.css @@ -0,0 +1,7 @@ +.spin_theme_islands.spin_paused { + -webkit-animation: none; + animation: none; + + border-top-color: #fc0; + border-left-color: #fc0; +} diff --git a/test.blocks/table/table.css b/test.blocks/table/table.css new file mode 100644 index 000000000..1bf4e408e --- /dev/null +++ b/test.blocks/table/table.css @@ -0,0 +1,17 @@ +.table { + border-collapse: collapse; +} +.table__title { + padding: 0 2em 0.5em 0; + border-bottom: 1px solid #bbb; + text-align: left; +} +.table__cell { + padding: 1em 2em 1em 0; + border-bottom: 1px solid #ddd; + vertical-align: top; +} +.table__title:last-child, + .table__cell:last-child { + padding-right: 0; +}