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

[1.x] Custom Colorising with CSS Custom Properties (#3001)

Browse Source 
* Start of conversion to CSS variables
* Use variable for Badge colors
* Use variable for avatar bg
* Use variable for user card bg
* Use css variables for hero
* Use css variables for buttons
* Use css variables for sidenav links
* Cleaner style attr

Co-authored-by: David Wheatley <hi@davwheat.dev>
This commit is contained in:
Sami Mazouz
2021-08-16 10:17:48 +01:00
committed by GitHub
parent 5798c4b355
commit ef20e29b20
16 changed files with 50 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
less/common/Button.less
View File

@@ -53,7 +53,7 @@
padding: 8px 13px;
border-radius: @border-radius;
.user-select(none);
.Button--color(@control-color, @control-bg);
.Button--color(@control-color, @control-bg, 'button');
border: 0;
&:hover {
@@ -98,26 +98,28 @@
}
}
.Button--color(@color; @background) {
color: @color;
background: @background;
.Button--color(@color; @background; @name: 'button') {
color: var(~"--@{name}-color", ~"@{color}");
background: var(~"--@{name}-bg", ~"@{background}");
@bg-hover: darken(fadein(@background, 5%), 5%);
@bg-active: darken(fadein(@background, 10%), 10%);
&:hover,
&:focus,
&.focus {
background-color: darken(fadein(@background, 5%), 5%);
background-color: var(~"--@{name}-bg-hover", ~"@{bg-hover}");
}
&:active,
&.active,
.open > .Dropdown-toggle& {
background-color: darken(fadein(@background, 10%), 10%);
background-color: var(~"--@{name}-bg-active", ~"@{bg-active}");
}
&.disabled,
&[disabled],
fieldset[disabled] & {
background: @background;
background: var(~"--@{name}-bg-disabled", ~"@{background}");
}
}
@@ -166,7 +168,7 @@
}
}
.Button--primary {
.Button--color(@body-bg, @primary-color);
.Button--color(@body-bg, @primary-color, 'button-primary');
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
@@ -176,7 +178,7 @@
}
}
.Button--danger {
.Button--color(@control-danger-color, @control-danger-bg);
.Button--color(@control-danger-color, @control-danger-bg, 'control-danger');
}
.Button--more {
padding: 2px 4px;