Eww: Modularized and improved CSS
This commit is contained in:
@ -1,20 +1,26 @@
|
||||
@import 'css/colors';
|
||||
|
||||
@mixin rounding {
|
||||
/* MIXIN */
|
||||
|
||||
@mixin border-radius {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
@mixin window {
|
||||
border: $border-width solid $base04;
|
||||
margin: $gaps-screen $gaps-screen $gaps-screen;
|
||||
@include rounding;
|
||||
@mixin border-inactive {
|
||||
border-width: $border-width;
|
||||
border-style: solid;
|
||||
border-color: $base03;
|
||||
}
|
||||
|
||||
@import 'css/sys';
|
||||
@import 'css/net';
|
||||
@import 'css/clock';
|
||||
@import 'css/radio';
|
||||
@import 'css/powermenu';
|
||||
@mixin border-active {
|
||||
border-color: $base04;
|
||||
}
|
||||
|
||||
@mixin test {
|
||||
|
||||
}
|
||||
|
||||
/* GENERAL */
|
||||
|
||||
* {
|
||||
all: unset;
|
||||
@ -22,14 +28,6 @@
|
||||
transition: 200ms ease;
|
||||
}
|
||||
|
||||
.bar {
|
||||
color: $fg;
|
||||
|
||||
label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
tooltip {
|
||||
background: $base01;
|
||||
border: $border-width solid $base04;
|
||||
@ -43,33 +41,6 @@ tooltip {
|
||||
.icon,
|
||||
.icon label { font-family: Material Design Icons; }
|
||||
|
||||
.ws {
|
||||
border-radius: $border-radius;
|
||||
margin: $gaps-window;
|
||||
}
|
||||
|
||||
.focused {
|
||||
background-color: $bg1;
|
||||
border-radius: 1rem;
|
||||
margin: .3rem;
|
||||
padding: .25rem;
|
||||
}
|
||||
|
||||
.module {
|
||||
background: $base01;
|
||||
border-radius: $border-radius;
|
||||
border-color: $base03;
|
||||
border-style: solid;
|
||||
border-width: $border-width;
|
||||
border-right-style: none;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding: $gaps-screen $gaps-window;
|
||||
margin: $gaps-screen 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.grey {
|
||||
background-color: $base02;
|
||||
}
|
||||
@ -88,4 +59,74 @@ tooltip {
|
||||
|
||||
.blue {
|
||||
background-color: $base0C;
|
||||
}
|
||||
}
|
||||
|
||||
/* WINDOW WRAPPER CSS */
|
||||
|
||||
.winevent {
|
||||
background-color: $base01;
|
||||
color: $base07;
|
||||
@include border-radius;
|
||||
@include border-inactive;
|
||||
}
|
||||
.winevent:hover {
|
||||
@include border-active;
|
||||
}
|
||||
|
||||
.wininner {
|
||||
padding: $gaps-window;
|
||||
}
|
||||
.winouter {
|
||||
margin: $gaps-screen;
|
||||
}
|
||||
|
||||
/* MODULE WRAPPER CSS */
|
||||
|
||||
.modevent {
|
||||
background-color: $base01;
|
||||
color: $base07;
|
||||
@include border-radius;
|
||||
@include border-inactive;
|
||||
border-right-style: none;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.modevent:hover {
|
||||
@include border-active;
|
||||
}
|
||||
|
||||
.modinner {
|
||||
padding: $gaps-screen 0 $gaps-screen $gaps-window;
|
||||
}
|
||||
.modouter {
|
||||
margin: $gaps-screen 0;
|
||||
}
|
||||
|
||||
/* IMPORTS EXTERNAL */
|
||||
|
||||
@import 'css/sys';
|
||||
@import 'css/net';
|
||||
@import 'css/clock';
|
||||
@import 'css/radio';
|
||||
@import 'css/powermenu';
|
||||
|
||||
|
||||
/* BAR */
|
||||
|
||||
.bar label {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* WORKSPACE */
|
||||
|
||||
.ws {
|
||||
border-radius: $border-radius;
|
||||
margin: $gaps-window;
|
||||
}
|
||||
|
||||
.focused {
|
||||
background-color: $bg1;
|
||||
border-radius: 1rem;
|
||||
margin: .3rem;
|
||||
padding: .25rem;
|
||||
}
|
||||
|
Reference in New Issue
Block a user