8b211ed461
For PR #3406 - Updated naming from 'redirect' to 'initate/initation'. - Updated phpunit.xml and .env.example.complete files with the new option. - Cleaned up controller logic a bit. - Added content and design to the new initation view to not leave user on a blank view for a while. - Added non-JS button to initiation view as fallback option for progression. - Moved new test to it's own Test class and expanded with additional scenario tests for better functionality coverage.
142 lines
No EOL
2.6 KiB
SCSS
142 lines
No EOL
2.6 KiB
SCSS
button {
|
|
background-color: transparent;
|
|
border: 0;
|
|
font-size: 100%;
|
|
}
|
|
|
|
.button {
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
line-height: 1.4em;
|
|
padding: $-xs*1.3 $-m;
|
|
margin-top: $-xs;
|
|
margin-bottom: $-xs;
|
|
display: inline-block;
|
|
font-weight: 400;
|
|
outline: 0;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
transition: background-color ease-in-out 120ms,
|
|
filter ease-in-out 120ms,
|
|
box-shadow ease-in-out 120ms;
|
|
box-shadow: none;
|
|
background-color: var(--color-primary);
|
|
color: #FFF;
|
|
text-transform: uppercase;
|
|
border: 1px solid var(--color-primary);
|
|
vertical-align: top;
|
|
@include lightDark(filter, none, saturate(0.8) brightness(0.8));
|
|
&:hover, &:focus, &:active {
|
|
background-color: var(--color-primary);
|
|
text-decoration: none;
|
|
color: #FFFFFF;
|
|
}
|
|
&:hover {
|
|
@include lightDark(box-shadow, $bs-light, $bs-dark);
|
|
filter: brightness(110%);
|
|
}
|
|
&:focus {
|
|
outline: 1px dotted currentColor;
|
|
outline-offset: -$-xs;
|
|
box-shadow: none;
|
|
filter: brightness(90%);
|
|
}
|
|
&:active {
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.button.outline {
|
|
background-color: transparent;
|
|
@include lightDark(color, #666, #aaa);
|
|
fill: currentColor;
|
|
border: 1px solid #CCC;
|
|
&:hover, &:focus, &:active {
|
|
border: 1px solid #CCC;
|
|
box-shadow: none;
|
|
background-color: #F2F2F2;
|
|
@include lightDark(background-color, #f2f2f2, #555);
|
|
filter: none;
|
|
}
|
|
&:active {
|
|
border-color: #BBB;
|
|
background-color: #DDD;
|
|
color: #666;
|
|
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
.button + .button {
|
|
margin-inline-start: $-s;
|
|
}
|
|
|
|
.button.small {
|
|
font-size: 0.75rem;
|
|
padding: $-xs*1.2 $-s;
|
|
}
|
|
|
|
.text-button {
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
user-select: none;
|
|
font-size: 0.75rem;
|
|
line-height: 1.4em;
|
|
color: var(--color-primary);
|
|
@include whenDark {
|
|
color: #AAA;
|
|
}
|
|
&:active {
|
|
outline: 0;
|
|
}
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
&:hover, &:focus {
|
|
color: var(--color-primary);
|
|
fill: var(--color-primary);
|
|
}
|
|
}
|
|
.text-button.hover-underline:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.button.block {
|
|
width: 100%;
|
|
text-align: start;
|
|
display: block;
|
|
}
|
|
|
|
.button.icon {
|
|
.svg-icon {
|
|
margin-inline-end: 0;
|
|
}
|
|
}
|
|
|
|
.button.svg {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: $-s $-m;
|
|
padding-bottom: ($-s - 2px);
|
|
width: 100%;
|
|
svg {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
bottom: auto;
|
|
margin-inline-end: $-m;
|
|
}
|
|
}
|
|
|
|
.button[disabled] {
|
|
background-color: #BBB;
|
|
cursor: default;
|
|
border-color: #CCC;
|
|
&:hover {
|
|
background-color: #BBB;
|
|
cursor: default;
|
|
box-shadow: none;
|
|
}
|
|
} |