From 6e44e51271b91c5428407a608b5d2bb9c354bdbd Mon Sep 17 00:00:00 2001 From: Evgeniy Kolesov <ikolesov@ebay.com> Date: Mon, 23 Feb 2015 13:31:01 +0200 Subject: [PATCH] MAGETWO-32303: New Form --- Gruntfile.js | 2 +- .../Backend/view/adminhtml/layout/default.xml | 1 - .../templates/page/js/calendar.phtml | 3 +- app/code/Magento/Backup/Exception.php | 1 + .../Ui/view/base/layout/ui_components.xml | 1 - .../Magento_Ui/web/css/source/_module.less | 2 - .../Magento_Ui/web/css/source/module.less | 10 +- .../web/css/{override.css => override.less} | 4212 +++++++++-------- .../backend/web/css/source/_calendar.less | 308 ++ .../Magento/backend/web/css/source/_form.less | 281 +- .../web/css/source/_form/_controls.less | 309 ++ .../css/source/_form/_field.less} | 50 +- .../web/css/source/_form/_tooltip.less | 0 .../backend/web/css/source/_sources.less | 1 + .../backend/web/css/source/_tables.less | 2 +- .../backend/web/css/styles-migration.less | 11 +- .../Magento/backend/web/css/styles-old.less | 29 - 17 files changed, 2921 insertions(+), 2302 deletions(-) rename app/design/adminhtml/Magento/backend/web/css/{override.css => override.less} (92%) create mode 100644 app/design/adminhtml/Magento/backend/web/css/source/_calendar.less create mode 100644 app/design/adminhtml/Magento/backend/web/css/source/_form/_controls.less rename app/design/adminhtml/Magento/backend/{Magento_Ui/web/css/source/_form.less => web/css/source/_form/_field.less} (98%) rename app/design/adminhtml/Magento/backend/{Magento_Ui => }/web/css/source/_form/_tooltip.less (100%) diff --git a/Gruntfile.js b/Gruntfile.js index 44963fb6e2d..849ccfb5b1f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -371,7 +371,7 @@ module.exports = function (grunt) { replace: { example: { src: ['<%= combo.autopath("backend","pub") %>/css/styles.css'], // source files array (supports minimatch) - dest: '<%= combo.autopath("backend","pub") %>/css/override.css', // destination directory or file + dest: '<%= combo.autopath("backend","pub") %>/css/override.less', // destination directory or file replacements: [{ from: /:(.*calc.*);/g, // regex replacement ('Fooo' to 'Mooo') to: ': ~"$1";' diff --git a/app/code/Magento/Backend/view/adminhtml/layout/default.xml b/app/code/Magento/Backend/view/adminhtml/layout/default.xml index e502f1b5a94..b14736576ee 100644 --- a/app/code/Magento/Backend/view/adminhtml/layout/default.xml +++ b/app/code/Magento/Backend/view/adminhtml/layout/default.xml @@ -11,7 +11,6 @@ <link src="legacy-build.min.js"/> <link src="requirejs/require.js"/> <link src="jquery.js"/> - <css src="mage/calendar.css"/> <css src="extjs/resources/css/ext-all.css"/> <css src="extjs/resources/css/ytheme-magento.css"/> </head> diff --git a/app/code/Magento/Backend/view/adminhtml/templates/page/js/calendar.phtml b/app/code/Magento/Backend/view/adminhtml/templates/page/js/calendar.phtml index 9b49914a525..b99dd72072d 100644 --- a/app/code/Magento/Backend/view/adminhtml/templates/page/js/calendar.phtml +++ b/app/code/Magento/Backend/view/adminhtml/templates/page/js/calendar.phtml @@ -43,7 +43,8 @@ require([ changeYear: true, buttonImageOnly: true, showButtonPanel: true, - showWeek: true, + showOtherMonths: true, + showWeek: false, timeFormat: '', showTime: false, showHour: false, diff --git a/app/code/Magento/Backup/Exception.php b/app/code/Magento/Backup/Exception.php index 2f783199aa4..10ae837bc90 100644 --- a/app/code/Magento/Backup/Exception.php +++ b/app/code/Magento/Backup/Exception.php @@ -8,3 +8,4 @@ namespace Magento\Backup; class Exception extends \Zend_Exception { } + diff --git a/app/code/Magento/Ui/view/base/layout/ui_components.xml b/app/code/Magento/Ui/view/base/layout/ui_components.xml index 0a2a85b793f..ac23d0fefa2 100644 --- a/app/code/Magento/Ui/view/base/layout/ui_components.xml +++ b/app/code/Magento/Ui/view/base/layout/ui_components.xml @@ -155,7 +155,6 @@ <item name="extends" xsi:type="string">input</item> <item name="config" xsi:type="array"> <item name="input_type" xsi:type="string">email</item> - <item name="addbefore" xsi:type="string">@email:</item> </item> </argument> </arguments> 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 2b1847b0148..749da92e393 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,6 +3,4 @@ // * See COPYING.txt for license details. // */ -@import "_form"; @import "_tabnav"; -@import '_form/_tooltip'; 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 0e4f0735167..8728ccc59ea 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 @@ -35,13 +35,11 @@ box-shadow: none; outline: none; } + .customer-index-edit { -.col-2-left-layout, .col-1-layout { - background: #fff; -} -} -.customer-index-edit { - background: #fff; + .page-wrapper { + background: #fff; + } .col-2-left-layout { background: #fff; } diff --git a/app/design/adminhtml/Magento/backend/web/css/override.css b/app/design/adminhtml/Magento/backend/web/css/override.less similarity index 92% rename from app/design/adminhtml/Magento/backend/web/css/override.css rename to app/design/adminhtml/Magento/backend/web/css/override.less index 38324a580a2..a99391c8a91 100644 --- a/app/design/adminhtml/Magento/backend/web/css/override.css +++ b/app/design/adminhtml/Magento/backend/web/css/override.less @@ -525,7 +525,6 @@ nav ol { margin-bottom: 1em; margin-left: 20rem; } -.__form-control-styles, .admin__control-text, .admin__control-select, .admin__control-textarea, @@ -541,7 +540,6 @@ nav ol { max-width: 100%; padding: 0 10px; } -.__form-control-styles:focus, .admin__control-text:focus, .admin__control-select:focus, .admin__control-textarea:focus, @@ -551,7 +549,6 @@ nav ol { box-shadow: none; outline: 0; } -.__form-control-styles[disabled], .admin__control-text[disabled], .admin__control-select[disabled], .admin__control-textarea[disabled], @@ -587,6 +584,9 @@ nav ol { .ie9 .admin__control-select { padding-right: 0; } +.ie9 .admin__control-select { + padding-right: 0; +} option:empty { display: none; } @@ -626,12 +626,12 @@ option:empty { border: 1px solid #adadad; content: ''; float: left; - height: 14px; - line-height: 14px; + height: 16px; + line-height: 16px; margin: 1px 10px 0 -26px; text-align: center; vertical-align: top; - width: 14px; + width: 16px; } .admin__control-radio:focus + label:before, .admin__control-checkbox:focus + label:before { @@ -668,27 +668,26 @@ option:empty { width: 100%; z-index: 1; } -.admin__control-addon > * { +.admin__control-addon > [class*="admin__addon-"], +.admin__control-addon > [class*="admin__control-"] { -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-"] { + appearence: none; + -webkit-flex-grow: 1; + flex-grow: 1; 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; @@ -734,10 +733,29 @@ option:empty { .admin__addon-prefix { order: 0; } +.ie9 .admin__control-addon:after { + content: ''; + display: block; + height: 0; + overflow: hidden; + clear: both; +} +.ie9 .admin__addon [class*="admin__control-"] { + display: table-cell; +} +.ie9 .admin__addon-prefix { + float: left; +} +.ie9 .admin__addon-suffix { + display: table-cell; +} .admin__control-value { display: inline-block; padding: 6px 10px; } +.admin__control-text.hasDatepicker { + width: 200px; +} .admin__control-text + .ui-datepicker-trigger { background-image: none; background: none; @@ -750,6 +768,7 @@ option:empty { line-height: inherit; font-weight: 400; text-decoration: none; + vertical-align: top; margin-left: -40px; display: inline-block; } @@ -796,189 +815,200 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger { vertical-align: middle; text-align: center; } -.action, -button { - background: #e3e3e3; - border: 1px solid transparent; - color: #514943; - display: inline-block; - font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 1.4rem; - font-weight: 400; - padding: 0.55em 1em; - text-align: center; - vertical-align: middle; +.col-2-left-layout { + margin-top: 50px; + margin-left: -30px; + width: auto; } -.action:hover, -button:hover { - background-color: #dbdbdb; - box-shadow: 0 0 0 1px #008bdb; - color: #514943; - text-decoration: none; +.col-2-left-layout:before, +.col-2-left-layout:after { + content: ""; + display: table; } -.action:active, -button:active { - background-color: #d6d6d6; +.col-2-left-layout:after { + clear: both; } -.action[disabled], -.action.disabled, -button[disabled], -button.disabled { - cursor: default; - opacity: 0.7; - pointer-events: none; +.col-2-left-layout .main-col { + float: left; + width: ~" calc( (100%) * 0.75 - 30px )"; + margin-left: 30px; + float: right; } -.action-large { - font-size: 1.6rem; - padding: 0.7em 1.45em; +.col-2-left-layout .side-col { + float: left; + width: ~" calc( (100%) * 0.25 - 30px )"; + margin-left: 30px; } -.action-link { - background-color: transparent; - border: none; - color: #007bdb; - font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 1.4rem; +.admin__fieldset-wrapper-title { + padding: 14px 0 16px; + margin-bottom: 30px; } -.action-link:hover, -.action-link:active { - background-color: transparent; - border-color: transparent; - color: #007bdb; - text-decoration: underline; +.admin__block { + width: 100%; + border: 1px solid black; } -.action-primary, -button.primary { - background-color: #eb5202; - color: #ffffff; - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); +.admin__fieldset { + margin: 0; + padding: 0; + border: 0; + min-width: 0; } -.action-primary:hover, -.action-primary:active, -button.primary:hover, -button.primary:active { - background-color: #b84002; - border-color: #b84002; - color: #ffffff; +.admin__fieldset > .admin__field { + border: 0; + padding: 0; + margin: 0; + margin-left: -30px; } -.action-primary.disabled, -.action-primary[disabled], -button.primary.disabled, -button.primary[disabled] { - cursor: default; - opacity: 0.7; - pointer-events: none; +.admin__fieldset > .admin__field:before, +.admin__fieldset > .admin__field:after { + content: ""; + display: table; } -.action-secondary, -button.secondary { - background-color: #514943; - border-color: #514943; - color: #ffffff; - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); +.admin__fieldset > .admin__field:after { + clear: both; } -.action-secondary:hover, -.action-secondary:active, -button.secondary:hover, -button.secondary:active { - background-color: #35302c; - color: #ffffff; +.admin__fieldset > .admin__field > .admin__field-control { + float: left; + width: ~" calc( (100%) * 0.4444444444444444 - 30px )"; + margin-left: 30px; } -.action-secondary:active, -button.secondary:active { - background-color: #35302c; +.admin__fieldset > .admin__field > .admin__field-label { + float: left; + width: ~" calc( (100%) * 0.3333333333333333 - 30px )"; + margin-left: 30px; } -.action-reset { - background-color: transparent; - border-color: transparent; - color: #333333; +.admin__field-label { + margin: 0; + color: #303030; + text-align: right; } -.action-reset:hover, -.action-reset:active { - background-color: transparent; +.admin__field-label + br { + display: none; } -.action-tertiary, -button.tertiary { - background: #e3e3e3; - border-color: #adadad; - color: #333333; +[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; } -.action-tertiary:hover, -.action-tertiary:active, -button.tertiary:hover, -button.tertiary:active { - background-color: #cacaca; - border-color: #8f8f8f; +[class]:not(.admin__field-option) > .admin__field-label:before { + content: "."; + visibility: hidden; + width: 0; + margin-left: -7px; + overflow: hidden; } -.actions-split { +[class]:not(.admin__field-option) > .admin__field-label span { + white-space: normal; display: inline-block; - position: relative; vertical-align: middle; + line-height: 1.2; } -.actions-split:before, -.actions-split:after { - content: ""; - display: table; +._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; } -.actions-split:after { - clear: both; +._disabled > .admin__field-label { + color: #999999; } -.actions-split .action-default { - float: left; - margin: 0; +.admin__field { + margin-bottom: 0; } -.actions-split .action-toggle { - float: right; - margin: 0; +.admin__field + .admin__field { + margin-top: 15px; } -.actions-split button.action-default { - border-top-right-radius: 0; - border-bottom-right-radius: 0; +.admin__field:not(.admin__field-option) ~ .admin__field-option { + margin-top: 5px; } -.actions-split button + .action-toggle { - border-left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; +.admin__field.admin__field-option ~ .admin__field-option { + margin-top: 9px; } -.actions-split .action-toggle { - padding: 4px 0.5rem; - display: inline-block; - text-decoration: none; +.admin__field ~ .admin__field-option:last-child { + margin-bottom: 8px; } -.actions-split .action-toggle > span { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; +.admin__fieldset > .admin__field { + margin-bottom: 30px; + position: relative; + z-index: 1; } -.actions-split .action-toggle:after { - font-family: 'icons-blank-theme'; - content: '\e607'; - font-size: 40px; - line-height: 14px; - color: inherit; - overflow: hidden; - speak: none; - font-weight: normal; - -webkit-font-smoothing: antialiased; +.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; - vertical-align: middle; - text-align: center; - margin: 0; + content: attr(data-config-scope); + float: right; + color: #808080; } -.actions-split .action-toggle:hover:after { - color: inherit; +.admin__field-control .admin__field[data-config-scope]:nth-child(n+2):before { + content: ""; } -.actions-split .action-toggle:active:after { - color: inherit; +.admin__field._error .admin__field-control [class*="admin__addon-"]:before, +.admin__field._error .admin__field-control > [class*="admin__control-"] { + border-color: #e22626; } -.actions-split .action-toggle.active { +.admin__field-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; + padding: 6px 10px 10px; +} +.admin__field-note { + color: #303030; + font-size: 12px; + margin: 10px 0 0; + padding: 0; +} +.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; - text-decoration: none; } -.actions-split .action-toggle.active > span { +.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 { + background: #cccccc; + content: ""; + display: inline-block; + height: 20px; + left: -20px; + position: absolute; + top: 8px; + width: 1px; +} +.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; @@ -988,1631 +1018,1713 @@ button.tertiary:active { position: absolute; width: 1px; } -.actions-split .action-toggle.active:after { - font-family: 'icons-blank-theme'; - content: '\e618'; - font-size: 40px; - line-height: 14px; - color: inherit; - overflow: hidden; - speak: none; - font-weight: normal; - -webkit-font-smoothing: antialiased; - display: inline-block; - vertical-align: middle; - text-align: center; - margin: 0; +[class*="admin__control-grouped"] { + box-sizing: border-box; + display: table; + table-layout: fixed; + width: 100%; } -.actions-split .action-toggle.active:hover:after { - color: inherit; +[class*="admin__control-grouped"] > .admin__field { + display: table-cell; + vertical-align: top; + width: 50%; } -.actions-split .action-toggle.active:active:after { - color: inherit; +[class*="admin__control-grouped"] > .admin__field > .admin__field-control { + float: none; + width: 100%; } -.actions-split .dropdown-menu { - margin: 0; +[class*="admin__control-grouped"] > .admin__field:nth-child(n+2) { + padding-left: 20px; +} +[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; - list-style: none none; - box-sizing: border-box; - background: #ffffff; - border: 1px solid #bbbbbb; position: absolute; - z-index: 100; - top: 100%; - min-width: 175px; - margin-top: 4px; - display: none; - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15); + width: 1px; } -.actions-split .dropdown-menu li { - margin: 0; - padding: 3px 0.5rem; +[class*="admin__control-grouped"] > .admin__field:first-child, +.admin__control-fields > .admin__field:first-child { + position: static; } -.actions-split .dropdown-menu li:hover { - background: #e8e8e8; +[class*="admin__control-grouped"] > .admin__field:first-child > .admin__field-label, +.admin__control-fields > .admin__field:first-child > .admin__field-label { + float: left; + width: ~" calc( (100%) * 0.25 - 30px )"; + margin-left: 30px; cursor: pointer; -} -.actions-split .dropdown-menu:before, -.actions-split .dropdown-menu:after { - content: ""; + left: 0; + opacity: 0; position: absolute; - display: block; - width: 0; - height: 0; - border-bottom-style: solid; -} -.actions-split .dropdown-menu:before { - z-index: 99; - border: solid 6px; - border-color: transparent transparent #ffffff transparent; -} -.actions-split .dropdown-menu:after { - z-index: 98; - border: solid 7px; - border-color: transparent transparent #bbbbbb transparent; -} -.actions-split .dropdown-menu:before { - top: -12px; - right: 10px; -} -.actions-split .dropdown-menu:after { - top: -14px; - right: 9px; + top: 0; } -.actions-split.active { - overflow: visible; +.address-item-edit-content { + padding: 15px 30px; } -.actions-split.active .dropdown-menu { - display: block; +.address-item-edit-content .admin__field > .admin__field-control, +.address-item-edit-content .admin__field > .admin__field-label { + float: none; + width: auto; + text-align: left; } -.actions-split:hover:not(.disabled) { - box-shadow: 0 0 0 1px #008bdb; +.address-item-edit-content .admin__field > .admin__field-control { + float: none; + width: auto; } -.actions-split button { - margin-left: 0; +.address-item-edit-content .admin__field-label { + float: none; + margin-top: -16px; + width: auto; } -.actions-split button.action-toggle { - border-left: 1px solid #c34706; - padding: 0.55em 0; +.address-item-edit-content ._required .admin__field-label span { + padding-left: 15px; } -.actions-split button.action-large.action-toggle { - padding: 0.7em 0; +.address-item-edit-content ._required .admin__field-label span:after { + left: 0; + margin-left: 30px; } -.actions-split button:hover { - box-shadow: none; +.address-list { + float: left; + list-style-type: none; + margin: 0; + padding: 0; + width: 360px; } -table { - color: #303030; +.address-list .address-list-item { + margin-bottom: 30px; } -table > caption { - margin-bottom: .5rem; +.address-list .action-delete { + background-color: transparent; + padding: 0; } -table tfoot { - background: #f8f8f8; +.address-list .action-delete:hover { + border: 0; + box-shadow: 0; } -table tfoot th, -table tfoot td { - text-align: left; +.address-item-edit { + margin-left: 359px; } -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; +.address-item-edit .admin__legend { + display: none; } -table td { - border-bottom: 0.1rem solid #e3e3e3; - padding: 1rem 1.5rem; +.admin__field-tooltip { + display: inline-block; vertical-align: top; + margin-top: 5px; + position: relative; + z-index: 1; + width: 0; + overflow: visible; } -table tbody td:first-child input[type='checkbox'] { - margin: 0; -} -table tbody tr:last-child td { - border-bottom-color: transparent; +.admin__field-option .admin__field-tooltip { + margin-top: 10px; } -.row { - margin-left: 0; - margin-right: 0; +.admin__field-tooltip:hover { + z-index: 99; } -.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 { +.admin__field-tooltip-action { 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; + z-index: 2; + margin-left: 18px; + width: 22px; + height: 22px; + display: inline-block; + cursor: pointer; } -.col-xs-12 { - width: 100%; +.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; } -.col-xs-11 { - width: 91.66666667%; +.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; } -.col-xs-10 { - width: 83.33333333%; +.admin__control-text:focus + .admin__field-tooltip-content, +.admin__field-tooltip:hover .admin__field-tooltip-content { + display: block; } -.col-xs-9 { - width: 75%; +.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); } -.col-xs-8 { - width: 66.66666667%; +.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; } -.col-xs-7 { - width: 58.33333333%; +.admin__field-tooltip-content:after { + border-top-color: #fff8d7; + margin-top: -1px; + z-index: 4; } -.col-xs-6 { - width: 50%; +.action, +button { + background: #e3e3e3; + border: 1px solid transparent; + color: #514943; + display: inline-block; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 1.4rem; + font-weight: 400; + padding: 0.55em 1em; + text-align: center; + vertical-align: middle; } -.col-xs-5 { - width: 41.66666667%; +.action:hover, +button:hover { + background-color: #dbdbdb; + box-shadow: 0 0 0 1px #008bdb; + color: #514943; + text-decoration: none; } -.col-xs-4 { - width: 33.33333333%; +.action:active, +button:active { + background-color: #d6d6d6; } -.col-xs-3 { - width: 25%; +.action[disabled], +.action.disabled, +button[disabled], +button.disabled { + cursor: default; + opacity: 0.7; + pointer-events: none; } -.col-xs-2 { - width: 16.66666667%; +.action-large { + font-size: 1.6rem; + padding: 0.7em 1.45em; } -.col-xs-1 { - width: 8.33333333%; +.action-link { + background-color: transparent; + border: none; + color: #007bdb; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 1.4rem; } -.col-xs-pull-12 { - right: 100%; +.action-link:hover, +.action-link:active { + background-color: transparent; + border-color: transparent; + color: #007bdb; + text-decoration: underline; } -.col-xs-pull-11 { - right: 91.66666667%; +.action-primary, +button.primary { + background-color: #eb5202; + color: #ffffff; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } -.col-xs-pull-10 { - right: 83.33333333%; +.action-primary:hover, +.action-primary:active, +button.primary:hover, +button.primary:active { + background-color: #b84002; + border-color: #b84002; + color: #ffffff; } -.col-xs-pull-9 { - right: 75%; +.action-primary.disabled, +.action-primary[disabled], +button.primary.disabled, +button.primary[disabled] { + cursor: default; + opacity: 0.7; + pointer-events: none; } -.col-xs-pull-8 { - right: 66.66666667%; +.action-secondary, +button.secondary { + background-color: #514943; + border-color: #514943; + color: #ffffff; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } -.col-xs-pull-7 { - right: 58.33333333%; +.action-secondary:hover, +.action-secondary:active, +button.secondary:hover, +button.secondary:active { + background-color: #35302c; + color: #ffffff; } -.col-xs-pull-6 { - right: 50%; +.action-secondary:active, +button.secondary:active { + background-color: #35302c; } -.col-xs-pull-5 { - right: 41.66666667%; +.action-reset { + background-color: transparent; + border-color: transparent; + color: #333333; } -.col-xs-pull-4 { - right: 33.33333333%; +.action-reset:hover, +.action-reset:active { + background-color: transparent; } -.col-xs-pull-3 { - right: 25%; +.action-tertiary, +button.tertiary { + background: #e3e3e3; + border-color: #adadad; + color: #333333; } -.col-xs-pull-2 { - right: 16.66666667%; +.action-tertiary:hover, +.action-tertiary:active, +button.tertiary:hover, +button.tertiary:active { + background-color: #cacaca; + border-color: #8f8f8f; } -.col-xs-pull-1 { - right: 8.33333333%; +.actions-split { + display: inline-block; + position: relative; + vertical-align: middle; } -.col-xs-pull-0 { - right: auto; +.actions-split:before, +.actions-split:after { + content: ""; + display: table; } -.col-xs-push-12 { - left: 100%; +.actions-split:after { + clear: both; } -.col-xs-push-11 { - left: 91.66666667%; +.actions-split .action-default { + float: left; + margin: 0; } -.col-xs-push-10 { - left: 83.33333333%; +.actions-split .action-toggle { + float: right; + margin: 0; } -.col-xs-push-9 { - left: 75%; +.actions-split button.action-default { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.col-xs-push-8 { - left: 66.66666667%; +.actions-split button + .action-toggle { + border-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } -.col-xs-push-7 { - left: 58.33333333%; +.actions-split .action-toggle { + padding: 4px 0.5rem; + display: inline-block; + text-decoration: none; } -.col-xs-push-6 { - left: 50%; -} -.col-xs-push-5 { - left: 41.66666667%; +.actions-split .action-toggle > span { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } -.col-xs-push-4 { - left: 33.33333333%; +.actions-split .action-toggle:after { + font-family: 'icons-blank-theme'; + content: '\e607'; + font-size: 40px; + line-height: 14px; + color: inherit; + overflow: hidden; + speak: none; + font-weight: normal; + -webkit-font-smoothing: antialiased; + display: inline-block; + vertical-align: middle; + text-align: center; + margin: 0; } -.col-xs-push-3 { - left: 25%; +.actions-split .action-toggle:hover:after { + color: inherit; } -.col-xs-push-2 { - left: 16.66666667%; +.actions-split .action-toggle:active:after { + color: inherit; } -.col-xs-push-1 { - left: 8.33333333%; +.actions-split .action-toggle.active { + display: inline-block; + text-decoration: none; } -.col-xs-push-0 { - left: auto; +.actions-split .action-toggle.active > span { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } -.col-xs-offset-12 { - margin-left: 100%; +.actions-split .action-toggle.active:after { + font-family: 'icons-blank-theme'; + content: '\e618'; + font-size: 40px; + line-height: 14px; + color: inherit; + overflow: hidden; + speak: none; + font-weight: normal; + -webkit-font-smoothing: antialiased; + display: inline-block; + vertical-align: middle; + text-align: center; + margin: 0; } -.col-xs-offset-11 { - margin-left: 91.66666667%; +.actions-split .action-toggle.active:hover:after { + color: inherit; } -.col-xs-offset-10 { - margin-left: 83.33333333%; +.actions-split .action-toggle.active:active:after { + color: inherit; } -.col-xs-offset-9 { - margin-left: 75%; +.actions-split .dropdown-menu { + margin: 0; + padding: 0; + list-style: none none; + box-sizing: border-box; + background: #ffffff; + border: 1px solid #bbbbbb; + position: absolute; + z-index: 100; + top: 100%; + min-width: 175px; + margin-top: 4px; + display: none; + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15); } -.col-xs-offset-8 { - margin-left: 66.66666667%; +.actions-split .dropdown-menu li { + margin: 0; + padding: 3px 0.5rem; } -.col-xs-offset-7 { - margin-left: 58.33333333%; +.actions-split .dropdown-menu li:hover { + background: #e8e8e8; + cursor: pointer; } -.col-xs-offset-6 { - margin-left: 50%; +.actions-split .dropdown-menu:before, +.actions-split .dropdown-menu:after { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + border-bottom-style: solid; } -.col-xs-offset-5 { - margin-left: 41.66666667%; +.actions-split .dropdown-menu:before { + z-index: 99; + border: solid 6px; + border-color: transparent transparent #ffffff transparent; } -.col-xs-offset-4 { - margin-left: 33.33333333%; +.actions-split .dropdown-menu:after { + z-index: 98; + border: solid 7px; + border-color: transparent transparent #bbbbbb transparent; } -.col-xs-offset-3 { - margin-left: 25%; +.actions-split .dropdown-menu:before { + top: -12px; + right: 10px; } -.col-xs-offset-2 { - margin-left: 16.66666667%; +.actions-split .dropdown-menu:after { + top: -14px; + right: 9px; } -.col-xs-offset-1 { - margin-left: 8.33333333%; +.actions-split.active { + overflow: visible; } -.col-xs-offset-0 { - margin-left: 0%; +.actions-split.active .dropdown-menu { + display: block; } -.row-gutter { - margin-left: -1.5rem; - margin-right: -1.5rem; +.actions-split:hover:not(.disabled) { + box-shadow: 0 0 0 1px #008bdb; } -.row-gutter .col-gutter { - padding-left: 1.5rem; - padding-right: 1.5rem; +.actions-split button { + margin-left: 0; } -.abs-icon, -[class^='icon-']:before, -[class*=' icon-']:before, -.admin__menu .level-0 > a:before, -.admin__menu .submenu-close:before, -.copyright .link-copyright:before { - -webkit-font-smoothing: antialiased; - font-family: 'Admin Icons'; - line-height: 1; - font-style: normal; - font-weight: normal; - speak: none; +.actions-split button.action-toggle { + border-left: 1px solid #c34706; + padding: 0.55em 0; } -.abs-btn-reset, -.admin__menu .submenu-close { - background-color: transparent; - border: none; - margin: 0; - padding: 0; +.actions-split button.action-large.action-toggle { + padding: 0.7em 0; } -.abs-btn-reset:hover, -.admin__menu .submenu-close:hover { +.actions-split button:hover { box-shadow: none; } -.validation-symbol:after, -table th.required:after { - content: '*'; - color: #e22626; - font-weight: 400; - margin-left: 3px; +table.table { + color: #303030; } -.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; +table.table > caption { + margin-bottom: .5rem; } -.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; +table.table tfoot { + background: #f8f8f8; } -.abs-clearfix:after, -.tabs-horiz:after, -.dashboard-totals-list:after, -.dashboard-store-stats .ui-tabs:after { - clear: both; +table.table tfoot th, +table.table tfoot td { + text-align: left; } -.abs-list-reset-styles, -.dashboard-totals-list { - margin: 0; - padding: 0; - list-style: none none; +table.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; } -.tabs-horiz { +table.table td { + border-bottom: 0.1rem solid #e3e3e3; + padding: 1rem 1.5rem; + vertical-align: top; +} +table.table tbody td:first-child input[type='checkbox'] { 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; +table.table tbody tr:last-child td { + border-bottom-color: transparent; } -.tabs-horiz .ui-state-hover { - background: #d6d6d6; +.row { + margin-left: 0; + margin-right: 0; } -.tabs-horiz .ui-state-active { - background: #ffffff; - border-bottom: 0; - font-weight: 600; - letter-spacing: normal; - margin-bottom: -0.1rem; +.row:after { + content: ""; + display: table; + clear: both; } -.tabs-horiz .ui-state-active .ui-tabs-anchor { - border-bottom: 0.1rem solid #ffffff; - border-top: 0.4rem solid #eb5202; - padding-top: 1.1rem; +.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; } -.tabs-horiz .ui-tabs-anchor { - color: #41362f; - display: block; - padding: 1.5rem 1.8rem 1.3rem; - text-decoration: none; +.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; } -.ui-tabs-panel { - border-top: 0.1rem solid #adadad; - margin-top: -0.1rem; - padding: 2rem; +.col-xs-12 { + width: 100%; } -body { - background-color: #f5f5f5; +.col-xs-11 { + width: 91.66666667%; } -.page-wrapper { - padding-left: 8.8rem; - background-color: #ffffff; +.col-xs-10 { + width: 83.33333333%; } -.page-content { - padding-left: 3rem; - padding-right: 3rem; +.col-xs-9 { + width: 75%; } -/** - * @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; +.col-xs-8 { + width: 66.66666667%; } -.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); +.col-xs-7 { + width: 58.33333333%; } -.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); +.col-xs-6 { + width: 50%; } -.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); +.col-xs-5 { + width: 41.66666667%; } -.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); +.col-xs-4 { + width: 33.33333333%; } -.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); +.col-xs-3 { + width: 25%; } -.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); +.col-xs-2 { + width: 16.66666667%; } -.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); +.col-xs-1 { + width: 8.33333333%; } -.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); +.col-xs-pull-12 { + right: 100%; } -@-moz-keyframes fade { - 0% { - background-color: #514943; - } - 100% { - background-color: #ffffff; - } +.col-xs-pull-11 { + right: 91.66666667%; } -@-webkit-keyframes fade { - 0% { - background-color: #514943; - } - 100% { - background-color: #ffffff; - } +.col-xs-pull-10 { + right: 83.33333333%; } -@-ms-keyframes fade { - 0% { - background-color: #514943; - } - 100% { - background-color: #ffffff; - } +.col-xs-pull-9 { + right: 75%; } -@keyframes fade { - 0% { - background-color: #514943; - } - 100% { - background-color: #ffffff; - } +.col-xs-pull-8 { + right: 66.66666667%; } -.spinner > span { - -webkit-transform: scale(0.4); - -moz-transform: scale(0.4); - -ms-transform: scale(0.4); - transform: scale(0.4); - -webkit-animation-name: fade; - -moz-animation-name: fade; - -ms-animation-name: fade; - animation-name: fade; - -webkit-animation-duration: 0.72s; - -moz-animation-duration: 0.72s; - -ms-animation-duration: 0.72s; - animation-duration: 0.72s; - -webkit-animation-iteration-count: infinite; - -moz-animation-iteration-count: infinite; - -ms-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-direction: linear; - -moz-animation-direction: linear; - -ms-animation-direction: linear; - animation-direction: linear; - background-color: #ffffff; - border-radius: 6px; - clip: rect(0 0.28571429em 0.1em 0); - height: .1em; - margin-top: 0.5em; - position: absolute; - width: 1em; +.col-xs-pull-7 { + right: 58.33333333%; } -.ie9 .spinner { - background: url('../images/ajax-loader.gif') no-repeat center; +.col-xs-pull-6 { + right: 50%; } -.ie9 .spinner > span { - display: none; +.col-xs-pull-5 { + right: 41.66666667%; } -.menu-wrapper { - height: 100%; - left: 0; - position: fixed; - top: 0; - width: 8.8rem; - z-index: 700; +.col-xs-pull-4 { + right: 33.33333333%; } -.menu-wrapper:after { - background-color: #373330; - bottom: 0; - content: ''; - left: 0; - position: absolute; - right: 0; - top: 0; - z-index: 600; +.col-xs-pull-3 { + right: 25%; } -.menu-wrapper .logo { - display: block; - height: 6.5rem; - margin-bottom: 1rem; - padding: 1.2rem 0; - position: relative; - text-align: center; - z-index: 700; +.col-xs-pull-2 { + right: 16.66666667%; } -.menu-wrapper .logo:hover .logo-img { - -webkit-filter: brightness(1.1); - filter: brightness(1.1); +.col-xs-pull-1 { + right: 8.33333333%; } -.menu-wrapper .logo:active .logo-img { - transform: scale(0.95); +.col-xs-pull-0 { + right: auto; } -.menu-wrapper .logo .logo-img { - height: 4.1rem; - transition: -webkit-filter 0.2s linear, filter 0.2s linear, transform 0.1s linear; - width: 3.5rem; +.col-xs-push-12 { + left: 100%; } -.admin__menu { - position: relative; +.col-xs-push-11 { + left: 91.66666667%; } -.admin__menu li { - display: block; +.col-xs-push-10 { + left: 83.33333333%; } -.admin__menu .level-0:first-child > a { - position: relative; +.col-xs-push-9 { + left: 75%; } -.admin__menu .level-0:first-child > a:after { - background-color: #736963; - content: ''; - display: block; - height: 1px; - left: 0; - margin-left: 16%; - position: absolute; - top: 0; - width: 68%; +.col-xs-push-8 { + left: 66.66666667%; } -.admin__menu .level-0:first-child._active > a:after { - display: none; +.col-xs-push-7 { + left: 58.33333333%; } -.admin__menu .level-0._active > a, -.admin__menu .level-0._hover > a, -.admin__menu .level-0:hover > a { - background-color: #524d49; - color: #f7f3eb; +.col-xs-push-6 { + left: 50%; } -.admin__menu .level-0 > a { - color: #aaa6a0; - display: block; - font-size: 1rem; - letter-spacing: .025em; - min-height: 6.2rem; - padding: 1.2rem .5rem .5rem; - position: relative; - text-align: center; - text-decoration: none; - text-transform: uppercase; - transition: background-color 0.1s linear; - word-break: break-all; - z-index: 700; +.col-xs-push-5 { + left: 41.66666667%; } -.admin__menu .level-0 > a:focus { - box-shadow: none; +.col-xs-push-4 { + left: 33.33333333%; } -.admin__menu .level-0 > a:before { - content: '\e63a'; - display: block; - font-family: 'Admin Icons'; - font-size: 2.2rem; - height: 2.2rem; - margin-bottom: .3rem; +.col-xs-push-3 { + left: 25%; } -.admin__menu .level-0 > .submenu { - background-color: #524d49; - box-shadow: 0 0 3px #000000; - left: -100rem; - min-height: ~" calc(7.5rem + 2rem + 100%)"; - padding: 2rem 0 0; - position: absolute; - top: -7.5rem; - transition: all .7s linear; - visibility: hidden; - z-index: 500; +.col-xs-push-2 { + left: 16.66666667%; } -.admin__menu .level-0 > .submenu._show { - left: 100%; - visibility: visible; +.col-xs-push-1 { + left: 8.33333333%; } -.admin__menu .level-0._recent._hover .submenu { - left: 100%; - visibility: visible; +.col-xs-push-0 { + left: auto; } -.admin__menu .level-1 { - margin-left: 1.5rem; - margin-right: 1.5rem; +.col-xs-offset-12 { + margin-left: 100%; } -.admin__menu [class*='level-']:not(.level-0) a { - display: block; - padding: 1.25rem 1.5rem; +.col-xs-offset-11 { + margin-left: 91.66666667%; } -.admin__menu .submenu li { - min-width: 23.8rem; +.col-xs-offset-10 { + margin-left: 83.33333333%; } -.admin__menu .submenu a { - color: #fcfcfc; +.col-xs-offset-9 { + margin-left: 75%; } -.keyfocus .admin__menu .submenu a { - text-decoration: none; +.col-xs-offset-8 { + margin-left: 66.66666667%; } -.admin__menu .submenu a:active, -.admin__menu .submenu a:focus { +.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%; +} +.row-gutter { + margin-left: -1.5rem; + margin-right: -1.5rem; +} +.row-gutter .col-gutter { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.abs-icon, +[class^='icon-']:before, +[class*=' icon-']:before, +.admin__menu .level-0 > a:before, +.admin__menu .submenu-close:before, +.copyright .link-copyright:before { + -webkit-font-smoothing: antialiased; + font-family: 'Admin Icons'; + line-height: 1; + font-style: normal; + font-weight: normal; + speak: none; +} +.abs-btn-reset, +.admin__menu .submenu-close { + background-color: transparent; + border: none; + margin: 0; + padding: 0; +} +.abs-btn-reset:hover, +.admin__menu .submenu-close:hover { box-shadow: none; } -.keyfocus .admin__menu .submenu a:active, -.keyfocus .admin__menu .submenu a:focus { - background-color: #403934; +.validation-symbol:after, +table.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; } -.admin__menu .submenu .parent { - margin-bottom: 4.5rem; +.tabs-horiz { + margin: 0; + padding: 0; } -.admin__menu .submenu .parent > a { - color: #a79d95; - display: block; - font-size: 1.6rem; - font-weight: 600; - margin-bottom: .7rem; - pointer-events: none; +.tabs-horiz .ui-state-default { + background: #e3e3e3; + border: 0.1rem solid #adadad; + float: left; + letter-spacing: .0183em; + list-style: none; + margin-right: .4rem; } -.admin__menu .submenu .column { - display: table-cell; +.tabs-horiz .ui-state-hover { + background: #d6d6d6; } -.admin__menu .submenu-title { - color: #ffffff; - display: block; - font-size: 2.2rem; +.tabs-horiz .ui-state-active { + background: #ffffff; + border-bottom: 0; font-weight: 600; - margin-bottom: 4.2rem; - margin-left: 3rem; - margin-right: 5.8rem; + letter-spacing: normal; + margin-bottom: -0.1rem; } -.admin__menu .submenu-sub-title { - color: #ffffff; - display: block; - font-size: 1.19rem; - margin: -3.8rem 5.8rem 3.8rem 3rem; +.tabs-horiz .ui-state-active .ui-tabs-anchor { + border-bottom: 0.1rem solid #ffffff; + border-top: 0.4rem solid #eb5202; + padding-top: 1.1rem; } -.admin__menu .submenu-close { - padding: 2.4rem 2.8rem; - position: absolute; - right: 0; - top: 0; +.tabs-horiz .ui-tabs-anchor { + color: #41362f; + display: block; + padding: 1.5rem 1.8rem 1.3rem; + text-decoration: none; } -.admin__menu .submenu-close:before { - color: #a79d95; - content: '\e62f'; - font-size: 1.7rem; +.ui-tabs-panel { + border-top: 0.1rem solid #adadad; + margin-top: -0.1rem; + padding: 2rem; } -.admin__menu .submenu-close:hover:before { - color: #ffffff; +body { + background-color: #f5f5f5; } -.admin__menu .item-dashboard > a:before { - content: '\e604'; - font-size: 1.8rem; - padding-top: 0.4rem; +.page-wrapper { + padding-left: 8.8rem; + background-color: #ffffff; } -.admin__menu .item-sales > a:before { - content: '\e60b'; +.page-content { + padding-left: 3rem; + padding-right: 3rem; } -.admin__menu .item-catalog > a:before { - content: '\e608'; +.ui-datepicker { + background: #ffffff; + border: 1px solid #007dbd; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3); + box-sizing: border-box; + display: none; + padding: 20px; + width: auto; + z-index: 999999 !important; } -.admin__menu .item-customer > a:before { - content: '\e603'; - font-size: 2.6rem; +.ui-datepicker-header { + padding: 0 0 10px; position: relative; - top: -0.4rem; } -.admin__menu .item-marketing > a:before { - content: '\e609'; - font-size: 2rem; - padding-top: 0.2rem; +.ui-datepicker-prev, +.ui-datepicker-next { + cursor: pointer; + position: absolute; + line-height: 32px; + top: 0; } -.admin__menu .item-content > a:before { - content: '\e602'; - font-size: 2.4rem; - position: relative; - top: -0.2rem; +.ui-datepicker-prev span, +.ui-datepicker-next span { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } -.admin__menu .item-report > a:before { - content: '\e60a'; +.ui-datepicker-prev:before, +.ui-datepicker-next:before { + color: #514943; + font-size: 34px; + display: inline-block; } -.admin__menu .item-stores > a:before { - content: '\e60d'; - font-size: 1.9rem; - padding-top: 0.3rem; +.ui-datepicker-prev { + left: 0; } -.admin__menu .item-system > a:before { - content: '\e610'; +.ui-datepicker-prev:before { + content: '\2039'; } -.admin__menu-overlay { - bottom: 0; - left: 0; - position: absolute; +.ui-datepicker-next { right: 0; - top: 0; - z-index: 500; } -.page-footer { - background-color: #f5f5f5; - border-top: 0.1rem solid #dddddd; - color: #777777; - margin-top: auto; - padding: 2.6rem 2rem 6rem 3rem; +.ui-datepicker-next:before { + content: '\203A'; } -.page-footer a { - color: #ef672f; - text-decoration: underline; +.ui-datepicker .ui-datepicker-title { + margin: 0 2.3em; + line-height: 1.8em; + text-align: center; } -.page-footer a:hover { - color: #ef672f; +.ui-datepicker .ui-datepicker-title select { + font-size: 1em; + margin: 1px 0; } -.magento-version { - margin-bottom: .5rem; +.ui-datepicker select.ui-datepicker-month-year { + width: 100%; } -.magento-version strong { - color: #666666; +.ui-datepicker table { + width: 100%; } -.copyright { - margin-bottom: -0.2rem; - position: relative; +.ui-datepicker table.ui-datepicker-calendar { + background: #FFFFFF; + border-collapse: collapse; + border: 0; } -.copyright .link-copyright { - display: inline-block; - margin-right: .5rem; - text-decoration: none; - vertical-align: top; +.ui-datepicker table.ui-datepicker-calendar thead { + background: transparent; } -.copyright .link-copyright:hover:before { - color: #fd6e23; +.ui-datepicker table.ui-datepicker-calendar tr { + background: transparent; } -.copyright .link-copyright:before { - color: #eb5202; - content: '\e606'; - font-size: 2.5rem; - position: relative; - top: -0.2rem; +.ui-datepicker table.ui-datepicker-calendar tr th { + background: transparent; + border: 0; + padding: 0; } -.footer-legal { - padding-top: 1rem; - text-align: right; +.ui-datepicker table.ui-datepicker-calendar tr th span { + font-weight: 700; + font-size: 12px; + line-height: 28px; } -.locale-switcher .label { - display: block; - margin-bottom: 1rem; +.ui-datepicker table.ui-datepicker-calendar tr td { + background: transparent; + border: 1px solid #adadad; + padding: 0; } -.dashboard-data { - background: #ffffff; - font-size: 1.3rem; - width: 100%; +.ui-datepicker table.ui-datepicker-calendar span, +.ui-datepicker table.ui-datepicker-calendar a { + box-sizing: border-box; + color: #514943; + display: block; + font-size: 14px; + font-weight: 600; + line-height: 38px; + text-align: center; + text-decoration: none; + width: 38px; } -.dashboard-data th, -.dashboard-data td { - padding: 1rem 0 1rem 1rem; +.ui-datepicker table.ui-datepicker-calendar .ui-state-disabled span { + background: #f5f5f5; + color: #999999; } -.dashboard-data th:first-child, -.dashboard-data td:first-child { - padding-left: 0; +.ui-datepicker table.ui-datepicker-calendar .ui-state-active { + background: #514943; + color: #fff; } -.dashboard-data th { - border-top: 0; +.ui-datepicker table.ui-datepicker-calendar .ui-datepicker-today a { + border: 3px solid #adadad; + line-height: 32px; } -.dashboard-main .dashboard-data th, -.dashboard-main .dashboard-data td { - text-align: right; +.ui-datepicker .ui-datepicker-buttonpane { + overflow: hidden; + padding-top: 15px; white-space: nowrap; - width: 15%; } -.dashboard-main .dashboard-data .col-name { - text-align: left; - white-space: normal; - width: 55%; +.ui-datepicker .ui-datepicker-buttonpane button { + background: #fff; + border-radius: 1px; + border: 1px solid #adadad; + box-sizing: border-box; + color: #008bdb; + float: left; + font-size: 14px; + line-height: 38px; + padding: 0; + text-align: center; + width: 49%; } -.dashboard-main .dashboard-data .col-product { - width: 70%; +.ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-close { + float: right; } -.dashboard-main .dashboard-data .col-orders_count { - text-align: left; +.ui-datepicker .ui-datepicker-title .ui-datepicker-month { + width: 47%; + margin-right: 6%; } -.dashboard-secondary .dashboard-data .col-popularity, -.dashboard-secondary .dashboard-data .col-total { - text-align: right; - width: 21.27659574%; +.ui-datepicker .ui-datepicker-title .ui-datepicker-year { + width: 47%; } -.dashboard-secondary .dashboard-data .col-customer, -.dashboard-secondary .dashboard-data .col-search_query { - width: 57.44680851%; +.ui-datepicker .ui-datepicker-calendar .ui-datepicker-week-col { + text-align: center; + border: #cfcfcf 1px solid; } -.dashboard-container .empty-text { - background: #ffffff; - font-size: 1.3rem; +.ui-timepicker-div .ui-widget-header { + margin-bottom: 8px; } -.dashboard-diagram-disabled { - padding: .5rem 2rem 2rem; +.ui-timepicker-div dl { + text-align: left; } -.dashboard-diagram-switcher { - margin-bottom: 2rem; +.ui-timepicker-div dl dd { + margin: 0 0 10px 65px; } -.dashboard-diagram-image { - max-width: 100%; +.ui-timepicker-div td { + font-size: 90%; } -.dashboard-totals { - margin: 1rem 2rem 6rem; +.ui-tpicker-grid-label { + background: none; + border: none; + margin: 0; + padding: 0; } -.dashboard-totals-list { - display: table; - width: 100%; +.ui-slider { + position: relative; + text-align: left; } -.dashboard-totals-item { - display: table-cell; - padding: 0 1rem 0 0; - width: 25%; +.ui-slider-horizontal .ui-slider-handle { + margin-left: -5px; } -.dashboard-totals-item:first-child .price { - color: #eb5202; +.ui-slider .ui-slider-handle { + position: absolute; + z-index: 2; + cursor: default; } -.dashboard-totals-label { +.ui-slider-horizontal { + height: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + border: none; + background: #dadada; +} +.ui-slider-handle { + height: 10px; + width: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + background: #f98b25; display: block; - font-size: 1.3rem; - font-weight: 700; + position: absolute; } -.dashboard-totals-value { - font-size: 2.4rem; - font-weight: 600; +.ui-timepicker-div { + padding: 10px 0 5px 0; } -.dashboard-store-stats .ui-tabs { - position: relative; +.ui-datepicker-rtl { + direction: rtl; } -.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; - width: 2rem; +.ui-datepicker-rtl .ui-datepicker-prev { + right: 2px; + left: auto; } -.dashboard-store-stats .ui-tabs-panel { - background: url(../images/ajax-loader-small.gif) no-repeat 50% 50%; - min-height: 6rem; +.ui-datepicker-rtl .ui-datepicker-next { + left: 2px; + right: auto; } -.dashboard-store-stats .tabs-horiz { - border-right: 1px solid #ffffff; - float: left; - overflow-x: auto; - white-space: nowrap; - width: 100%; +.ui-datepicker-rtl .ui-datepicker-prev:hover { + right: 1px; + left: auto; } -.dashboard-store-stats .tabs-horiz .ui-state-default { - display: inline-block; - float: none; - margin-right: .1rem; +.ui-datepicker-rtl .ui-datepicker-next:hover { + left: 1px; + right: auto; } -.dashboard-container .dashboard-secondary { - padding-right: 3.5rem; +.ui-datepicker-rtl .ui-datepicker-buttonpane { + clear: right; } -.dashboard-item { - margin-bottom: 3rem; +.ui-datepicker-rtl .ui-datepicker-buttonpane button { + float: left; } -.dashboard-item-title { - font-size: 1.8rem; - font-weight: 700; +.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { + float: right; } -.dashboard-item-primary:first-child .dashboard-sales-value { - color: #eb5202; +.ui-datepicker-rtl .ui-datepicker-group { + float: right; } -.dashboard-sales-value { - font-size: 2.4rem; - font-weight: 600; +.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { + border-right-width: 0; + border-left-width: 1px; } -@font-face { - font-family: 'MUI-Icons'; - src: url('../fonts/MUI-Icons/MUI-Icons.eot'); - src: url('../fonts/MUI-Icons/MUI-Icons.eot?#iefix') format('embedded-opentype'), url('../fonts/MUI-Icons/MUI-Icons.woff2') format('woff2'), url('../fonts/MUI-Icons/MUI-Icons.woff') format('woff'), url('../fonts/MUI-Icons/MUI-Icons.ttf') format('truetype'), url('../fonts/MUI-Icons/MUI-Icons.svg#MUI-Icons') format('svg'); - font-weight: 300; - font-style: normal; +.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { + border-right-width: 0; + border-left-width: 1px; } -.page-header { - padding-left: 15px; - padding-right: 15px; - text-align: right; +.ui-timepicker-div .ui-widget-header { + margin-bottom: 8px; } -.page-header:after { - content: ""; - display: table; - clear: both; +.ui-timepicker-div dl { + text-align: left; } -.page-header-wrapper { - background-color: #31302b; +.ui-timepicker-div dl dt { + height: 25px; + margin-bottom: -22px; } -.page-header .logo { - display: inline-block; - float: left; - margin-top: 5px; - text-decoration: none; +.ui-timepicker-div dl .ui_tpicker_time_label { + margin-bottom: -25px; } -.page-header .logo:before { - background-image: url('../images/logo-admin.svg'); - background-repeat: no-repeat; - background-size: 109px 70px; - content: ''; - display: inline-block; - height: 35px; - vertical-align: middle; - width: 109px; +.ui-timepicker-div dl dd { + margin: 0 10px 10px 65px; } -.page-header .logo:after { - color: #ef672f; - content: attr(data-edition); - display: inline-block; - font-size: 16px; - font-weight: 600; - margin-left: 10px; - margin-top: -2px; - vertical-align: middle; +.ui-timepicker-div td { + font-size: 90%; } -.page-header .logo span { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; +.ui-tpicker-grid-label { + background: none; + border: none; + margin: 0; padding: 0; - position: absolute; - width: 1px; -} -.page-header .dropdown-menu { - border: 0; } -.page-title { - margin: 20px 0; - position: relative; +/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */ +.ui-datepicker-cover { + position: absolute; + /*must have*/ + z-index: -1; + /*must have*/ + filter: mask(); + /*must have*/ + top: -4px; + /*must have*/ + left: -4px; + /*must have*/ + width: 200px; + /*must have*/ + height: 200px; + /*must have*/ } -.admin-user { +/** + * @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; - text-align: left; - vertical-align: top; + width: 1em; } -.admin-user-account { - color: #f2ebde; - display: inline-block; - text-decoration: none; - padding: 12px 14px; +.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); } -.admin-user-account:after { - font-family: 'MUI-Icons'; - content: '\e02c'; - font-size: 13px; - line-height: 13px; - color: inherit; - overflow: hidden; - speak: none; - font-weight: normal; - -webkit-font-smoothing: antialiased; - display: inline-block; - vertical-align: middle; - text-align: center; - margin: -3px 0 0; +.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); } -.admin-user-account:link, -.admin-user-account:visited { - color: #f2ebde; +.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; + } +} +@-webkit-keyframes fade { + 0% { + background-color: #514943; + } + 100% { + background-color: #ffffff; + } +} +@-ms-keyframes fade { + 0% { + background-color: #514943; + } + 100% { + background-color: #ffffff; + } } -.admin-user-account:focus, -.admin-user-account:active, -.admin-user-account:hover { - color: #f2ebde; - text-decoration: none; +@keyframes fade { + 0% { + background-color: #514943; + } + 100% { + background-color: #ffffff; + } } -.admin-user.active .admin-user-account { +.spinner > span { + -webkit-transform: scale(0.4); + -moz-transform: scale(0.4); + -ms-transform: scale(0.4); + transform: scale(0.4); + -webkit-animation-name: fade; + -moz-animation-name: fade; + -ms-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0.72s; + -moz-animation-duration: 0.72s; + -ms-animation-duration: 0.72s; + animation-duration: 0.72s; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + -ms-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: linear; + -moz-animation-direction: linear; + -ms-animation-direction: linear; + animation-direction: linear; background-color: #ffffff; - color: #676056; + border-radius: 6px; + clip: rect(0 0.28571429em 0.1em 0); + height: .1em; + margin-top: 0.5em; + position: absolute; + width: 1em; } -.admin-user.active .admin-user-menu { - display: block; +.ie9 .spinner { + background: url('../images/ajax-loader.gif') no-repeat center; } -.admin-user-menu { - background: #fff; - border: 1px solid #cac2b5; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); +.ie9 .spinner > span { display: none; - list-style: none; - margin: 0; - min-width: 100px; - padding: 15px; - position: absolute; - right: 0; - top: 100%; - white-space: nowrap; - z-index: 990; } -.admin-user-menu li { - border: 0; - padding: 0; +.menu-wrapper { + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 8.8rem; + z-index: 700; } -.admin-user-menu li:hover { - background: transparent; +.menu-wrapper:after { + background-color: #373330; + bottom: 0; + content: ''; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 600; } -.admin-user-menu a { - color: #676056; +.menu-wrapper .logo { display: block; - font-size: 13px; - font-weight: 400; - line-height: 1.385; - padding: 3px 12px 3px; - text-decoration: none; -} -.admin-user-menu a span:before { - content: '('; + height: 6.5rem; + margin-bottom: 1rem; + padding: 1.2rem 0; + position: relative; + text-align: center; + z-index: 700; } -.admin-user-menu a span:after { - content: ')'; +.menu-wrapper .logo:hover .logo-img { + -webkit-filter: brightness(1.1); + filter: brightness(1.1); } -.admin-user-menu a:focus, -.admin-user-menu a:hover { - text-decoration: underline; +.menu-wrapper .logo:active .logo-img { + transform: scale(0.95); } -.admin-user-menu a:hover { - background: #989287; - color: #ffffff; - text-decoration: none; +.menu-wrapper .logo .logo-img { + height: 4.1rem; + transition: -webkit-filter 0.2s linear, filter 0.2s linear, transform 0.1s linear; + width: 3.5rem; } -.search-global.miniform { - display: inline-block; - margin: 6px 10px 0; +.admin__menu { position: relative; - vertical-align: top; - z-index: 499; -} -.search-global.miniform .mage-suggest { - border: 0; - border-radius: 0; -} -.search-global-actions { - display: none; } -.search-global-field { - margin: 0; +.admin__menu li { + display: block; } -.search-global-field .label { - cursor: pointer; - display: inline-block; - text-decoration: none; - position: absolute; - right: 4px; - z-index: 2; +.admin__menu .level-0:first-child > a { + position: relative; } -.search-global-field .label > span { - border: 0; - clip: rect(0, 0, 0, 0); +.admin__menu .level-0:first-child > a:after { + background-color: #736963; + content: ''; + display: block; height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; + left: 0; + margin-left: 16%; position: absolute; - width: 1px; -} -.search-global-field .label:before { - font-family: 'MUI-Icons'; - content: '\e01f'; - font-size: 18px; - line-height: 29px; - color: #cac3b4; - overflow: hidden; - speak: none; - font-weight: normal; - -webkit-font-smoothing: antialiased; - display: inline-block; - vertical-align: middle; - text-align: center; -} -.search-global-field .control { - opacity: 0; - overflow: hidden; - transition: all .3s ease; - width: 48px; + top: 0; + width: 68%; } -.search-global-field .control input[type='text'] { - background: transparent; - border: none; - height: 30px; - width: 100%; +.admin__menu .level-0:first-child._active > a:after { + display: none; } -.search-global-field.active { - z-index: 2; +.admin__menu .level-0._active > a, +.admin__menu .level-0._hover > a, +.admin__menu .level-0:hover > a { + background-color: #524d49; + color: #f7f3eb; } -.search-global-field.active .label:before { - display: none; +.admin__menu .level-0 > a { + color: #aaa6a0; + display: block; + font-size: 1rem; + letter-spacing: .025em; + min-height: 6.2rem; + padding: 1.2rem .5rem .5rem; + position: relative; + text-align: center; + text-decoration: none; + text-transform: uppercase; + transition: background-color 0.1s linear; + word-break: break-all; + z-index: 700; } -.search-global-field.active .control { - opacity: 1; - overflow: visible; - transition: all .3s ease; - width: 300px; +.admin__menu .level-0 > a:focus { + box-shadow: none; } -.search-global-menu { - box-sizing: border-box; +.admin__menu .level-0 > a:before { + content: '\e63a'; display: block; - width: 100%; + font-family: 'Admin Icons'; + font-size: 2.2rem; + height: 2.2rem; + margin-bottom: .3rem; } -.page-main-actions { - background: #f5f5f5; - border-bottom: .1rem solid #ddd; - border-top: .1rem solid #ddd; - box-sizing: border-box; - color: #645d53; - margin-bottom: 4rem; - margin-left: auto; - margin-right: auto; - padding: 15px; +.admin__menu .level-0 > .submenu { + background-color: #524d49; + box-shadow: 0 0 3px #000000; + left: -100rem; + min-height: ~" calc(7.5rem + 2rem + 100%)"; + padding: 2rem 0 0; + position: absolute; + top: -7.5rem; + transition: all .7s linear; + visibility: hidden; + z-index: 500; } -.page-main-actions:before, -.page-main-actions:after { - content: ""; - display: table; +.admin__menu .level-0 > .submenu._show { + left: 100%; + visibility: visible; } -.page-main-actions:after { - clear: both; +.admin__menu .level-0._recent._hover .submenu { + left: 100%; + visibility: visible; } -.page-main-actions .page-actions { - float: right; +.admin__menu .level-1 { + margin-left: 1.5rem; + margin-right: 1.5rem; } -.page-main-actions .page-actions .page-actions-buttons { - float: right; - justify-content: flex-end; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; +.admin__menu [class*='level-']:not(.level-0) a { + display: block; + padding: 1.25rem 1.5rem; } -.page-main-actions .page-actions button { - margin-left: 13px; +.admin__menu .submenu li { + min-width: 23.8rem; } -.page-main-actions .page-actions button.primary { - float: right; - -ms-flex-order: 2; - -webkit-order: 2; - order: 2; +.admin__menu .submenu a { + color: #fcfcfc; } -.page-main-actions .page-actions button.save:not(.primary) { - float: right; - -ms-flex-order: 1; - -webkit-order: 1; - order: 1; +.keyfocus .admin__menu .submenu a { + text-decoration: none; } -.page-main-actions .page-actions button.back, -.page-main-actions .page-actions button.action-back, -.page-main-actions .page-actions button.delete { - background-image: none; - background: none; - border: 0; - margin: 0; - padding: 0; - -moz-box-sizing: content-box; +.admin__menu .submenu a:active, +.admin__menu .submenu a:focus { box-shadow: none; - text-shadow: none; - text-decoration: none; - line-height: inherit; - font-weight: 400; - margin: 0 13px; } -.page-main-actions .page-actions button.back:focus, -.page-main-actions .page-actions button.action-back:focus, -.page-main-actions .page-actions button.delete:focus, -.page-main-actions .page-actions button.back:active, -.page-main-actions .page-actions button.action-back:active, -.page-main-actions .page-actions button.delete:active { - background: none; - border: none; +.keyfocus .admin__menu .submenu a:active, +.keyfocus .admin__menu .submenu a:focus { + background-color: #403934; } -.page-main-actions .page-actions button.back:hover, -.page-main-actions .page-actions button.action-back:hover, -.page-main-actions .page-actions button.delete:hover { - background: none; - border: none; +.admin__menu .submenu .parent { + margin-bottom: 4.5rem; } -.page-main-actions .page-actions button.back.disabled, -.page-main-actions .page-actions button.action-back.disabled, -.page-main-actions .page-actions button.delete.disabled, -.page-main-actions .page-actions button.back[disabled], -.page-main-actions .page-actions button.action-back[disabled], -.page-main-actions .page-actions button.delete[disabled], -fieldset[disabled] .page-main-actions .page-actions button.back, -fieldset[disabled] .page-main-actions .page-actions button.action-back, -fieldset[disabled] .page-main-actions .page-actions button.delete { - cursor: not-allowed; +.admin__menu .submenu .parent > a { + color: #a79d95; + display: block; + font-size: 1.6rem; + font-weight: 600; + margin-bottom: .7rem; pointer-events: none; - opacity: 0.5; } -.ie .page-main-actions .page-actions button.back, -.ie .page-main-actions .page-actions button.action-back, -.ie .page-main-actions .page-actions button.delete { - margin-top: 6px; +.admin__menu .submenu .column { + display: table-cell; } -.page-main-actions .page-actions button.delete { - color: #e22626; - float: left; - -ms-flex-order: -1; - -webkit-order: -1; - order: -1; +.admin__menu .submenu-title { + color: #ffffff; + display: block; + font-size: 2.2rem; + font-weight: 600; + margin-bottom: 4.2rem; + margin-left: 3rem; + margin-right: 5.8rem; } -.page-main-actions .page-actions button.back, -.page-main-actions .page-actions button.action-back { - float: left; - display: inline-block; - text-decoration: none; - -ms-flex-order: -1; - -webkit-order: -1; - order: -1; +.admin__menu .submenu-sub-title { + color: #ffffff; + display: block; + font-size: 1.19rem; + margin: -3.8rem 5.8rem 3.8rem 3rem; } -.page-main-actions .page-actions button.back:before, -.page-main-actions .page-actions button.action-back:before { - font-family: 'icons-blank-theme'; - content: '\e625'; - font-size: inherit; - line-height: normal; - color: inherit; - overflow: hidden; - speak: none; - font-weight: normal; - -webkit-font-smoothing: antialiased; - display: inline-block; - vertical-align: middle; - text-align: center; - margin: 0 2px 0 0; +.admin__menu .submenu-close { + padding: 2.4rem 2.8rem; + position: absolute; + right: 0; + top: 0; } -.page-main-actions .page-actions .actions-split { - float: right; - margin-left: 13px; - -ms-flex-order: 2; - -webkit-order: 2; - order: 2; +.admin__menu .submenu-close:before { + color: #a79d95; + content: '\e62f'; + font-size: 1.7rem; } -.page-main-actions .page-actions .actions-split button.primary { - float: left; +.admin__menu .submenu-close:hover:before { + color: #ffffff; } -.page-main-actions .page-actions .actions-split .dropdown-menu { - text-align: left; +.admin__menu .item-dashboard > a:before { + content: '\e604'; + font-size: 1.8rem; + padding-top: 0.4rem; } -.page-main-actions .page-actions .actions-split .dropdown-menu .item { - display: block; +.admin__menu .item-sales > a:before { + content: '\e60b'; } -.page-main-actions .page-actions.fixed { - background: #e0dace; - background: -webkit-linear-gradient(top, #f5f2ed 0%, #f5f2ed 56%, rgba(245, 242, 237, 0) 100%); - background: -ms-linear-gradient(top, #f5f2ed 0%, #f5f2ed 56%, rgba(245, 242, 237, 0) 100%); - background: linear-gradient(to bottom, #f5f2ed 0%, #f5f2ed 56%, rgba(245, 242, 237, 0) 100%); +.admin__menu .item-catalog > a:before { + content: '\e608'; +} +.admin__menu .item-customer > a:before { + content: '\e603'; + font-size: 2.6rem; + position: relative; + top: -0.4rem; +} +.admin__menu .item-marketing > a:before { + content: '\e609'; + font-size: 2rem; + padding-top: 0.2rem; +} +.admin__menu .item-content > a:before { + content: '\e602'; + font-size: 2.4rem; + position: relative; + top: -0.2rem; +} +.admin__menu .item-report > a:before { + content: '\e60a'; +} +.admin__menu .item-stores > a:before { + content: '\e60d'; + font-size: 1.9rem; + padding-top: 0.3rem; +} +.admin__menu .item-system > a:before { + content: '\e610'; +} +.admin__menu-overlay { + bottom: 0; left: 0; - padding: 0; - position: fixed; + position: absolute; right: 0; top: 0; - z-index: 10; + z-index: 500; } -.page-main-actions .page-actions.fixed .page-actions-inner { - box-sizing: border-box; - min-height: 36px; - padding-bottom: 15px; - padding-top: 15px; +.page-footer { + background-color: #f5f5f5; + border-top: 0.1rem solid #dddddd; + color: #777777; + margin-top: auto; + padding: 2.6rem 2rem 6rem 3rem; +} +.page-footer a { + color: #ef672f; + text-decoration: underline; +} +.page-footer a:hover { + color: #ef672f; +} +.magento-version { + margin-bottom: .5rem; +} +.magento-version strong { + color: #666666; +} +.copyright { + margin-bottom: -0.2rem; position: relative; - text-align: right; } -.page-main-actions .page-actions.fixed .page-actions-inner:before, -.page-main-actions .page-actions.fixed .page-actions-inner:after { - content: ""; - display: table; +.copyright .link-copyright { + display: inline-block; + margin-right: .5rem; + text-decoration: none; + vertical-align: top; } -.page-main-actions .page-actions.fixed .page-actions-inner:after { - clear: both; +.copyright .link-copyright:hover:before { + color: #fd6e23; } -.page-main-actions .page-actions.fixed .page-actions-inner:before { - content: attr(data-title); - float: left; - font-size: 20px; - max-width: 50%; - overflow: hidden; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; +.copyright .link-copyright:before { + color: #eb5202; + content: '\e606'; + font-size: 2.5rem; + position: relative; + top: -0.2rem; } -.lt-ie10 .page-main-actions .page-actions.fixed .page-actions-inner { - background: #f5f2ed; +.footer-legal { + padding-top: 1rem; + text-align: right; } -.page-main-actions .store-switcher { - margin-top: 5px; +.locale-switcher .label { + display: block; + margin-bottom: 1rem; } -.store-switcher { - display: inline-block; - font-size: 13px; +.dashboard-data { + background: #ffffff; + font-size: 1.3rem; + width: 100%; } -.store-switcher .label { - margin-right: 5px; +.dashboard-data th, +.dashboard-data td { + padding: 1rem 0 1rem 1rem; } -.store-switcher .actions.dropdown { - display: inline-block; - position: relative; +.dashboard-data th:first-child, +.dashboard-data td:first-child { + padding-left: 0; } -.store-switcher .actions.dropdown:before, -.store-switcher .actions.dropdown:after { - content: ""; - display: table; +.dashboard-data th { + border-top: 0; } -.store-switcher .actions.dropdown:after { - clear: both; +.dashboard-main .dashboard-data th, +.dashboard-main .dashboard-data td { + text-align: right; + white-space: nowrap; + width: 15%; } -.store-switcher .actions.dropdown .action.toggle { - cursor: pointer; - display: inline-block; - text-decoration: none; +.dashboard-main .dashboard-data .col-name { + text-align: left; + white-space: normal; + width: 55%; } -.store-switcher .actions.dropdown .action.toggle:after { - font-family: 'MUI-Icons'; - content: '\e02c'; - font-size: 13px; - line-height: 20px; - color: #645d53; - overflow: hidden; - speak: none; - font-weight: normal; - -webkit-font-smoothing: antialiased; - display: inline-block; - vertical-align: top; - text-align: center; - margin: 0; +.dashboard-main .dashboard-data .col-product { + width: 70%; } -.store-switcher .actions.dropdown .action.toggle:hover:after { - color: #645d53; +.dashboard-main .dashboard-data .col-orders_count { + text-align: left; } -.store-switcher .actions.dropdown .action.toggle:active:after { - color: #645d53; +.dashboard-secondary .dashboard-data .col-popularity, +.dashboard-secondary .dashboard-data .col-total { + text-align: right; + width: 21.27659574%; } -.store-switcher .actions.dropdown .action.toggle.active { - display: inline-block; - text-decoration: none; +.dashboard-secondary .dashboard-data .col-customer, +.dashboard-secondary .dashboard-data .col-search_query { + width: 57.44680851%; } -.store-switcher .actions.dropdown .action.toggle.active:after { - font-family: 'MUI-Icons'; - content: '\e02c'; - font-size: 13px; - line-height: 20px; - color: #645d53; - overflow: hidden; - speak: none; - font-weight: normal; - -webkit-font-smoothing: antialiased; - display: inline-block; - vertical-align: top; - text-align: center; - margin: 0; +.dashboard-container .empty-text { + background: #ffffff; + font-size: 1.3rem; } -.store-switcher .actions.dropdown .action.toggle.active:hover:after { - color: #645d53; +.dashboard-diagram-disabled { + padding: .5rem 2rem 2rem; } -.store-switcher .actions.dropdown .action.toggle.active:active:after { - color: #645d53; +.dashboard-diagram-switcher { + margin-bottom: 2rem; } -.store-switcher .actions.dropdown .dropdown-menu { - margin: 0; - padding: 0; - list-style: none none; - box-sizing: border-box; - background: #ffffff; - border: 1px solid #ada89e; - position: absolute; - z-index: 100; - top: 100%; - min-width: 195px; - margin-top: 4px; - display: none; - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15); +.dashboard-diagram-image { + max-width: 100%; } -.store-switcher .actions.dropdown .dropdown-menu li { - margin: 0; - padding: 0; +.dashboard-totals { + margin: 1rem 2rem 6rem; } -.store-switcher .actions.dropdown .dropdown-menu li:hover { - background: transparent; - cursor: pointer; +.dashboard-totals-list { + display: table; + width: 100%; } -.store-switcher .actions.dropdown.active { - overflow: visible; +.dashboard-totals-item { + display: table-cell; + padding: 0 1rem 0 0; + width: 25%; } -.store-switcher .actions.dropdown.active .dropdown-menu { +.dashboard-totals-item:first-child .price { + color: #eb5202; +} +.dashboard-totals-label { display: block; + font-size: 1.3rem; + font-weight: 700; } -.store-switcher .actions.dropdown .action.toggle, -.store-switcher .actions.dropdown button.toggle { - background-image: none; - background: none; - border: 0; - margin: 0; - padding: 0; - -moz-box-sizing: content-box; - box-shadow: none; - text-shadow: none; - text-decoration: none; - line-height: inherit; - font-weight: 400; - color: #007bdb; - font-size: 13px; - line-height: normal; - margin-top: 0; - vertical-align: middle; +.dashboard-totals-value { + font-size: 2.4rem; + font-weight: 600; } -.store-switcher .actions.dropdown .action.toggle:focus, -.store-switcher .actions.dropdown .action.toggle:active, -.store-switcher .actions.dropdown button.toggle:focus, -.store-switcher .actions.dropdown button.toggle:active { - background: none; - border: none; +.dashboard-store-stats .ui-tabs { + position: relative; } -.store-switcher .actions.dropdown .action.toggle:hover, -.store-switcher .actions.dropdown button.toggle:hover { - background: none; - border: none; +.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; + width: 2rem; } -.store-switcher .actions.dropdown .action.toggle.disabled, -.store-switcher .actions.dropdown .action.toggle[disabled], -fieldset[disabled] .store-switcher .actions.dropdown .action.toggle, -.store-switcher .actions.dropdown button.toggle.disabled, -.store-switcher .actions.dropdown button.toggle[disabled], -fieldset[disabled] .store-switcher .actions.dropdown button.toggle { - cursor: not-allowed; - pointer-events: none; - opacity: 0.5; +.dashboard-store-stats .ui-tabs-panel { + background: url(../images/ajax-loader-small.gif) no-repeat 50% 50%; + min-height: 6rem; } -.store-switcher .actions.dropdown ul.dropdown-menu { - left: 0; - margin-top: 4px; - padding-top: 5px; +.dashboard-store-stats .tabs-horiz { + border-right: 1px solid #ffffff; + float: left; + overflow-x: auto; + white-space: nowrap; + width: 100%; } -.store-switcher .actions.dropdown ul.dropdown-menu li { - border: 0; - cursor: default; +.dashboard-store-stats .tabs-horiz .ui-state-default { + display: inline-block; + float: none; + margin-right: .1rem; } -.store-switcher .actions.dropdown ul.dropdown-menu li:hover { - cursor: default; +.dashboard-container .dashboard-secondary { + padding-right: 3.5rem; } -.store-switcher .actions.dropdown ul.dropdown-menu li a, -.store-switcher .actions.dropdown ul.dropdown-menu li span { - color: #645d53; - display: block; - padding: 5px 13px; +.dashboard-item { + margin-bottom: 3rem; } -.store-switcher .actions.dropdown ul.dropdown-menu li a { - text-decoration: none; +.dashboard-item-title { + font-size: 1.8rem; + font-weight: 700; } -.store-switcher .actions.dropdown ul.dropdown-menu li a:hover { - background: #edf9fb; +.dashboard-item-primary:first-child .dashboard-sales-value { + color: #eb5202; } -.store-switcher .actions.dropdown ul.dropdown-menu li span { - color: #ababab; - cursor: default; +.dashboard-sales-value { + font-size: 2.4rem; + font-weight: 600; } -.store-switcher .actions.dropdown ul.dropdown-menu li.current span { - background: #eee; - color: #645d53; +@font-face { + font-family: 'MUI-Icons'; + src: url('../fonts/MUI-Icons/MUI-Icons.eot'); + src: url('../fonts/MUI-Icons/MUI-Icons.eot?#iefix') format('embedded-opentype'), url('../fonts/MUI-Icons/MUI-Icons.woff2') format('woff2'), url('../fonts/MUI-Icons/MUI-Icons.woff') format('woff'), url('../fonts/MUI-Icons/MUI-Icons.ttf') format('truetype'), url('../fonts/MUI-Icons/MUI-Icons.svg#MUI-Icons') format('svg'); + font-weight: 300; + font-style: normal; } -.store-switcher .actions.dropdown ul.dropdown-menu .store-switcher-store a, -.store-switcher .actions.dropdown ul.dropdown-menu .store-switcher-store span { - padding-left: 26px; +.page-header { + padding-left: 15px; + padding-right: 15px; + text-align: right; } -.store-switcher .actions.dropdown ul.dropdown-menu .store-switcher-store-view a, -.store-switcher .actions.dropdown ul.dropdown-menu .store-switcher-store-view span { - padding-left: 39px; +.page-header:after { + content: ""; + display: table; + clear: both; } -.store-switcher .actions.dropdown ul.dropdown-menu .dropdown-toolbar { - border-top: 1px solid #ededed; - margin-top: 10px; +.page-header-wrapper { + background-color: #31302b; } -.store-switcher .actions.dropdown ul.dropdown-menu .dropdown-toolbar a { - display: block; +.page-header .logo { display: inline-block; + float: left; + margin-top: 5px; text-decoration: none; } -.store-switcher .actions.dropdown ul.dropdown-menu .dropdown-toolbar a:before { - font-family: 'icons-blank-theme'; - content: '\e606'; - font-size: 20px; - line-height: normal; - color: inherit; - overflow: hidden; - speak: none; - font-weight: normal; - -webkit-font-smoothing: antialiased; +.page-header .logo:before { + background-image: url('../images/logo-admin.svg'); + background-repeat: no-repeat; + background-size: 109px 70px; + content: ''; display: inline-block; - vertical-align: text-top; - text-align: center; - margin: 0 3px 0 -4px; + height: 35px; + vertical-align: middle; + width: 109px; } -.notifications-summary { +.page-header .logo:after { + color: #ef672f; + content: attr(data-edition); + display: inline-block; + font-size: 16px; + font-weight: 600; + margin-left: 10px; + margin-top: -2px; + vertical-align: middle; +} +.page-header .logo span { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.page-header .dropdown-menu { + border: 0; +} +.page-title { + margin: 20px 0; + position: relative; +} +.admin-user { display: inline-block; position: relative; text-align: left; - z-index: 1; -} -.notifications-summary.active { - z-index: 999; + vertical-align: top; } -.notifications-action { - background: none; +.admin-user-account { color: #f2ebde; display: inline-block; text-decoration: none; - padding: 12px 22px; - text-transform: capitalize; + padding: 12px 14px; } -.notifications-action:before { +.admin-user-account:after { font-family: 'MUI-Icons'; - content: '\e06e'; - font-size: 18px; - line-height: 18px; + content: '\e02c'; + font-size: 13px; + line-height: 13px; color: inherit; overflow: hidden; speak: none; @@ -2621,21 +2733,97 @@ fieldset[disabled] .store-switcher .actions.dropdown button.toggle { display: inline-block; vertical-align: middle; text-align: center; + margin: -3px 0 0; } -.notifications-action:visited, -.notifications-action:focus, -.notifications-action:active, -.notifications-action:hover { - background: none; - box-shadow: none !important; +.admin-user-account:link, +.admin-user-account:visited { + color: #f2ebde; +} +.admin-user-account:focus, +.admin-user-account:active, +.admin-user-account:hover { color: #f2ebde; text-decoration: none; } -.notifications-action.active { - background-color: #fff; +.admin-user.active .admin-user-account { + background-color: #ffffff; color: #676056; } -.notifications-action .text { +.admin-user.active .admin-user-menu { + display: block; +} +.admin-user-menu { + background: #fff; + border: 1px solid #cac2b5; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + display: none; + list-style: none; + margin: 0; + min-width: 100px; + padding: 15px; + position: absolute; + right: 0; + top: 100%; + white-space: nowrap; + z-index: 990; +} +.admin-user-menu li { + border: 0; + padding: 0; +} +.admin-user-menu li:hover { + background: transparent; +} +.admin-user-menu a { + color: #676056; + display: block; + font-size: 13px; + font-weight: 400; + line-height: 1.385; + padding: 3px 12px 3px; + text-decoration: none; +} +.admin-user-menu a span:before { + content: '('; +} +.admin-user-menu a span:after { + content: ')'; +} +.admin-user-menu a:focus, +.admin-user-menu a:hover { + text-decoration: underline; +} +.admin-user-menu a:hover { + background: #989287; + color: #ffffff; + text-decoration: none; +} +.search-global.miniform { + display: inline-block; + margin: 6px 10px 0; + position: relative; + vertical-align: top; + z-index: 499; +} +.search-global.miniform .mage-suggest { + border: 0; + border-radius: 0; +} +.search-global-actions { + display: none; +} +.search-global-field { + margin: 0; +} +.search-global-field .label { + cursor: pointer; + display: inline-block; + text-decoration: none; + position: absolute; + right: 4px; + z-index: 2; +} +.search-global-field .label > span { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -2645,61 +2833,96 @@ fieldset[disabled] .store-switcher .actions.dropdown button.toggle { position: absolute; width: 1px; } -.notifications-action .qty.counter { - background: #ed4f2e; - border-radius: 4px; - color: #f2ebde; +.search-global-field .label:before { + font-family: 'MUI-Icons'; + content: '\e01f'; + font-size: 18px; + line-height: 29px; + color: #cac3b4; + overflow: hidden; + speak: none; + font-weight: normal; + -webkit-font-smoothing: antialiased; display: inline-block; - font-size: 12px; - font-weight: bold; - left: 50%; - line-height: 12px; - padding: 1px 3px; - position: absolute; - top: 6px; + vertical-align: middle; + text-align: center; } -.notifications-list { - margin: 0; - padding: 0; +.search-global-field .control { + opacity: 0; + overflow: hidden; + transition: all .3s ease; + width: 48px; +} +.search-global-field .control input[type='text'] { + background: transparent; + border: none; + height: 30px; + width: 100%; +} +.search-global-field.active { + z-index: 2; +} +.search-global-field.active .label:before { + display: none; +} +.search-global-field.active .control { + opacity: 1; + overflow: visible; + transition: all .3s ease; width: 300px; } -.notifications-list .last { - font-size: 12px; - padding: 10px; - text-align: center; +.search-global-menu { + box-sizing: border-box; + display: block; + width: 100%; +} +.page-main-actions { + background: #f5f5f5; + border-bottom: .1rem solid #ddd; + border-top: .1rem solid #ddd; + box-sizing: border-box; + color: #645d53; + margin-bottom: 4rem; + margin-left: auto; + margin-right: auto; + padding: 15px; +} +.page-main-actions:before, +.page-main-actions:after { + content: ""; + display: table; +} +.page-main-actions:after { + clear: both; } -.notifications-summary .notifications-entry { - color: #676056; - font-size: 11px; - font-weight: 400; - padding: 15px; +.page-main-actions .page-actions { + float: right; } -.notifications-entry { - position: relative; - z-index: 1; +.page-main-actions .page-actions .page-actions-buttons { + float: right; + justify-content: flex-end; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } -.notifications-entry:hover .action, -.notifications-entry:hover button { - display: block; +.page-main-actions .page-actions button { + margin-left: 13px; } -.notifications-entry-title { - color: #ed4f2e; - display: block; - font-size: 12px; - font-weight: 600; - margin-bottom: 10px; - padding-right: 15px; +.page-main-actions .page-actions button.primary { + float: right; + -ms-flex-order: 2; + -webkit-order: 2; + order: 2; } -.notifications-entry-description { - display: block; - line-height: 1.3; - margin-bottom: 10px; - max-height: 3.9em; - overflow: hidden; - text-overflow: ellipsis; +.page-main-actions .page-actions button.save:not(.primary) { + float: right; + -ms-flex-order: 1; + -webkit-order: 1; + order: 1; } -.notifications-close.action, -.notifications-closebutton { +.page-main-actions .page-actions button.back, +.page-main-actions .page-actions button.action-back, +.page-main-actions .page-actions button.delete { background-image: none; background: none; border: 0; @@ -2708,55 +2931,66 @@ fieldset[disabled] .store-switcher .actions.dropdown button.toggle { -moz-box-sizing: content-box; box-shadow: none; text-shadow: none; + text-decoration: none; line-height: inherit; font-weight: 400; - display: none; - display: inline-block; - text-decoration: none; - position: absolute; - right: 12px; - top: 12px; - z-index: 1; + margin: 0 13px; } -.notifications-close.action:focus, -.notifications-close.action:active, -.notifications-closebutton:focus, -.notifications-closebutton:active { +.page-main-actions .page-actions button.back:focus, +.page-main-actions .page-actions button.action-back:focus, +.page-main-actions .page-actions button.delete:focus, +.page-main-actions .page-actions button.back:active, +.page-main-actions .page-actions button.action-back:active, +.page-main-actions .page-actions button.delete:active { background: none; border: none; } -.notifications-close.action:hover, -.notifications-closebutton:hover { +.page-main-actions .page-actions button.back:hover, +.page-main-actions .page-actions button.action-back:hover, +.page-main-actions .page-actions button.delete:hover { background: none; border: none; } -.notifications-close.action.disabled, -.notifications-close.action[disabled], -fieldset[disabled] .notifications-close.action, -.notifications-closebutton.disabled, -.notifications-closebutton[disabled], -fieldset[disabled] .notifications-closebutton { +.page-main-actions .page-actions button.back.disabled, +.page-main-actions .page-actions button.action-back.disabled, +.page-main-actions .page-actions button.delete.disabled, +.page-main-actions .page-actions button.back[disabled], +.page-main-actions .page-actions button.action-back[disabled], +.page-main-actions .page-actions button.delete[disabled], +fieldset[disabled] .page-main-actions .page-actions button.back, +fieldset[disabled] .page-main-actions .page-actions button.action-back, +fieldset[disabled] .page-main-actions .page-actions button.delete { cursor: not-allowed; pointer-events: none; opacity: 0.5; } -.notifications-close.action > span, -.notifications-closebutton > span { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; +.ie .page-main-actions .page-actions button.back, +.ie .page-main-actions .page-actions button.action-back, +.ie .page-main-actions .page-actions button.delete { + margin-top: 6px; } -.notifications-close.action:before, -.notifications-closebutton:before { - font-family: 'MUI-Icons'; - content: '\e07f'; - font-size: 16px; - line-height: inherit; +.page-main-actions .page-actions button.delete { + color: #e22626; + float: left; + -ms-flex-order: -1; + -webkit-order: -1; + order: -1; +} +.page-main-actions .page-actions button.back, +.page-main-actions .page-actions button.action-back { + float: left; + display: inline-block; + text-decoration: none; + -ms-flex-order: -1; + -webkit-order: -1; + order: -1; +} +.page-main-actions .page-actions button.back:before, +.page-main-actions .page-actions button.action-back:before { + font-family: 'icons-blank-theme'; + content: '\e625'; + font-size: inherit; + line-height: normal; color: inherit; overflow: hidden; speak: none; @@ -2765,343 +2999,487 @@ fieldset[disabled] .notifications-closebutton { display: inline-block; vertical-align: middle; text-align: center; + margin: 0 2px 0 0; } -.notifications-dialog-content { - display: none; +.page-main-actions .page-actions .actions-split { + float: right; + margin-left: 13px; + -ms-flex-order: 2; + -webkit-order: 2; + order: 2; } -.notifications-critical .notifications-entry-title { - display: inline-block; - text-decoration: none; - padding-left: 25px; +.page-main-actions .page-actions .actions-split button.primary { + float: left; } -.notifications-critical .notifications-entry-title:before { - font-family: 'MUI-Icons'; - content: '\e086'; - font-size: 18px; - line-height: 18px; - color: #c00815; +.page-main-actions .page-actions .actions-split .dropdown-menu { + text-align: left; +} +.page-main-actions .page-actions .actions-split .dropdown-menu .item { + display: block; +} +.page-main-actions .page-actions.fixed { + background: #e0dace; + background: -webkit-linear-gradient(top, #f5f2ed 0%, #f5f2ed 56%, rgba(245, 242, 237, 0) 100%); + background: -ms-linear-gradient(top, #f5f2ed 0%, #f5f2ed 56%, rgba(245, 242, 237, 0) 100%); + background: linear-gradient(to bottom, #f5f2ed 0%, #f5f2ed 56%, rgba(245, 242, 237, 0) 100%); + left: 0; + padding: 0; + position: fixed; + right: 0; + top: 0; + z-index: 10; +} +.page-main-actions .page-actions.fixed .page-actions-inner { + box-sizing: border-box; + min-height: 36px; + padding-bottom: 15px; + padding-top: 15px; + position: relative; + text-align: right; +} +.page-main-actions .page-actions.fixed .page-actions-inner:before, +.page-main-actions .page-actions.fixed .page-actions-inner:after { + content: ""; + display: table; +} +.page-main-actions .page-actions.fixed .page-actions-inner:after { + clear: both; +} +.page-main-actions .page-actions.fixed .page-actions-inner:before { + content: attr(data-title); + float: left; + font-size: 20px; + max-width: 50%; overflow: hidden; - speak: none; - font-weight: normal; - -webkit-font-smoothing: antialiased; - display: inline-block; - vertical-align: middle; - text-align: center; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; } -.notifications-critical .notifications-entry-title:before { - margin-left: -25px; - position: absolute; +.lt-ie10 .page-main-actions .page-actions.fixed .page-actions-inner { + background: #f5f2ed; } -.notifications-dialog-content .notifications-entry-time { - bottom: 27px; - color: #8c867e; - font-family: Helvetica, Arial, sans-serif; +.page-main-actions .store-switcher { + margin-top: 5px; +} +.store-switcher { + display: inline-block; font-size: 13px; - position: absolute; - right: 17px; - text-align: right; } -.notifications-url { +.store-switcher .label { + margin-right: 5px; +} +.store-switcher .actions.dropdown { display: inline-block; - text-decoration: none; + position: relative; } -.notifications-url > span { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; +.store-switcher .actions.dropdown:before, +.store-switcher .actions.dropdown:after { + content: ""; + display: table; } -.notifications-url:after { +.store-switcher .actions.dropdown:after { + clear: both; +} +.store-switcher .actions.dropdown .action.toggle { + cursor: pointer; + display: inline-block; + text-decoration: none; +} +.store-switcher .actions.dropdown .action.toggle:after { font-family: 'MUI-Icons'; - content: '\e084'; - font-size: 16px; - line-height: inherit; - color: inherit; + content: '\e02c'; + font-size: 13px; + line-height: 20px; + color: #645d53; overflow: hidden; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; display: inline-block; - vertical-align: middle; + vertical-align: top; text-align: center; - margin: -2px 0 0 10px; + margin: 0; } -.notifications-dialog-content .notifications-entry-title { - font-size: 15px; +.store-switcher .actions.dropdown .action.toggle:hover:after { + color: #645d53; } -.tooltip { - display: inline-block; - margin-left: 5px; +.store-switcher .actions.dropdown .action.toggle:active:after { + color: #645d53; } -.tooltip .help span, -.tooltip .help a { - cursor: pointer; +.store-switcher .actions.dropdown .action.toggle.active { display: inline-block; - height: 22px; - position: relative; - vertical-align: middle; - width: 22px; - z-index: 2; + text-decoration: none; } -.tooltip .help span:before, -.tooltip .help a:before { - background-color: #514943; - border-radius: 11px; - color: #fff; - content: '?'; - display: inline-block; - font-size: 18px; - font-weight: 500; - height: 22px; - line-height: 22px; +.store-switcher .actions.dropdown .action.toggle.active:after { + font-family: 'MUI-Icons'; + content: '\e02c'; + font-size: 13px; + line-height: 20px; + color: #645d53; overflow: hidden; + speak: none; + font-weight: normal; + -webkit-font-smoothing: antialiased; + display: inline-block; + vertical-align: top; text-align: center; - width: 22px; + margin: 0; } -.tooltip .help span span, -.tooltip .help a span { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; +.store-switcher .actions.dropdown .action.toggle.active:hover:after { + color: #645d53; +} +.store-switcher .actions.dropdown .action.toggle.active:active:after { + color: #645d53; +} +.store-switcher .actions.dropdown .dropdown-menu { + margin: 0; padding: 0; + list-style: none none; + box-sizing: border-box; + background: #ffffff; + border: 1px solid #ada89e; position: absolute; - width: 1px; -} -.tooltip .tooltip-content { - background: #000; - background: rgba(49, 48, 43, 0.8); - border-radius: 3px; - color: #fff; + z-index: 100; + top: 100%; + min-width: 195px; + margin-top: 4px; display: none; - margin-left: -19px; - margin-top: 10px; - max-width: 200px; - padding: 4px 8px; - position: absolute; - text-shadow: none; - z-index: 20; + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15); } -.tooltip .tooltip-content:before { - border-bottom: 5px solid #000; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - content: ''; - height: 0; - left: 20px; - opacity: .8; - position: absolute; - top: -5px; - width: 0; +.store-switcher .actions.dropdown .dropdown-menu li { + margin: 0; + padding: 0; } -.tooltip .tooltip-content.loading { - position: absolute; +.store-switcher .actions.dropdown .dropdown-menu li:hover { + background: transparent; + cursor: pointer; } -.tooltip .tooltip-content.loading:before { - border-bottom-color: rgba(0, 0, 0, 0.3); +.store-switcher .actions.dropdown.active { + overflow: visible; } -.tooltip:hover > .tooltip-content { +.store-switcher .actions.dropdown.active .dropdown-menu { display: block; } -.col-2-left-layout { - margin-top: 50px; - margin-left: -30px; - width: auto; +.store-switcher .actions.dropdown .action.toggle, +.store-switcher .actions.dropdown button.toggle { + background-image: none; + background: none; + border: 0; + margin: 0; + padding: 0; + -moz-box-sizing: content-box; + box-shadow: none; + text-shadow: none; + text-decoration: none; + line-height: inherit; + font-weight: 400; + color: #007bdb; + font-size: 13px; + line-height: normal; + margin-top: 0; + vertical-align: middle; } -.col-2-left-layout:before, -.col-2-left-layout:after { - content: ""; - display: table; +.store-switcher .actions.dropdown .action.toggle:focus, +.store-switcher .actions.dropdown .action.toggle:active, +.store-switcher .actions.dropdown button.toggle:focus, +.store-switcher .actions.dropdown button.toggle:active { + background: none; + border: none; } -.col-2-left-layout:after { - clear: both; +.store-switcher .actions.dropdown .action.toggle:hover, +.store-switcher .actions.dropdown button.toggle:hover { + background: none; + border: none; } -.col-2-left-layout .main-col { - float: left; - width: ~" calc( (100%) * 0.75 - 30px )"; - margin-left: 30px; - float: right; +.store-switcher .actions.dropdown .action.toggle.disabled, +.store-switcher .actions.dropdown .action.toggle[disabled], +fieldset[disabled] .store-switcher .actions.dropdown .action.toggle, +.store-switcher .actions.dropdown button.toggle.disabled, +.store-switcher .actions.dropdown button.toggle[disabled], +fieldset[disabled] .store-switcher .actions.dropdown button.toggle { + cursor: not-allowed; + pointer-events: none; + opacity: 0.5; } -.col-2-left-layout .side-col { - float: left; - width: ~" calc( (100%) * 0.25 - 30px )"; - margin-left: 30px; +.store-switcher .actions.dropdown ul.dropdown-menu { + left: 0; + margin-top: 4px; + padding-top: 5px; } -.admin__fieldset-wrapper-title { - padding: 14px 0 16px; - margin-bottom: 30px; +.store-switcher .actions.dropdown ul.dropdown-menu li { + border: 0; + cursor: default; } -.admin__block { - width: 100%; - border: 1px solid black; +.store-switcher .actions.dropdown ul.dropdown-menu li:hover { + cursor: default; } -.admin__fieldset { - margin: 0; - padding: 0; - border: 0; - min-width: 0; +.store-switcher .actions.dropdown ul.dropdown-menu li a, +.store-switcher .actions.dropdown ul.dropdown-menu li span { + color: #645d53; + display: block; + padding: 5px 13px; } -.admin__fieldset > .admin__field { - border: 0; - padding: 0; - margin: 0; - margin-left: -30px; +.store-switcher .actions.dropdown ul.dropdown-menu li a { + text-decoration: none; } -.admin__fieldset > .admin__field:before, -.admin__fieldset > .admin__field:after { - content: ""; - display: table; +.store-switcher .actions.dropdown ul.dropdown-menu li a:hover { + background: #edf9fb; } -.admin__fieldset > .admin__field:after { - clear: both; +.store-switcher .actions.dropdown ul.dropdown-menu li span { + color: #ababab; + cursor: default; } -.admin__fieldset > .admin__field > .admin__field-control { - float: left; - width: ~" calc( (100%) * 0.4444444444444444 - 30px )"; - margin-left: 30px; +.store-switcher .actions.dropdown ul.dropdown-menu li.current span { + background: #eee; + color: #645d53; } -.admin__fieldset > .admin__field > .admin__field-label { - float: left; - width: ~" calc( (100%) * 0.3333333333333333 - 30px )"; - margin-left: 30px; +.store-switcher .actions.dropdown ul.dropdown-menu .store-switcher-store a, +.store-switcher .actions.dropdown ul.dropdown-menu .store-switcher-store span { + padding-left: 26px; +} +.store-switcher .actions.dropdown ul.dropdown-menu .store-switcher-store-view a, +.store-switcher .actions.dropdown ul.dropdown-menu .store-switcher-store-view span { + padding-left: 39px; +} +.store-switcher .actions.dropdown ul.dropdown-menu .dropdown-toolbar { + border-top: 1px solid #ededed; + margin-top: 10px; +} +.store-switcher .actions.dropdown ul.dropdown-menu .dropdown-toolbar a { + display: block; + display: inline-block; + text-decoration: none; +} +.store-switcher .actions.dropdown ul.dropdown-menu .dropdown-toolbar a:before { + font-family: 'icons-blank-theme'; + content: '\e606'; + font-size: 20px; + line-height: normal; + color: inherit; + overflow: hidden; + speak: none; + font-weight: normal; + -webkit-font-smoothing: antialiased; + display: inline-block; + vertical-align: text-top; + text-align: center; + margin: 0 3px 0 -4px; } -.admin__field-label { - margin: 0; - color: #303030; - text-align: right; +.notifications-summary { + display: inline-block; + position: relative; + text-align: left; + z-index: 1; } -.admin__field-label + br { - display: none; +.notifications-summary.active { + z-index: 999; } -[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; +.notifications-action { + background: none; + color: #f2ebde; + display: inline-block; + text-decoration: none; + padding: 12px 22px; + text-transform: capitalize; } -[class]:not(.admin__field-option) > .admin__field-label:before { - content: "."; - visibility: hidden; - width: 0; - margin-left: -7px; +.notifications-action:before { + font-family: 'MUI-Icons'; + content: '\e06e'; + font-size: 18px; + line-height: 18px; + color: inherit; overflow: hidden; -} -[class]:not(.admin__field-option) > .admin__field-label span { - white-space: normal; + speak: none; + font-weight: normal; + -webkit-font-smoothing: antialiased; display: inline-block; vertical-align: middle; - line-height: 1.2; + text-align: center; } -._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; +.notifications-action:visited, +.notifications-action:focus, +.notifications-action:active, +.notifications-action:hover { + background: none; + box-shadow: none !important; + color: #f2ebde; + text-decoration: none; } -._disabled > .admin__field-label { - color: #999999; +.notifications-action.active { + background-color: #fff; + color: #676056; } -.admin__field { - margin-bottom: 0; +.notifications-action .text { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } -.admin__field + .admin__field { - margin-top: 15px; +.notifications-action .qty.counter { + background: #ed4f2e; + border-radius: 4px; + color: #f2ebde; + display: inline-block; + font-size: 12px; + font-weight: bold; + left: 50%; + line-height: 12px; + padding: 1px 3px; + position: absolute; + top: 6px; } -.admin__field:not(.admin__field-option) ~ .admin__field-option { - margin-left: 20px; - margin-top: 5px; +.notifications-list { + margin: 0; + padding: 0; + width: 300px; } -.admin__field.admin__field-option ~ .admin__field-option { - margin-top: 9px; +.notifications-list .last { + font-size: 12px; + padding: 10px; + text-align: center; } -.admin__field ~ .admin__field-option:last-child { - margin-bottom: 8px; +.notifications-summary .notifications-entry { + color: #676056; + font-size: 11px; + font-weight: 400; + padding: 15px; } -.admin__fieldset > .admin__field { - margin-bottom: 30px; +.notifications-entry { position: relative; z-index: 1; } -.admin__fieldset > .admin__field:hover { - z-index: 2; +.notifications-entry:hover .action, +.notifications-entry:hover button { + display: block; } -.admin__field[data-config-scope]:before { - float: left; - width: ~" calc( (100%) * 0.16666666666666666 - 30px )"; - margin-left: 30px; - position: absolute; - right: 0; +.notifications-entry-title { + color: #ed4f2e; + display: block; + font-size: 12px; + font-weight: 600; + margin-bottom: 10px; + padding-right: 15px; +} +.notifications-entry-description { + display: block; + line-height: 1.3; + margin-bottom: 10px; + max-height: 3.9em; + overflow: hidden; + text-overflow: ellipsis; +} +.notifications-close.action, +.notifications-closebutton { + 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: none; display: inline-block; - content: attr(data-config-scope); - float: right; - color: #808080; + text-decoration: none; + position: absolute; + right: 12px; + top: 12px; + z-index: 1; } -.admin__field-control .admin__field[data-config-scope]:nth-child(n+2):before { - content: ""; +.notifications-close.action:focus, +.notifications-close.action:active, +.notifications-closebutton:focus, +.notifications-closebutton:active { + background: none; + border: none; } -.admin__field._error .admin__field-control [class*="admin__addon-"]:before, -.admin__field._error .admin__field-control > [class*="admin__control-"] { - border-color: #e22626; +.notifications-close.action:hover, +.notifications-closebutton:hover { + background: none; + border: none; } -.admin__field-error { - border: 1px solid #e22626; - display: block; - margin: 2px 0 0; - padding: 6px 10px 10px; - background: #fff8d6; - color: #555555; - font-size: 12px; - font-weight: 500; - box-sizing: border-box; +.notifications-close.action.disabled, +.notifications-close.action[disabled], +fieldset[disabled] .notifications-close.action, +.notifications-closebutton.disabled, +.notifications-closebutton[disabled], +fieldset[disabled] .notifications-closebutton { + cursor: not-allowed; + pointer-events: none; + opacity: 0.5; } -.admin__field-note { - color: #303030; +.notifications-close.action > span, +.notifications-closebutton > span { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; padding: 0; - margin: 10px 0 0; -} -.admin__control-fields .admin__field-label ~ .admin__field-control { - width: 100%; + position: absolute; + width: 1px; } -.admin__field-option { - padding-top: 8px; +.notifications-close.action:before, +.notifications-closebutton:before { + font-family: 'MUI-Icons'; + content: '\e07f'; + font-size: 16px; + line-height: inherit; + color: inherit; + overflow: hidden; + speak: none; + font-weight: normal; + -webkit-font-smoothing: antialiased; + display: inline-block; + vertical-align: middle; + text-align: center; } -.admin__field-option .admin__field-label { - text-align: left; +.notifications-dialog-content { + display: none; } -.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) { +.notifications-critical .notifications-entry-title { display: inline-block; + text-decoration: none; + padding-left: 25px; } -.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 { +.notifications-critical .notifications-entry-title:before { + font-family: 'MUI-Icons'; + content: '\e086'; + font-size: 18px; + line-height: 18px; + color: #c00815; + overflow: hidden; + speak: none; + font-weight: normal; + -webkit-font-smoothing: antialiased; display: inline-block; - margin-left: 41px; - margin-top: 0; + vertical-align: middle; + text-align: center; } -.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: ""; +.notifications-critical .notifications-entry-title:before { + margin-left: -25px; + position: absolute; +} +.notifications-dialog-content .notifications-entry-time { + bottom: 27px; + color: #8c867e; + font-family: Helvetica, Arial, sans-serif; + font-size: 13px; position: absolute; + right: 17px; + text-align: right; +} +.notifications-url { display: inline-block; - height: 20px; - top: 8px; - left: -20px; - width: 1px; - background: #cccccc; + text-decoration: none; } -.admin__control-fields .admin__field:nth-child(n+2):not(.admin__field-option) > .admin__field-label { +.notifications-url > span { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -3111,25 +3489,55 @@ fieldset[disabled] .notifications-closebutton { position: absolute; width: 1px; } -[class*="admin__control-grouped"] { - display: table; - width: 100%; - table-layout: fixed; - box-sizing: border-box; +.notifications-url:after { + font-family: 'MUI-Icons'; + content: '\e084'; + font-size: 16px; + line-height: inherit; + color: inherit; + overflow: hidden; + speak: none; + font-weight: normal; + -webkit-font-smoothing: antialiased; + display: inline-block; + vertical-align: middle; + text-align: center; + margin: -2px 0 0 10px; } -[class*="admin__control-grouped"] > .admin__field { - display: table-cell; - width: 50%; - vertical-align: top; +.notifications-dialog-content .notifications-entry-title { + font-size: 15px; } -[class*="admin__control-grouped"] > .admin__field > .admin__field-control { - width: 100%; - float: none; +.tooltip { + display: inline-block; + margin-left: 5px; } -[class*="admin__control-grouped"] > .admin__field:nth-child(n+2) { - padding-left: 20px; +.tooltip .help span, +.tooltip .help a { + cursor: pointer; + display: inline-block; + height: 22px; + position: relative; + vertical-align: middle; + width: 22px; + z-index: 2; } -[class*="admin__control-grouped"] > .admin__field:nth-child(n+2):not(.admin__field-option) .admin__field-label { +.tooltip .help span:before, +.tooltip .help a:before { + background-color: #514943; + border-radius: 11px; + color: #fff; + content: '?'; + display: inline-block; + font-size: 18px; + font-weight: 500; + height: 22px; + line-height: 22px; + overflow: hidden; + text-align: center; + width: 22px; +} +.tooltip .help span span, +.tooltip .help a span { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -3139,65 +3547,40 @@ fieldset[disabled] .notifications-closebutton { position: absolute; width: 1px; } -[class*="admin__control-grouped"] > .admin__field:first-child, -.admin__control-fields > .admin__field:first-child { - position: static; -} -[class*="admin__control-grouped"] > .admin__field:first-child > .admin__field-label, -.admin__control-fields > .admin__field:first-child > .admin__field-label { +.tooltip .tooltip-content { + background: #000; + background: rgba(49, 48, 43, 0.8); + border-radius: 3px; + color: #fff; + display: none; + margin-left: -19px; + margin-top: 10px; + max-width: 200px; + padding: 4px 8px; position: absolute; - left: 0; - top: 0; - float: left; - width: ~" calc( (100%) * 0.25 - 30px )"; - margin-left: 30px; - opacity: 0; - cursor: pointer; -} -.address-item-edit-content { - padding: 15px 30px; -} -.address-item-edit-content .admin__field > .admin__field-control, -.address-item-edit-content .admin__field > .admin__field-label { - text-align: left; - float: none; -} -.address-item-edit-content .admin__field > .admin__field-control { - width: ~" calc( 100% - 30px )"; -} -.address-item-edit-content .admin__field-label { - margin-top: -16px; -} -.address-item-edit-content ._required .admin__field-label span { - padding-left: 15px; -} -.address-item-edit-content ._required .admin__field-label span:after { - left: 0; - margin-left: 30px; -} -.address-list { - list-style-type: none; - margin: 0; - padding: 0; - width: 360px; - float: left; -} -.address-list .address-list-item { - margin-bottom: 30px; + text-shadow: none; + z-index: 20; } -.address-list .action-delete { - background-color: transparent; - padding: 0; +.tooltip .tooltip-content:before { + border-bottom: 5px solid #000; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + content: ''; + height: 0; + left: 20px; + opacity: .8; + position: absolute; + top: -5px; + width: 0; } -.address-list .action-delete:hover { - box-shadow: 0; - border: 0; +.tooltip .tooltip-content.loading { + position: absolute; } -.address-item-edit { - margin-left: 359px; +.tooltip .tooltip-content.loading:before { + border-bottom-color: rgba(0, 0, 0, 0.3); } -.address-item-edit .admin__legend { - display: none; +.tooltip:hover > .tooltip-content { + display: block; } .admin__section-nav { padding-bottom: 51px; @@ -3205,7 +3588,7 @@ fieldset[disabled] .notifications-closebutton { .admin__section-nav-title { padding: 0; margin: 0 0 -1px; - color: #333333; + color: #303030; display: block; padding: 20px 13px; background: #f1f1f1; @@ -3271,12 +3654,12 @@ fieldset[disabled] .notifications-closebutton { border-width: 1px 0; line-height: 1.2; font-weight: 500; - color: #333333; + color: #303030; display: block; padding: 20px 30px 20px 10px; } .admin__section-nav-link:hover { - color: #333333; + color: #303030; text-decoration: underline; } .admin__section-nav-link._changed { @@ -3299,89 +3682,6 @@ fieldset[disabled] .notifications-closebutton { top: 15px; right: 5px; } -.admin__field-tooltip { - display: inline-block; - vertical-align: top; - margin-top: 5px; - position: relative; - z-index: 1; - width: 0; - overflow: visible; -} -.admin__field-option .admin__field-tooltip { - margin-top: 10px; -} -.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; - cursor: pointer; -} -.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; -} -.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; -} -.admin__control-text:focus + .admin__field-tooltip-content, -.admin__field-tooltip:hover .admin__field-tooltip-content { - display: block; -} -.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); -} -.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; -} @media all and (max-width: 1023px) { .admin__menu .submenu li { min-width: 19.8rem; diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_calendar.less b/app/design/adminhtml/Magento/backend/web/css/source/_calendar.less new file mode 100644 index 00000000000..eaa3daba349 --- /dev/null +++ b/app/design/adminhtml/Magento/backend/web/css/source/_calendar.less @@ -0,0 +1,308 @@ +// /** +// * Copyright © 2015 Magento. All rights reserved. +// * See COPYING.txt for license details. +// */ + +// +// Variables +// _____________________________________________ + +@import 'lib/_lib'; + +@ui-datepicker_background: #fff; +@ui-datepicker_border: 1px solid #007dbd; +@ui-datepicker_padding: 20px; +@ui-datepicker_shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3); + +.ui-datepicker { + background: @ui-datepicker_background; + border: @ui-datepicker_border; + box-shadow: @ui-datepicker_shadow; + box-sizing: border-box; + display: none; + padding: @ui-datepicker_padding; + width: auto; + z-index: 999999 !important; +} +.ui-datepicker-header { + padding: 0 0 10px; + position: relative; +} + +// +// Previous, next buttons +// --------------------------------------------- +.ui-datepicker-prev, +.ui-datepicker-next { + cursor: pointer; + position: absolute; + line-height: 32px; + top: 0; + span { + .visually-hidden(); + } + &:before { + color: #514943; + font-size: 34px; + display: inline-block; + } +} +.ui-datepicker-prev { + left: 0; + &:before { + content: '\2039'; + } +} +.ui-datepicker-next { + right: 0; + &:before { + content: '\203A'; + } +} + + +// +// Title +// --------------------------------------------- + +.ui-datepicker .ui-datepicker-title { + margin: 0 2.3em; + line-height: 1.8em; + text-align: center; +} +.ui-datepicker .ui-datepicker-title select { + font-size: 1em; + margin: 1px 0; +} +.ui-datepicker select.ui-datepicker-month-year { + width: 100%; +} + +// +// Calendar table +// --------------------------------------------- + +.ui-datepicker table { + width: 100%; +} +.ui-datepicker table.ui-datepicker-calendar { + background: #FFFFFF; + border-collapse: collapse; + border: 0; + thead { + background: transparent; + } + tr { + background: transparent; + } + tr th { + background: transparent; + border: 0; + padding: 0; + span { + font-weight: 700; + font-size: 12px; + line-height: 28px; + } + } + tr td { + background: transparent; + border: 1px solid #adadad; + padding: 0; + } + span, + a { + box-sizing: border-box; + color: #514943; + display: block; + font-size: 14px; + font-weight: 600; + line-height: 38px; + text-align: center; + text-decoration: none; + width: 38px; + } + .ui-state-disabled { + span { + background: #f5f5f5; + color: #999999; + } + } + .ui-state-active { + background: #514943; + color: #fff; + } + .ui-datepicker-today { + a { + border: 3px solid #adadad; + line-height: 32px; + } + } +} + +.ui-datepicker .ui-datepicker-buttonpane { + overflow: hidden; + padding-top: 15px; + white-space: nowrap; + + button { + background: #fff; + border-radius: 1px; + border: 1px solid #adadad; + box-sizing: border-box; + color: #008bdb; + float: left; + font-size: 14px; + line-height: 38px; + padding: 0; + text-align: center; + width: 49%; + } + .ui-datepicker-close { + float: right; + } +} + +.ui-datepicker .ui-datepicker-title .ui-datepicker-month { + width: 47%; + margin-right: 6%; +} +.ui-datepicker .ui-datepicker-title .ui-datepicker-year { + width: 47%; +} + + + + +.ui-datepicker .ui-datepicker-calendar .ui-datepicker-week-col { + text-align: center; + border: #cfcfcf 1px solid; +} + +.ui-timepicker-div .ui-widget-header { + margin-bottom: 8px; +} +.ui-timepicker-div dl { + text-align: left; +} +.ui-timepicker-div dl dd { + margin: 0 0 10px 65px; +} +.ui-timepicker-div td { + font-size: 90%; +} +.ui-tpicker-grid-label { + background: none; + border: none; + margin: 0; + padding: 0; +} +.ui-slider { + position: relative; + text-align: left; +} +.ui-slider-horizontal .ui-slider-handle { + margin-left: -5px; +} +.ui-slider .ui-slider-handle { + position: absolute; + z-index: 2; + cursor: default; +} +.ui-slider-horizontal { + height: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + border: none; + background: #dadada; +} +.ui-slider-handle { + height: 10px; + width: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + background: #f98b25; + display: block; + position: absolute; +} +.ui-timepicker-div { + padding: 10px 0 5px 0; +} + +.ui-datepicker-rtl { + direction: rtl; +} +.ui-datepicker-rtl .ui-datepicker-prev { + right: 2px; + left: auto; +} +.ui-datepicker-rtl .ui-datepicker-next { + left: 2px; + right: auto; +} +.ui-datepicker-rtl .ui-datepicker-prev:hover { + right: 1px; + left: auto; +} +.ui-datepicker-rtl .ui-datepicker-next:hover { + left: 1px; + right: auto; +} +.ui-datepicker-rtl .ui-datepicker-buttonpane { + clear: right; +} +.ui-datepicker-rtl .ui-datepicker-buttonpane button { + float: left; +} +.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { + float: right; +} +.ui-datepicker-rtl .ui-datepicker-group { + float: right; +} +.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { + border-right-width: 0; + border-left-width: 1px; +} +.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { + border-right-width: 0; + border-left-width: 1px; +} + + +.ui-timepicker-div .ui-widget-header { + margin-bottom: 8px; +} +.ui-timepicker-div dl { + text-align: left; +} +.ui-timepicker-div dl dt { + height: 25px; + margin-bottom: -22px; +} +.ui-timepicker-div dl .ui_tpicker_time_label { + margin-bottom: -25px; +} +.ui-timepicker-div dl dd { + margin: 0 10px 10px 65px; +} +.ui-timepicker-div td { + font-size: 90%; +} +.ui-tpicker-grid-label { + background: none; + border: none; + margin: 0; + padding: 0; +} + +/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */ +.ui-datepicker-cover { + position: absolute; /*must have*/ + z-index: -1; /*must have*/ + filter: mask(); /*must have*/ + top: -4px; /*must have*/ + left: -4px; /*must have*/ + width: 200px; /*must have*/ + height: 200px; /*must have*/ +} diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_form.less b/app/design/adminhtml/Magento/backend/web/css/source/_form.less index 9ac94c9555b..f036b5abf54 100644 --- a/app/design/adminhtml/Magento/backend/web/css/source/_form.less +++ b/app/design/adminhtml/Magento/backend/web/css/source/_form.less @@ -3,281 +3,6 @@ // * 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; -} +@import '_form/_controls'; +@import '_form/_field'; +@import '_form/_tooltip'; diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_form/_controls.less b/app/design/adminhtml/Magento/backend/web/css/source/_form/_controls.less new file mode 100644 index 00000000000..400d9fa177a --- /dev/null +++ b/app/design/adminhtml/Magento/backend/web/css/source/_form/_controls.less @@ -0,0 +1,309 @@ +// /** +// * Copyright © 2015 Magento. All rights reserved. +// * See COPYING.txt for license details. +// */ + +// +// Variables +// _____________________________________________ + +@import (reference) '_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; + } +} +.ie9 .admin__control-select { + 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: 16px; + line-height: 16px; + margin: 1px 10px 0 -26px; + text-align: center; + vertical-align: top; + width: 16px; + } + } + &: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); + display: inline-flex; + flex-flow: row nowrap; + position: relative; + width: 100%; + z-index: 1; + > [class*="admin__addon-"], + > [class*="admin__control-"] { + .vendor-prefix-flex-basis(auto); + .vendor-prefix-flex-grow(0); + .vendor-prefix-flex-shrink(0); + position: relative; + z-index: 1; + } + [class*="admin__control-"] { + .css(appearence,none); + .vendor-prefix-flex-grow(1); + background-color: transparent; + border-color: transparent; + order: 1; + vertical-align: top; + width: auto; + :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; + } +} +.ie9 .admin__control-addon { + &:after { + content: ''; + display: block; + height: 0; + overflow: hidden; + clear: both; + } +} +.ie9 .admin__addon { + [class*="admin__control-"] { + display: table-cell; + } + &-prefix { + float: left; + } + &-suffix { + display: table-cell; + } +} + +.admin__control-value { + display: inline-block; + padding: 6px 10px; +} +.admin__control-text.hasDatepicker { + width: 200px; +} +.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 + ); + vertical-align: top; + margin-left: -40px; + display: inline-block; +} diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form.less b/app/design/adminhtml/Magento/backend/web/css/source/_form/_field.less similarity index 98% rename from app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form.less rename to app/design/adminhtml/Magento/backend/web/css/source/_form/_field.less index eae45e2dc49..fa62e722226 100644 --- a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form.less +++ b/app/design/adminhtml/Magento/backend/web/css/source/_form/_field.less @@ -147,7 +147,6 @@ margin-top: 15px; } &:not(.admin__field-option) ~ .admin__field-option { - margin-left: 20px; margin-top: 5px; } &.admin__field-option ~ .admin__field-option { @@ -190,21 +189,22 @@ } .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; + border: 1px solid @field-error--border-color; + box-sizing: border-box; color: @field-error--color; + display: block; font-size: 12px; font-weight: 500; - box-sizing: border-box; + margin: 2px 0 0; + padding: 6px 10px 10px; } .admin__field-note { color: @field-note--color; - padding: 0; + font-size: 12px; margin: 10px 0 0; + padding: 0; } .admin__control-fields { @@ -228,14 +228,14 @@ margin-top: 0; } & + .admin__field-option:before { + background: @field-divider--color; content: ""; - position: absolute; display: inline-block; height: 20px; - top: 8px; left: -20px; + position: absolute; + top: 8px; width: 1px; - background: @field-divider--color; } } } @@ -250,17 +250,17 @@ } [class*="admin__control-grouped"] { + box-sizing: border-box; display: table; - width: 100%; table-layout: fixed; - box-sizing: border-box; + width: 100%; & > .admin__field { display: table-cell; - width: 50%; vertical-align: top; + width: 50%; > .admin__field-control { - width: 100%; float: none; + width: 100%; } &:nth-child(n+2) { padding-left: 20px; @@ -276,13 +276,12 @@ & > .admin__field:first-child { position: static; & > .admin__field-label { - - position: absolute; - left: 0; - top: 0; .mix-grid-width(3); - opacity: 0; cursor: pointer; + left: 0; + opacity: 0; + position: absolute; + top: 0; } } } @@ -292,14 +291,18 @@ padding: 15px 30px; .admin__field > .admin__field-control, .admin__field > .admin__field-label { - text-align: left; float: none; + width: auto; + text-align: left; } .admin__field > .admin__field-control { - width: ~'calc( 100% - 30px )'; + float: none; + width: auto; } .admin__field-label { + float: none; margin-top: -16px; + width: auto; } ._required .admin__field-label span { padding-left: 15px; @@ -308,14 +311,13 @@ margin-left: 30px; } } - } .address-list { + float: left; list-style-type: none; margin:0; padding: 0; width: 360px; - float: left; .address-list-item { margin-bottom: 30px; } @@ -323,8 +325,8 @@ background-color: transparent; padding: 0; &:hover { - box-shadow: 0; border: 0; + box-shadow: 0; } } } diff --git a/app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form/_tooltip.less b/app/design/adminhtml/Magento/backend/web/css/source/_form/_tooltip.less similarity index 100% rename from app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/_form/_tooltip.less rename to app/design/adminhtml/Magento/backend/web/css/source/_form/_tooltip.less 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 fe62eca0849..e6eb1638a0e 100644 --- a/app/design/adminhtml/Magento/backend/web/css/source/_sources.less +++ b/app/design/adminhtml/Magento/backend/web/css/source/_sources.less @@ -23,6 +23,7 @@ @import '_extends'; @import '_tabs'; @import '_structure'; +@import '_calendar'; // // Components diff --git a/app/design/adminhtml/Magento/backend/web/css/source/_tables.less b/app/design/adminhtml/Magento/backend/web/css/source/_tables.less index 846e1b25317..3390a51602d 100644 --- a/app/design/adminhtml/Magento/backend/web/css/source/_tables.less +++ b/app/design/adminhtml/Magento/backend/web/css/source/_tables.less @@ -16,7 +16,7 @@ // Tables // _____________________________________________ -table { +table.table { color: @base-table-color; > caption { margin-bottom: .5rem; diff --git a/app/design/adminhtml/Magento/backend/web/css/styles-migration.less b/app/design/adminhtml/Magento/backend/web/css/styles-migration.less index 1adf47dc097..b0683f7568f 100644 --- a/app/design/adminhtml/Magento/backend/web/css/styles-migration.less +++ b/app/design/adminhtml/Magento/backend/web/css/styles-migration.less @@ -8,13 +8,17 @@ // _____________________________________________ @import 'source/_keyfocus__temp'; +@import (reference) 'override.less'; + +.ie9 #html-body[class][data-container="body"] .admin__scope:extend(.ie9 all) {} +#html-body[class][data-container="body"].keyfocus:extend(.keyfocus all) {} #html-body[class][data-container="body"] .admin__scope { box-sizing: border-box; - @import (less) 'override.css'; + @import (multiple) 'override.less'; } -// ToDo UI: Hidding menu (should be fixed in layouts) +// @ToDo UI: Hidding menu (should be fixed in layouts) .attribute-popup, .adminhtml-auth-login { @@ -25,3 +29,6 @@ display: none; } } + +@import 'source/_calendar'; + diff --git a/app/design/adminhtml/Magento/backend/web/css/styles-old.less b/app/design/adminhtml/Magento/backend/web/css/styles-old.less index a7aec05a7ca..e0a2ea87338 100644 --- a/app/design/adminhtml/Magento/backend/web/css/styles-old.less +++ b/app/design/adminhtml/Magento/backend/web/css/styles-old.less @@ -1403,35 +1403,6 @@ input.mage-error ~ .addafter { margin-right: -2px; } -/* - Calendar --------------------------------------- */ -.ui-datepicker { - z-index: 998 !important; -} - -.ui-datepicker .ui-datepicker-calendar td { - padding: 0; -} - -.ui-datepicker .ui-datepicker-calendar th { - background: #efefef; - border: 1px solid #cfcfcf; - padding: 4px; - color: #676056; - font-weight: bold; -} - -.ui-datepicker-calendar tbody tr td, -.ui-datepicker-calendar tbody tr:nth-child(2n+1) td { - background: #fff; -} - -.ui-datepicker .ui-datepicker-prev span, -.ui-datepicker .ui-datepicker-next span { - margin-top: -1px; -} - /* Details element -------------------------------------- */ -- GitLab