florian/Cerberus
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add button to edit application.

Browse Source
This commit is contained in:
Florian THIERRY - Takiguchi
2021-08-07 23:24:33 +02:00
parent e53f4fd89d
commit 82053e4002
5 changed files with 93 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
cerberus/src/components-styles/button.scss
View File

@@ -1,50 +1,62 @@
@import '../colors.scss';
@import "../colors.scss";
button, a.button {
background-image: linear-gradient(
$btn-primary-background-top,
$btn-primary-background-bottom
);
color: white;
border: solid 1px $btn-primary-background-bottom;
display: flex;
justify-content: center;
align-items: center;
min-width: 5rem;
border-radius: 0.3rem;
padding: 0.15rem 1rem;
font-weight: 600;
margin: 0.2rem 0.5rem;
&:active {
border-color: $btn-primary-active-border;
background-image: linear-gradient(
$btn-primary-active-background-top,
$btn-primary-active-background-bottom
);
}
&.secondary {
background-image: none;
background-color: $btn-secondary-background;
border-color: $btn-secondary-border;
color: #222;
font-weight: 500;
button {
// background-color: $blue;
background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom);
color: white;
border: solid 1px $btn-primary-background-bottom;
display: flex;
justify-content: center;
align-items: center;
min-width: 5rem;
border-radius: .3rem;
padding: .15rem 1rem;
font-weight: 600;
margin: .2rem .5rem;
&:active {
border-color: $btn-primary-active-border;
background-image: linear-gradient($btn-primary-active-background-top, $btn-primary-active-background-bottom);
background-color: $btn-secondary-active-background;
border-color: $btn-secondary-active-border;
}
&.secondary {
background-image: none;
background-color: $btn-secondary-background;
border-color: $btn-secondary-border;
color: #222;
font-weight: 500;
&:active {
background-color: $btn-secondary-active-background;
border-color: $btn-secondary-active-border;
}
}
&.help {
border-radius: 10em;
padding: 0;
background-image: none;
background-color: #eeeeee;
color: #333;
border-color: #bbb;
min-width: min-content;
width: 1.5rem;
height: 1.5rem;
&:hover {
background-color: #dddddd;
}
&.help {
border-radius: 10em;
padding: 0;
background-image: none;
background-color: #eeeeee;
color: #333;
border-color: #bbb;
min-width: min-content;
width: 1.5rem;
height: 1.5rem;
&:hover {
background-color: #dddddd;
}
}
}
}
&.icon {
padding-left: 0;
padding-right: 0;
min-width: 25px;
width: 25px;
}
}