woocommerce/plugins/woocommerce-admin/client/marketing/overview/welcome-card/style.scss

77 lines
1.3 KiB
SCSS

.woocommerce-marketing-overview-welcome-card {
position: relative;
.components-card__body {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 22px;
@include breakpoint( '>600px' ) {
flex-wrap: nowrap;
}
@include breakpoint( '>960px' ) {
padding: 32px 108px;
}
}
&__hide-button {
display: flex;
align-items: center;
padding: 8px;
margin: 0;
border: none;
background: none;
color: $gray-700;
overflow: hidden;
border-radius: 4px;
position: absolute;
top: 10px;
right: 10px;
// Ensure that even SVG icons that don't include the .dashicon class are colored.
svg {
fill: currentColor;
outline: none;
}
&:not(:disabled):not([aria-disabled='true']):not(.is-default):hover {
@include button-style__hover;
}
&:not(:disabled):not([aria-disabled='true']):not(.is-default):active {
@include button-style__active;
}
&[aria-disabled='true']:focus,
&:disabled:focus {
box-shadow: none;
}
}
h3 {
font-size: 20px;
line-height: 26px;
font-weight: normal;
text-align: center;
margin: 1em 0 0;
@include breakpoint( '>600px' ) {
text-align: left;
margin: 0 0 0 20px;
}
@include breakpoint( '>960px' ) {
font-size: 24px;
line-height: 32px;
}
}
img {
width: 231px;
flex: none;
}
}