From 58b474b6f66a4ca155a2229bcaaa56c77bcd2264 Mon Sep 17 00:00:00 2001 From: Evgeniy Kolesov <ikolesov@ebay.com> Date: Wed, 18 Feb 2015 12:10:19 +0200 Subject: [PATCH] MAGETWO-32303: New Form --- Gruntfile.js | 4 +- .../Ui/view/base/templates/form/default.phtml | 7 +- .../templates/form/fieldset/default.phtml | 7 +- .../base/templates/layout/group/default.phtml | 6 +- .../templates/layout/tabs/nav/default.phtml | 4 +- .../base/web/templates/content/content.html | 4 +- .../base/web/templates/fieldset/fieldset.html | 10 +- .../templates/form/components/collection.html | 6 +- .../web/templates/form/element/checkbox.html | 14 +- .../base/web/templates/form/element/date.html | 4 +- .../web/templates/form/element/email.html | 4 +- .../form/element/helper/tooltip.html | 6 +- .../web/templates/form/element/input.html | 6 +- .../web/templates/form/element/media.html | 6 +- .../templates/form/element/multiselect.html | 2 +- .../web/templates/form/element/price.html | 8 +- .../web/templates/form/element/select.html | 2 +- .../web/templates/form/element/textarea.html | 2 +- .../view/base/web/templates/group/field.html | 18 +- .../view/base/web/templates/group/group.html | 12 +- .../Ui/view/base/web/templates/tab.html | 12 +- .../Magento_Ui/web/css/source/_form.less | 338 +++ .../web/css/source/_form/_tooltip.less | 91 + .../Magento_Ui/web/css/source/_module.less | 4 +- .../Magento_Ui/web/css/source/_tabnav.less | 110 + .../Magento_Ui/web/css/source/module.less | 4 +- .../Magento/backend/web/css/override.css | 2582 ++++++++--------- .../Magento/backend/web/css/source/_form.less | 283 ++ .../web/css/source/_form/_abstract.less | 26 + .../backend/web/css/source/_sources.less | 2 +- .../Magento/backend/web/css/styles-new.less | 8 + .../Magento/backend/web/images/arrows-bg.svg | 5 + 32 files changed, 2215 insertions(+), 1382 deletions(-) create mode 100644 app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form.less create mode 100644 app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form/_tooltip.less create mode 100644 app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_tabnav.less create mode 100644 app/design/adminhtml/Magento/backend/web/css/source/_form.less create mode 100644 app/design/adminhtml/Magento/backend/web/css/source/_form/_abstract.less create mode 100644 app/design/adminhtml/Magento/backend/web/css/styles-new.less create mode 100644 app/design/adminhtml/Magento/backend/web/images/arrows-bg.svg diff --git a/Gruntfile.js b/Gruntfile.js index 535051c3a14..44963fb6e2d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -76,8 +76,6 @@ module.exports = function (grunt) { files: [ 'css/styles-old', 'css/styles', - 'css/pages', - 'css/admin', 'css/styles-migration' ] } @@ -654,7 +652,7 @@ module.exports = function (grunt) { // Tests // --------------------------------------------- - + grunt.registerTask('spec', [ 'specRunner:lib', 'specRunner:backend', diff --git a/app/code/Magento/Ui/view/base/templates/form/default.phtml b/app/code/Magento/Ui/view/base/templates/form/default.phtml index b57256a93a8..63ea99c037f 100644 --- a/app/code/Magento/Ui/view/base/templates/form/default.phtml +++ b/app/code/Magento/Ui/view/base/templates/form/default.phtml @@ -7,12 +7,15 @@ * @var \Magento\Ui\Component\Form $block */ ?> + <script data-mage-init='{ "Magento_Ui/js/core/app": "" }' type="application/json"> <?php echo $block->getRenderContext()->getConfigBuilder()->toJsonNew($block->getRenderContext()->getStorage()); ?> </script> +<div class="admin__scope"> <div data-role="spinner" data-component="<?php echo $block->getDataScope(); ?>.areas" class="grid-loading-mask"> - <div class="grid-loader"></div> + <div class="spinner"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> </div> -<div data-bind="scope: '<?php echo $block->getDataScope(); ?>.areas'" class="entry-edit form-inline"> +</div> +<div data-bind="scope: '<?php echo $block->getDataScope(); ?>.areas'"> <!-- ko template: getTemplate() --><!-- /ko --> </div> diff --git a/app/code/Magento/Ui/view/base/templates/form/fieldset/default.phtml b/app/code/Magento/Ui/view/base/templates/form/fieldset/default.phtml index 772ff693c64..0d814d882b5 100644 --- a/app/code/Magento/Ui/view/base/templates/form/fieldset/default.phtml +++ b/app/code/Magento/Ui/view/base/templates/form/fieldset/default.phtml @@ -13,15 +13,14 @@ $children = $block->getChildren(); $content = $block->getContent(); $ajaxUrl = $block->getAjaxUrl(); ?> - -<div class="fieldset-wrapper-title" tabindex="3" data-bind="click: onClick, keyboard: { 13: toggle }"> +<div class="admin__fieldset-wrapper-title" tabindex="3" data-bind="click: onClick, keyboard: { 13: toggle }"> <strong class="title"> <span data-bind="text: label"><?php echo $block->getData('config/label'); ?></span> </strong> </div> -<div class="fieldset-wrapper-content"> - <fieldset id="<?php echo $block->getData('index'); ?>" class="fieldset"> +<div class="admin__fieldset-wrapper-content"> + <fieldset id="<?php echo $block->getData('index'); ?>" class="admin__fieldset"> <?php if (!empty($content)): ?> <?php echo $content; ?> <?php endif; ?> diff --git a/app/code/Magento/Ui/view/base/templates/layout/group/default.phtml b/app/code/Magento/Ui/view/base/templates/layout/group/default.phtml index 1f764adc5a3..c3a67828419 100644 --- a/app/code/Magento/Ui/view/base/templates/layout/group/default.phtml +++ b/app/code/Magento/Ui/view/base/templates/layout/group/default.phtml @@ -11,11 +11,11 @@ */ ?> -<div class="field form__field <?php echo $block->getIsRequired()?>" data-bind="css: {'required': required}"> - <label class="label" data-bind="attr: { for: <?php echo $block->getData('index')?> }" for="R1WKK"> +<div class="admin__field <?php echo $block->getIsRequired()?>" data-bind="css: {'required': required}"> + <label class="admin__field-label" data-bind="attr: { for: <?php echo $block->getData('index')?> }" for="R1WKK"> <span data-bind="text: element.label"><?php echo $block->getData('label')?></span> </label> - <div class="control"> + <div class="admin__field-control"> <?php if ($block->getChildren()): ?> <?php foreach ($block->getChildren() as $child): ?> <?php echo $block->renderElement($child['dataType'], ['field_config' => $child]); ?> diff --git a/app/code/Magento/Ui/view/base/templates/layout/tabs/nav/default.phtml b/app/code/Magento/Ui/view/base/templates/layout/tabs/nav/default.phtml index cc3224cb8de..0efd3666543 100644 --- a/app/code/Magento/Ui/view/base/templates/layout/tabs/nav/default.phtml +++ b/app/code/Magento/Ui/view/base/templates/layout/tabs/nav/default.phtml @@ -7,8 +7,10 @@ * @var \Magento\Ui\Component\Layout\Tabs\Nav $block */ ?> +<div class="admin__scope"> <div data-role="spinner" data-component="<?php echo $block->getDataScope(); ?>.sections" class="grid-loading-mask"> - <div class="grid-loader"></div> + <div class="spinner"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +</div> </div> <div data-bind="scope: '<?php echo $block->getDataScope(); ?>.sections' " class="ui-tabs"> <!-- ko template: getTemplate() --><!-- /ko --> diff --git a/app/code/Magento/Ui/view/base/web/templates/content/content.html b/app/code/Magento/Ui/view/base/web/templates/content/content.html index 2fd05488003..cc9ae96bf6d 100644 --- a/app/code/Magento/Ui/view/base/web/templates/content/content.html +++ b/app/code/Magento/Ui/view/base/web/templates/content/content.html @@ -7,7 +7,9 @@ <div data-bind="html: content"></div> <!--ko if: showSpinner --> +<div class="admin__scope"> <div data-role="spinner" class="grid-loading-mask" data-bind="visible: loading"> - <div class="grid-loader"></div> + <div class="spinner"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> +</div> </div> <!-- /ko --> diff --git a/app/code/Magento/Ui/view/base/web/templates/fieldset/fieldset.html b/app/code/Magento/Ui/view/base/web/templates/fieldset/fieldset.html index f514147b571..97407fc8c86 100644 --- a/app/code/Magento/Ui/view/base/web/templates/fieldset/fieldset.html +++ b/app/code/Magento/Ui/view/base/web/templates/fieldset/fieldset.html @@ -5,18 +5,20 @@ */ --> <!-- ko if: elems --> -<div class="fieldset-wrapper" data-bind="css: {'collapsable-wrapper': collapsible, 'opened': opened}"> - <div class="fieldset-wrapper-title" tabindex="3" data-bind="click: onClick, keyboard: { 13: toggle }"> +<div class="admin__scope"> +<div class="admin__fieldset-wrapper" data-bind="css: {'collapsable-wrapper': collapsible, 'opened': opened}"> + <div class="admin__fieldset-wrapper-title" tabindex="3" data-bind="click: onClick, keyboard: { 13: toggle }"> <strong class="title"> <span data-bind="text: label"></span> </strong> </div> - <div class="fieldset-wrapper-content" data-bind="visible: opened"> - <fieldset class="fieldset"> + <div class="admin__fieldset-wrapper-content" data-bind="visible: opened"> + <fieldset class="admin__fieldset"> <!-- ko foreach: { data: elems, as: 'element' } --> <!-- ko template: element.getTemplate() --><!-- /ko --> <!-- /ko --> </fieldset> </div> </div> +</div> <!-- /ko --> \ No newline at end of file diff --git a/app/code/Magento/Ui/view/base/web/templates/form/components/collection.html b/app/code/Magento/Ui/view/base/web/templates/form/components/collection.html index 887031d81c5..70a7666f343 100644 --- a/app/code/Magento/Ui/view/base/web/templates/form/components/collection.html +++ b/app/code/Magento/Ui/view/base/web/templates/form/components/collection.html @@ -11,7 +11,7 @@ <li class="address-list-item" data-bind="css: { 'ui-state-active': element.active }, click: activate"> <div class="address-list-item-actions"> <button class="action-delete" type="button" data-bind="attr: { title: $parent.removeLabel }, click: $parent.removeChild(element)"> - <span data-bind="text: element.removeLabel"></span> + <span data-bind="text: $parent.removeLabel"></span> </button> </div> <!-- ko template: previewTpl --><!-- /ko --> @@ -30,8 +30,8 @@ <!-- ko foreach: { data: element.elems, as: 'element' } --> <div class="address-item-edit" data-bind="visible: element.active"> <div class="address-item-edit-content"> - <fieldset class="fieldset"> - <legend style="display: none;" class="legend"> + <fieldset class="admin__fieldset"> + <legend class="admin__legend"> <span data-bind="text: $parent.label"></span> </legend> <br> diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/checkbox.html b/app/code/Magento/Ui/view/base/web/templates/form/element/checkbox.html index 49044013d22..1f712a604ab 100644 --- a/app/code/Magento/Ui/view/base/web/templates/form/element/checkbox.html +++ b/app/code/Magento/Ui/view/base/web/templates/form/element/checkbox.html @@ -4,10 +4,10 @@ * See COPYING.txt for license details. */ --> -<div class="form__field choice"> - <input type="checkbox" class="control-checkbox" data-bind="checked: value, attr: { id: uid, disabled: disabled, name: inputName }, hasFocus: focused"> - - <label class="label" data-bind="checked: value, attr: { for: uid }"> +<div class="admin__field admin__field-option"> + <input type="checkbox" class="admin__control-checkbox" data-bind="checked: value, attr: { id: uid, disabled: disabled, name: inputName }, hasFocus: focused"> + + <label class="admin__field-label" data-bind="checked: value, attr: { for: uid }"> <!-- ko if: $parent.isSingle() --> <span data-bind="text: description"></span> <!-- /ko --> @@ -15,8 +15,8 @@ <span data-bind="text: description || label"></span> <!-- /ko --> </label> - + <!-- ko if: notice --> - <div class="note" data-bind="attr: {id: noticeId}"><span data-bind="text: notice"></span></div> + <div class="admin__field-note" data-bind="attr: {id: noticeId}"><span data-bind="text: notice"></span></div> <!-- /ko --> -</div> \ No newline at end of file +</div> diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/date.html b/app/code/Magento/Ui/view/base/web/templates/form/element/date.html index 8afe0982185..2c3f8d14b29 100644 --- a/app/code/Magento/Ui/view/base/web/templates/form/element/date.html +++ b/app/code/Magento/Ui/view/base/web/templates/form/element/date.html @@ -4,7 +4,7 @@ * See COPYING.txt for license details. */ --> -<input class="control-text" type="text" data-bind=" +<input class="admin__control-text" type="text" data-bind=" hasFocus: focused, datepicker: { storage: value, options: options }, attr: { @@ -13,4 +13,4 @@ placeholder: placeholder, 'aria-describedby': noticeId, disabled: disabled - }" /> \ No newline at end of file + }" /> diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/email.html b/app/code/Magento/Ui/view/base/web/templates/form/element/email.html index 0606cf3016d..2fbef675115 100644 --- a/app/code/Magento/Ui/view/base/web/templates/form/element/email.html +++ b/app/code/Magento/Ui/view/base/web/templates/form/element/email.html @@ -4,7 +4,7 @@ * See COPYING.txt for license details. */ --> -<input class="control-text" type="email" data-bind=" +<input class="admin__control-text" type="email" data-bind=" hasFocus: focused, value: value, attr: { @@ -13,4 +13,4 @@ 'aria-describedby': noticeId, id: uid, disabled: disabled - }"/> \ No newline at end of file + }"/> diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/helper/tooltip.html b/app/code/Magento/Ui/view/base/web/templates/form/element/helper/tooltip.html index 48c463acd83..c8fa34985fc 100644 --- a/app/code/Magento/Ui/view/base/web/templates/form/element/helper/tooltip.html +++ b/app/code/Magento/Ui/view/base/web/templates/form/element/helper/tooltip.html @@ -4,10 +4,10 @@ * See COPYING.txt for license details. */ --> - <div class="field-tooltip"> - <a class="field-tooltip-action action-help" target="_blank" tabindex="1" data-bind="attr: {href: tooltip.link}"> + <div class="admin__field-tooltip"> + <a class="admin__field-tooltip-action action-help" target="_blank" tabindex="1" data-bind="attr: {href: tooltip.link}"> </a> - <div class="field-tooltip-content"> + <div class="admin__field-tooltip-content"> <!-- ko text: tooltip.description --><!-- /ko --> </div> </div> diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/input.html b/app/code/Magento/Ui/view/base/web/templates/form/element/input.html index bf7b144bc94..124b398235c 100644 --- a/app/code/Magento/Ui/view/base/web/templates/form/element/input.html +++ b/app/code/Magento/Ui/view/base/web/templates/form/element/input.html @@ -4,13 +4,13 @@ * See COPYING.txt for license details. */ --> -<input class="control-text" type="text" data-bind=" +<input class="admin__control-text" type="text" data-bind=" value: value, hasFocus: focused, attr: { name: inputName, placeholder: placeholder, 'aria-describedby': noticeId, - id: uid, + id: uid, disabled: disabled - }" /> \ No newline at end of file + }" /> diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/media.html b/app/code/Magento/Ui/view/base/web/templates/form/element/media.html index 27f3271c402..d9b96ec9ed6 100644 --- a/app/code/Magento/Ui/view/base/web/templates/form/element/media.html +++ b/app/code/Magento/Ui/view/base/web/templates/form/element/media.html @@ -4,13 +4,13 @@ * See COPYING.txt for license details. */ --> -<input class="control-file" type="file" data-bind=" +<input class="admin__control-file" type="file" data-bind=" value: value, attr: { name: inputName, id: uid, 'aria-describedby': noticeId, - disabled: disabled + disabled: disabled }, hasFocus: focused" -> \ No newline at end of file +/> diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/multiselect.html b/app/code/Magento/Ui/view/base/web/templates/form/element/multiselect.html index 2d416047095..2697a777b84 100644 --- a/app/code/Magento/Ui/view/base/web/templates/form/element/multiselect.html +++ b/app/code/Magento/Ui/view/base/web/templates/form/element/multiselect.html @@ -4,7 +4,7 @@ * See COPYING.txt for license details. */ --> -<select multiple class="control-select multiselect" data-bind=" +<select multiple class="control-multiselect" data-bind=" attr: { name: inputName, id: uid, diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/price.html b/app/code/Magento/Ui/view/base/web/templates/form/element/price.html index dfbb6de96be..4fe9ac8105e 100644 --- a/app/code/Magento/Ui/view/base/web/templates/form/element/price.html +++ b/app/code/Magento/Ui/view/base/web/templates/form/element/price.html @@ -4,7 +4,7 @@ * See COPYING.txt for license details. */ --> -<div class="control-addon"> - <input class="control-text" type="text" data-bind="value: value, attr: { id: uid, disabled: disabled, name: inputName }, hasFocus: focused"> - <label class="control-before" data-bind="attr: { for: uid }"><span data-bind="text: currency_sign"></span></label> -</div> \ No newline at end of file +<div class="admin__control-addon"> + <input class="admin__control-text" type="text" data-bind="value: value, attr: { id: uid, disabled: disabled, name: inputName }, hasFocus: focused"> + <label class="admin__addon-prefix" data-bind="attr: { for: uid }"><span data-bind="text: currency_sign"></span></label> +</div> diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/select.html b/app/code/Magento/Ui/view/base/web/templates/form/element/select.html index 3a859699aca..31b2c87e5d9 100644 --- a/app/code/Magento/Ui/view/base/web/templates/form/element/select.html +++ b/app/code/Magento/Ui/view/base/web/templates/form/element/select.html @@ -4,7 +4,7 @@ * See COPYING.txt for license details. */ --> -<select class="control-select" data-bind=" +<select class="admin__control-select" data-bind=" attr: { name: inputName, id: uid, diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/textarea.html b/app/code/Magento/Ui/view/base/web/templates/form/element/textarea.html index 99fbe9026d9..8aa979d0658 100644 --- a/app/code/Magento/Ui/view/base/web/templates/form/element/textarea.html +++ b/app/code/Magento/Ui/view/base/web/templates/form/element/textarea.html @@ -4,7 +4,7 @@ * See COPYING.txt for license details. */ --> -<textarea class="control-textarea" data-bind=" +<textarea class="admin__control-textarea" data-bind=" value: value, hasFocus: focused, attr: { diff --git a/app/code/Magento/Ui/view/base/web/templates/group/field.html b/app/code/Magento/Ui/view/base/web/templates/group/field.html index 48d0a28dccf..e01470fa2ae 100644 --- a/app/code/Magento/Ui/view/base/web/templates/group/field.html +++ b/app/code/Magento/Ui/view/base/web/templates/group/field.html @@ -4,29 +4,29 @@ * See COPYING.txt for license details. */ --> -<div class="field form__field" data-bind="css: {'required': element.required, 'field-disabled': element.disabled, 'field-error': element.error}"> +<div class="admin__field" data-bind="css: {'_required': element.required, '_disabled': element.disabled, '_error': element.error}"> <!-- ko if: element.label --> - <label class="label" data-bind="attr: { for: element.uid }, css: {'dublicated': element.label === $parent.label}"> + <label class="admin__field-label" data-bind="attr: { for: element.uid }, css: {'_dublicated': element.label === $parent.label}"> <span data-bind="text: element.label"></span> </label> <!-- /ko --> - <div class="control"> + <div class="admin__field-control"> <!-- ko ifnot: element.hasAddons() --> <!-- ko template: element.getTemplate() --><!-- /ko --> <!-- /ko --> <!-- ko if: element.hasAddons() --> - <div class="control-addon"> + <div class="admin__control-addon"> <!-- ko template: element.getTemplate() --><!-- /ko --> <!-- ko if: element.addbefore --> - <label class="control-before" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addbefore"></span></label> + <label class="admin__addon-prefix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addbefore"></span></label> <!-- /ko --> <!-- ko if: element.addafter --> - <label class="control-after" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addafter"></span></label> + <label class="admin__addon-suffix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addafter"></span></label> <!-- /ko --> </div> <!-- /ko --> @@ -36,13 +36,13 @@ <!-- /ko --> <!-- ko if: element.notice --> - <div class="note" data-bind="attr: { id: element.noticeId }"><span data-bind="text: element.notice"></span></div> + <div class="admin__field-note" data-bind="attr: { id: element.noticeId }"><span data-bind="text: element.notice"></span></div> <!-- /ko --> <!-- ko if: $parent.isSingle() --> <!-- ko if: element.error() && !element.hidden() --> - <label class="mage-error" data-bind="attr: { for: element.uid }, text: element.error"></label> + <label class="admin__field-error" data-bind="attr: { for: element.uid }, text: element.error"></label> <!-- /ko --> <!-- /ko --> </div> -</div> \ No newline at end of file +</div> diff --git a/app/code/Magento/Ui/view/base/web/templates/group/group.html b/app/code/Magento/Ui/view/base/web/templates/group/group.html index 92de6c1ac5d..519aefbcee9 100644 --- a/app/code/Magento/Ui/view/base/web/templates/group/group.html +++ b/app/code/Magento/Ui/view/base/web/templates/group/group.html @@ -6,11 +6,11 @@ --> <!-- ko if: element.isMultiple() --> -<fieldset class="field form__field" data-bind="css: {'required': element.required}"> - <legend class="label"> +<fieldset class="admin__field" data-bind="css: {'_required': element.required}"> + <legend class="admin__field-label"> <span data-bind="text: element.label"></span> </legend><br /> - <div class="control" data-bind="css: {'control-fields': element.breakLine, 'control-grouped': !element.breakLine}"> + <div class="admin__field-control" data-bind="css: {'admin__control-fields': element.breakLine, 'admin__control-grouped': !element.breakLine}"> <!-- ko foreach: { data: elems, as: 'element' } --> <!-- ko ifnot: element.hidden --> @@ -29,7 +29,7 @@ <!-- ko foreach: { data: elems, as: 'element' } --> <!-- ko if: element.error() && !element.hidden() --> - <label class="mage-error" data-bind="attr: { for: uid }, text: element.error"></label> + <label class="admin__field-error" data-bind="attr: { for: uid }, text: element.error"></label> <!-- /ko --> <!-- /ko --> </div> @@ -39,9 +39,9 @@ <!-- ko if: element.isSingle() --> <!-- ko foreach: { data: elems, as: 'element' } --> - + <!-- ko template: $parent.fieldTemplate --><!-- /ko --> - + <!-- /ko --> <!-- /ko --> \ No newline at end of file diff --git a/app/code/Magento/Ui/view/base/web/templates/tab.html b/app/code/Magento/Ui/view/base/web/templates/tab.html index 46aef3d2b6c..f194f87400e 100644 --- a/app/code/Magento/Ui/view/base/web/templates/tab.html +++ b/app/code/Magento/Ui/view/base/web/templates/tab.html @@ -4,15 +4,17 @@ * See COPYING.txt for license details. */ --> -<div class="block tab-nav"> - <div class="block-title" data-bind="css: { 'ui-accordion-header': collapsible, 'ui-accordion-header-active': opened() && collapsible }, click: toggle, click: onClick, keyboard: { 13: onClick }"> +<div class="admin__scope"> +<div class="admin__section-nav"> + <div class="admin__section-nav-title" data-bind="css: { '_collapsible': collapsible, '_opened': opened() && collapsible }, click: toggle, click: onClick, keyboard: { 13: onClick }"> <strong tabindex="1" data-bind="text: label, keyboard: { 13: toggle }"></strong> </div> - <ul class="tab-nav-items items" data-bind="visible: opened"> + <ul class="admin__section-nav-items items" data-bind="visible: opened"> <!-- ko foreach: elems --> - <li class="tab-nav-item" tabindex="2" data-bind="css: { 'ui-state-active': active, 'ui-tabs-loading': loading }, click: activate, keyboard: { 13: activate }"> - <a class="tab-nav-item-link" href="#" data-bind="text: label, css: { changed: changed }, attr: { id: 'tab_' + index }"></a> + <li class="admin__section-nav-item" tabindex="2" data-bind="css: { '_active': active, '_loading': loading }, click: activate, keyboard: { 13: activate }"> + <a class="admin__section-nav-link" href="#" data-bind="text: label, css: { '_changed': changed }, attr: { id: 'tab_' + index }"></a> </li> <!-- /ko --> </ul> +</div> </div> \ No newline at end of file diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form.less b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form.less new file mode 100644 index 00000000000..eae45e2dc49 --- /dev/null +++ b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form.less @@ -0,0 +1,338 @@ +// /** +// * Copyright © 2015 Magento. All rights reserved. +// * See COPYING.txt for license details. +// */ + + +// +// Variables +// _____________________________________________ + +@field-control--border-color: #adadad; +@field-control_focus--border-color: #007BDB; +@field-scope--color: #808080; +@field-label--color: #007BDB; +@field-divider--color: #ccc; +@field-label--color: #303030; +@field-label-disabled--color: #999; +@field-label_required--color: #EB5202; +@field-note--color: #303030; +@field-control--color: #303030; +@field-control--bg-color: #fff; +@field-control_disabled--bg-color: #E9E9E9; +@field-control-addon--color: #858585; +@field-date-icon--color: #514943; +@field-error--color: #555; +@field-error--bg-color: #FFF8D6; +@field-error--border-color: #E22626; + + +// +// Form Fields +// _____________________________________________ + +.mix-grid-width(@_columns-min, @_total:12) { + @_gutter: 30px; + @_part: @_columns-min/@_total; + float: left; + width: ~'calc( (100%) * @{_part} - @{_gutter} )'; + margin-left: @_gutter; +} + +.col-2-left-layout { + margin-top: 50px; + margin-left: -30px; + width: auto; + .clearfix(); + .main-col { + .mix-grid-width(9); + float: right; + } + .side-col { + .mix-grid-width(3); + } +} +.admin__fieldset-wrapper-title { + padding: 14px 0 16px; + margin-bottom: 30px; + strong { + &:extend(h2); + } +} + +// +// Form Fields +// _____________________________________________ + +.admin__block { + width: 100%; + border: 1px solid black; +} +.admin__fieldset { + margin: 0; + padding: 0; + border: 0; + min-width: 0; + > .admin__field { + border: 0; + padding: 0; + margin: 0; + .clearfix(); // @todo !abstract + margin-left: -30px; + + > .admin__field-control { + .mix-grid-width(4,9); + } + > .admin__field-label { + .mix-grid-width(3,9); + } + } +} + +.admin__field-label { + margin: 0; + color: @field-label--color; + text-align: right; + + & + br { + display: none; + } + + [class]:not(.admin__field-option) > & { + font-family: 'Open Sans', arial, sans-serif; + font-size: 14px; + font-weight: 600; + padding-top: 0; + line-height: 33px; + white-space: nowrap; + &:before { + content: "."; + visibility: hidden; + width: 0; + margin-left: -7px; + overflow: hidden; + } + span { + white-space: normal; + display: inline-block; + vertical-align: middle; + line-height: 1.2; + } + } + + ._required > & { + span:after { + content: "*"; + color: @field-label_required--color; + display: inline; + font-weight: 500; + font-size: 16px; + margin-top: 2px; + position: absolute; + z-index: 1; + margin-left: 10px; + } + } + + ._disabled > & { + color: @field-label-disabled--color; + } +} + + +.admin__field { + + margin-bottom: 0; + & + & { + margin-top: 15px; + } + &:not(.admin__field-option) ~ .admin__field-option { + margin-left: 20px; + margin-top: 5px; + } + &.admin__field-option ~ .admin__field-option { + margin-top: 9px; + } + & ~ .admin__field-option:last-child { + margin-bottom: 8px; + } + + .admin__fieldset > & { + margin-bottom: 30px; + position: relative; + z-index: 1; + &:hover { + z-index: 2; + } + } + + &[data-config-scope] { + &:before { + .mix-grid-width(2); + position: absolute; + right: 0; + display: inline-block; + content: attr(data-config-scope); + float: right; + color: @field-scope--color; + } + .admin__field-control &:nth-child(n+2):before { + content: ""; + } + } + + &._error { + .admin__field-control [class*="admin__addon-"]:before, + .admin__field-control > [class*="admin__control-"] { + border-color: @field-error--border-color; + } + } +} + +.admin__field-error { + border: 1px solid @field-error--border-color; + display: block; + margin: 2px 0 0; + padding: 6px 10px 10px; + background: @field-error--bg-color; + color: @field-error--color; + font-size: 12px; + font-weight: 500; + box-sizing: border-box; +} + +.admin__field-note { + color: @field-note--color; + padding: 0; + margin: 10px 0 0; +} + +.admin__control-fields { + .admin__field-label ~ .admin__field-control { + width: 100%; + } +} + +.admin__field-option { + .admin__field-label { + text-align: left; + } + padding-top: 8px; + .admin__field-control > & { + &:nth-child(1):nth-last-child(2), + &:nth-child(2):nth-last-child(1) { + display: inline-block; + & + .admin__field-option { + display: inline-block; + margin-left: 41px; + margin-top: 0; + } + & + .admin__field-option:before { + content: ""; + position: absolute; + display: inline-block; + height: 20px; + top: 8px; + left: -20px; + width: 1px; + background: @field-divider--color; + } + } + } +} + +.admin__control-fields { + .admin__field:nth-child(n+2):not(.admin__field-option) { + > .admin__field-label { + .visually-hidden; // @todo !abstract + } + } +} + +[class*="admin__control-grouped"] { + display: table; + width: 100%; + table-layout: fixed; + box-sizing: border-box; + & > .admin__field { + display: table-cell; + width: 50%; + vertical-align: top; + > .admin__field-control { + width: 100%; + float: none; + } + &:nth-child(n+2) { + padding-left: 20px; + &:not(.admin__field-option) .admin__field-label { + .visually-hidden(); + } + } + } +} + +[class*="admin__control-grouped"], +.admin__control-fields { + & > .admin__field:first-child { + position: static; + & > .admin__field-label { + + position: absolute; + left: 0; + top: 0; + .mix-grid-width(3); + opacity: 0; + cursor: pointer; + } + } +} + +// @todo Move to other place: +.address-item-edit-content { + padding: 15px 30px; + .admin__field > .admin__field-control, + .admin__field > .admin__field-label { + text-align: left; + float: none; + } + .admin__field > .admin__field-control { + width: ~'calc( 100% - 30px )'; + } + .admin__field-label { + margin-top: -16px; + } + ._required .admin__field-label span { + padding-left: 15px; + &:after { + left: 0; + margin-left: 30px; + } + } + +} +.address-list { + list-style-type: none; + margin:0; + padding: 0; + width: 360px; + float: left; + .address-list-item { + margin-bottom: 30px; + } + .action-delete { + background-color: transparent; + padding: 0; + &:hover { + box-shadow: 0; + border: 0; + } + } +} +.address-item-edit { + margin-left: 359px; + .admin__legend { + display: none; + } +} + + diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form/_tooltip.less b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form/_tooltip.less new file mode 100644 index 00000000000..29f1ea0cd31 --- /dev/null +++ b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form/_tooltip.less @@ -0,0 +1,91 @@ +// /** +// * Copyright © 2015 Magento. All rights reserved. +// * See COPYING.txt for license details. +// */ + +// +// Variables +// _____________________________________________ +@field-tooltip-icon--color: #fff; +@field-tooltip-icon--bg-color: #514943; +@field-tooltip-content--bg-color: #fff8d7; +@field-tooltip-content--border-color: #adadad; + +// +// Form Fields +// _____________________________________________ + +.admin__field-tooltip { + display: inline-block; + vertical-align: top; + margin-top: 5px; + .admin__field-option & { + margin-top: 10px + } + position: relative; + &:hover { + z-index: 99; + } + z-index: 1; + width:0; + overflow: visible; + &-action { + position: relative; + z-index: 2; + margin-left: 18px; + width: 22px; + height: 22px; + display: inline-block; + cursor: pointer; + &:before { + content: "?"; + font-weight: 500; + font-size: 18px; + display: inline-block; + overflow: hidden; + height: 22px; + border-radius: 11px; + line-height: 22px; + width: 22px; + text-align: center; + color: @field-tooltip-icon--color; + background-color: @field-tooltip-icon--bg-color; + } + span { + .visually-hidden(); + } + } + .admin__control-text:focus + &-content, + &:hover &-content { + display: block; + } + &-content { + display: none; + position: absolute; + z-index: 1; + width: 320px; + background: @field-tooltip-content--bg-color; + padding: 15px 25px; + right: -66px; + border: 1px solid @field-tooltip-content--border-color; + border-radius: 1px; + bottom: 42px; + @_shadow: 0 2px 8px 0 rgba(0, 0, 0, .3); + .css(box-shadow, @_shadow); + &:after, + &:before { + content: ""; + display: block; + .arrow(down,16px,@field-tooltip-content--border-color); + position: absolute; + right: 20px; + top: 100%; + z-index: 3; + } + &:after { + border-top-color: @field-tooltip-content--bg-color; + margin-top: -1px; + z-index: 4; + } + } +} diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_module.less b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_module.less index 31d54b3810f..2b1847b0148 100644 --- a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_module.less +++ b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_module.less @@ -3,4 +3,6 @@ // * See COPYING.txt for license details. // */ -//@import 'formelements'; +@import "_form"; +@import "_tabnav"; +@import '_form/_tooltip'; diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_tabnav.less b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_tabnav.less new file mode 100644 index 00000000000..aa53748d74a --- /dev/null +++ b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_tabnav.less @@ -0,0 +1,110 @@ +// /** +// * Copyright © 2015 Magento. All rights reserved. +// * See COPYING.txt for license details. +// */ + +// +// Tab Left Navigation +// _____________________________________________ + +.admin__section-nav { + padding-bottom: 1px + 50px; +} +.admin__section-nav-title { + padding: 0; + margin: 0 0 -1px; + color: #333333; + display: block; + padding: 20px 13px; + background: #f1f1f1; + text-transform: uppercase; + border: 1px solid #e3e3e3; + line-height: 1.2; + &._collapsible { + padding-right: 35px; + &:after { + content: '\e628'; + font-family: @icons-admin__font-name; + -webkit-font-smoothing: antialiased; + font-weight: normal; + speak: none; + position: absolute; + right: 18px; + top: 22px; + font-size: 13px; + } + } + strong { + font-weight: 700; + } +} +.admin__section-nav-items { + list-style-type: none; + padding: 0; + margin: 0; +} +.admin__section-nav-item { + padding: 0; + border-left: 3px solid transparent; + margin: 0 0 -1px; + &._active { + border-color: #eb5202; + .admin__section-nav-link { + border-color: #e3e3e3; + margin: 0; + &:hover { + text-decoration: none; + } + } + } + &._loading { + position: relative; + z-index: 1; + &:before { + content: ""; + display: block; + position: absolute; + z-index: 2; + .url('images/loader-2.gif'); + background: url("@{url}") no-repeat 50% 50%; + background-size: 120px; + width: 20px; + height: 20px; + top: 21px; + right: 5px; + } + } +} +.admin__section-nav-link { + border: 1px solid transparent; + border-width: 1px 0; + line-height: 1.2; + font-weight: 500; + color: #333333; + display: block; + padding: 20px 30px 20px 10px; + &:hover { + color: #333333; + text-decoration: underline; + } + &._changed { + position: relative; + z-index: 1; + &:before { + content: '\e623'; + font-family: @icons-admin__font-name; + -webkit-font-smoothing: antialiased; + font-style: normal; + font-weight: normal; + speak: none; + position: absolute; + z-index: 2; + font-size: 17px; + color: #eb5202; + width: 20px; + height: 20px; + top: 15px; + right: 5px; + } + } +} diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module.less b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module.less index d16c342e0e5..0e4f0735167 100644 --- a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module.less +++ b/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module.less @@ -3,7 +3,7 @@ // * See COPYING.txt for license details. // */ -@import "formelements.less"; +//@import "formelements.less"; //colors @@ -28,6 +28,8 @@ @size-l: @size__base; @size-xl: @size__base; +@field-date-icon--color: #514943; + [class*="tab-nav-item"]:not(ul):active, [class*="tab-nav-item"]:not(ul):focus { box-shadow: none; diff --git a/app/design/adminhtml/Magento/backend/web/css/override.css b/app/design/adminhtml/Magento/backend/web/css/override.css index faab3a7e010..a0feb7c171c 100644 --- a/app/design/adminhtml/Magento/backend/web/css/override.css +++ b/app/design/adminhtml/Magento/backend/web/css/override.css @@ -195,7 +195,9 @@ th { box-shadow: none; outline: 0; } -.keyfocus *:focus { +.keyfocus *:focus, +.keyfocus .admin__control-radio:focus + label, +.keyfocus .admin__control-checkbox:focus + label { box-shadow: 0 0 0 1px #008bdb; } img, @@ -250,7 +252,8 @@ h1 { line-height: 3.4rem; margin: 0 0 2rem; } -h2 { +h2, +.admin__fieldset-wrapper-title strong { font-size: 2rem; color: #41362f; font-weight: 400; @@ -510,6 +513,278 @@ nav ol { margin-bottom: 1em; margin-left: 20rem; } +.__form-control-styles, +.admin__control-text, +.admin__control-select, +.admin__control-textarea, +.admin__control-multiselect, +.admin__control-addon [class*="admin__control-"] + [class*="admin__addon-"]:before { + background-color: #ffffff; + border-radius: 1px; + border: 1px solid #adadad; + color: #303030; + font-size: 15px; + font-weight: 500; + height: 33px; + max-width: 100%; + padding: 0 10px; +} +.__form-control-styles:focus, +.admin__control-text:focus, +.admin__control-select:focus, +.admin__control-textarea:focus, +.admin__control-multiselect:focus, +.admin__control-addon [class*="admin__control-"]:focus + label:before { + border-color: #007bdb; + box-shadow: none; + outline: 0; +} +.__form-control-styles[disabled], +.admin__control-text[disabled], +.admin__control-select[disabled], +.admin__control-textarea[disabled], +.admin__control-multiselect[disabled], +.admin__control-addon [class*="admin__control-"][disabled] + [class*="admin__addon-"]:before { + background-color: #e9e9e9; + border-color: #adadad; + color: #303030; + opacity: .5; +} +.admin__control-text { + line-height: normal; + width: 100%; +} +.admin__control-select { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-repeat: no-repeat; + background-image: url('../images/arrows-bg.svg'), linear-gradient(#e3e3e3, #e3e3e3), linear-gradient(#adadad, #adadad); + background-position: ~" calc(100% - 12px) -34px, 100%, calc(100% - 33px) 0"; + background-size: auto, 33px 100%, 1px 100%; + padding-right: 44px; +} +.admin__control-select:focus { + background-image: url('../images/arrows-bg.svg'), linear-gradient(#e3e3e3, #e3e3e3), linear-gradient(#007bdb, #007bdb); + background-position: ~" calc(100% - 12px) 13px, 100%, calc(100% - 33px) 0"; +} +.admin__control-select::-ms-expand { + display: none; +} +.ie9 .admin__control-select { + padding-right: 0; +} +option:empty { + display: none; +} +.admin__control-file { + background: transparent; + border: 0; +} +.admin__control-textarea, +.admin__control-multiselect { + height: ~" calc(6 * 1.2em + 14px)"; + line-height: 1.2; + padding: 6px 10px; + width: 100%; +} +.admin__control-textarea { + line-height: 1.18em; + padding-top: 8px; +} +.admin__control-radio, +.admin__control-checkbox { + margin: 3px 0 0 0; + opacity: 0; + overflow: hidden; + position: absolute; + vertical-align: top; +} +.admin__control-radio + label, +.admin__control-checkbox + label { + cursor: pointer; + display: inline-block; + padding-left: 26px; +} +.admin__control-radio + label:before, +.admin__control-checkbox + label:before { + background: url('../Magento_Ui/images/choice_bkg.png') no-repeat -100% -100% #ffffff; + border-radius: 2px; + border: 1px solid #adadad; + content: ''; + float: left; + height: 14px; + line-height: 14px; + margin: 1px 10px 0 -26px; + text-align: center; + vertical-align: top; + width: 14px; +} +.admin__control-radio:focus + label:before, +.admin__control-checkbox:focus + label:before { + border-color: #007bdb; +} +.admin__control-radio[disabled] + label, +.admin__control-checkbox[disabled] + label { + color: #303030; + opacity: .5; +} +.admin__control-radio[disabled] + label:before, +.admin__control-checkbox[disabled] + label:before { + background-color: #e9e9e9; + border-color: #adadad; +} +.admin__control-radio + label:before { + border-radius: 8px; +} +.admin__control-radio:checked + label:before { + background-position: -26px -1px; +} +.admin__control-checkbox:checked + label:before { + background-position: -1px -1px; +} +.admin__control-addon { + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + display: inline-flex; + flex-flow: row nowrap; + position: relative; + width: 100%; + z-index: 1; +} +.admin__control-addon > * { + -webkit-flex-basis: auto; + flex-basis: auto; + -webkit-flex-grow: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + flex-shrink: 0; +} +.admin__control-addon > * { + position: relative; + z-index: 1; +} +.admin__control-addon [class*="admin__control-"] { + background-color: transparent; + border-color: transparent; + order: 1; + vertical-align: top; + width: auto; + appearence: none; + -webkit-flex-grow: 1; + flex-grow: 1; +} +.admin__control-addon [class*="admin__control-"] :focus { + box-shadow: 0; +} +.admin__control-addon [class*="admin__control-"] + [class*="admin__addon-"] { + padding-left: 10px; + position: static !important; + z-index: 0; +} +.admin__control-addon [class*="admin__control-"] + [class*="admin__addon-"] > * { + position: relative; + vertical-align: top; + z-index: 2; +} +.admin__control-addon [class*="admin__control-"] + [class*="admin__addon-"]:before { + bottom: 0; + box-sizing: border-box; + content: ''; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 0; +} +.admin__addon-suffix, +.admin__addon-prefix { + border: 0; + box-sizing: border-box; + color: #858585; + display: inline-block; + font-size: 15px; + font-weight: 300; + height: 33px; + line-height: 33px; + padding: 0 3px; +} +.admin__addon-suffix { + order: 3; +} +.admin__addon-suffix:last-child { + padding-right: 10px; +} +.admin__addon-prefix { + order: 0; +} +.admin__control-value { + display: inline-block; + padding: 6px 10px; +} +/*! END ._form*/ +.admin__control-text + .ui-datepicker-trigger { + background-image: none; + background: none; + border: 0; + margin: 0; + padding: 0; + -moz-box-sizing: content-box; + box-shadow: none; + text-shadow: none; + line-height: inherit; + font-weight: 400; + text-decoration: none; + margin-left: -40px; + display: inline-block; +} +.admin__control-text + .ui-datepicker-trigger img { + display: none; +} +.admin__control-text + .ui-datepicker-trigger:focus, +.admin__control-text + .ui-datepicker-trigger:active { + background: none; + border: none; +} +.admin__control-text + .ui-datepicker-trigger:hover { + background: none; + border: none; +} +.admin__control-text + .ui-datepicker-trigger.disabled, +.admin__control-text + .ui-datepicker-trigger[disabled], +fieldset[disabled] .admin__control-text + .ui-datepicker-trigger { + cursor: not-allowed; + pointer-events: none; + opacity: 0.5; +} +.admin__control-text + .ui-datepicker-trigger > span { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.admin__control-text + .ui-datepicker-trigger:after { + font-family: 'icons-blank-theme'; + content: '\e612'; + font-size: 38px; + line-height: 33px; + color: #514943; + overflow: hidden; + speak: none; + font-weight: normal; + -webkit-font-smoothing: antialiased; + display: inline-block; + vertical-align: middle; + text-align: center; +} .action, button { background: #e3e3e3; @@ -795,403 +1070,281 @@ button.tertiary:active { .actions-split button:hover { box-shadow: none; } -.fieldset { - padding: 0; - margin: 0 0 2rem; - border: 0; - letter-spacing: -0.31em; -} -.fieldset > * { - letter-spacing: normal; +table { + color: #303030; } -.fieldset > .legend { - margin: 0 0 1.25rem; - padding: 0; - font-size: 2rem; - line-height: 1.2; - box-sizing: border-box; - float: left; +table > caption { + margin-bottom: .5rem; } -.fieldset > .legend + br { - display: block; - visibility: hidden; - height: 0; - overflow: hidden; - clear: both; +table tfoot { + background: #f8f8f8; } -fieldset.field [class^='fields-group-'] .field .control { - margin: 0 0 0 20px; - width: auto; +table tfoot th, +table tfoot td { + text-align: left; } -.fieldset-wrapper > .fieldset-wrapper-title, -.fieldset > .legend { - border-bottom: 1px solid #cac3b4; - box-sizing: border-box; - float: left; - margin: 0 0 18px; - padding: 0; - position: static; - width: 100%; +table th { + background: transparent; + border-bottom: 0.1rem solid #e3e3e3; + border-top: 0.1rem solid #e3e3e3; + font-weight: 700; + padding: 1rem 1.5rem; + text-align: left; } -.fieldset-wrapper > .fieldset-wrapper-title { - float: none; +table td { + border-bottom: 0.1rem solid #e3e3e3; + padding: 1rem 1.5rem; + vertical-align: top; } -.form-inline .label, -.form-inline .control { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - float: left; +table tbody td:first-child input[type='checkbox'] { margin: 0; - width: 55%; -} -.form-inline .label { - padding: 5px 15px 0 0; - text-align: right; - width: 45%; -} -.form-inline .no-label .control { - margin-left: 20%; - width: 60%; } -.form-inline .field-service { - box-sizing: border-box; - color: #999; - float: left; - font-size: 12px; - letter-spacing: .05em; - padding: 7px 0 0 15px; - width: 20%; +table tbody tr:last-child td { + border-bottom-color: transparent; } -.form-inline .field-service .checkbox { - margin: 0; - vertical-align: middle; +.messages { + margin: 20px 0; } -.form-inline .field-service[value-scope]:before { - content: attr(value-scope) !important; - display: block; - margin-bottom: 5px; - white-space: nowrap; +.messages > .message:last-child { + margin-bottom: 0; } -.form-inline .choice { +.message { + background: #fff1ad; + color: #333333; + margin-bottom: 3.5rem; + padding: 1.8rem 4rem 1.8rem 1.9rem; position: relative; - z-index: 1; + text-shadow: none; } -.form-inline .choice .control { - left: 45%; - margin-top: 4px; +.message:before { + background: none; + border: 0; + font-family: 'Icons'; + font-size: 1.9rem; + font-style: normal; + font-weight: 400; + height: auto; + left: 1.9rem; + line-height: inherit; + margin-top: -1.3rem; position: absolute; + speak: none; + text-shadow: none; + top: 50%; width: auto; } -.form-inline .choice .tooltip { - margin-left: 20px; - margin-top: 7px; - position: relative; - z-index: 1; -} -.form-inline .with-tooltip:not(.choice) { - padding-top: 20px; -} -.control *:first-child { - margin-bottom: 0; -} -.control > input { - width: 100%; -} -.control > input[type='button'], -.control > input[type='radio'], -.control > input[type='checkbox'], -.control > input[type='file'] { - width: auto; -} -.control > input.hasDatepicker { - width: 160px; +.message-info, +.message.info { + padding-left: 5rem; } -.control > table { - width: 100%; +.message-info:before, +.message.info:before { + color: #007bdb; } -.control .input-file { - margin-top: 4px; +.message-error, +.message.error { + padding-left: 5rem; } -.control .hasDatepicker + img { - margin: -3px 0 0 5px; - vertical-align: middle; +.message-error:before, +.message.error:before { + color: #eb5202; } -.control .control-value { - display: inline-block; - padding: 6px 0 0; - vertical-align: top; +.message.success { + padding-left: 5rem; } -.control .control-value.special { - font-weight: bold; +.message.success:before { + color: #79a22e; } -.control .nested { - padding: 0; +.row { + margin-left: 0; + margin-right: 0; } -.field-tooltip { - display: inline-block; - margin-top: 5px; - overflow: visible; +.row:after { + content: ""; + display: table; + clear: both; +} +.col-xs-1, .col-m-1, .col-l-1, .col-xl-1, .col-xs-2, .col-m-2, .col-l-2, .col-xl-2, .col-xs-3, .col-m-3, .col-l-3, .col-xl-3, .col-xs-4, .col-m-4, .col-l-4, .col-xl-4, .col-xs-5, .col-m-5, .col-l-5, .col-xl-5, .col-xs-6, .col-m-6, .col-l-6, .col-xl-6, .col-xs-7, .col-m-7, .col-l-7, .col-xl-7, .col-xs-8, .col-m-8, .col-l-8, .col-xl-8, .col-xs-9, .col-m-9, .col-l-9, .col-xl-9, .col-xs-10, .col-m-10, .col-l-10, .col-xl-10, .col-xs-11, .col-m-11, .col-l-11, .col-xl-11, .col-xs-12, .col-m-12, .col-l-12, .col-xl-12 { position: relative; - vertical-align: top; - width: 0; - z-index: 1; + min-height: 1px; + padding-left: 0; + padding-right: 0; } -.field-choice .field-tooltip { - margin-top: 10px; +.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { + float: left; } -.field-tooltip:hover { - z-index: 99; +.col-xs-12 { + width: 100%; } -.field-tooltip-action { - color: #514943; - cursor: pointer; - display: inline-block; - font-family: 'Icons'; - margin-left: 18px; - margin-top: -6px; - position: relative; - z-index: 2; +.col-xs-11 { + width: 91.66666667%; } -.field-tooltip-action:hover { - color: #514943; - text-decoration: none; +.col-xs-10 { + width: 83.33333333%; } -.field-tooltip-action:before { - content: '\e633'; - font-size: 22px; +.col-xs-9 { + width: 75%; } -.field-tooltip-action span { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; +.col-xs-8 { + width: 66.66666667%; } -.control-text:focus + .field-tooltip-content, -.field-tooltip:hover .field-tooltip-content { - display: block; +.col-xs-7 { + width: 58.33333333%; } -.field-tooltip-content { - background: #fff8d6; - border: 1px solid #adadad; - border-radius: 1px; - bottom: 42px; - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3); - display: none; - padding: 15px 25px; - position: absolute; - right: -66px; - width: 320px; - z-index: 1; +.col-xs-6 { + width: 50%; } -.field-tooltip-content:after, -.field-tooltip-content:before { - border: 16px solid transparent; - height: 0; - width: 0; - border-top-color: #adadad; - content: ''; - display: block; - position: absolute; - right: 20px; - top: 100%; - z-index: 3; +.col-xs-5 { + width: 41.66666667%; } -.field-tooltip-content:after { - border-top-color: #fff8d6; - margin-top: -1px; - z-index: 4; +.col-xs-4 { + width: 33.33333333%; } -.form__field { - position: relative; - z-index: 1; +.col-xs-3 { + width: 25%; } -.form__field:before, -.form__field:after { - content: ""; - display: table; +.col-xs-2 { + width: 16.66666667%; } -.form__field:after { - clear: both; +.col-xs-1 { + width: 8.33333333%; } -.form__field:hover { - z-index: 2; +.col-xs-pull-12 { + right: 100%; } -.control .form__field { - position: static; +.col-xs-pull-11 { + right: 91.66666667%; } -.form__field.field-error .control [class*='control-'] { - border-color: #e22626; +.col-xs-pull-10 { + right: 83.33333333%; } -.form__field.field-error .control [class*='control-']:before { - border-color: #e22626; +.col-xs-pull-9 { + right: 75%; } -.form__field .mage-error { - background: #fff8d6; - border: 1px solid #e22626; - box-sizing: border-box; - color: #555555; - display: block; - font-size: 12px; - font-weight: 500; - margin: 2px 0 0; - max-width: 380px; - padding: 6px 10px 10px; +.col-xs-pull-8 { + right: 66.66666667%; } -.no-flexbox.no-flexboxlegacy .form__field .control-addon + .mage-error { - display: inline-block; - width: 100%; +.col-xs-pull-7 { + right: 58.33333333%; } -.form__field[data-config-scope]:before { - color: #808080; - content: attr(data-config-scope); - display: inline-block; - position: absolute; - right: 0; - top: 6px; +.col-xs-pull-6 { + right: 50%; } -.control .form__field[data-config-scope]:nth-child(n+2):before { - content: ''; +.col-xs-pull-5 { + right: 41.66666667%; } -.form__field.field-disabled > .label { - color: #999999; +.col-xs-pull-4 { + right: 33.33333333%; } -.form__field.field-disabled.field .control [class*='control-'][disabled] { - background-color: #e9e9e9; - border-color: #adadad; - color: #303030; - opacity: .5; +.col-xs-pull-3 { + right: 25%; } -.control-fields .label ~ .control { - width: 100%; +.col-xs-pull-2 { + right: 16.66666667%; } -.form__field { - border: 0; - padding: 0; +.col-xs-pull-1 { + right: 8.33333333%; } -.form__field .note { - color: #303030; - margin: 10px 0 0; - max-width: 380px; - padding: 0; +.col-xs-pull-0 { + right: auto; } -.form__field .note:before { - display: none; +.col-xs-push-12 { + left: 100%; } -.form__field.form__field { - margin-bottom: 0; +.col-xs-push-11 { + left: 91.66666667%; } -.form__field.form__field + .form__field.form__field { - margin-top: 15px; +.col-xs-push-10 { + left: 83.33333333%; } -.form__field.form__field:not(.choice) ~ .choice { - margin-left: 20px; - margin-top: 5px; +.col-xs-push-9 { + left: 75%; } -.form__field.form__field.choice ~ .choice { - margin-top: 9px; +.col-xs-push-8 { + left: 66.66666667%; } -.form__field.form__field ~ .choice:last-child { - margin-bottom: 8px; +.col-xs-push-7 { + left: 58.33333333%; } -.fieldset > .form__field { - margin-bottom: 30px; +.col-xs-push-6 { + left: 50%; } -.form__field .label { - color: #303030; +.col-xs-push-5 { + left: 41.66666667%; } -.form__field:not(.choice) > .label { - font-size: 14px; - font-weight: 600; - line-height: 33px; - padding-right: 30px; - padding-top: 0; - white-space: nowrap; - width: 30%; +.col-xs-push-4 { + left: 33.33333333%; } -.form__field:not(.choice) > .label:before { - content: '.'; - margin-left: -7px; - overflow: hidden; - visibility: hidden; - width: 0; +.col-xs-push-3 { + left: 25%; } -.form__field:not(.choice) > .label span { - display: inline-block; - line-height: 1.2; - vertical-align: middle; - white-space: normal; +.col-xs-push-2 { + left: 16.66666667%; } -.form__field.required > .label span:after { - color: #eb5202; - content: '*'; - display: inline; - font-size: 16px; - font-weight: 500; - margin-left: 10px; - margin-top: 2px; - position: absolute; - z-index: 1; +.col-xs-push-1 { + left: 8.33333333%; } -.form__field.required > .label:after { - content: ''; - margin-left: 0; +.col-xs-push-0 { + left: auto; } -.form__field .control-file { - margin-top: 6px; +.col-xs-offset-12 { + margin-left: 100%; } -.form__field .control-select { - line-height: 33px; +.col-xs-offset-11 { + margin-left: 91.66666667%; } -.form__field .control-select:not([multiple]), -.form__field .control-text { - height: 33px; - max-width: 380px; +.col-xs-offset-10 { + margin-left: 83.33333333%; } -.form__field .control-addon { - max-width: 380px; +.col-xs-offset-9 { + margin-left: 75%; } -.form__field .control-textarea, -.form__field .control-select, -.form__field .control-text { - background-color: #ffffff; - border: 1px solid #adadad; - border-radius: 1px; - color: #303030; - font-size: 15px; - font-weight: 500; - min-width: 11em; - padding: 0 10px; +.col-xs-offset-8 { + margin-left: 66.66666667%; } -.form__field .control-textarea:focus, -.form__field .control-select:focus, -.form__field .control-text:focus { - border-color: #007bdb; - box-shadow: none; - outline: 0; +.col-xs-offset-7 { + margin-left: 58.33333333%; } -.form__field .control-text { - line-height: auto; +.col-xs-offset-6 { + margin-left: 50%; } -.form__field .control-textarea { - line-height: 1.18em; - padding-bottom: 6px; - padding-top: 6px; +.col-xs-offset-5 { + margin-left: 41.66666667%; } -.form__field .control-select[multiple], -.form__field .control-textarea { - height: ~" calc(6 * 1.2em + 14px)"; - width: 100%; +.col-xs-offset-4 { + margin-left: 33.33333333%; } -.form__field .control-value { - display: inline-block; - padding: 6px 10px; +.col-xs-offset-3 { + margin-left: 25%; +} +.col-xs-offset-2 { + margin-left: 16.66666667%; +} +.col-xs-offset-1 { + margin-left: 8.33333333%; } -.form__field .control-fields .form__field:nth-child(n+2):not(.choice) > .label { +.col-xs-offset-0 { + margin-left: 0%; +} +.abs-icon, +[class^='icon-']:before, +[class*=' icon-']:before, +.admin__menu .level-0 > a:before { + -webkit-font-smoothing: antialiased; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; +} +.validation-symbol:after, +table th.required:after { + content: '*'; + color: #e22626; + font-weight: 400; + margin-left: 3px; +} +.abs-visually-hidden, +.dashboard-diagram-switcher .label { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -1201,837 +1354,170 @@ fieldset.field [class^='fields-group-'] .field .control { position: absolute; width: 1px; } -.form__field .control-select { - padding: 0; +.abs-clearfix:before, +.abs-clearfix:after, +.tabs-horiz:before, +.tabs-horiz:after, +.dashboard-totals-list:before, +.dashboard-totals-list:after, +.dashboard-store-stats .ui-tabs:before, +.dashboard-store-stats .ui-tabs:after { + content: ""; + display: table; } -.form__field .control-select option { - box-sizing: border-box; - display: block; - padding: 4px 10px; +.abs-clearfix:after, +.tabs-horiz:after, +.dashboard-totals-list:after, +.dashboard-store-stats .ui-tabs:after { + clear: both; } -.form__field .control-select optgroup { - display: block; - font-style: normal; - font-weight: 600; - line-height: 33px; - list-style: inside; - padding: 4px 10px; +.abs-list-reset-styles, +.dashboard-totals-list { + margin: 0; + padding: 0; + list-style: none none; } -.form__field .control-range > .form__field:nth-child(2):before { - content: '\2014'; - display: inline-block; - float: left; - line-height: 33px; - margin-left: -25px; - text-align: center; - width: 20px; +.tabs-horiz { + margin: 0; + padding: 0; } -.form__field.choice { - padding-left: 26px; - padding-right: 0; - padding-top: 8px; - position: relative; - z-index: 1; +.tabs-horiz .ui-state-default { + background: #e3e3e3; + border: 0.1rem solid #adadad; + float: left; + letter-spacing: .0183em; + list-style: none; + margin-right: .4rem; } -.form__field.choice .label { - display: inline; - float: none; - font-weight: 500; - line-height: 18px; - padding: 0; +.tabs-horiz .ui-state-hover { + background: #d6d6d6; } -.form__field.choice input { - margin-top: 3px !important; - position: absolute; - top: 8px; +.tabs-horiz .ui-state-active { + background: #ffffff; + border-bottom: 0; + font-weight: 600; + letter-spacing: normal; + margin-bottom: -0.1rem; } -.form__field.choice input[disabled] + .label { - cursor: not-allowed; - opacity: .5; +.tabs-horiz .ui-state-active .ui-tabs-anchor { + border-bottom: 0.1rem solid #ffffff; + border-top: 0.4rem solid #eb5202; + padding-top: 1.1rem; } -.control > .form__field.choice { - max-width: 380px; +.tabs-horiz .ui-tabs-anchor { + color: #41362f; + display: block; + padding: 1.5rem 1.8rem 1.3rem; + text-decoration: none; } -.control > .form__field.choice:nth-child(1):nth-last-child(2), -.control > .form__field.choice:nth-child(2):nth-last-child(1) { - display: inline-block; +.ui-tabs-panel { + border-top: 0.1rem solid #adadad; + margin-top: -0.1rem; + padding: 2rem; } -.control > .form__field.choice:nth-child(1):nth-last-child(2) + .choice, -.control > .form__field.choice:nth-child(2):nth-last-child(1) + .choice { - margin-left: 41px; - margin-top: 0; +.page-wrapper { + padding-left: 8.8rem; } -.control > .form__field.choice:nth-child(1):nth-last-child(2) + .choice:before, -.control > .form__field.choice:nth-child(2):nth-last-child(1) + .choice:before { - background: #cccccc; - content: ''; +/** + * @category design + * Copyright © 2015 Magento. All rights reserved. + * See COPYING.txt for license details. + */ +.spinner { display: inline-block; - height: 20px; - left: -20px; - position: absolute; - top: 8px; - width: 1px; + font-size: 4rem; + height: 1em; + margin-right: 1.5rem; + position: relative; + width: 1em; } -.form__field.choice .label { - cursor: pointer; +.spinner > span:nth-child( 1) { + -webkit-animation-delay: 0.27s; + -moz-animation-delay: 0.27s; + -ms-animation-delay: 0.27s; + animation-delay: 0.27s; + -webkit-transform: rotate(-315deg); + -moz-transform: rotate(-315deg); + -ms-transform: rotate(-315deg); + transform: rotate(-315deg); } -.form__field.choice .label:before { - background: url('../Magento_Ui/images/choice_bkg.png') no-repeat -100% -100%; - border: 1px solid #adadad; - border-radius: 2px; - content: ''; - height: 14px; - left: 0; - position: absolute; - top: 10px; - width: 14px; - z-index: 1; +.spinner > span:nth-child( 2) { + -webkit-animation-delay: 0.36s; + -moz-animation-delay: 0.36s; + -ms-animation-delay: 0.36s; + animation-delay: 0.36s; + -webkit-transform: rotate(-270deg); + -moz-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + transform: rotate(-270deg); } -.form__field.choice input:focus + .label:before { - border-color: #007bdb; - outline: 0; +.spinner > span:nth-child( 3) { + -webkit-animation-delay: 0.45s; + -moz-animation-delay: 0.45s; + -ms-animation-delay: 0.45s; + animation-delay: 0.45s; + -webkit-transform: rotate(-225deg); + -moz-transform: rotate(-225deg); + -ms-transform: rotate(-225deg); + transform: rotate(-225deg); } -.form__field.choice .control-radio + .label:before { - border-radius: 8px; +.spinner > span:nth-child( 4) { + -webkit-animation-delay: 0.54s; + -moz-animation-delay: 0.54s; + -ms-animation-delay: 0.54s; + animation-delay: 0.54s; + -webkit-transform: rotate(-180deg); + -moz-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); } -.form__field.choice .control-radio:checked + .label:before { - background-position: -26px -1px; +.spinner > span:nth-child( 5) { + -webkit-animation-delay: 0.63s; + -moz-animation-delay: 0.63s; + -ms-animation-delay: 0.63s; + animation-delay: 0.63s; + -webkit-transform: rotate(-135deg); + -moz-transform: rotate(-135deg); + -ms-transform: rotate(-135deg); + transform: rotate(-135deg); } -.form__field.choice .control-checkbox:checked + .label:before { - background-position: -1px -1px; +.spinner > span:nth-child( 6) { + -webkit-animation-delay: 0.72s; + -moz-animation-delay: 0.72s; + -ms-animation-delay: 0.72s; + animation-delay: 0.72s; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } -.form__field.choice input { - opacity: 0; +.spinner > span:nth-child( 7) { + -webkit-animation-delay: 0.81s; + -moz-animation-delay: 0.81s; + -ms-animation-delay: 0.81s; + animation-delay: 0.81s; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); } -.fieldset > .form__field.choice { - margin-left: 30%; +.spinner > span:nth-child( 8) { + -webkit-animation-delay: 0.9; + -moz-animation-delay: 0.9; + -ms-animation-delay: 0.9; + animation-delay: 0.9; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } -.form__field .control-after, -.form__field .control-before { - border: 0; - box-sizing: border-box; - color: #858585; - display: inline-block; - font-size: 15px; - font-weight: 300; - height: 33px; - line-height: 33px; - padding: 0 3px; -} -.no-flexbox.no-flexboxlegacy .form__field .control-before, -.no-flexbox.no-flexboxlegacy .form__field .control-addon { - float: left; - white-space: nowrap; -} -.form__field .control-addon { - display: inline-flex; - flex-flow: row nowrap; - max-width: 380px; - position: relative; - width: 100%; - z-index: 1; -} -.form__field .control-addon > * { - position: relative; - z-index: 1; -} -.form__field .control-addon .control-text[disabled][type], -.form__field .control-addon .control-select[disabled][type], -.form__field .control-addon .control-select, -.form__field .control-addon .control-text { - background: transparent!important; - border: 0; - flex: 1; - order: 1; - vertical-align: top; - width: auto; -} -.form__field .control-addon .control-text[disabled][type]:focus, -.form__field .control-addon .control-select[disabled][type]:focus, -.form__field .control-addon .control-select:focus, -.form__field .control-addon .control-text:focus { - box-shadow: none; -} -.form__field .control-addon .control-text[disabled][type]:focus + label:before, -.form__field .control-addon .control-select[disabled][type]:focus + label:before, -.form__field .control-addon .control-select:focus + label:before, -.form__field .control-addon .control-text:focus + label:before { - border-color: #007bdb; - outline: 0; -} -.form__field .control-addon .control-text[disabled][type] + label, -.form__field .control-addon .control-select[disabled][type] + label, -.form__field .control-addon .control-select + label, -.form__field .control-addon .control-text + label { - padding-left: 10px; - position: static!important; - z-index: 0; -} -.form__field .control-addon .control-text[disabled][type] + label > *, -.form__field .control-addon .control-select[disabled][type] + label > *, -.form__field .control-addon .control-select + label > *, -.form__field .control-addon .control-text + label > * { - position: relative; - vertical-align: top; - z-index: 2; -} -.form__field .control-addon .control-text[disabled][type] + label:before, -.form__field .control-addon .control-select[disabled][type] + label:before, -.form__field .control-addon .control-select + label:before, -.form__field .control-addon .control-text + label:before { - background: #ffffff; - border: 1px solid #adadad; - border-radius: 1px; - box-sizing: border-box; - content: ''; - display: block; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - z-index: 0; -} -.form__field .control-addon .control-text[disabled][type][disabled] + label:before, -.form__field .control-addon .control-select[disabled][type][disabled] + label:before, -.form__field .control-addon .control-select[disabled] + label:before, -.form__field .control-addon .control-text[disabled] + label:before { - background: #e9e9e9; - opacity: .5; -} -.form__field .control-after { - order: 3; -} -.form__field .control-after:last-child { - padding-right: 10px; -} -.form__field .control-before { - order: 0; -} -.form__field .control-some { - display: flex; -} -.form__field [class*='control-grouped'] { - box-sizing: border-box; - display: table; - table-layout: fixed; - width: 100%; -} -.form__field [class*='control-grouped'] > .form__field { - display: table-cell; - vertical-align: top; - width: 50%; -} -.form__field [class*='control-grouped'] > .form__field > .control { - float: none; - width: 100%; -} -.form__field [class*='control-grouped'] > .form__field:nth-child(n+2) { - padding-left: 20px; -} -.form__field [class*='control-grouped'] > .form__field:nth-child(n+2):not(.choice) .label { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} -.form__field [required] { - box-shadow: none; -} -fieldset.form__field { - position: relative; -} -fieldset.form__field [class*='control-grouped'] > .form__field:first-child > .label, -fieldset.form__field .control-fields > .form__field:first-child > .label { - cursor: pointer; - left: 0; - opacity: 0; - position: absolute; - top: 0; - width: 30%; -} -.control-text + .ui-datepicker-trigger { - background-image: none; - background: none; - border: 0; - margin: 0; - padding: 0; - -moz-box-sizing: content-box; - box-shadow: none; - text-shadow: none; - line-height: inherit; - font-weight: 400; - display: inline-block; - text-decoration: none; - margin-left: -40px; -} -.control-text + .ui-datepicker-trigger:focus, -.control-text + .ui-datepicker-trigger:active { - background: none; - border: none; -} -.control-text + .ui-datepicker-trigger:hover { - background: none; - border: none; -} -.control-text + .ui-datepicker-trigger.disabled, -.control-text + .ui-datepicker-trigger[disabled], -fieldset[disabled] .control-text + .ui-datepicker-trigger { - cursor: not-allowed; - pointer-events: none; - opacity: 0.5; -} -.control-text + .ui-datepicker-trigger > span { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} -.control-text + .ui-datepicker-trigger:after { - font-family: 'icons-blank-theme'; - content: '\e612'; - font-size: 38px; - line-height: 33px; - color: #514943; - overflow: hidden; - speak: none; - font-weight: normal; - -webkit-font-smoothing: antialiased; - display: inline-block; - vertical-align: middle; - text-align: center; -} -.control-text + .ui-datepicker-trigger img { - display: none; -} -.form-select-label { - border: 1px solid #adadad; - border-radius: 0; - color: #303030; - cursor: pointer; - display: inline-block; - overflow: hidden; - position: relative; -} -.form-select-label:hover, -.form-select-label:hover:after { - border-color: #949494; -} -.form-select-label:focus, -.form-select-label:focus:after, -.form-select-label:active, -.form-select-label:active:after { - border-color: #007bdb; -} -.form-select-label:after { - background: #e3e3e3; - border-left: 1px solid #adadad; - bottom: 0; - content: ''; - position: absolute; - right: 0; - top: 0; - width: 2.36em; - z-index: -2; -} -.ie9 .form-select-label:after { - display: none; -} -.form-select-label:before { - border-color: #514943 transparent transparent transparent; - border-style: solid; - border-width: 5px 4px 0 4px; - content: ''; - height: 0; - margin-right: -4px; - margin-top: -2.5px; - position: absolute; - right: 1.18em; - top: 50%; - width: 0; - z-index: -1; -} -.ie9 .form-select-label:before { - display: none; -} -.form-select-label .form-el-select { - background: transparent; - border: none; - border-radius: 0; - content: ''; - display: block; - margin: 0; - padding: ~" 0.35em calc(2.36em + 10%) 0.35em 0.55em"; - width: 110%; -} -.ie9 .form-select-label .form-el-select { - padding-right: 0.55em; - width: 100%; -} -.form-el-select { - background: #ffffff; - border: 1px solid #adadad; - border-radius: 0; - color: #303030; - display: block; - padding: 0.35em 0.55em; -} -table { - color: #303030; -} -table > caption { - margin-bottom: .5rem; -} -table tfoot { - background: #f8f8f8; -} -table tfoot th, -table tfoot td { - text-align: left; -} -table th { - background: transparent; - border-bottom: 0.1rem solid #e3e3e3; - border-top: 0.1rem solid #e3e3e3; - font-weight: 700; - padding: 1rem 1.5rem; - text-align: left; -} -table td { - border-bottom: 0.1rem solid #e3e3e3; - padding: 1rem 1.5rem; - vertical-align: top; -} -table tbody td:first-child input[type='checkbox'] { - margin: 0; -} -table tbody tr:last-child td { - border-bottom-color: transparent; -} -.messages { - margin: 20px 0; -} -.messages > .message:last-child { - margin-bottom: 0; -} -.message { - background: #fff1ad; - color: #333333; - margin-bottom: 3.5rem; - padding: 1.8rem 4rem 1.8rem 1.9rem; - position: relative; - text-shadow: none; -} -.message:before { - background: none; - border: 0; - font-family: 'Icons'; - font-size: 1.9rem; - font-style: normal; - font-weight: 400; - height: auto; - left: 1.9rem; - line-height: inherit; - margin-top: -1.3rem; - position: absolute; - speak: none; - text-shadow: none; - top: 50%; - width: auto; -} -.message-info, -.message.info { - padding-left: 5rem; -} -.message-info:before, -.message.info:before { - color: #007bdb; -} -.message-error, -.message.error { - padding-left: 5rem; -} -.message-error:before, -.message.error:before { - color: #eb5202; -} -.message.success { - padding-left: 5rem; -} -.message.success:before { - color: #79a22e; -} -.row { - margin-left: 0; - margin-right: 0; -} -.row:after { - content: ""; - display: table; - clear: both; -} -.col-xs-1, .col-m-1, .col-l-1, .col-xl-1, .col-xs-2, .col-m-2, .col-l-2, .col-xl-2, .col-xs-3, .col-m-3, .col-l-3, .col-xl-3, .col-xs-4, .col-m-4, .col-l-4, .col-xl-4, .col-xs-5, .col-m-5, .col-l-5, .col-xl-5, .col-xs-6, .col-m-6, .col-l-6, .col-xl-6, .col-xs-7, .col-m-7, .col-l-7, .col-xl-7, .col-xs-8, .col-m-8, .col-l-8, .col-xl-8, .col-xs-9, .col-m-9, .col-l-9, .col-xl-9, .col-xs-10, .col-m-10, .col-l-10, .col-xl-10, .col-xs-11, .col-m-11, .col-l-11, .col-xl-11, .col-xs-12, .col-m-12, .col-l-12, .col-xl-12 { - position: relative; - min-height: 1px; - padding-left: 0; - padding-right: 0; -} -.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { - float: left; -} -.col-xs-12 { - width: 100%; -} -.col-xs-11 { - width: 91.66666667%; -} -.col-xs-10 { - width: 83.33333333%; -} -.col-xs-9 { - width: 75%; -} -.col-xs-8 { - width: 66.66666667%; -} -.col-xs-7 { - width: 58.33333333%; -} -.col-xs-6 { - width: 50%; -} -.col-xs-5 { - width: 41.66666667%; -} -.col-xs-4 { - width: 33.33333333%; -} -.col-xs-3 { - width: 25%; -} -.col-xs-2 { - width: 16.66666667%; -} -.col-xs-1 { - width: 8.33333333%; -} -.col-xs-pull-12 { - right: 100%; -} -.col-xs-pull-11 { - right: 91.66666667%; -} -.col-xs-pull-10 { - right: 83.33333333%; -} -.col-xs-pull-9 { - right: 75%; -} -.col-xs-pull-8 { - right: 66.66666667%; -} -.col-xs-pull-7 { - right: 58.33333333%; -} -.col-xs-pull-6 { - right: 50%; -} -.col-xs-pull-5 { - right: 41.66666667%; -} -.col-xs-pull-4 { - right: 33.33333333%; -} -.col-xs-pull-3 { - right: 25%; -} -.col-xs-pull-2 { - right: 16.66666667%; -} -.col-xs-pull-1 { - right: 8.33333333%; -} -.col-xs-pull-0 { - right: auto; -} -.col-xs-push-12 { - left: 100%; -} -.col-xs-push-11 { - left: 91.66666667%; -} -.col-xs-push-10 { - left: 83.33333333%; -} -.col-xs-push-9 { - left: 75%; -} -.col-xs-push-8 { - left: 66.66666667%; -} -.col-xs-push-7 { - left: 58.33333333%; -} -.col-xs-push-6 { - left: 50%; -} -.col-xs-push-5 { - left: 41.66666667%; -} -.col-xs-push-4 { - left: 33.33333333%; -} -.col-xs-push-3 { - left: 25%; -} -.col-xs-push-2 { - left: 16.66666667%; -} -.col-xs-push-1 { - left: 8.33333333%; -} -.col-xs-push-0 { - left: auto; -} -.col-xs-offset-12 { - margin-left: 100%; -} -.col-xs-offset-11 { - margin-left: 91.66666667%; -} -.col-xs-offset-10 { - margin-left: 83.33333333%; -} -.col-xs-offset-9 { - margin-left: 75%; -} -.col-xs-offset-8 { - margin-left: 66.66666667%; -} -.col-xs-offset-7 { - margin-left: 58.33333333%; -} -.col-xs-offset-6 { - margin-left: 50%; -} -.col-xs-offset-5 { - margin-left: 41.66666667%; -} -.col-xs-offset-4 { - margin-left: 33.33333333%; -} -.col-xs-offset-3 { - margin-left: 25%; -} -.col-xs-offset-2 { - margin-left: 16.66666667%; -} -.col-xs-offset-1 { - margin-left: 8.33333333%; -} -.col-xs-offset-0 { - margin-left: 0%; -} -.abs-icon, -[class^='icon-']:before, -[class*=' icon-']:before, -.admin__menu .level-0 > a:before { - -webkit-font-smoothing: antialiased; - font-style: normal; - font-weight: normal; - line-height: 1; - speak: none; -} -.validation-symbol:after, -table th.required:after { - content: '*'; - color: #e22626; - font-weight: 400; - margin-left: 3px; -} -.abs-visually-hidden, -.dashboard-diagram-switcher .label { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} -.abs-clearfix:before, -.abs-clearfix:after, -.tabs-horiz:before, -.tabs-horiz:after, -.dashboard-totals-list:before, -.dashboard-totals-list:after, -.dashboard-store-stats .ui-tabs:before, -.dashboard-store-stats .ui-tabs:after { - content: ""; - display: table; -} -.abs-clearfix:after, -.tabs-horiz:after, -.dashboard-totals-list:after, -.dashboard-store-stats .ui-tabs:after { - clear: both; -} -.abs-list-reset-styles, -.dashboard-totals-list { - margin: 0; - padding: 0; - list-style: none none; -} -.tabs-horiz { - margin: 0; - padding: 0; -} -.tabs-horiz .ui-state-default { - background: #e3e3e3; - border: 0.1rem solid #adadad; - float: left; - letter-spacing: .0183em; - list-style: none; - margin-right: .4rem; -} -.tabs-horiz .ui-state-hover { - background: #d6d6d6; -} -.tabs-horiz .ui-state-active { - background: #ffffff; - border-bottom: 0; - font-weight: 600; - letter-spacing: normal; - margin-bottom: -0.1rem; -} -.tabs-horiz .ui-state-active .ui-tabs-anchor { - border-bottom: 0.1rem solid #ffffff; - border-top: 0.4rem solid #eb5202; - padding-top: 1.1rem; -} -.tabs-horiz .ui-tabs-anchor { - color: #41362f; - display: block; - padding: 1.5rem 1.8rem 1.3rem; - text-decoration: none; -} -.ui-tabs-panel { - border-top: 0.1rem solid #adadad; - margin-top: -0.1rem; - padding: 2rem; -} -.page-wrapper { - padding-left: 8.8rem; -} -/** - * @category design - * Copyright © 2015 Magento. All rights reserved. - * See COPYING.txt for license details. - */ -.spinner { - display: inline-block; - font-size: 4rem; - height: 1em; - margin-right: 1.5rem; - position: relative; - width: 1em; -} -.spinner > span:nth-child( 1) { - -webkit-animation-delay: 0.27s; - -moz-animation-delay: 0.27s; - -ms-animation-delay: 0.27s; - animation-delay: 0.27s; - -webkit-transform: rotate(-315deg); - -moz-transform: rotate(-315deg); - -ms-transform: rotate(-315deg); - transform: rotate(-315deg); -} -.spinner > span:nth-child( 2) { - -webkit-animation-delay: 0.36s; - -moz-animation-delay: 0.36s; - -ms-animation-delay: 0.36s; - animation-delay: 0.36s; - -webkit-transform: rotate(-270deg); - -moz-transform: rotate(-270deg); - -ms-transform: rotate(-270deg); - transform: rotate(-270deg); -} -.spinner > span:nth-child( 3) { - -webkit-animation-delay: 0.45s; - -moz-animation-delay: 0.45s; - -ms-animation-delay: 0.45s; - animation-delay: 0.45s; - -webkit-transform: rotate(-225deg); - -moz-transform: rotate(-225deg); - -ms-transform: rotate(-225deg); - transform: rotate(-225deg); -} -.spinner > span:nth-child( 4) { - -webkit-animation-delay: 0.54s; - -moz-animation-delay: 0.54s; - -ms-animation-delay: 0.54s; - animation-delay: 0.54s; - -webkit-transform: rotate(-180deg); - -moz-transform: rotate(-180deg); - -ms-transform: rotate(-180deg); - transform: rotate(-180deg); -} -.spinner > span:nth-child( 5) { - -webkit-animation-delay: 0.63s; - -moz-animation-delay: 0.63s; - -ms-animation-delay: 0.63s; - animation-delay: 0.63s; - -webkit-transform: rotate(-135deg); - -moz-transform: rotate(-135deg); - -ms-transform: rotate(-135deg); - transform: rotate(-135deg); -} -.spinner > span:nth-child( 6) { - -webkit-animation-delay: 0.72s; - -moz-animation-delay: 0.72s; - -ms-animation-delay: 0.72s; - animation-delay: 0.72s; - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); -} -.spinner > span:nth-child( 7) { - -webkit-animation-delay: 0.81s; - -moz-animation-delay: 0.81s; - -ms-animation-delay: 0.81s; - animation-delay: 0.81s; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); -} -.spinner > span:nth-child( 8) { - -webkit-animation-delay: 0.9; - -moz-animation-delay: 0.9; - -ms-animation-delay: 0.9; - animation-delay: 0.9; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transform: rotate(0deg); -} -@-moz-keyframes fade { - 0% { - background-color: #514943; - } - 100% { - background-color: #ffffff; - } +@-moz-keyframes fade { + 0% { + background-color: #514943; + } + 100% { + background-color: #ffffff; + } } @-webkit-keyframes fade { 0% { @@ -2589,242 +2075,716 @@ table th.required:after { width: 8.8rem; z-index: 700; } -.menu-wrapper .logo { - display: block; - margin-bottom: 1.8rem; - position: relative; - text-align: center; +.menu-wrapper .logo { + display: block; + margin-bottom: 1.8rem; + position: relative; + text-align: center; +} +.menu-wrapper .logo:hover .logo-img { + -webkit-filter: brightness(1.1); + filter: brightness(1.1); +} +.menu-wrapper .logo:active .logo-img { + transform: scale(0.95); +} +.menu-wrapper .logo .logo-img { + transition: -webkit-filter 0.2s linear, filter 0.2s linear, transform 0.1s linear; +} +.admin__menu { + position: relative; +} +.admin__menu ul > li { + display: block; + text-align: center; +} +.admin__menu .level-0:first-child > a { + position: relative; +} +.admin__menu .level-0:first-child > a:after { + position: absolute; + top: 0; + left: 0; + background-color: #736963; + content: ''; + display: block; + height: 1px; + width: 68%; + margin-left: 16%; +} +.admin__menu .level-0:first-child > a.active:after { + display: none; +} +.admin__menu .level-0 > a { + color: #aaa6a0; + display: block; + font-size: 1rem; + min-height: 6.2rem; + padding-top: 1.2rem; + padding-right: .5rem; + padding-left: .5rem; + text-decoration: none; + text-transform: uppercase; + transition: background-color 0.1s linear; +} +.admin__menu .level-0 > a.active { + background-color: #524d49; + color: #f7f3eb; +} +.admin__menu .level-0 > a.hover, +.admin__menu .level-0 > a:hover { + color: #f7f3eb; + background-color: #524d49; +} +.admin__menu .level-0 > a:before { + content: '\e606'; + display: block; + font-family: 'Icons'; + font-size: 2.2rem; + margin-bottom: .3rem; + height: 2.2rem; +} +.admin__menu .item-dashboard > a:before { + padding-top: 0.4rem; + font-size: 1.8rem; + content: '\e604'; +} +.admin__menu .item-sales > a:before { + content: '\e60b'; +} +.admin__menu .item-catalog > a:before { + content: '\e608'; +} +.admin__menu .item-customer > a:before { + position: relative; + top: -0.4rem; + font-size: 2.6rem; + content: '\e603'; +} +.admin__menu .item-marketing > a:before { + padding-top: 0.2rem; + font-size: 2rem; + content: '\e609'; +} +.admin__menu .item-content > a:before { + position: relative; + top: -0.2rem; + font-size: 2.4rem; + content: '\e602'; +} +.admin__menu .item-report > a:before { + content: '\e60a'; +} +.admin__menu .item-stores > a:before { + padding-top: 0.3rem; + font-size: 1.9rem; + content: '\e60d'; +} +.admin__menu .item-system > a:before { + content: '\e610'; +} +.dashboard-data { + background: #ffffff; + font-size: 1.3rem; + width: 100%; +} +.dashboard-data th, +.dashboard-data td { + padding: 1rem 0 1rem 1rem; +} +.dashboard-data th:first-child, +.dashboard-data td:first-child { + padding-left: 0; +} +.dashboard-data th { + border-top: 0; +} +.dashboard-main .dashboard-data th, +.dashboard-main .dashboard-data td { + text-align: right; + white-space: nowrap; + width: 15%; +} +.dashboard-main .dashboard-data .col-name { + text-align: left; + white-space: normal; + width: 55%; +} +.dashboard-main .dashboard-data .col-product { + width: 70%; +} +.dashboard-main .dashboard-data .col-orders_count { + text-align: left; +} +.dashboard-secondary .dashboard-data .col-popularity, +.dashboard-secondary .dashboard-data .col-total { + text-align: right; + width: 21.27659574%; +} +.dashboard-secondary .dashboard-data .col-customer, +.dashboard-secondary .dashboard-data .col-search_query { + width: 57.44680851%; +} +.dashboard-container .empty-text { + background: #ffffff; + font-size: 1.3rem; +} +.dashboard-diagram-disabled { + padding: .5rem 2rem 2rem; +} +.dashboard-diagram-switcher { + margin-bottom: 2rem; } -.menu-wrapper .logo:hover .logo-img { - -webkit-filter: brightness(1.1); - filter: brightness(1.1); +.dashboard-diagram-switcher .form-select-label { + display: inline-block; } -.menu-wrapper .logo:active .logo-img { - transform: scale(0.95); +.dashboard-diagram-image { + max-width: 100%; } -.menu-wrapper .logo .logo-img { - transition: -webkit-filter 0.2s linear, filter 0.2s linear, transform 0.1s linear; +.dashboard-totals { + margin: 1rem 2rem 6rem; } -.admin__menu { - position: relative; +.dashboard-totals-list { + display: table; + width: 100%; } -.admin__menu ul > li { +.dashboard-totals-item { + display: table-cell; + padding: 0 1rem 0 0; + width: 25%; +} +.dashboard-totals-item:first-child .price { + color: #eb5202; +} +.dashboard-totals-label { display: block; - text-align: center; + font-size: 1.3rem; + font-weight: 700; } -.admin__menu .level-0:first-child > a { +.dashboard-totals-value { + font-size: 2.4rem; + font-weight: 600; +} +.dashboard-store-stats .ui-tabs { position: relative; } -.admin__menu .level-0:first-child > a:after { +.dashboard-store-stats .ui-tabs:before { + background-color: rgba(255, 255, 255, 0); + background-repeat: repeat-x; + background-image: -webkit-linear-gradient(left, color-stop(rgba(255, 255, 255, 0) 0%), color-stop(#ffffff 100%)); + background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 0)', endColorstr='#ffffff', GradientType=1); + content: ''; + height: 4.8rem; position: absolute; + right: 0; top: 0; - left: 0; - background-color: #736963; - content: ''; - display: block; - height: 1px; - width: 68%; - margin-left: 16%; + width: 2rem; } -.admin__menu .level-0:first-child > a.active:after { +.dashboard-store-stats .ui-tabs-panel { + background: url(../images/ajax-loader-small.gif) no-repeat 50% 50%; + min-height: 6rem; +} +.dashboard-store-stats .tabs-horiz { + border-right: 1px solid #ffffff; + float: left; + overflow-x: auto; + white-space: nowrap; + width: 100%; +} +.dashboard-store-stats .tabs-horiz .ui-state-default { + display: inline-block; + float: none; + margin-right: .1rem; +} +.dashboard-container .dashboard-secondary { + padding-right: 3.5rem; +} +.dashboard-item { + margin-bottom: 3rem; +} +.dashboard-item-title { + font-size: 1.8rem; + font-weight: 700; +} +.dashboard-item-primary:first-child .dashboard-sales-value { + color: #eb5202; +} +.dashboard-sales-value { + font-size: 2.4rem; + font-weight: 600; +} +.col-2-left-layout { + margin-top: 50px; + margin-left: -30px; + width: auto; +} +.col-2-left-layout:before, +.col-2-left-layout:after { + content: ""; + display: table; +} +.col-2-left-layout:after { + clear: both; +} +.col-2-left-layout .main-col { + float: left; + width: ~" calc( (100%) * 0.75 - 30px )"; + margin-left: 30px; + float: right; +} +.col-2-left-layout .side-col { + float: left; + width: ~" calc( (100%) * 0.25 - 30px )"; + margin-left: 30px; +} +.admin__fieldset-wrapper-title { + padding: 14px 0 16px; + margin-bottom: 30px; +} +.admin__block { + width: 100%; + border: 1px solid black; +} +.admin__fieldset { + margin: 0; + padding: 0; + border: 0; + min-width: 0; +} +.admin__fieldset > .admin__field { + border: 0; + padding: 0; + margin: 0; + margin-left: -30px; +} +.admin__fieldset > .admin__field:before, +.admin__fieldset > .admin__field:after { + content: ""; + display: table; +} +.admin__fieldset > .admin__field:after { + clear: both; +} +.admin__fieldset > .admin__field > .admin__field-control { + float: left; + width: ~" calc( (100%) * 0.4444444444444444 - 30px )"; + margin-left: 30px; +} +.admin__fieldset > .admin__field > .admin__field-label { + float: left; + width: ~" calc( (100%) * 0.3333333333333333 - 30px )"; + margin-left: 30px; +} +.admin__field-label { + margin: 0; + color: #303030; + text-align: right; +} +.admin__field-label + br { display: none; } -.admin__menu .level-0 > a { - color: #aaa6a0; +[class]:not(.admin__field-option) > .admin__field-label { + font-family: 'Open Sans', arial, sans-serif; + font-size: 14px; + font-weight: 600; + padding-top: 0; + line-height: 33px; + white-space: nowrap; +} +[class]:not(.admin__field-option) > .admin__field-label:before { + content: "."; + visibility: hidden; + width: 0; + margin-left: -7px; + overflow: hidden; +} +[class]:not(.admin__field-option) > .admin__field-label span { + white-space: normal; + display: inline-block; + vertical-align: middle; + line-height: 1.2; +} +._required > .admin__field-label span:after { + content: "*"; + color: #eb5202; + display: inline; + font-weight: 500; + font-size: 16px; + margin-top: 2px; + position: absolute; + z-index: 1; + margin-left: 10px; +} +._disabled > .admin__field-label { + color: #999999; +} +.admin__field { + margin-bottom: 0; +} +.admin__field + .admin__field { + margin-top: 15px; +} +.admin__field:not(.admin__field-option) ~ .admin__field-option { + margin-left: 20px; + margin-top: 5px; +} +.admin__field.admin__field-option ~ .admin__field-option { + margin-top: 9px; +} +.admin__field ~ .admin__field-option:last-child { + margin-bottom: 8px; +} +.admin__fieldset > .admin__field { + margin-bottom: 30px; + position: relative; + z-index: 1; +} +.admin__fieldset > .admin__field:hover { + z-index: 2; +} +.admin__field[data-config-scope]:before { + float: left; + width: ~" calc( (100%) * 0.16666666666666666 - 30px )"; + margin-left: 30px; + position: absolute; + right: 0; + display: inline-block; + content: attr(data-config-scope); + float: right; + color: #808080; +} +.admin__field-control .admin__field[data-config-scope]:nth-child(n+2):before { + content: ""; +} +.admin__field._error .admin__field-control [class*="admin__addon-"]:before, +.admin__field._error .admin__field-control > [class*="admin__control-"] { + border-color: #e22626; +} +.admin__field-error { + border: 1px solid #e22626; display: block; - font-size: 1rem; - min-height: 6.2rem; - padding-top: 1.2rem; - padding-right: .5rem; - padding-left: .5rem; - text-decoration: none; - text-transform: uppercase; - transition: background-color 0.1s linear; + margin: 2px 0 0; + padding: 6px 10px 10px; + background: #fff8d6; + color: #555555; + font-size: 12px; + font-weight: 500; + box-sizing: border-box; } -.admin__menu .level-0 > a.active { - background-color: #524d49; - color: #f7f3eb; +.admin__field-note { + color: #303030; + padding: 0; + margin: 10px 0 0; } -.admin__menu .level-0 > a.hover, -.admin__menu .level-0 > a:hover { - color: #f7f3eb; - background-color: #524d49; +.admin__control-fields .admin__field-label ~ .admin__field-control { + width: 100%; +} +.admin__field-option { + padding-top: 8px; +} +.admin__field-option .admin__field-label { + text-align: left; +} +.admin__field-control > .admin__field-option:nth-child(1):nth-last-child(2), +.admin__field-control > .admin__field-option:nth-child(2):nth-last-child(1) { + display: inline-block; +} +.admin__field-control > .admin__field-option:nth-child(1):nth-last-child(2) + .admin__field-option, +.admin__field-control > .admin__field-option:nth-child(2):nth-last-child(1) + .admin__field-option { + display: inline-block; + margin-left: 41px; + margin-top: 0; +} +.admin__field-control > .admin__field-option:nth-child(1):nth-last-child(2) + .admin__field-option:before, +.admin__field-control > .admin__field-option:nth-child(2):nth-last-child(1) + .admin__field-option:before { + content: ""; + position: absolute; + display: inline-block; + height: 20px; + top: 8px; + left: -20px; + width: 1px; + background: #cccccc; +} +.admin__control-fields .admin__field:nth-child(n+2):not(.admin__field-option) > .admin__field-label { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +[class*="admin__control-grouped"] { + display: table; + width: 100%; + table-layout: fixed; + box-sizing: border-box; +} +[class*="admin__control-grouped"] > .admin__field { + display: table-cell; + width: 50%; + vertical-align: top; } -.admin__menu .level-0 > a:before { - content: '\e606'; - display: block; - font-family: 'Icons'; - font-size: 2.2rem; - margin-bottom: .3rem; - height: 2.2rem; +[class*="admin__control-grouped"] > .admin__field > .admin__field-control { + width: 100%; + float: none; } -.admin__menu .item-dashboard > a:before { - padding-top: 0.4rem; - font-size: 1.8rem; - content: '\e604'; +[class*="admin__control-grouped"] > .admin__field:nth-child(n+2) { + padding-left: 20px; } -.admin__menu .item-sales > a:before { - content: '\e60b'; +[class*="admin__control-grouped"] > .admin__field:nth-child(n+2):not(.admin__field-option) .admin__field-label { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } -.admin__menu .item-catalog > a:before { - content: '\e608'; +[class*="admin__control-grouped"] > .admin__field:first-child, +.admin__control-fields > .admin__field:first-child { + position: static; } -.admin__menu .item-customer > a:before { - position: relative; - top: -0.4rem; - font-size: 2.6rem; - content: '\e603'; +[class*="admin__control-grouped"] > .admin__field:first-child > .admin__field-label, +.admin__control-fields > .admin__field:first-child > .admin__field-label { + position: absolute; + left: 0; + top: 0; + float: left; + width: ~" calc( (100%) * 0.25 - 30px )"; + margin-left: 30px; + opacity: 0; + cursor: pointer; } -.admin__menu .item-marketing > a:before { - padding-top: 0.2rem; - font-size: 2rem; - content: '\e609'; +.address-item-edit-content { + padding: 15px 30px; } -.admin__menu .item-content > a:before { - position: relative; - top: -0.2rem; - font-size: 2.4rem; - content: '\e602'; +.address-item-edit-content .admin__field > .admin__field-control, +.address-item-edit-content .admin__field > .admin__field-label { + text-align: left; + float: none; } -.admin__menu .item-report > a:before { - content: '\e60a'; +.address-item-edit-content .admin__field > .admin__field-control { + width: ~" calc( 100% - 30px )"; } -.admin__menu .item-stores > a:before { - padding-top: 0.3rem; - font-size: 1.9rem; - content: '\e60d'; +.address-item-edit-content .admin__field-label { + margin-top: -16px; } -.admin__menu .item-system > a:before { - content: '\e610'; +.address-item-edit-content ._required .admin__field-label span { + padding-left: 15px; } -.dashboard-data { - background: #ffffff; - font-size: 1.3rem; - width: 100%; +.address-item-edit-content ._required .admin__field-label span:after { + left: 0; + margin-left: 30px; } -.dashboard-data th, -.dashboard-data td { - padding: 1rem 0 1rem 1rem; +.address-list { + list-style-type: none; + margin: 0; + padding: 0; + width: 360px; + float: left; } -.dashboard-data th:first-child, -.dashboard-data td:first-child { - padding-left: 0; +.address-list .address-list-item { + margin-bottom: 30px; } -.dashboard-data th { - border-top: 0; +.address-list .action-delete { + background-color: transparent; + padding: 0; } -.dashboard-main .dashboard-data th, -.dashboard-main .dashboard-data td { - text-align: right; - white-space: nowrap; - width: 15%; +.address-list .action-delete:hover { + box-shadow: 0; + border: 0; } -.dashboard-main .dashboard-data .col-name { - text-align: left; - white-space: normal; - width: 55%; +.address-item-edit { + margin-left: 359px; } -.dashboard-main .dashboard-data .col-product { - width: 70%; +.address-item-edit .admin__legend { + display: none; } -.dashboard-main .dashboard-data .col-orders_count { - text-align: left; +.admin__section-nav { + padding-bottom: 51px; } -.dashboard-secondary .dashboard-data .col-popularity, -.dashboard-secondary .dashboard-data .col-total { - text-align: right; - width: 21.27659574%; +.admin__section-nav-title { + padding: 0; + margin: 0 0 -1px; + color: #333333; + display: block; + padding: 20px 13px; + background: #f1f1f1; + text-transform: uppercase; + border: 1px solid #e3e3e3; + line-height: 1.2; } -.dashboard-secondary .dashboard-data .col-customer, -.dashboard-secondary .dashboard-data .col-search_query { - width: 57.44680851%; +.admin__section-nav-title._collapsible { + padding-right: 35px; } -.dashboard-container .empty-text { - background: #ffffff; - font-size: 1.3rem; +.admin__section-nav-title._collapsible:after { + content: '\e628'; + font-family: 'Icons'; + -webkit-font-smoothing: antialiased; + font-weight: normal; + speak: none; + position: absolute; + right: 18px; + top: 22px; + font-size: 13px; } -.dashboard-diagram-disabled { - padding: .5rem 2rem 2rem; +.admin__section-nav-title strong { + font-weight: 700; } -.dashboard-diagram-switcher { - margin-bottom: 2rem; +.admin__section-nav-items { + list-style-type: none; + padding: 0; + margin: 0; } -.dashboard-diagram-switcher .form-select-label { - display: inline-block; +.admin__section-nav-item { + padding: 0; + border-left: 3px solid transparent; + margin: 0 0 -1px; } -.dashboard-diagram-image { - max-width: 100%; +.admin__section-nav-item._active { + border-color: #eb5202; } -.dashboard-totals { - margin: 1rem 2rem 6rem; +.admin__section-nav-item._active .admin__section-nav-link { + border-color: #e3e3e3; + margin: 0; } -.dashboard-totals-list { - display: table; - width: 100%; +.admin__section-nav-item._active .admin__section-nav-link:hover { + text-decoration: none; } -.dashboard-totals-item { - display: table-cell; - padding: 0 1rem 0 0; - width: 25%; +.admin__section-nav-item._loading { + position: relative; + z-index: 1; } -.dashboard-totals-item:first-child .price { - color: #eb5202; +.admin__section-nav-item._loading:before { + content: ""; + display: block; + position: absolute; + z-index: 2; + background: url("../images/loader-2.gif") no-repeat 50% 50%; + background-size: 120px; + width: 20px; + height: 20px; + top: 21px; + right: 5px; } -.dashboard-totals-label { +.admin__section-nav-link { + border: 1px solid transparent; + border-width: 1px 0; + line-height: 1.2; + font-weight: 500; + color: #333333; display: block; - font-size: 1.3rem; - font-weight: 700; + padding: 20px 30px 20px 10px; } -.dashboard-totals-value { - font-size: 2.4rem; - font-weight: 600; +.admin__section-nav-link:hover { + color: #333333; + text-decoration: underline; } -.dashboard-store-stats .ui-tabs { +.admin__section-nav-link._changed { position: relative; + z-index: 1; } -.dashboard-store-stats .ui-tabs:before { - background-color: rgba(255, 255, 255, 0); - background-repeat: repeat-x; - background-image: -webkit-linear-gradient(left, color-stop(rgba(255, 255, 255, 0) 0%), color-stop(#ffffff 100%)); - background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 0)', endColorstr='#ffffff', GradientType=1); - content: ''; - height: 4.8rem; +.admin__section-nav-link._changed:before { + content: '\e623'; + font-family: 'Icons'; + -webkit-font-smoothing: antialiased; + font-style: normal; + font-weight: normal; + speak: none; position: absolute; - right: 0; - top: 0; - width: 2rem; + z-index: 2; + font-size: 17px; + color: #eb5202; + width: 20px; + height: 20px; + top: 15px; + right: 5px; } -.dashboard-store-stats .ui-tabs-panel { - background: url(../images/ajax-loader-small.gif) no-repeat 50% 50%; - min-height: 6rem; +.admin__field-tooltip { + display: inline-block; + vertical-align: top; + margin-top: 5px; + position: relative; + z-index: 1; + width: 0; + overflow: visible; } -.dashboard-store-stats .tabs-horiz { - border-right: 1px solid #ffffff; - float: left; - overflow-x: auto; - white-space: nowrap; - width: 100%; +.admin__field-option .admin__field-tooltip { + margin-top: 10px; } -.dashboard-store-stats .tabs-horiz .ui-state-default { +.admin__field-tooltip:hover { + z-index: 99; +} +.admin__field-tooltip-action { + position: relative; + z-index: 2; + margin-left: 18px; + width: 22px; + height: 22px; display: inline-block; - float: none; - margin-right: .1rem; + cursor: pointer; } -.dashboard-container .dashboard-secondary { - padding-right: 3.5rem; +.admin__field-tooltip-action:before { + content: "?"; + font-weight: 500; + font-size: 18px; + display: inline-block; + overflow: hidden; + height: 22px; + border-radius: 11px; + line-height: 22px; + width: 22px; + text-align: center; + color: #ffffff; + background-color: #514943; } -.dashboard-item { - margin-bottom: 3rem; +.admin__field-tooltip-action span { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } -.dashboard-item-title { - font-size: 1.8rem; - font-weight: 700; +.admin__control-text:focus + .admin__field-tooltip-content, +.admin__field-tooltip:hover .admin__field-tooltip-content { + display: block; } -.dashboard-item-primary:first-child .dashboard-sales-value { - color: #eb5202; +.admin__field-tooltip-content { + display: none; + position: absolute; + z-index: 1; + width: 320px; + background: #fff8d7; + padding: 15px 25px; + right: -66px; + border: 1px solid #adadad; + border-radius: 1px; + bottom: 42px; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3); } -.dashboard-sales-value { - font-size: 2.4rem; - font-weight: 600; +.admin__field-tooltip-content:after, +.admin__field-tooltip-content:before { + content: ""; + display: block; + border: 16px solid transparent; + height: 0; + width: 0; + border-top-color: #adadad; + position: absolute; + right: 20px; + top: 100%; + z-index: 3; +} +.admin__field-tooltip-content:after { + border-top-color: #fff8d7; + margin-top: -1px; + z-index: 4; } diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_form.less b/app/design/adminhtml/Magento/backend/web/css/source/_form.less new file mode 100644 index 00000000000..9ac94c9555b --- /dev/null +++ b/app/design/adminhtml/Magento/backend/web/css/source/_form.less @@ -0,0 +1,283 @@ +// /** +// * Copyright © 2015 Magento. All rights reserved. +// * See COPYING.txt for license details. +// */ + +// +// Variables +// _____________________________________________ + +@import '_form/_abstract'; + +@field-control__border-color: @color-gray68; +@field-control__color: @color-very-dark-gray-black; +@field-control__bg-color: @color-white; +@field-control-addon__color: @color-gray52; + + +@field-error__color: @color-very-dark-gray2; +@field-error__bg-color: @color-lazy-sun; +@field-error__border-color: @color-tomato-brick; + +// States +@field-control__focus__border-color: @color-pure-blue; +@field-control__disabled__bg-color: @color-lighter-gray; +@field-label__required__color: @color-phoenix; +@field-label__disabled__color: @color-gray60; + +// +// Basic controls +// _____________________________________________ + +// +// Common +// --------------------------------------------- +.__form-control-styles() { + background-color: @field-control__bg-color; + border-radius: 1px; + border: 1px solid @field-control__border-color; + color: @field-control__color; + font-size: 15px; + font-weight: 500; + height: 33px; + max-width: 100%; + padding: 0 10px; + } +.__form-control-styles__focus() { + border-color: @field-control__focus__border-color; + box-shadow: none; + outline: 0; + } +.__form-control-styles__disabled() { + background-color: @field-control__disabled__bg-color; + border-color: @field-control__border-color; + color: @field-control__color; + opacity: .5; + } + +.admin__control-text { + .extend__form-control-styles(); + + line-height: normal; + width: 100%; +} + +.admin__control-select { + .extend__form-control-styles(); + .css(appearance, none, 1); + + background-repeat: no-repeat; + + background-image+: url('../images/arrows-bg.svg'); + background-position+: ~'calc(100% - 12px)' -34px; + background-size+: auto; + + background-image+: linear-gradient(#e3e3e3, #e3e3e3); + background-position+: 100%; + background-size+: 33px 100%; + + background-image+: linear-gradient(@field-control__border-color,@field-control__border-color); + background-position+: ~'calc(100% - 33px)' 0; + background-size+: 1px 100%; + + padding-right: 34px+10px; + + &:focus { + background-image+: url('../images/arrows-bg.svg'); + background-position+: ~'calc(100% - 12px)' 13px; + + background-image+: linear-gradient(#e3e3e3, #e3e3e3); + background-position+: 100%; + + background-image+: linear-gradient(@field-control__focus__border-color, @field-control__focus__border-color); + background-position+: ~'calc(100% - 33px)' 0; + } + &::-ms-expand { + display: none; + } + .ie9 & { + padding-right: 0; + } +} + +option:empty { + display: none; +} + +.admin__control-file { + background: transparent; + border: 0; +} + +.admin__control-textarea, +.admin__control-multiselect { + .extend__form-control-styles(); + height: ~"calc(6 * 1.2em + 14px)"; + line-height: 1.2; + padding: 6px 10px; + width: 100%; +} + +.admin__control-textarea { + line-height: 1.18em; + padding-top: 8px; +} + +.admin__control-radio, +.admin__control-checkbox { + margin: 3px 0 0 0; + opacity: 0; + overflow: hidden; + position: absolute; + vertical-align: top; + + label { + cursor: pointer; + display: inline-block; + padding-left: 26px; + + &:before { + .url('images/choice_bkg.png', 'Magento_Ui'); + + background: url('@{url}') no-repeat -100% -100% #fff; + border-radius: 2px; + border: 1px solid @field-control__border-color; + content: ''; + float: left; + height: 14px; + line-height: 14px; + margin: 1px 10px 0 -26px; + text-align: center; + vertical-align: top; + width: 14px; + } + } + &:focus + label { + .keyfocus & { + &:extend(.keyfocus *:focus); + } + &:before { + border-color: @field-control__focus__border-color; + } + } + &[disabled] + label { + &:before { + background-color: @field-control__disabled__bg-color; + border-color: @field-control__border-color; + } + color: @field-control__color; + opacity: .5; + } +} +.admin__control-radio + label:before { + border-radius: 8px; +} +.admin__control-radio:checked + label:before { + background-position: -26px -1px; +} +.admin__control-checkbox:checked + label:before { + background-position: -1px -1px; +} + + +.admin__control-addon { + .vendor-prefix-display(inline-flex); + .vendor-prefix-flex-direction(row); + & > * { + .vendor-prefix-flex-basis(auto); + .vendor-prefix-flex-grow(0); + .vendor-prefix-flex-shrink(0); + } + display: inline-flex; + flex-flow: row nowrap; + position: relative; + width: 100%; + z-index: 1; + > * { + position: relative; + z-index: 1; + } + [class*="admin__control-"] { + background-color: transparent; + border-color: transparent; + order: 1; + vertical-align: top; + width: auto; + .css(appearence,none); + .vendor-prefix-flex-grow(1); + :focus { + box-shadow: 0; + } + & + [class*="admin__addon-"] { + padding-left: 10px; + position: static !important; + z-index: 0; + > * { + position: relative; + vertical-align: top; + z-index: 2; + } + } + & + [class*="admin__addon-"]:before { + &:extend(.__form-control-styles); + bottom: 0; + box-sizing: border-box; + content: ''; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 0; + } + &[disabled] + [class*="admin__addon-"]:before { + &:extend(.__form-control-styles[disabled]); + } + &:focus + label:before { + &:extend(.__form-control-styles:focus); + } + } +} +.admin__addon { + &-suffix, + &-prefix { + border: 0; + box-sizing: border-box; + color: @field-control-addon__color; + display: inline-block; + font-size: 15px; + font-weight: 300; + height: 33px; + line-height: 33px; + padding: 0 3px; + } + &-suffix { + order: 3; + &:last-child { + padding-right: 10px; + } + } + &-prefix { + order: 0; + } +} + +.admin__control-value { + display: inline-block; + padding: 6px 10px; +} + +.admin__control-text + .ui-datepicker-trigger { + img { + display: none; + } + .button-reset(); + .icon-font( + @icon-calendar, + @_icon-font-size: 38px, + @_icon-font-line-height: 33px, + @_icon-font-text-hide: true, + @_icon-font-position: after, + @_icon-font-color: @field-date-icon--color + ); + margin-left: -40px; + display: inline-block; +} diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_form/_abstract.less b/app/design/adminhtml/Magento/backend/web/css/source/_form/_abstract.less new file mode 100644 index 00000000000..b4935e72704 --- /dev/null +++ b/app/design/adminhtml/Magento/backend/web/css/source/_form/_abstract.less @@ -0,0 +1,26 @@ +// /** +// * Copyright © 2015 Magento. All rights reserved. +// * See COPYING.txt for license details. +// */ + +.extend__form-control-styles() { + &:extend(.__form-control-styles); + &:focus { + &:extend(.__form-control-styles:focus); + } + &[disabled] { + &:extend(.__form-control-styles[disabled]); + } +} + +.__form-control-styles { + .__form-control-styles(); + &:focus { + .__form-control-styles__focus(); + } + &[disabled] { + .__form-control-styles__disabled(); + } +} + + diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_sources.less b/app/design/adminhtml/Magento/backend/web/css/source/_sources.less index 2ac9bb9472d..0926721e084 100644 --- a/app/design/adminhtml/Magento/backend/web/css/source/_sources.less +++ b/app/design/adminhtml/Magento/backend/web/css/source/_sources.less @@ -14,8 +14,8 @@ @import '_typography'; @import '_icons'; @import '_lists'; +@import '_form'; @import '_buttons'; -@import '_forms'; @import '_tables'; @import '_alerts'; @import '_grid'; diff --git a/app/design/adminhtml/Magento/backend/web/css/styles-new.less b/app/design/adminhtml/Magento/backend/web/css/styles-new.less new file mode 100644 index 00000000000..05e0980edea --- /dev/null +++ b/app/design/adminhtml/Magento/backend/web/css/styles-new.less @@ -0,0 +1,8 @@ +/** + * Copyright © 2015 Magento. All rights reserved. + * See COPYING.txt for license details. + */ + +#html-body[class][data-container="body"] .admin__scope { + @import (less) 'override.css'; +} diff --git a/app/design/adminhtml/Magento/backend/web/images/arrows-bg.svg b/app/design/adminhtml/Magento/backend/web/images/arrows-bg.svg new file mode 100644 index 00000000000..322a96ecdab --- /dev/null +++ b/app/design/adminhtml/Magento/backend/web/images/arrows-bg.svg @@ -0,0 +1,5 @@ +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="8px" height="53px" viewBox="0 0 8 53" style="enable-background:new 0 0 8 53;" xml:space="preserve"> +<path style="fill:#524A43;" d="M4.028,52.994l-4.003-5.368h8.006L4.028,52.994z"/> +<path style="fill:#524A43;" d="M4.028,0l4.003,5.368H0.025L4.028,0z"/> +</svg> -- GitLab