demarches-normaliennes/app/assets/stylesheets/buttons.scss

314 lines
4.7 KiB
SCSS
Raw Normal View History

2017-06-14 14:39:28 +02:00
@import "colors";
@import "constants";
@import "placeholders";
2017-06-14 14:39:28 +02:00
.button {
@extend %outline;
2017-06-14 14:39:28 +02:00
display: inline-block;
padding: 8px 16px;
border-radius: 30px;
border: 1px solid $border-grey;
font-family: "Muli";
2017-06-14 14:39:28 +02:00
font-size: 14px;
2017-08-30 15:04:18 +02:00
line-height: 20px;
2017-06-14 14:39:28 +02:00
background-color: #FFFFFF;
color: $black;
text-align: center;
-webkit-appearance: none;
2017-06-14 14:39:28 +02:00
&:hover:not(:disabled) {
cursor: pointer;
2017-06-14 14:39:28 +02:00
background: $light-grey;
text-decoration: none;
}
&:disabled {
opacity: 0.5;
filter: saturate(50%);
}
2017-06-14 14:39:28 +02:00
&.primary {
color: #FFFFFF;
border-color: $blue-france-700;
background-color: $blue-france-700;
2017-06-14 14:39:28 +02:00
&:hover:not(:disabled) {
background: $blue-france-500;
2017-06-14 14:39:28 +02:00
}
}
&.secondary {
color: $blue-france-700;
border-color: $blue-france-700;
2017-06-14 14:39:28 +02:00
background-color: #FFFFFF;
&:hover:not(:disabled) {
2017-06-26 11:40:28 +02:00
color: #FFFFFF;
background: $blue-france-700;
2017-06-14 14:39:28 +02:00
}
}
&.danger {
color: $black;
border-color: $border-grey;
background-color: #FFFFFF;
&:hover:not(:disabled) {
color: #FFFFFF;
border-color: $medium-red;
background-color: $medium-red;
> .icon {
2019-03-11 17:26:44 +01:00
filter: contrast(0) brightness(100);
}
}
}
&.accepted {
color: #FFFFFF;
border-color: $green;
background-color: $green;
&:hover:not(:disabled) {
color: $green;
background-color: #FFFFFF;
}
}
&.without-continuation {
color: #FFFFFF;
border-color: $black;
background-color: $black;
&:hover:not(:disabled) {
color: $black;
background-color: #FFFFFF;
}
}
&.refused {
color: #FFFFFF;
border-color: $dark-red;
background-color: $dark-red;
&:hover:not(:disabled) {
color: $dark-red;
background-color: #FFFFFF;
}
}
&.small {
line-height: 14px;
padding: 5px 10px 6px 10px;
}
2017-06-14 14:39:28 +02:00
&.large {
font-size: 18px;
2017-08-30 15:04:18 +02:00
line-height: 26px;
2017-06-14 14:39:28 +02:00
padding: 15px 32px;
}
&.expand {
width: 100%;
}
> .icon {
width: 18px;
height: 18px;
background-size: 18px 18px;
2019-01-17 12:08:37 +01:00
vertical-align: text-bottom;
margin-right: $default-spacer;
}
2017-08-02 16:20:01 +02:00
&.icon-only {
padding: 9px 16px;
2017-08-02 16:20:01 +02:00
.icon {
margin-right: 0;
}
}
}
2021-04-28 16:05:44 +02:00
.icon-size {
width: 18px;
height: 18px;
}
.icon-size-big {
width: 25px;
height: 25px;
}
.state-button {
display: inline-block;
}
.dropdown {
display: inline-block;
position: relative;
.dropdown-button {
white-space: nowrap;
2017-08-02 16:20:01 +02:00
&::after {
content: "";
margin-left: $default-spacer;
font-weight: bold;
}
&.icon-only {
&::after {
margin-left: 2px;
2021-09-20 15:04:24 +02:00
color: $blue-france-500;
}
}
2017-08-02 16:20:01 +02:00
}
.dropdown-content {
display: none;
}
&.open .dropdown-content {
display: block;
}
2017-08-02 16:20:01 +02:00
}
.dropdown-content {
border: 1px solid $border-grey;
background: #FFFFFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
position: absolute;
right: 0;
2018-07-25 14:37:15 +02:00
text-align: left;
2017-08-02 16:20:01 +02:00
top: 5 * $default-spacer;
cursor: default;
z-index: 10;
2017-09-28 11:04:18 +02:00
&.left-aligned {
left: 0;
right: unset;
}
&.terminated {
width: 600px;
color: $black;
padding: $default-padding;
2019-07-01 16:16:40 +02:00
.title {
font-size: 24px;
}
.dossier-motivation {
margin: $default-padding 0;
}
.attestation {
margin: $default-padding 0;
2020-06-11 14:33:15 +02:00
color: $dark-grey;
}
}
2017-08-02 16:20:01 +02:00
}
.dropdown-items {
li {
display: flex;
padding: $default-padding;
2020-06-11 14:33:15 +02:00
color: $dark-grey;
2017-08-02 16:20:01 +02:00
border-bottom: 1px solid $border-grey;
font-size: 12px;
min-width: 300px;
&.selected {
cursor: default;
h4 {
2021-09-20 15:04:24 +02:00
color: $blue-france-500;
2017-08-02 16:20:01 +02:00
}
}
&:not(.inactive) {
cursor: pointer;
&:hover,
&.selected {
background: $light-grey;
}
2017-08-02 16:20:01 +02:00
}
2019-03-26 17:55:40 +01:00
&.danger {
&:hover {
background-color: $medium-red;
&,
a {
color: $white;
}
.icon {
filter: contrast(0) brightness(100);
}
}
}
2017-08-02 16:20:01 +02:00
&:last-child {
border-bottom: none;
}
a {
2020-06-11 14:33:15 +02:00
color: $dark-grey;
2017-08-02 16:20:01 +02:00
}
// Make child links fill the whole clickable area
> a {
display: flex;
flex-grow: 1;
margin: -$default-padding;
padding: $default-padding;
}
.icon {
2017-08-02 16:20:01 +02:00
flex-shrink: 0;
}
.dropdown-description {
2017-08-02 16:20:01 +02:00
padding-left: $default-spacer;
}
}
h4 {
font-size: 14px;
color: $black;
margin-bottom: $default-spacer;
}
2019-07-01 16:16:40 +02:00
p + h4,
p + p, {
margin-top: $default-spacer;
2019-07-01 16:16:40 +02:00
}
2017-06-14 14:39:28 +02:00
}
2017-06-13 17:46:08 +02:00
.dropdown-form {
padding: 2 * $default-spacer;
2017-09-28 11:04:18 +02:00
&.large {
width: 340px;
}
label {
width: 100px;
display: inline-block;
margin-bottom: 2 * $default-spacer;
}
input,
select {
width: 200px;
display: inline-block;
}
}
2017-06-13 17:46:08 +02:00
.link {
2021-09-20 15:04:24 +02:00
color: $blue-france-500;
2017-06-13 17:46:08 +02:00
}