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

275 lines
4.1 KiB
SCSS
Raw Normal View History

2017-06-14 14:39:28 +02:00
@import "colors";
@import "constants";
2017-06-14 14:39:28 +02:00
.button {
display: inline-block;
padding: 8px 16px;
border-radius: 30px;
border: 1px solid $border-grey;
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;
}
2017-08-30 15:40:08 +02:00
&:active,
&:focus {
outline: none;
}
&:disabled {
opacity: 0.5;
filter: saturate(50%);
}
2017-06-14 14:39:28 +02:00
&.primary {
color: #FFFFFF;
border-color: $blue;
background-color: $blue;
&:hover:not(:disabled) {
2017-06-14 14:39:28 +02:00
background: $light-blue;
}
}
&.secondary {
color: $blue;
border-color: $blue;
background-color: #FFFFFF;
&:hover:not(:disabled) {
2017-06-26 11:40:28 +02:00
color: #FFFFFF;
2017-06-14 14:39:28 +02:00
background: $light-blue;
}
}
&.danger {
color: $black;
border-color: $border-grey;
background-color: #FFFFFF;
&:hover {
color: #FFFFFF;
border-color: $medium-red;
background-color: $medium-red;
}
}
&.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;
}
}
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;
vertical-align: middle;
margin-right: $default-spacer;
}
2017-08-02 16:20:01 +02:00
&.dropdown {
position: relative;
&::after {
content: "";
margin-left: $default-spacer;
font-weight: bold;
}
&.icon-only {
&::after {
margin-left: 2px;
color: $blue;
}
}
2017-08-02 16:20:01 +02:00
.dropdown-content {
display: none;
}
&.open {
.dropdown-content {
display: block;
}
}
}
&.icon-only {
padding: 9px 16px;
.icon {
margin-right: 0;
}
}
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;
h4 {
font-size: 24px;
}
.dossier-motivation {
margin: $default-padding 0;
}
.attestation {
margin: $default-padding 0;
color: $grey;
}
}
2017-08-02 16:20:01 +02:00
}
.dropdown-items {
li {
display: flex;
padding: 2 * $default-spacer;
color: $grey;
border-bottom: 1px solid $border-grey;
font-size: 12px;
min-width: 300px;
cursor: pointer;
&.selected {
cursor: default;
h4 {
color: $blue;
}
}
&.selected,
&:hover {
background: $light-grey;
}
&:last-child {
border-bottom: none;
}
a {
display: flex;
color: $grey;
}
.icon {
2017-08-02 16:20:01 +02:00
flex-shrink: 0;
}
div {
padding-left: $default-spacer;
}
}
h4 {
font-size: 14px;
color: $black;
margin-bottom: $default-spacer;
}
2017-06-14 14:39:28 +02:00
}
2017-06-13 17:46:08 +02:00
.dropdown-form {
padding: 2 * $default-spacer;
.select2-container {
margin-bottom: 2 * $default-spacer;
}
.select2-selection {
border: 1px solid $border-grey;
&.select2-selection--multiple {
border: 1px solid $border-grey;
}
}
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;
}
}
.select2-dropdown {
border: 1px solid $border-grey;
}
2017-06-13 17:46:08 +02:00
.link {
color: $blue;
}