mirror of
https://github.com/pmoreno-rodriguez/grav-theme-future2021.git
synced 2025-06-07 20:08:54 +00:00
Added new styles for buttons
This commit is contained in:
pmoreno.rodriguez
parent
0713cc7493
commit
b4428eb86b
4 changed files with 229 additions and 3 deletions
|
|
@ -1555,6 +1555,144 @@ button.small,
|
|||
.button.small {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
input[type=submit].primary,
|
||||
input[type=reset].primary,
|
||||
input[type=button].primary,
|
||||
button.primary,
|
||||
.button.primary {
|
||||
background-color: #ba2e5d;
|
||||
box-shadow: none;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
input[type=submit].primary:hover,
|
||||
input[type=reset].primary:hover,
|
||||
input[type=button].primary:hover,
|
||||
button.primary:hover,
|
||||
.button.primary:hover {
|
||||
background-color: #c63163;
|
||||
}
|
||||
input[type=submit].primary:active,
|
||||
input[type=reset].primary:active,
|
||||
input[type=button].primary:active,
|
||||
button.primary:active,
|
||||
.button.primary:active {
|
||||
background-color: #ae2b57;
|
||||
}
|
||||
input[type=submit].secondary,
|
||||
input[type=reset].secondary,
|
||||
input[type=button].secondary,
|
||||
button.secondary,
|
||||
.button.secondary {
|
||||
background-color: #6c757d;
|
||||
box-shadow: none;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
input[type=submit].secondary:hover,
|
||||
input[type=reset].secondary:hover,
|
||||
input[type=button].secondary:hover,
|
||||
button.secondary:hover,
|
||||
.button.secondary:hover {
|
||||
background-color: #737d85;
|
||||
}
|
||||
input[type=submit].secondary:active,
|
||||
input[type=reset].secondary:active,
|
||||
input[type=button].secondary:active,
|
||||
button.secondary:active,
|
||||
.button.secondary:active {
|
||||
background-color: #656d75;
|
||||
}
|
||||
input[type=submit].success,
|
||||
input[type=reset].success,
|
||||
input[type=button].success,
|
||||
button.success,
|
||||
.button.success {
|
||||
background-color: #48c774;
|
||||
box-shadow: none;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
input[type=submit].success:hover,
|
||||
input[type=reset].success:hover,
|
||||
input[type=button].success:hover,
|
||||
button.success:hover,
|
||||
.button.success:hover {
|
||||
background-color: #54cb7d;
|
||||
}
|
||||
input[type=submit].success:active,
|
||||
input[type=reset].success:active,
|
||||
input[type=button].success:active,
|
||||
button.success:active,
|
||||
.button.success:active {
|
||||
background-color: #3cc36b;
|
||||
}
|
||||
input[type=submit].info,
|
||||
input[type=reset].info,
|
||||
input[type=button].info,
|
||||
button.info,
|
||||
.button.info {
|
||||
background-color: #209cee;
|
||||
box-shadow: none;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
input[type=submit].info:hover,
|
||||
input[type=reset].info:hover,
|
||||
input[type=button].info:hover,
|
||||
button.info:hover,
|
||||
.button.info:hover {
|
||||
background-color: #2ea2ef;
|
||||
}
|
||||
input[type=submit].info:active,
|
||||
input[type=reset].info:active,
|
||||
input[type=button].info:active,
|
||||
button.info:active,
|
||||
.button.info:active {
|
||||
background-color: #1296ed;
|
||||
}
|
||||
input[type=submit].warning,
|
||||
input[type=reset].warning,
|
||||
input[type=button].warning,
|
||||
button.warning,
|
||||
.button.warning {
|
||||
background-color: #ffdd57;
|
||||
box-shadow: none;
|
||||
color: #3c3b3b !important;
|
||||
}
|
||||
input[type=submit].warning:hover,
|
||||
input[type=reset].warning:hover,
|
||||
input[type=button].warning:hover,
|
||||
button.warning:hover,
|
||||
.button.warning:hover {
|
||||
background-color: #ffe066;
|
||||
}
|
||||
input[type=submit].warning:active,
|
||||
input[type=reset].warning:active,
|
||||
input[type=button].warning:active,
|
||||
button.warning:active,
|
||||
.button.warning:active {
|
||||
background-color: #ffda48;
|
||||
}
|
||||
input[type=submit].danger,
|
||||
input[type=reset].danger,
|
||||
input[type=button].danger,
|
||||
button.danger,
|
||||
.button.danger {
|
||||
background-color: #ff3860;
|
||||
box-shadow: none;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
input[type=submit].danger:hover,
|
||||
input[type=reset].danger:hover,
|
||||
input[type=button].danger:hover,
|
||||
button.danger:hover,
|
||||
.button.danger:hover {
|
||||
background-color: #ff476c;
|
||||
}
|
||||
input[type=submit].danger:active,
|
||||
input[type=reset].danger:active,
|
||||
input[type=button].danger:active,
|
||||
button.danger:active,
|
||||
.button.danger:active {
|
||||
background-color: #ff2954;
|
||||
}
|
||||
input[type=submit].disabled, input[type=submit]:disabled,
|
||||
input[type=reset].disabled,
|
||||
input[type=reset]:disabled,
|
||||
|
|
@ -2832,11 +2970,13 @@ table.alt tfoot {
|
|||
font-size: inherit;
|
||||
letter-spacing: 0em;
|
||||
line-height: inherit;
|
||||
margin-top: 1em;
|
||||
margin: 1em 0;
|
||||
text-transform: initial;
|
||||
padding: 0 1em;
|
||||
}
|
||||
#features header h3 {
|
||||
margin-top: 0em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
|
|
|
|||
2
assets/css/main.min.css
vendored
2
assets/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -71,7 +71,88 @@
|
|||
&.small {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
&.primary {
|
||||
background-color: _palette(accent);
|
||||
box-shadow: none;
|
||||
color: _palette(bg) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(_palette(accent), 3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(_palette(accent), 3);
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: _palette(secondary);
|
||||
box-shadow: none;
|
||||
color: _palette(bg) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(_palette(secondary), 3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(_palette(secondary), 3);
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
background-color: _palette(success);
|
||||
box-shadow: none;
|
||||
color: _palette(bg) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(_palette(success), 3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(_palette(success), 3);
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: _palette(info);
|
||||
box-shadow: none;
|
||||
color: _palette(bg) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(_palette(info), 3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(_palette(info), 3);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: _palette(warning);
|
||||
box-shadow: none;
|
||||
color: _palette(fg-bold) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(_palette(warning), 3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(_palette(warning), 3);
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: _palette(danger);
|
||||
box-shadow: none;
|
||||
color: _palette(bg) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(_palette(danger), 3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(_palette(danger), 3);
|
||||
}
|
||||
}
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
@include vendor('pointer-events', 'none');
|
||||
|
|
|
|||
|
|
@ -45,5 +45,10 @@ $palette: (
|
|||
border-bg: rgba(160,160,160,0.075),
|
||||
border-alt: rgba(160,160,160,0.65),
|
||||
border-dropdown: rgba(0, 0, 0, 0.15),
|
||||
accent: #ba2e5d
|
||||
accent: #ba2e5d,
|
||||
secondary: #6c757d,
|
||||
success: #48c774,
|
||||
info: #209cee,
|
||||
warning: #ffdd57,
|
||||
danger: #ff3860
|
||||
);
|
||||
Loading…
Add table
Reference in a new issue