You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
2.7 KiB
123 lines
2.7 KiB
2 years ago
|
.gem-c-feedback {
|
||
|
|
background: govuk-colour("white");
|
||
|
|
margin-top: govuk-spacing(6);
|
||
|
|
|
||
|
|
@include govuk-media-query($from: desktop) {
|
||
|
|
margin-top: govuk-spacing(9);
|
||
|
|
}
|
||
|
|
|
||
|
|
// New design has the box flush with edges of smaller screens
|
||
|
|
// We need to compensate for `govuk-width-container` margins:
|
||
|
|
@include govuk-media-query($until: tablet) {
|
||
|
|
margin-right: govuk-spacing(-3);
|
||
|
|
margin-left: govuk-spacing(-3);
|
||
|
|
}
|
||
|
|
@include govuk-media-query($from: tablet, $until: desktop) {
|
||
|
|
margin-right: govuk-spacing(-6);
|
||
|
|
margin-left: govuk-spacing(-6);
|
||
|
|
}
|
||
|
|
// Scoped to the feedback component temporarily
|
||
|
|
[hidden] {
|
||
|
|
// stylelint-disable-next-line declaration-no-important
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.gem-c-feedback__prompt {
|
||
|
|
background-color: govuk-colour("light-grey");
|
||
|
|
color: govuk-colour("black");
|
||
|
|
border-top: 1px solid $govuk-border-colour;
|
||
|
|
outline: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gem-c-feedback__prompt-content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 0 govuk-spacing(3);
|
||
|
|
@include govuk-media-query($from: tablet) {
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.gem-c-feedback__prompt-questions {
|
||
|
|
text-align: left;
|
||
|
|
padding: govuk-spacing(4) 0;
|
||
|
|
@include govuk-media-query($from: tablet) {
|
||
|
|
margin: 0 govuk-spacing(3);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.gem-c-feedback__prompt-question-answer {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
@include govuk-media-query($until: mobile) {
|
||
|
|
justify-content: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.gem-c-feedback__prompt-question {
|
||
|
|
@include govuk-font(19, $weight: bold);
|
||
|
|
@include govuk-media-query($from: tablet) {
|
||
|
|
@include govuk-font(16, $weight: bold);
|
||
|
|
}
|
||
|
|
|
||
|
|
margin: 0;
|
||
|
|
padding-bottom: govuk-spacing(2);
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
outline: 0;
|
||
|
|
}
|
||
|
|
@include govuk-media-query($from: mobile) {
|
||
|
|
padding-bottom: 0;
|
||
|
|
margin-right: govuk-spacing(2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.gem-c-feedback__prompt-link {
|
||
|
|
@include govuk-font(19);
|
||
|
|
background: transparent;
|
||
|
|
color: govuk-colour("black");
|
||
|
|
box-shadow: 0 3px 0 govuk-colour("black");
|
||
|
|
border: 1px govuk-colour("black") solid;
|
||
|
|
margin-bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
// backup style for browsers that don't support rgba
|
||
|
|
background: govuk-colour("mid-grey");
|
||
|
|
background: rgba(govuk-colour("black"), .2);
|
||
|
|
color: govuk-colour("black");
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active:focus:not(:hover) {
|
||
|
|
background: govuk-colour("yellow");
|
||
|
|
}
|
||
|
|
@include govuk-media-query($from: tablet) {
|
||
|
|
@include govuk-font(16);
|
||
|
|
}
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
&:focus:not(:active):not(:hover) {
|
||
|
|
border-color: govuk-colour("black");
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus,
|
||
|
|
&:active {
|
||
|
|
color: $govuk-focus-text-colour;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.gem-c-feedback__prompt-link:link,
|
||
|
|
.gem-c-feedback__prompt-link:visited {
|
||
|
|
color: govuk-colour("black");
|
||
|
|
|
||
|
|
&:focus,
|
||
|
|
&:active {
|
||
|
|
color: $govuk-focus-text-colour;
|
||
|
|
}
|
||
|
|
}
|