mirror of
https://github.com/Steffo99/bluelib.git
synced 2025-01-03 00:54:20 +00:00
🔧 Refactor buttons
This commit is contained in:
parent
b2087fc6f8
commit
f6f889d7c7
12 changed files with 2308 additions and 866 deletions
39
index.html
39
index.html
|
|
@ -393,30 +393,35 @@
|
||||||
<input id="input-email" type="email" placeholder="Fields where the input is invalid are colored red"/>
|
<input id="input-email" type="email" placeholder="Fields where the input is invalid are colored red"/>
|
||||||
<label for="input-phone">Phone</label>
|
<label for="input-phone">Phone</label>
|
||||||
<input id="input-phone" type="tel" placeholder="Optional fields have italic text"/>
|
<input id="input-phone" type="tel" placeholder="Optional fields have italic text"/>
|
||||||
<label for="input-disabled">Disabled</label>
|
<label for="input-disabled">Fax</label>
|
||||||
<input id="input-disabled" type="text" placeholder="Disabled fields have a dashed underline" disabled required/>
|
<input id="input-disabled" type="text" placeholder="Disabled fields have a dashed underline" disabled required/>
|
||||||
<label for="input-select">Select</label>
|
<label for="input-select">Shirt size</label>
|
||||||
<select id="input-select">
|
<select id="input-select">
|
||||||
<option>A</option>
|
<optgroup label="Smaller">
|
||||||
<option>B</option>
|
<option>XXS</option>
|
||||||
<option>C</option>
|
<option>XS</option>
|
||||||
<optgroup label="D">
|
<option>S</option>
|
||||||
<option>D.1</option>
|
</optgroup>
|
||||||
<option>D.2</option>
|
<option>M</option>
|
||||||
<option>D.3</option>
|
<optgroup label="Larger">
|
||||||
|
<option>L</option>
|
||||||
|
<option>XL</option>
|
||||||
|
<option>XXL</option>
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</select>
|
</select>
|
||||||
<label for="input-multiple">Multiple</label>
|
<label for="input-multiple">Colors</label>
|
||||||
<select id="input-multiple" multiple>
|
<select id="input-multiple" multiple>
|
||||||
<option>A</option>
|
<option>Red</option>
|
||||||
<option>B</option>
|
<option>Yellow</option>
|
||||||
<option>C</option>
|
<option>Green</option>
|
||||||
<optgroup label="D">
|
<optgroup label="Blues">
|
||||||
<option>D.1</option>
|
<option>Blue</option>
|
||||||
<option>D.2</option>
|
<option>Purple</option>
|
||||||
|
<option>Cyan</option>
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</select>
|
</select>
|
||||||
<div class="form-buttons">
|
<div class="form-row">
|
||||||
|
<input id="input-reset" type="reset" value="Reset"/>
|
||||||
<input id="input-submit" type="submit" value="Submit"/>
|
<input id="input-submit" type="submit" value="Submit"/>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
||||||
167
src/rules/skeleton.less
vendored
167
src/rules/skeleton.less
vendored
|
|
@ -396,6 +396,37 @@
|
||||||
// Nested optgroups aren't allowed by browsers, so no need to worry about that
|
// Nested optgroups aren't allowed by browsers, so no need to worry about that
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@{input-button} {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
// Buttons are rendered as inline elements, but should arrange their contents as if they were flex
|
||||||
|
display: inline-flex;
|
||||||
|
// Center the button contents both vertically and horizontally
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
// Give the button a nice shape
|
||||||
|
padding: 6px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
// Give them a good clicking feedback
|
||||||
|
// (sadly it doesn't work if using the keyboard)
|
||||||
|
&:active {
|
||||||
|
border-color: @bC;
|
||||||
|
color: @bF;
|
||||||
|
background-color: @b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
// But not if they're disabled
|
||||||
|
@{status-disabled} {
|
||||||
|
&:active {
|
||||||
|
border-color: @b3;
|
||||||
|
color: @bA;
|
||||||
|
background-color: @b0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/// ===== Forms =====
|
/// ===== Forms =====
|
||||||
/// Forms are containers where interactable elements are contained.
|
/// Forms are containers where interactable elements are contained.
|
||||||
/// Every interactable is split in two parts: a label on the left and the control on the right.
|
/// Every interactable is split in two parts: a label on the left and the control on the right.
|
||||||
|
|
@ -452,142 +483,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// ===== Buttons =====
|
|
||||||
/// Buttons are clickable elements which should trigger an action when clicked.
|
|
||||||
/// Their contents are elements containing either an icon or text, or possibly both.
|
|
||||||
|
|
||||||
@{button} {
|
|
||||||
// Buttons are rendered as inline elements, but should arrange their contents as if they were flex
|
|
||||||
display: inline-flex;
|
|
||||||
|
|
||||||
// Center the button contents both vertically and horizontally
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
// Disable the operating system appearance for the button
|
|
||||||
appearance: none;
|
|
||||||
|
|
||||||
// Button properties should be set explicitly, as otherwise every browser will display them in a different manner
|
|
||||||
background-color: @bA;
|
|
||||||
color: @hex-away;
|
|
||||||
border: none;
|
|
||||||
padding: 6px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
|
|
||||||
// Buttons should display a pointer cursor
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
// Hovered buttons should provide feedback
|
|
||||||
background-color: @bC;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
// Activated buttons should provide greater feedback
|
|
||||||
background-color: @bF;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Disabled buttons shouldn't do anything
|
|
||||||
&@{status-disabled} {
|
|
||||||
&:hover {
|
|
||||||
background-color: @bA;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: @bA;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// If using keyboard navigation, display an outline to make the focused button more evident
|
|
||||||
&:focus-visible {
|
|
||||||
outline: 4px solid @b7 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@{button-fill-width} {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@{button-toggle} {
|
|
||||||
padding: 4px 14px;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid;
|
|
||||||
|
|
||||||
&@{status-disabled} {
|
|
||||||
border-style: dashed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@{button-toggle-off} {
|
|
||||||
border-color: @bA;
|
|
||||||
color: @bA;
|
|
||||||
background-color: @b0;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: @bC;
|
|
||||||
color: @bC;
|
|
||||||
background-color: @b1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
border-color: @bF;
|
|
||||||
color: @bF;
|
|
||||||
background-color: @b2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&@{status-disabled} {
|
|
||||||
border-style: dashed;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: @bA;
|
|
||||||
color: @bA;
|
|
||||||
background-color: @b0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
border-color: @bA;
|
|
||||||
color: @bA;
|
|
||||||
background-color: @b0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@{button-toggle-on} {
|
|
||||||
border-color: @bF;
|
|
||||||
color: @bF;
|
|
||||||
background-color: @b2;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: @bC;
|
|
||||||
color: @bC;
|
|
||||||
background-color: @b1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
border-color: @bA;
|
|
||||||
color: @bA;
|
|
||||||
background-color: @b0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&@{status-disabled} {
|
|
||||||
border-style: dashed;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: @bF;
|
|
||||||
color: @bF;
|
|
||||||
background-color: @b2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
border-color: @bF;
|
|
||||||
color: @bF;
|
|
||||||
background-color: @b2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Elements ---
|
// --- Elements ---
|
||||||
|
|
||||||
@{element-title} {
|
@{element-title} {
|
||||||
|
|
|
||||||
|
|
@ -401,6 +401,24 @@
|
||||||
.bluelib .input-multiselect .input-optgroup .input-option::before {
|
.bluelib .input-multiselect .input-optgroup .input-option::before {
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
.bluelib .input-button {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.bluelib .input-button:active {
|
||||||
|
border-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
||||||
|
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||||
|
}
|
||||||
|
.bluelib .input-button .status-disabled:active {
|
||||||
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||||
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
|
}
|
||||||
.bluelib .form {
|
.bluelib .form {
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -429,102 +447,6 @@
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.bluelib .button {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
appearance: none;
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: #ffffff;
|
|
||||||
border: none;
|
|
||||||
padding: 6px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.bluelib .button:hover {
|
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
|
||||||
}
|
|
||||||
.bluelib .button:active {
|
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
|
||||||
}
|
|
||||||
.bluelib .button.status-disabled:hover {
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
}
|
|
||||||
.bluelib .button.status-disabled:active {
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
}
|
|
||||||
.bluelib .button:focus-visible {
|
|
||||||
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
|
|
||||||
}
|
|
||||||
.bluelib .button-fill-width {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle {
|
|
||||||
padding: 4px 14px;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle.status-disabled {
|
|
||||||
border-style: dashed;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off:hover {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off:active {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off.status-disabled {
|
|
||||||
border-style: dashed;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off.status-disabled:hover {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off.status-disabled:active {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on:hover {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on:active {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on.status-disabled {
|
|
||||||
border-style: dashed;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on.status-disabled:hover {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on.status-disabled:active {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
|
||||||
}
|
|
||||||
.bluelib .element-title {
|
.bluelib .element-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
--bluelib-color-r: 24;
|
--bluelib-color-r: 24;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -401,6 +401,24 @@
|
||||||
.bluelib .input-multiselect .input-optgroup .input-option::before {
|
.bluelib .input-multiselect .input-optgroup .input-option::before {
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
.bluelib .input-button {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.bluelib .input-button:active {
|
||||||
|
border-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
||||||
|
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||||
|
}
|
||||||
|
.bluelib .input-button .status-disabled:active {
|
||||||
|
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||||
|
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||||
|
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||||
|
}
|
||||||
.bluelib .form {
|
.bluelib .form {
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -429,102 +447,6 @@
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.bluelib .button {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
appearance: none;
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: #000000;
|
|
||||||
border: none;
|
|
||||||
padding: 6px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.bluelib .button:hover {
|
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
|
||||||
}
|
|
||||||
.bluelib .button:active {
|
|
||||||
background-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
|
||||||
}
|
|
||||||
.bluelib .button.status-disabled:hover {
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
}
|
|
||||||
.bluelib .button.status-disabled:active {
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
}
|
|
||||||
.bluelib .button:focus-visible {
|
|
||||||
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
|
|
||||||
}
|
|
||||||
.bluelib .button-fill-width {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle {
|
|
||||||
padding: 4px 14px;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle.status-disabled {
|
|
||||||
border-style: dashed;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off:hover {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off:active {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off.status-disabled {
|
|
||||||
border-style: dashed;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off.status-disabled:hover {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-off.status-disabled:active {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on:hover {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on:active {
|
|
||||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on.status-disabled {
|
|
||||||
border-style: dashed;
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on.status-disabled:hover {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
|
||||||
}
|
|
||||||
.bluelib .button-toggle-on.status-disabled:active {
|
|
||||||
border-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
|
||||||
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
|
||||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
|
||||||
}
|
|
||||||
.bluelib .element-title {
|
.bluelib .element-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
--bluelib-color-r: 255;
|
--bluelib-color-r: 255;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -33,13 +33,14 @@
|
||||||
@input-multiselect: ~'.input-multiselect';
|
@input-multiselect: ~'.input-multiselect';
|
||||||
@input-option: ~'.input-option';
|
@input-option: ~'.input-option';
|
||||||
@input-optgroup: ~'.input-optgroup';
|
@input-optgroup: ~'.input-optgroup';
|
||||||
|
@input-button: ~'.input-button';
|
||||||
|
|
||||||
@form: ~".form";
|
@form: ~".form";
|
||||||
@form-label: ~".form-label";
|
@form-label: ~".form-label";
|
||||||
@form-input: ~".form-input";
|
@form-input: ~".form-input";
|
||||||
@form-row: ~".form-row";
|
@form-row: ~".form-row";
|
||||||
|
|
||||||
@button: ~'.button';
|
@button: ~':not()';
|
||||||
@button-fill-width: ~'.button-fill-width';
|
@button-fill-width: ~'.button-fill-width';
|
||||||
@button-toggle: ~'.button-toggle';
|
@button-toggle: ~'.button-toggle';
|
||||||
@button-toggle-off: ~'.button-toggle-off';
|
@button-toggle-off: ~'.button-toggle-off';
|
||||||
|
|
|
||||||
|
|
@ -27,23 +27,24 @@
|
||||||
|
|
||||||
@status-disabled: ~"[disabled], .status-disabled";
|
@status-disabled: ~"[disabled], .status-disabled";
|
||||||
|
|
||||||
@input: ~'input, select, .input';
|
@input: ~'@{input-field}, @{input-select}, @{input-multiselect}, @{input-button}, .input';
|
||||||
@input-field: ~'.input-field, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]';
|
@input-field: ~'.input-field, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]';
|
||||||
@input-select: ~'select:not([multiple]), .input-select';
|
@input-select: ~'select:not([multiple]), .input-select';
|
||||||
@input-multiselect: ~'select[multiple], .input-multiselect';
|
@input-multiselect: ~'select[multiple], .input-multiselect';
|
||||||
@input-option: ~'option, .input-option';
|
@input-option: ~'option, .input-option';
|
||||||
@input-optgroup: ~'optgroup, .input-optgroup';
|
@input-optgroup: ~'optgroup, .input-optgroup';
|
||||||
|
@input-button: ~'button, input[type="submit"], input[type="reset"], .input-button';
|
||||||
|
|
||||||
@form: ~"form, .form";
|
@form: ~"form, .form";
|
||||||
@form-label: ~"label, .form-label";
|
@form-label: ~"label, .form-label";
|
||||||
@form-input: ~"@{input}, .form-input";
|
@form-input: ~"@{input}, .form-input";
|
||||||
@form-row: ~"div, .form-row";
|
@form-row: ~"div, .form-row";
|
||||||
|
|
||||||
@button: ~'button, input[type="submit"], .button';
|
@button: ~':not()';
|
||||||
@button-fill-width: ~'.button-fill-width';
|
@button-fill-width: ~':not()';
|
||||||
@button-toggle: ~'.button-toggle';
|
@button-toggle: ~':not()';
|
||||||
@button-toggle-off: ~'.button-toggle-off';
|
@button-toggle-off: ~':not()';
|
||||||
@button-toggle-on: ~'.button-toggle-on';
|
@button-toggle-on: ~':not()';
|
||||||
@spoiler: ~".spoiler";
|
@spoiler: ~".spoiler";
|
||||||
@element-title: ~".element-title, h1, h2, h3, h4, h5, h6";
|
@element-title: ~".element-title, h1, h2, h3, h4, h5, h6";
|
||||||
@element-paragraph: ~".element-paragraph, p";
|
@element-paragraph: ~".element-paragraph, p";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue