demarches-normaliennes/app/assets/stylesheets/new_design/buttons.scss
2018-07-25 14:37:15 +02:00

269 lines
3.9 KiB
SCSS

@import "colors";
@import "constants";
.button {
display: inline-block;
padding: 8px 16px;
border-radius: 30px;
border: 1px solid $border-grey;
font-size: 14px;
line-height: 20px;
background-color: #FFFFFF;
color: $black;
cursor: pointer;
text-align: center;
-webkit-appearance: none;
&:hover {
background: $light-grey;
text-decoration: none;
}
&:active,
&:focus {
outline: none;
}
&.primary {
color: #FFFFFF;
border-color: $blue;
background-color: $blue;
&:hover {
background: $light-blue;
}
}
&.secondary {
color: $blue;
border-color: $blue;
background-color: #FFFFFF;
&:hover {
color: #FFFFFF;
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 {
color: $green;
background-color: #FFFFFF;
}
}
&.without-continuation {
color: #FFFFFF;
border-color: $black;
background-color: $black;
&:hover {
color: $black;
background-color: #FFFFFF;
}
}
&.refused {
color: #FFFFFF;
border-color: $dark-red;
background-color: $dark-red;
&:hover {
color: $dark-red;
background-color: #FFFFFF;
}
}
&.large {
font-size: 18px;
line-height: 26px;
padding: 15px 32px;
}
&.expand {
width: 100%;
}
> .icon {
width: 18px;
height: 18px;
background-size: 18px 18px;
vertical-align: middle;
margin-right: $default-spacer;
}
&.dropdown {
position: relative;
&::after {
content: "";
margin-left: $default-spacer;
font-weight: bold;
}
&.icon-only {
&::after {
margin-left: 2px;
color: $blue;
}
}
.dropdown-content {
display: none;
}
&.open {
.dropdown-content {
display: block;
}
}
}
&.icon-only {
padding: 9px 16px;
.icon {
margin-right: 0;
}
}
}
.dropdown-content {
border: 1px solid $border-grey;
background: #FFFFFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
position: absolute;
right: 0;
text-align: left;
top: 5 * $default-spacer;
cursor: default;
z-index: 10;
&.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;
}
}
}
.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 {
flex-shrink: 0;
}
div {
padding-left: $default-spacer;
}
}
h4 {
font-size: 14px;
color: $black;
margin-bottom: $default-spacer;
}
}
.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;
}
}
&.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;
}
.link {
color: $blue;
}