autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: semantic css for buttons

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier 2019-11-05 16:52:34 +00:00
parent 3b49ddadee
commit 3c7700e966
1 changed files with 162 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
src/styles/base/main.scss
View File

@ -82,55 +82,6 @@ h5 {
font-size: 2rem;
}
button {
background: none;
border: none;
padding: 0;
}
sib-route,
sib-link,
button,
input,
a {
cursor: pointer;
&:hover,
&:link,
&:active {
cursor: pointer;
}
}
sib-link.yellow-button {
@include icon('plus');
&::before {
font-size: 1.6rem;
margin-right: 1rem;
}
}
sib-delete {
button {
@include icon('close');
background-color: $color-233-18-29;
border: none;
/*border-radius: 100em;*/
color: $color-0-0-100;
/*cursor: pointer;*/
/*font-size: 1.4rem;*/
/*font-weight: bold;*/
/*padding: 0.55rem 2.5rem;*/
/*text-transform: uppercase;*/
&::before {
font-size: 1.6rem;
margin-right: 1rem;
}
}
}
%padding-main {
padding: 5rem;
}
@ -231,15 +182,6 @@ sib-delete {
}
}
.editlink {
@include icon('pencil');
background: $color-244-73-62;
border-radius: 50%;
color: white;
padding: 12px;
}
.name {
color: $color-216-4-22;
font-size: 2rem;
@ -264,4 +206,165 @@ sib-delete {
@import 'form';
@import 'header';
@import 'menu-left';
@import 'user-avatar';
@import 'user-avatar';
// Button global CSS
sib-delete,
sib-route,
sib-link,
button,
input[type='submit'],
a,
.button {
display: inline-block;
cursor: pointer;
background: none;
border: none;
padding: 0;
&.button {
padding: 0.55rem 2.5rem;
border-radius: 100em;
*, & {
font-size: 1.4rem;
}
&.small {
*, & {
font-size: 1rem;
}
}
&.text-bold {
*, & {
font-weight: bold;
}
}
&.text-uppercase {
*, & {
text-transform: uppercase;
}
}
&.rounded {
border-radius: 50%;
padding: 0.5rem 1rem;
}
&.button-link {
border-radius: 100em;
*, & {
text-decoration: underline;
}
&:hover {
text-decoration: none;
}
}
&.with-icon::before {
font-size: 1.6rem;
margin-right: 1rem;
&.icon-plus {
/* ... */
}
&.icon-close {
/* ... */
}
&.icon-edit {
/* ... */
}
}
&.button-yellow {
background-color: white;
*, & {
color: hsl(43, 100%, 50%);
}
&.bordered {
border: 1px solid hsl(43, 100%, 50%);
}
&:hover {
background-color: #FFCE51;
*, & {
color: white;
}
}
}
&.button-blue {
background-color: white;
*, & {
color: hsl(244, 73%, 62%);
}
&.bordered {
border: 1px solid hsl(244, 73%, 62%);
}
&:hover {
background-color: hsl(244, 73%, 62%);
*, & {
color: white;
}
}
}
&.button-dark {
color: hsl(233, 18%, 29%);
background-color: white;
&.bordered {
border: 1px solid hsl(233, 18%, 29%);
}
&:hover {
background-color: hsl(233, 18%, 29%);
color: white;
}
}
&.reversed {
&.button-yellow {
background-color: hsl(43, 100%, 50%);
*, & {
color: white;
}
&:hover {
background-color: #FFCE51;
&.bordered {
border: 1px solid hsl(43, 100%, 50%);
}
}
}
&.button-blue {
background-color: hsl(244, 73%, 62%);
*, & {
color: white;
}
&:hover {
background-color: white;
*, & {
color: hsl(244, 73%, 62%);
}
&.bordered {
border: 1px solid hsl(244, 73%, 62%);
}
}
}
&.button-dark {
background-color: hsl(233, 18%, 29%);
*, & {
color: white;
}
&:hover {
background-color: white;
*, & {
color: hsl(233, 18%, 29%);
}
&.bordered {
border: 1px solid hsl(233, 18%, 29%);
}
}
}
}
}
}