mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-11 10:55:47 +02:00
Code Issues Releases Wiki Activity

feat: Declare & Use CSS Custom Properties (#3146)

Browse Source
This commit is contained in:
Sami Mazouz
2021-11-04 22:34:18 +01:00
committed by GitHub
parent 26bf5d350b
commit 809df29d29
44 changed files with 502 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
less/common/mixins/light-contents.less
View File

@@ -1,26 +1,26 @@
// This is a mixin which styles components (buttons, inputs, etc.) for use on
// dark backgrounds.
.light-contents(@color: #fff, @control-bg: fade(#000, 10%), @control-color: #fff) {
.light-contents(@color: #fff; @control-bg: fade(#000, 10%); @control-color: #fff; @name: 'light-content') {
&, a {
color: @color;
color: var(~"--@{name}-color", @color);
}
.Button--link, .Search-input {
color: @control-color;
color: var(~"--@{name}-control-color", @control-color);
}
.FormControl {
background: @control-bg;
background: var(~"--@{name}-control-bg", @control-bg);
border: 0;
color: @control-color;
.placeholder(@control-color);
color: var(~"--@{name}-control-color", @control-color);
.placeholder(var(~"--@{name}-control-color", @control-color));
&:focus {
color: @color;
background: fadein(darken(@control-bg, 5%), 10%);
background: var(~"--@{name}-control-bg-shaded", fadein(darken(@control-bg, 5%), 10%));
}
}
.Button, .Button:hover {
color: @control-color;
background: @control-bg;
color: var(~"--@{name}-control-color", @control-color);
background: var(~"--@{name}-control-bg", @control-bg);
}
.Button--flat {
background: transparent;
@@ -30,7 +30,17 @@
.Button:focus,
.Button.focus,
.open > .Dropdown-toggle.Button {
background: fadein(@control-bg, 5%);
color: @control-color;
background: var(~"--@{name}-control-bg-fadedin", fadein(@control-bg, 5%));
color: var(~"--@{name}-control-color", @control-color);
}
}
.light-contents-vars(@color: #fff; @control-bg: fade(#000, 10%); @control-color: #fff; @name: 'light-content') {
@componentName: ~"@{name}";
--@{componentName}-color: @color;
--@{componentName}-control-color: @control-color;
--@{componentName}-control-bg: @control-bg;
--@{componentName}-control-bg-shaded: fadein(darken(@control-bg, 5%), 10%);
--@{componentName}-control-bg-fadedin: fadein(@control-bg, 5%);
}