brutcss/src/buttons.less
Yann Esposito (Yogsototh) 6ac7b2f382
Color play with filters
2022-10-11 14:50:00 +02:00

61 lines
1.4 KiB
Plaintext

.tb, .btn { text-decoration: none; display: inline-block; text-align: center;}
.tb { font-weight: bold;
cursor: pointer;
padding: 2px;
vertical-align: baseline;
}
.tb:before,.tb:after { opacity: 0.3; display: inline-block;}
.tb:before { content: "❬"; }
.tb:after { content: "❭"; }
.tb:hover { text-decoration: underline; }
.tb:hover::before,.tb:hover::after { opacity: 1; }
.tb:active:before { content: "❰"; }
.tb:active:after { content: "❱"; }
.tb {
&.info { color: var(--n2); }
&.ok { color: var(--n2); }
&.warn { color: var(--n2); }
&.err { color: var(--n2); }
&.fatal { color: var(--n2); }
}
.btn {
background: var(--n0);
border: solid 2px var(--fg);
color: #fff;
font-weight: bold;
cursor: pointer;
display: inline-block;
margin: 0 4px 4px 0;
padding: 1rem 2rem;
box-shadow: 4px 4px var(--shadow);
vertical-align: bottom;
}
.btn {
&.info { background: var(--n2); }
&.ok { background: var(--n2); }
&.warn { background: var(--n2); }
&.err { background: var(--n2); }
&.fatal { background: var(--n2); }
}
.btn:hover {
background: var(--n1);
color: #fff;
}
.btn:active,.btn:focus {
color: #fff;
background: var(--n2);
box-shadow: 1px 1px #000;
position: relative;
top: 3px;
left: 3px;
}
.btn.sm { padding: 0.5rem 1rem; }
.btn.std { width: 12rem; }
.btn.big.std { width: 20rem; }
.btn.huge.std { width: 24rem; }