Viewing File: /home/maglabs/it/app/design/frontend/Magento/luma/Magento_GiftMessage/web/css/source/_module.less
// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
//
// Variables
// _____________________________________________
@gift-message-field-label__color: @color-gray40;
@gift-item-block__border-color: @color-gray-light5;
@gift-item-block__border-width: @border-width__base;
@gift-item-block-title__color: @link__color;
@gift-item-block-title-icon__content: @icon-down;
@gift-item-block-title-icon__active__content: @icon-up;
@gift-item-block-title-icon__color: @color-gray52;
@gift-item-block-title-icon__font-size: 1.2rem;
@gift-item-block-title-icon__line-height: 20px;
@gift-item-block-title-icon__margin: 0 0 0 @indent__s;
//
// Common
// _____________________________________________
& when (@media-common = true) {
.gift-message {
.field {
margin-bottom: @indent__base;
.label {
.lib-css(color, @gift-message-field-label__color);
.lib-css(font-weight, @font-weight__regular);
}
}
}
.gift-options {
margin: @indent__base 0;
.actions-toolbar {
.action-cancel {
&:extend(.abs-action-button-as-link all);
display: none;
}
}
}
.gift-options-title {
.lib-css(font-weight, @font-weight__semibold);
margin: 0 0 @indent__base;
}
.gift-options-content {
.fieldset {
margin: 0 0 @indent__base;
}
}
.gift-summary {
margin-top: @indent__s;
position: relative;
.actions-toolbar {
> .secondary {
.action {
margin: 0 0 0 @indent__base;
width: auto;
}
}
}
.action-edit,
.action-delete {
&:extend(.abs-action-button-as-link all);
.lib-icon-font(
@icon-edit,
@_icon-font-size: 18px,
@_icon-font-line-height: 20px,
@_icon-font-text-hide: true,
@_icon-font-color: @minicart-icons-color,
@_icon-font-color-hover: @primary__color,
@_icon-font-color-active: @minicart-icons-color
);
}
.action-delete {
.lib-icon-font-symbol(
@_icon-font-content: @icon-trash
);
}
}
.action-gift {
&:extend(.abs-action-button-as-link all);
.lib-icon-font(
@icon-down,
@_icon-font-size: 1.2rem,
@_icon-font-line-height: 20px,
@_icon-font-color: @minicart-icons-color,
@_icon-font-color-hover: @primary__color,
@_icon-font-color-active: @minicart-icons-color,
@_icon-font-margin: 0 0 0 @indent__s,
@_icon-font-position: after
);
&.active,
&._active {
&:after {
content: @icon-up;
}
}
}
.gift-summary,
.cart.table-wrapper .gift-summary {
.actions-toolbar {
padding: 0;
position: absolute;
right: 0;
top: 0;
}
}
//
// In-table block
// ---------------------------------------------
.cart {
&.table-wrapper {
.gift-content {
box-sizing: border-box;
clear: left;
display: none;
float: left;
margin-right: -100%;
padding: @indent__base 0;
width: 100%;
&._active {
display: block;
}
}
.item-gift {
&._active {
.lib-css(border-top, @gift-item-block__border-width solid @gift-item-block__border-color);
}
.action {
margin-right: 0;
}
}
}
}
//
// Collapsible block
// ---------------------------------------------
.gift-item-block {
.lib-css(border-bottom, @gift-item-block__border-width solid @gift-item-block__border-color);
margin: 0;
&._active {
.title {
&:after {
.lib-css(content, @gift-item-block-title-icon__active__content);
}
}
}
.title {
.lib-css(color, @gift-item-block-title__color);
cursor: pointer;
margin: 0;
padding: @indent__s @indent__xl @indent__s 15px;
position: relative;
.lib-icon-font(
@gift-item-block-title-icon__content,
@_icon-font-size: @gift-item-block-title-icon__font-size,
@_icon-font-line-height: @gift-item-block-title-icon__line-height,
@_icon-font-color: @gift-item-block-title-icon__color,
@_icon-font-color-hover: @primary__color,
@_icon-font-margin: @gift-item-block-title-icon__margin,
@_icon-font-position: after,
@_icon-font-display: block
);
}
.content {
&:extend(.abs-add-clearfix all);
padding: @indent__s 0 @indent__base;
position: relative;
}
}
//
// Account order gift message
// ---------------------------------------------
.order-details-items {
.order-gift-message,
.block-order-details-gift-message {
&:extend(.abs-add-clearfix all);
dt {
&:after {
content: '';
}
}
.label {
&:extend(.abs-colon all);
}
.item-message {
clear: left;
}
.item-options {
dt {
.lib-css(font-weight, @font-weight__regular);
margin: @indent__s 0;
}
}
}
.order-items {
.order-gift-message {
&:not(.expanded-content) {
&:extend(.abs-hidden);
}
.action.close {
&:extend(.abs-no-display all);
}
}
}
}
.gift-messages-order {
margin-bottom: @indent__m;
}
.gift-message-summary {
padding-right: 7rem;
}
}
//
// Mobile
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
.gift-message {
.actions-toolbar {
.action-update {
.lib-font-size(20);
padding: 15px;
width: 100%;
}
}
}
.gift-item-block {
.lib-css(border-top, @gift-item-block__border-width solid @gift-item-block__border-color);
border-bottom: 0;
.title {
&:after {
.lib-font-size(12);
position: absolute;
right: 20px;
top: 10px;
}
}
.content {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
//
// In-table block
// ---------------------------------------------
.cart {
&.table-wrapper {
.gift-content {
border-top: @border-width__base solid @color-gray-light5;
margin-right: -@mobile-cart-padding;
overflow: hidden;
padding-left: @mobile-cart-padding;
padding-right: @mobile-cart-padding;
}
}
.action-gift {
.lib-icon-font(
@icon-present,
@_icon-font-size: 18px,
@_icon-font-line-height: 20px,
@_icon-font-text-hide: true,
@_icon-font-color: @minicart-icons-color,
@_icon-font-color-hover: @primary__color,
@_icon-font-color-active: @minicart-icons-color,
@_icon-font-margin: 0,
@_icon-font-position: after
);
&._active {
border: @border-width__base solid @color-gray-light5;
border-bottom-color: @color-white;
margin: -@indent__xs 14px -1px -15px;
padding: 4px @indent__s 9px 14px;
&:after {
color: @primary__color;
}
}
}
}
.gift-options-cart-item {
& + .towishlist {
left: 0;
position: absolute;
}
}
}
//
// Desktop
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
.gift-options {
position: relative;
z-index: 1;
.actions-toolbar {
clear: both;
padding: 0;
position: static;
.secondary {
float: right;
.action {
float: right;
margin-left: @indent__base;
margin-right: 0;
}
.action-cancel {
display: block;
float: left;
margin-top: 6px;
}
}
&:nth-child(3) {
&:before {
.lib-css(border-left, 1px solid @gift-item-block__border-color);
bottom: 5rem;
content: '';
display: block;
left: 50%;
overflow: hidden;
position: absolute;
top: 0;
width: 0;
}
}
}
}
.gift-options-title {
.lib-css(font-weight, @font-weight__light);
.lib-font-size(18);
}
.gift-item-block {
.title {
font-size: 1.6rem;
padding: @indent__base 0;
}
}
.item-gift {
td {
padding-left: 0;
padding-right: 0;
}
}
//
// In-table block
// ---------------------------------------------
.cart {
&.table-wrapper {
.gift-options {
.actions-toolbar {
clear: both;
padding: 0;
position: static;
}
}
}
.action-gift {
float: left;
}
}
.cart-container {
.cart-gift-item {
&:extend(.abs-shopping-cart-items-desktop all);
margin-bottom: @indent__base;
.gift-options,
.gift-summary {
padding-bottom: @indent__base;
}
}
}
}
Back to Directory
File Manager