add: new design (wip)
New design as WIP, swipe controls
This commit is contained in:
parent
259adf53f6
commit
7af148058e
15 changed files with 354 additions and 142 deletions
|
@ -1,7 +1,7 @@
|
|||
.Button {
|
||||
--padding: .2rem;
|
||||
--background: var(--color-main);
|
||||
--color: var(--color-white);
|
||||
--background: var(--color-gradient-main-dark);
|
||||
--color: var(--color-lightest);
|
||||
--background-hover: var(--color-main-dark);
|
||||
|
||||
position: relative;
|
||||
|
@ -16,20 +16,27 @@
|
|||
background: var(--background);
|
||||
color: var(--color);
|
||||
|
||||
&.transparent {
|
||||
--background: transparent;
|
||||
box-shadow: none;
|
||||
padding: .5em 1.5em;
|
||||
border-radius: var(--radius-default);
|
||||
}
|
||||
|
||||
&.raised {
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
padding: .5em 1.5em;
|
||||
border-radius: var(--radius-default);
|
||||
|
||||
&.danger {
|
||||
--background: var(--color-red);
|
||||
--color: var(--color-white);
|
||||
--background: var(--color-gradient-error);
|
||||
--color: var(--color-lightest);
|
||||
}
|
||||
}
|
||||
|
||||
&.text {
|
||||
--background: transparent;
|
||||
--color: var(--color-black);
|
||||
--color: var(--color-darkest);
|
||||
padding: .5em 1.5em;
|
||||
border-radius: var(--radius-default);
|
||||
|
||||
|
@ -38,11 +45,11 @@
|
|||
}
|
||||
|
||||
&.white {
|
||||
--color: var(--color-white);
|
||||
--color: var(--color-lightest);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
--color: var(--color-red);
|
||||
--color: var(--color-error);
|
||||
|
||||
&:hover {
|
||||
--background: rgba(255, 0, 0, 0.1);
|
||||
|
@ -71,9 +78,9 @@
|
|||
}
|
||||
|
||||
&.cta.white {
|
||||
--background: var(--color-white);
|
||||
--background: var(--color-lightest);
|
||||
--color: var(--color-main);
|
||||
--background-hover: var(--color-grey);
|
||||
--background-hover: var(--color-light);
|
||||
}
|
||||
|
||||
&.icon-button {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue