120 lines
2.4 KiB
SCSS
120 lines
2.4 KiB
SCSS
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
|
|
|
/* Custom Elements > Wedge */
|
|
|
|
.wedge {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
|
|
clip-path: polygon(100% 0, 0 100%, 100% 100%);
|
|
border-radius: var(--base-border-radius) !important;
|
|
//border-bottom-right-radius: var(--base-border-radius) !important;
|
|
overflow: hidden;
|
|
|
|
color: var(--dm-button-text-color);
|
|
background-color: var(--dm-button-bg-color);
|
|
background-image: var(--dm-button-bg-image);
|
|
border-color: var(--dm-button-border-color);
|
|
opacity: 0.4;
|
|
|
|
// https://codepen.io/setswon/pen/VJeXXq
|
|
// Using a value of ~0.35 feels sluggish.
|
|
transition: width 0.25s ease, height 0.25s ease, opacity 0.2s ease;
|
|
transition-timing-function: cubic-bezier(.47,1.64,.41,.8);
|
|
|
|
user-select: none;
|
|
cursor: pointer;
|
|
|
|
&.primary {
|
|
color: white;
|
|
|
|
background-color: #{$color-wedge-blue-background};
|
|
border-color: #{$color-wedge-blue-border};
|
|
|
|
//color: var(--dm-button-primary-text-color);
|
|
//background-color: var(--dm-button-primary-bg-color);
|
|
//background-image: var(--dm-button-primary-bg-image);
|
|
//border-color: var(--dm-button-primary-border-color);
|
|
}
|
|
|
|
&.secondary {
|
|
color: var(--dm-button-secondary-text-color);
|
|
background-color: var(--dm-button-secondary-bg-color);
|
|
background-image: var(--dm-button-secondary-bg-image);
|
|
border-color: var(--dm-button-secondary-border-color);
|
|
}
|
|
|
|
&.danger {
|
|
color: var(--dm-button-secondary-text-color); // White icons looks like shit.
|
|
background-color: var(--dm-button-danger-bg-color);
|
|
background-image: var(--dm-button-danger-bg-image);
|
|
border-color: var(--dm-button-danger-border-color);
|
|
}
|
|
|
|
i {
|
|
position: absolute;
|
|
right: 0.2rem;
|
|
bottom: 0.2rem;
|
|
transition: right 0.25s ease, bottom 0.25s ease;
|
|
transition-timing-function: cubic-bezier(.47,1.64,.41,.8);
|
|
|
|
&.r-45 {
|
|
// Small fix
|
|
right: 0.4rem;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
opacity: 0.8;
|
|
|
|
i {
|
|
bottom: 0.325em;
|
|
right: 0.325rem;
|
|
|
|
&.r-45 {
|
|
// Small fix
|
|
right: 0.7rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Extra rule for mobile
|
|
// If it doesn't work, use "768px" !
|
|
@media (max-width: 576px) {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
opacity: 0.8;
|
|
|
|
i {
|
|
bottom: 0.325em;
|
|
right: 0.325rem;
|
|
|
|
&.r-45 {
|
|
// Small fix
|
|
right: 0.7rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.fold-top-right {
|
|
top: 0;
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%);
|
|
|
|
i {
|
|
top: 0.3em;
|
|
right: 0.3rem;
|
|
}
|
|
|
|
&:hover i {
|
|
top: 0.4rem;
|
|
right: 0.4rem;
|
|
}
|
|
}
|
|
}
|
|
|