steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +00:00
Code Activity

Add property-disabled selector and rules (fixes #52)

Browse source
This commit is contained in:
Steffo 2022-10-15 01:08:57 +02:00
parent 5bd22798b1
commit 8aefbaa6bd
Signed by: steffo
GPG key ID: 6965406171929D01
4 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
examples/index.html
View file

@ -181,30 +181,30 @@
Available rulesets Available rulesets
</h3> </h3>
<dl> <dl>
<dt><label><input type="checkbox" disabled checked name="ruleset-base"> Base</label></dt> <dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-base"> Base</label></dt>
<dd> <dd>
The base <i>ruleset</i>, providing the layout and basic high contrast theming. The base <i>ruleset</i>, providing the layout and basic high contrast theming.
</dd> </dd>
<dt><label><input type="checkbox" disabled checked name="ruleset-classic"> Classic</label></dt> <dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-classic"> Classic</label></dt>
<dd> <dd>
Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders. Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders.
</dd> </dd>
<dt><label><input type="checkbox" disabled checked name="ruleset-glass"> Glass</label></dt> <dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-glass"> Glass</label></dt>
<dd> <dd>
Made to celebrate the addition of <code>backdrop-filter</code> to Firefox, makes panels have a <q>stained glass</q> background. Made to celebrate the addition of <code>backdrop-filter</code> to Firefox, makes panels have a <q>stained glass</q> background.
</dd> </dd>
<dt><label><input type="checkbox" disabled checked name="ruleset-fun"> Fun</label></dt> <dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-fun"> Fun</label></dt>
<dd> <dd>
Experimental <i>ruleset</i> with bizzare or buggy but fun rules. Unsupported, do not use in production! Experimental <i>ruleset</i> with bizzare or buggy but fun rules. Unsupported, do not use in production!
</dd> </dd>
<dt>Colors</dt> <dt>Colors</dt>
<dd> <dd>
<dl> <dl>
<dt><label><input type="radio" disabled checked name="ruleset-colors"> Royal Blue</label></dt> <dt><label class="fade"><input type="radio" disabled checked name="ruleset-colors"> Royal Blue</label></dt>
<dd> <dd>
<a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors. <a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors.
</dd> </dd>
<dt><label><input type="radio" disabled name="ruleset-colors"> Gestione Amber</label></dt> <dt><label class="fade"><input type="radio" disabled name="ruleset-colors"> Gestione Amber</label></dt>
<dd> <dd>
<a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look. <a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look.
</dd> </dd>
@ -213,7 +213,7 @@
<dt>Fonts</dt> <dt>Fonts</dt>
<dd> <dd>
<dl> <dl>
<dt><label><input type="radio" disabled checked name="ruleset-fonts"> Fira</label></dt> <dt><label class="fade"><input type="radio" disabled checked name="ruleset-fonts"> Fira</label></dt>
<dd> <dd>
Font theme based upon Mozilla's <a href="https://github.com/mozilla/Fira">Fira</a> font. Font theme based upon Mozilla's <a href="https://github.com/mozilla/Fira">Fira</a> font.
</dd> </dd>
@ -226,11 +226,11 @@
Available selectorsets Available selectorsets
</h3> </h3>
<dl> <dl>
<dt><label><input type="radio" disabled checked name="selectorset"> Root</label></dt> <dt><label class="fade"><input type="radio" disabled checked name="selectorset"> Root</label></dt>
<dd> <dd>
Simple selectors for usage in plain HTML pages, with short and human-friendly class names. Simple selectors for usage in plain HTML pages, with short and human-friendly class names.
</dd> </dd>
<dt><label><input type="radio" disabled name="selectorset"> Module</label></dt> <dt><label class="fade"><input type="radio" disabled name="selectorset"> Module</label></dt>
<dd> <dd>
All selectors use class names, allowing the usage of the target with <a href="https://github.com/css-modules/css-modules">CSS Modules</a>. Useful for React or similar web app projects. All selectors use class names, allowing the usage of the target with <a href="https://github.com/css-modules/css-modules">CSS Modules</a>. Useful for React or similar web app projects.
</dd> </dd>

21
src/rulesets/base.less
View file

@ -547,6 +547,11 @@
} }
} }
@{property-disabled} {
border-style: dashed;
cursor: not-allowed;
}
@{modifier-red} { @{modifier-red} {
.map-hsl-group(current; red); .map-hsl-group(current; red);
} }
@ -599,7 +604,7 @@
color: .hsl-group(current; 0.4)[@c]; color: .hsl-group(current; 0.4)[@c];
} }
&:hover { &:hover:not(@{property-disabled}) {
border-color: .hsl-group(current; 0.7)[@c]; border-color: .hsl-group(current; 0.7)[@c];
&::placeholder { &::placeholder {
@ -607,7 +612,7 @@
} }
} }
&:active, &:focus { &:active:not(@{property-disabled}), &:focus:not(@{property-disabled}) {
border-color: .hsl-group(current)[@c]; border-color: .hsl-group(current)[@c];
} }
} }
@ -627,15 +632,18 @@
} }
// Mark interactivity by changing the mouse cursor // Mark interactivity by changing the mouse cursor
@{input-field}, @{input-area} { @{input-field}:not(@{property-disabled}), @{input-area}:not(@{property-disabled}) {
cursor: text; cursor: text;
} }
@{input-select}, @{input-multiselect} { @{input-select}:not(@{property-disabled}), @{input-multiselect}:not(@{property-disabled}) {
cursor: vertical-text; cursor: vertical-text;
} }
@{input-range} { @{input-range}:not(@{property-disabled}) {
cursor: ew-resize; cursor: ew-resize;
} }
@{input-radio}:not(@{property-disabled}), @{input-checkbox}:not(@{property-disabled}), @{input-button}:not(@{property-disabled}), @{input-color}:not(@{property-disabled}) {
cursor: pointer;
}
// Configure option display // Configure option display
@{input-select}, @{input-multiselect} { @{input-select}, @{input-multiselect} {
@ -662,9 +670,6 @@
@{input-radio}, @{input-checkbox} { @{input-radio}, @{input-checkbox} {
appearance: none; appearance: none;
// Make the element feel clickable
cursor: pointer;
// Set a fixed size // Set a fixed size
width: 1em; width: 1em;
height: 1em; height: 1em;

1
src/selectorsets/module.less
View file

@ -75,6 +75,7 @@
@modifier-mark: ~".modifier-mark"; @modifier-mark: ~".modifier-mark";
@element-mark: ~".element-mark"; @element-mark: ~".element-mark";
@modifier-todo: ~".modifier-todo"; @modifier-todo: ~".modifier-todo";
@property-disabled: ~".property-disabled";
@modifier-red: ~".modifier-red"; @modifier-red: ~".modifier-red";
@modifier-yellow: ~".modifier-yellow"; @modifier-yellow: ~".modifier-yellow";
@modifier-green: ~".modifier-green"; @modifier-green: ~".modifier-green";

1
src/selectorsets/root.less
View file

@ -75,6 +75,7 @@
@modifier-mark: ~".mark"; @modifier-mark: ~".mark";
@element-mark: ~"mark"; @element-mark: ~"mark";
@modifier-todo: ~".todo"; @modifier-todo: ~".todo";
@property-disabled: ~"[disabled]";
@modifier-red: ~".red"; @modifier-red: ~".red";
@modifier-yellow: ~".yellow"; @modifier-yellow: ~".yellow";
@modifier-green: ~".green"; @modifier-green: ~".green";