CSS-NibblePoker/scss/site/input.scss
Herwin Bozet 88a40efb4e Initial commit
Update .gitignore, LICENSE-CC0, and 70 more files...
2024-11-04 22:53:06 +01:00

140 lines
2.4 KiB
SCSS

// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
/* Site > Elements > Inputs */
/* Site > Elements > Inputs > Commons */
button, input, textarea, select {
border: 0;
// Removing ugly-ass white glow when editing text-related inputs.
// Shit looks straight out of winforms in 2023...
outline: none;
color: #{$color-text-inputs};
background-color: #{$color-background-inputs};
&:not(.no-focus) {
&:focus {
box-shadow: 0px 0px 3px 0px #{$color-input-glow};
}
}
&:disabled {
cursor: not-allowed;
}
}
label {
cursor: pointer;
user-select: none;
}
/* Site > Elements > Inputs > Checkbox */
input[type=checkbox] {
width: 1.65em;
height: 1.65em;
background-color: #{$color-background-checkbox-unchecked};
cursor: pointer;
&:checked {
background-color: #{$color-background-checkbox-checked};
}
position: relative;
vertical-align: middle;
}
input[type="checkbox"] + label {
position: relative;
display: inline-block;
vertical-align: middle;
}
/* Site > Elements > Inputs > Buttons */
button {
cursor: pointer;
background-color: #{$color-background-button};
&:hover {
background-color: #{$color-background-button-hover};
}
&.primary {
background-color: #{$color-background-button-primary};
&:hover {
background-color: #{$color-background-button-primary-hover};
}
}
&.success {
background-color: #{$color-background-button-success};
&:hover {
background-color: #{$color-background-button-success-hover};
}
}
&.error {
background-color: #{$color-background-button-error};
&:hover {
background-color: #{$color-background-button-error-hover};
}
}
&.warning {
background-color: #{$color-background-button-warning};
&:hover {
background-color: #{$color-background-button-warning-hover};
}
}
}
// Ugly fix for download buttons
button + button, .button-link + .button-link > button {
margin-left: 0.75rem;
}
/* Site > Elements > Inputs > Lang Selector */
#lang-selector {
position: relative;
white-space: nowrap;
> summary {
cursor: pointer;
list-style: none;
user-select: none;
}
> div {
position: absolute;
z-index: #{$z-index-lang-dropdown};
top: 2rem;
right: 0;
min-width: 100%;
// Visibility transition
//height: 0;
//transition: height 0.4s;
//transition-timing-function: cubic-bezier(.25,.8,.25,1.1);
}
// TODO: Maybe force it to be visible when closes ?
//&[open] > div {
// height: auto;
//}
}
textarea {
&.no-resize {
resize: none;
}
}