134 lines
2.4 KiB
SCSS
134 lines
2.4 KiB
SCSS
@import 'components/customer-feedback-simple/customer-feedback-simple.scss';
|
|
@import 'components/feedback-modal/feedback-modal.scss';
|
|
|
|
.woocommerce-customer-effort-score__selection {
|
|
margin: 1em 0 1.5em 0;
|
|
|
|
.components-base-control__field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0 auto;
|
|
color: var(--wp-admin-theme-color);
|
|
|
|
@include breakpoint( '>600px' ) {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.components-h-stack {
|
|
@include breakpoint( '>600px' ) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
}
|
|
|
|
.components-radio-control__option {
|
|
&:not(:last-child) {
|
|
// Override package component style.
|
|
margin-bottom: 0;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
input {
|
|
// Hide the radio input but keep it accessibile.
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
width: 9em;
|
|
height: 100%;
|
|
padding: 1em 0.5em;
|
|
font-size: 0.9em;
|
|
|
|
&:hover {
|
|
background-color: $studio-wordpress-blue-0;
|
|
}
|
|
}
|
|
|
|
input:focus + label {
|
|
outline: 2px solid $studio-wordpress-blue;
|
|
background-color: peach;
|
|
color: $studio-blue-60;
|
|
}
|
|
|
|
input:checked + label {
|
|
outline: 2px solid $studio-wordpress-blue;
|
|
background-color: $studio-wordpress-blue-0;
|
|
}
|
|
|
|
// Replace the hidden radio input with emoji.
|
|
label::before {
|
|
display: block;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
margin: 1em 0;
|
|
color: $studio-wordpress-blue;
|
|
}
|
|
|
|
input[value='1'] + label::before {
|
|
content: '😞';
|
|
}
|
|
|
|
input[value='2'] + label::before {
|
|
content: '🙁';
|
|
}
|
|
|
|
input[value='3'] + label::before {
|
|
content: '😑';
|
|
}
|
|
|
|
input[value='4'] + label::before {
|
|
content: '🙂';
|
|
}
|
|
|
|
input[value='5'] + label::before {
|
|
content: '😍';
|
|
}
|
|
}
|
|
}
|
|
|
|
.woocommerce-customer-effort-score__comments {
|
|
margin-bottom: 1.5em;
|
|
|
|
label {
|
|
display: block;
|
|
color: inherit;
|
|
font-weight: bold;
|
|
text-transform: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.woocommerce-customer-effort-score {
|
|
.components-modal__content {
|
|
padding-bottom: 100px;
|
|
}
|
|
}
|
|
|
|
.woocommerce-customer-effort-score__buttons {
|
|
text-align: right;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
padding: calc( 2 * $gap );
|
|
|
|
.components-button {
|
|
margin-left: 1em;
|
|
}
|
|
}
|
|
|
|
.woocommerce-customer-effort-score .woocommerce-customer-effort-score__intro {
|
|
max-width: 550px;
|
|
margin: 0 0 1.5em 0;
|
|
}
|