mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-08 09:26:34 +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

40
less/common/App.less
View File

@@ -1,12 +1,12 @@
.App {
position: relative !important;
padding-top: @header-height;
padding-top: var(--header-height);
padding-bottom: 50px;
overflow-x: hidden;
min-height: 100vh;
@media @phone {
padding-top: @header-height-phone;
padding-top: var(--header-height-phone);
}
}
@@ -24,12 +24,12 @@
}
.scrolled & {
box-shadow: 0 2px 6px @shadow-color;
box-shadow: 0 2px 6px var(--shadow-color);
}
}
.App-primaryControl, .App-titleControl, .App-backControl {
position: absolute !important;
z-index: @zindex-header + 1;
z-index: calc(~"var(--zindex-header) + 1");
top: 0 !important;
margin: 0;
@@ -41,7 +41,7 @@
float: none;
background: transparent !important;
box-shadow: none !important;
height: @header-height-phone;
height: var(--header-height-phone);
width: auto;
padding: 13px !important;
margin: 0 !important;
@@ -71,7 +71,7 @@
margin: 0 !important;
> .Button {
color: @header-control-color !important;
color: var(--header-control-color) !important;
.Button-icon {
display: block;
@@ -88,13 +88,13 @@
left: 50%;
margin-left: -100px;
text-align: center;
color: @header-color !important;
color: var(--header-color) !important;
&, > .Button {
font-size: 16px;
}
> .Button {
color: @header-color;
color: var(--header-color);
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
@@ -130,16 +130,16 @@
overflow: hidden;
}
.App-drawer {
background: @header-bg;
width: @drawer-width;
background: var(--header-bg);
width: var(--drawer-width);
position: fixed;
left: 0;
top: 0;
bottom: 0;
box-shadow: 0 2px 6px @shadow-color;
transform: translate(-@drawer-width - 6px, 0);
box-shadow: 0 2px 6px var(--shadow-color);
transform: translateX(calc(~"-6px - var(--drawer-width)"));
transition: transform 0.2s;
z-index: @zindex-modal;
z-index: var(--zindex-modal);
.drawerOpen & {
-webkit-transform: none !important;
@@ -152,8 +152,8 @@
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
background-color: @overlay-bg;
z-index: var(--zindex-modal-background);
background-color: var(--overlay-bg);
opacity: 0;
transition: opacity 0.2s;
@@ -221,7 +221,7 @@
@media @phone {
.App-drawer {
& when (@config-colored-header = true) {
.light-contents(@header-color, @header-control-bg, @header-control-color);
.light-contents(@name: 'header-colored');
}
}
}
@@ -241,11 +241,11 @@
}
.scrolled & {
box-shadow: 0 2px 6px @shadow-color;
box-shadow: 0 2px 6px var(--shadow-color);
}
& when (@config-colored-header = true) {
.light-contents(@header-color, @header-control-bg, @header-control-color);
.light-contents(@name: 'header-colored');
}
}
@@ -295,7 +295,7 @@
// Content Area
.App-content {
border-top: 1px solid @control-bg;
border-top: 1px solid var(--control-bg);
}
// On phones, the content area overlays the drawer, so we must give it a
@@ -303,7 +303,7 @@
// meant to be open, we slide the content to the right to reveal the drawer.
@media @phone {
.App-content {
background: @body-bg;
background: var(--body-bg);
width: 100%;
min-height: 100vh;
padding-bottom: 50px;