/app/design/frontend/Magento/luma/Magento_Customer/web/css/source/_module.less
LESS | 545 lines | 428 code | 89 blank | 28 comment | 0 complexity | 7922ff6a972e596cbfcaecbf7864980b MD5 | raw file
- // /**
- // * Copyright © 2016 Magento. All rights reserved.
- // * See COPYING.txt for license details.
- // */
- //
- // Variables
- // _____________________________________________
- @account-title-border-color: @color-gray-middle2;
- @account-table-border-bottom-color: @color-gray-middle1;
- @account-table-action-delete: @color-red12;
- @_password-default: @color-gray-light01;
- @_password-weak: #ffafae;
- @_password-medium: #ffd6b3;
- @_password-strong: #c5eeac;
- @_password-very-strong: #81b562;
- //
- // Common
- // _____________________________________________
- & when (@media-common = true) {
- .login-container {
- .block {
- &-new-customer {
- .actions-toolbar {
- margin-top: 25px;
- }
- }
- .block-title {
- &:extend(.abs-login-block-title all);
- .lib-font-size(18);
- }
- }
- .fieldset {
- .lib-form-hasrequired(bottom);
- &:after {
- margin-top: 35px;
- }
- }
- }
- .block-addresses-list {
- .items.addresses {
- > .item {
- margin-bottom: @indent__base;
- &:last-child {
- margin-bottom: 0;
- }
- }
- .item.actions {
- margin-top: @indent__xs;
- .action {
- &:extend(.abs-account-actions all);
- }
- }
- }
- address {
- &:extend(.abs-account-block-line-height all);
- }
- }
- .form-address-edit {
- #region_id {
- display: none;
- }
- .actions-toolbar .action.primary {
- &:extend(.abs-button-l all);
- }
- }
- .form-edit-account {
- .fieldset.password {
- display: none;
- }
- }
- .form-create-account {
- .fieldset-fullname {
- .fields {
- .field {
- float: none;
- }
- }
- }
- }
- .box-billing-address,
- .box-shipping-address,
- .box-information,
- .box-newsletter {
- .box-content {
- &:extend(.abs-account-block-line-height all);
- }
- }
- // My account
- .account {
- .page-title-wrapper {
- .page-title {
- display: inline-block;
- }
- }
- .messages {
- margin-bottom: @indent__base;
- }
- .column.main {
- margin-bottom: @indent__l;
- h2 {
- margin-top: 0;
- }
- .block:not(.widget) {
- &:extend(.abs-account-blocks all);
- }
- }
- .sidebar-additional {
- margin-top: @indent__xl;
- }
- .table-wrapper {
- .lib-css(margin-bottom, @indent__base);
- border-bottom: 1px solid @account-table-border-bottom-color;
- &:last-child {
- margin-bottom: 0;
- }
- }
- .legend {
- &:extend(.abs-account-title all);
- }
- }
- .account,
- [class^='sales-guest-'],
- .sales-guest-view {
- .column.main {
- .order-details-items {
- .table-wrapper {
- .data.table {
- &:extend(.abs-table-striped all);
- }
- }
- }
- }
- .data.table {
- .col.actions {
- .action {
- &:extend(.abs-account-actions all);
- &.delete {
- .lib-css(color, @account-table-action-delete);
- }
- }
- }
- }
- }
- // Checkout address (create shipping address)
- .field.street {
- .field.additional {
- .label {
- &:extend(.abs-visually-hidden all);
- }
- }
- }
- //
- // Blocks & Widgets
- // ---------------------------------------------
- .block {
- &:extend(.abs-margin-for-blocks-and-widgets all);
- .column.main & {
- &:last-child {
- margin-bottom: 0;
- }
- }
- .title {
- strong {
- .lib-heading(h4);
- .column.main & {
- }
- }
- margin-bottom: @indent__s;
- }
- p {
- &:last-child {
- margin: 0;
- }
- }
- .box-actions {
- margin-top: @indent__xs;
- .action {
- &:extend(.abs-account-actions all);
- }
- }
- }
- //
- // Password Strength Meter
- // ---------------------------------------------
- .field.password {
- .control {
- .lib-vendor-prefix-display();
- .lib-vendor-prefix-flex-direction();
- .mage-error {
- .lib-vendor-prefix-order(2);
- }
- .input-text {
- .lib-vendor-prefix-order(0);
- z-index: 2;
- }
- }
- }
- .password-strength-meter {
- background-color: @_password-default;
- height: @form-element-input__height;
- line-height: @form-element-input__height;
- padding: @form-element-input__padding;
- position: relative;
- z-index: 1;
- &:before {
- content: '';
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- z-index: -1;
- }
- .password-none & {
- &:before {
- background-color: @_password-default;
- width: 100%;
- }
- }
- .password-weak & {
- &:before {
- background-color: @_password-weak;
- width: 25%;
- }
- }
- .password-medium & {
- &:before {
- background-color: @_password-medium;
- width: 50%;
- }
- }
- .password-strong & {
- &:before {
- background-color: @_password-strong;
- width: 75%;
- }
- }
- .password-very-strong & {
- &:before {
- background-color: @_password-very-strong;
- width: 100%;
- }
- }
- }
- .control.captcha-image {
- .lib-css(margin-top, @indent__s);
- .captcha-img {
- vertical-align: middle;
- }
- }
- .account {
- .data.table-return-items {
- .qty {
- .input-text {
- &:extend(.abs-input-qty all);
- }
- }
- }
- }
- .order-products-toolbar {
- position: relative;
- }
- }
- //
- // Desktop
- // _____________________________________________
- .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
- .login-container {
- &:extend(.abs-add-clearfix-desktop all);
- .block {
- &:extend(.abs-blocks-2columns all);
- &.login {
- .actions-toolbar {
- > .primary {
- margin-bottom: 0;
- margin-right: @indent__l;
- }
- > .secondary {
- float: left;
- }
- }
- }
- }
- .fieldset {
- > .field {
- > .control {
- width: 55%;
- }
- }
- }
- }
- .form-create-account {
- .fieldset-fullname {
- .fields {
- .field {
- float: left;
- margin: 0 @indent__s @indent__s 0;
- }
- }
- .field-name-prefix,
- .field-name-suffix {
- width: 50px;
- }
- }
- }
- .form.password.reset,
- .form.send.confirmation,
- .form.password.forget,
- .form.create.account {
- min-width: 600px;
- width: 50%;
- }
- // My account
- .account.page-layout-2columns-left {
- .sidebar-main,
- .sidebar-additional {
- width: 22.3%;
- }
- .column.main {
- width: 77.7%;
- }
- }
- .account {
- .page-title-wrapper {
- &:extend(.abs-add-clearfix-desktop all);
- }
- .column.main {
- .block:not(.widget) {
- .block-content {
- &:extend(.abs-add-clearfix-desktop all);
- .box {
- &:extend(.abs-blocks-2columns all);
- }
- }
- }
- }
- .data.table {
- margin-bottom: 0;
- .col {
- &.actions {
- white-space: nowrap;
- }
- }
- }
- .toolbar {
- &:extend(.abs-pager-toolbar all);
- }
- }
- .block-addresses-list {
- .items.addresses {
- &:extend(.abs-add-clearfix-desktop all);
- > .item {
- &:extend(.abs-blocks-2columns all);
- margin-bottom: @indent__base;
- &:nth-last-child(1),
- &:nth-last-child(2) {
- margin-bottom: 0;
- }
- }
- }
- address {
- &:extend(.abs-account-block-font-size all);
- }
- }
- .page-main {
- .block {
- &:extend(.abs-margin-for-blocks-and-widgets-desktop all);
- }
- }
- .form-address-edit {
- .fieldset {
- &:extend(.abs-blocks-2columns all);
- }
- }
- .form-edit-account {
- .fieldset {
- &:extend(.abs-blocks-2columns all);
- .fieldset {
- margin-bottom: @indent__base;
- width: 100%;
- }
- }
- }
- .box-billing-address,
- .box-shipping-address,
- .box-information {
- .box-content {
- &:extend(.abs-account-block-font-size all);
- }
- }
- .control.captcha-image {
- .captcha-img {
- margin: 0 @indent__s @indent__s 0;
- }
- }
- }
- //
- // Mobile @screen__s
- // _____________________________________________
- .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
- .account {
- .column.main,
- .sidebar-additional {
- margin: 0;
- }
- .data.table {
- &:extend(.abs-table-striped-mobile all);
- }
- }
- }
- //
- // Mobile @screen__m
- // _____________________________________________
- .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
- .login-container {
- .fieldset {
- &:after {
- text-align: center;
- }
- }
- }
- .account {
- .page.messages {
- margin-bottom: @indent__xl;
- }
- .column.main {
- .block:not(.widget) {
- .block-title {
- &:extend(.abs-add-clearfix-mobile-m all);
- > .action {
- float: right;
- .lib-css(margin-top, @indent__xs);
- }
- }
- .block-content {
- .box {
- .lib-css(margin-bottom, @indent__base);
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- }
- }
- }
- .control.captcha-image {
- .captcha-img {
- display: block;
- .lib-css(margin-bottom, @indent__s);
- }
- }
- .customer-account-index {
- .page-title-wrapper {
- position: relative;
- }
- }
- }