LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented configurable and toggleable button borders. (#279)

Browse Source 
* Implemented configurable and toggleable button borders.

* Improve and simplify border logic

* Fix hidden label icon borders.

* Removed button hover property from bar buttons, they dim on hover now by default.

* Rename file.

* Update catppuccin normal theme's storage module color.

* update mocha items

* update mochas

* Update themes to account for borders
This commit is contained in:
Jas Singh
2024-09-22 02:59:30 -07:00
committed by GitHub
parent b47864d8e1
commit 6905fb4eb7
58 changed files with 2315 additions and 1404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
scss/options_trackers.ts → scss/optionsTrackers.ts
View File

2
scss/style.ts
View File

@@ -1,7 +1,7 @@
import options from 'options';
import { bash, dependencies } from 'lib/utils';
import { MatugenColors, RecursiveOptionsObject } from 'lib/types/options';
import { initializeTrackers } from './options_trackers';
import { initializeTrackers } from './optionsTrackers';
import { generateMatugenColors, replaceHexValues } from '../services/matugen/index';
const deps = ['font', 'theme', 'bar.flatButtons', 'bar.position', 'bar.battery.charging', 'bar.battery.blocks'];

69
scss/style/bar/audio.scss
View File

@@ -1,28 +1,59 @@
.bar-button-icon.volume {
font-size: 1.3em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon);
font-size: 1.3em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon);
}
.bar-button-label.volume {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-volume-text);
min-width: 2.2em;
margin-left: $bar-buttons-volume-spacing;
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-volume-text);
min-width: 2.2em;
margin-left: $bar-buttons-volume-spacing;
}
.style2 {
.bar-button-icon.volume {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-volume-spacing;
}
.bar-button-icon.volume {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-volume-spacing;
border-top-left-radius: if(
$bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-left-radius: if(
$bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
.bar-button-label.volume {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-volume-spacing;
margin-left: 0em;
}
.bar-button-label.volume {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-volume-spacing;
margin-left: 0em;
}
&.no-label.volume-container {
.bar-button-icon.volume {
border-top-right-radius: if(
$bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-right-radius: if(
$bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
}
}
.bar_item_box_visible.volume {
border: if(
$bar-buttons-volume-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-border),
0em
);
}

305
scss/style/bar/bar.scss
View File

@@ -1,22 +1,21 @@
.bar {
* {
font-size: $font-size * $bar-scaling * 0.01;
}
* {
font-size: $font-size * $bar-scaling * 0.01;
}
.bar-panel-container {
margin-top: if($bar-floating, $bar-margin_top, 0em);
margin-bottom: if($bar-floating, $bar-margin_bottom, 0em);
margin-left: if($bar-floating, $bar-margin_sides, 0em);
margin-right: if($bar-floating, $bar-margin_sides, 0em);
}
.bar-panel-container {
margin-top: if($bar-floating, $bar-margin_top, 0em);
margin-bottom: if($bar-floating, $bar-margin_bottom, 0em);
margin-left: if($bar-floating, $bar-margin_sides, 0em);
margin-right: if($bar-floating, $bar-margin_sides, 0em);
}
.bar-panel {
$bar-opacity-ratio: $bar-opacity * 0.01;
$transparency-value: 1 - $bar-opacity-ratio;
background: if($bar-transparent, transparent, transparentize($bar-background, $transparency-value));
border-radius: if($bar-floating, $bar-border_radius, 0em);
}
.bar-panel {
$bar-opacity-ratio: $bar-opacity * 0.01;
$transparency-value: 1 - $bar-opacity-ratio;
background: if($bar-transparent, transparent, transparentize($bar-background, $transparency-value));
border-radius: if($bar-floating, $bar-border_radius, 0em);
}
}
$bar-button-background-opacity-ratio: $bar-buttons-background_opacity * 0.01;
@@ -26,186 +25,132 @@ $bar-button-background-hover-opacity-ratio: $bar-buttons-background_hover_opacit
$transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
.bar_item_box_visible {
background-color: transparentize($bar-buttons-background, $transparency-value);
border-radius: $bar-buttons-radius;
margin: $bar-buttons-y_margins $bar-buttons-spacing;
opacity: $bar-buttons-opacity * 0.01;
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
background-color: transparentize($bar-buttons-background, $transparency-value);
border-radius: $bar-buttons-radius;
margin: $bar-buttons-y_margins $bar-buttons-spacing;
opacity: $bar-buttons-opacity * 0.01;
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
&.style3 {
border-bottom-left-radius: 1.3em;
border-top-right-radius: 1.3em;
}
&.style4 {
border-bottom-right-radius: 1.3em;
border-top-left-radius: 1.3em;
}
&:hover {
background: transparentize($bar-buttons-hover, $transparency-value-hover);
}
&.battery {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-battery-background), $transparency-value);
&:hover {
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-battery-hover), $transparency-value-hover);
}
}
&.bluetooth {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-bluetooth-background), $transparency-value);
&:hover {
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-bluetooth-hover), $transparency-value-hover);
}
}
&.clock {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-clock-background), $transparency-value);
&:hover {
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-clock-hover), $transparency-value-hover);
}
}
&.media {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-media-background), $transparency-value);
&:hover {
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-media-hover), $transparency-value-hover);
}
}
&.dashboard {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-background), $transparency-value);
&:hover {
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-dashboard-hover), $transparency-value-hover);
}
}
&.network {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-network-background), $transparency-value);
&:hover {
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-network-hover), $transparency-value-hover);
}
}
&.notifications {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-notifications-background), $transparency-value);
&:hover {
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-notifications-hover), $transparency-value-hover);
}
}
&.systray {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-systray-background), $transparency-value);
&:hover {
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-systray-hover), $transparency-value-hover);
}
}
&.volume {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-volume-background), $transparency-value);
&:hover {
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-volume-hover), $transparency-value-hover);
}
}
&.windowtitle {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-windowtitle-background), $transparency-value);
&:hover {
background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-hover), $transparency-value-hover);
}
}
&.workspaces {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background), $transparency-value);
}
&.style2 {
padding: 0em;
&:hover {
.dashboard .bar-button_icon {
color: $bar-buttons-dashboard_background;
}
&.style3 {
border-bottom-left-radius: 1.3em;
border-top-right-radius: 1.3em;
}
&:hover .no-label {
.battery .bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-battery-hover), $transparency-value);
color: $bar-buttons-battery-icon_background;
}
&.style4 {
border-bottom-right-radius: 1.3em;
border-top-left-radius: 1.3em;
}
.bluetooth.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-bluetooth-hover), $transparency-value);
color: $bar-buttons-bluetooth-icon_background;
}
.media.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-media-hover), $transparency-value);
color: $bar-buttons-media-icon_background;
}
.network.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-network-hover), $transparency-value);
color: $bar-buttons-network-icon_background;
}
.notifications.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-notifications-hover), $transparency-value);
color: $bar-buttons-notifications-icon_background;
}
.volume.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-volume-hover), $transparency-value);
color: $bar-buttons-volume-icon_background;
}
.windowtitle.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-hover), $transparency-value);
color: $bar-buttons-windowtitle-icon_background;
}
.clock.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-clock-hover), $transparency-value);
color: $bar-buttons-clock-icon_background;
}
.bar-button-icon {
&:hover {
opacity: 0.5;
}
}
}
&.battery {
background-color: transparentize(
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-battery-background),
$transparency-value
);
}
&.bluetooth {
background-color: transparentize(
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-bluetooth-background),
$transparency-value
);
}
&.clock {
background-color: transparentize(
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-clock-background),
$transparency-value
);
}
&.media {
background-color: transparentize(
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-media-background),
$transparency-value
);
}
&.dashboard {
background-color: transparentize(
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-background),
$transparency-value
);
}
&.network {
background-color: transparentize(
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-network-background),
$transparency-value
);
}
&.notifications {
background-color: transparentize(
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-notifications-background),
$transparency-value
);
}
&.systray {
background-color: transparentize(
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-systray-background),
$transparency-value
);
&:hover {
opacity: 1;
}
}
&.volume {
background-color: transparentize(
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-volume-background),
$transparency-value
);
}
&.windowtitle {
background-color: transparentize(
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-windowtitle-background),
$transparency-value
);
}
&.workspaces {
background-color: transparentize(
if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background),
$transparency-value
);
&:hover {
opacity: 1;
}
}
&.style2 {
padding: 0em;
}
}
.no-label.style2 {
.bar-button-icon {
border-top-right-radius: $bar-buttons-radius;
border-bottom-right-radius: $bar-buttons-radius;
}
.bar-button-icon {
border-top-right-radius: $bar-buttons-radius;
border-bottom-right-radius: $bar-buttons-radius;
}
}
.bar_item_box_hidden {
background: none;
border-radius: 0rem;
padding: 0rem 0rem 0rem 0rem;
margin: 0rem 0rem 0rem 0rem;
background: none;
border-radius: 0rem;
padding: 0rem 0rem 0rem 0rem;
margin: 0rem 0rem 0rem 0rem;
}
.box-left {
margin-left: $bar-outer_spacing;
margin-left: $bar-outer_spacing;
}
.box-right {
margin-right: $bar-outer_spacing;
margin-right: $bar-outer_spacing;
}

66
scss/style/bar/battery.scss
View File

@@ -1,26 +1,58 @@
.bar-button-label.battery {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-battery-text);
margin-left: $bar-buttons-battery-spacing;
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-battery-text);
margin-left: $bar-buttons-battery-spacing;
}
.bar-button-icon.battery {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
}
.style2 {
.bar-button-icon.battery {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-battery-spacing;
}
.bar-button-icon.battery {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-battery-spacing;
border-top-left-radius: if(
$bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-left-radius: if(
$bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
.bar-button-label.battery {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-battery-spacing;
margin-left: 0em;
}
.bar-button-label.battery {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-battery-spacing;
margin-left: 0em;
}
&.no-label.battery-container {
.bar-button-icon.battery {
border-top-right-radius: if(
$bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-right-radius: if(
$bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
}
}
.bar_item_box_visible.battery {
border: if(
$bar-buttons-battery-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-border),
0em
);
}

78
scss/style/bar/bluetooth.scss
View File

@@ -1,38 +1,70 @@
.bar-button-icon.bluetooth {
font-size: 1.15em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon);
font-size: 1.15em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon);
}
.bar-button-label.bluetooth {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
margin-left: $bar-buttons-bluetooth-spacing;
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
margin-left: $bar-buttons-bluetooth-spacing;
}
.bluetooth-disabled-menu {
font-weight: bold;
font-size: 1.1rem;
color: $surface2;
margin: 6rem 0rem;
font-weight: bold;
font-size: 1.1rem;
color: $surface2;
margin: 6rem 0rem;
}
.menu-button-isactive {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
}
.style2 {
.bar-button-icon.bluetooth {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-bluetooth-spacing;
}
.bar-button-icon.bluetooth {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-bluetooth-spacing;
border-top-left-radius: if(
$bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-left-radius: if(
$bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
.bar-button-label.bluetooth {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-bluetooth-spacing;
margin-left: 0em;
}
.bar-button-label.bluetooth {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-bluetooth-spacing;
margin-left: 0em;
}
&.no-label.bluetooth-container {
.bar-button-icon.bluetooth {
border-top-right-radius: if(
$bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-right-radius: if(
$bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
}
}
.bar_item_box_visible.bluetooth {
border: if(
$bar-buttons-bluetooth-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-border),
0em
);
}

68
scss/style/bar/clock.scss
View File

@@ -1,27 +1,59 @@
.bar-button-label.clock {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-clock-text);
margin-left: $bar-buttons-clock-spacing;
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-clock-text);
margin-left: $bar-buttons-clock-spacing;
}
.bar-button-icon.clock {
font-size: 1.2em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon);
font-size: 1.2em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon);
}
.style2 {
.bar-button-icon.clock {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-media-spacing;
}
.bar-button-icon.clock {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-clock-spacing;
border-top-left-radius: if(
$bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-left-radius: if(
$bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
.bar-button-label.clock {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-clock-spacing;
margin-left: 0em;
}
.bar-button-label.clock {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-clock-spacing;
margin-left: 0em;
}
&.no-label.clock-container {
.bar-button-icon.clock {
border-top-right-radius: if(
$bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-right-radius: if(
$bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
}
}
.bar_item_box_visible.clock {
border: if(
$bar-buttons-clock-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-border),
0em
);
}

52
scss/style/bar/media.scss
View File

@@ -1,27 +1,43 @@
.bar-button-label.media {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-media-text);
margin-left: $bar-buttons-media-spacing;
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-media-text);
margin-left: $bar-buttons-media-spacing;
}
.bar-button-icon.media {
font-size: 1.2em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);
font-size: 1.2em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);
}
.style2 {
.bar-button-icon.media {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-media-spacing;
}
.bar-button-icon.media {
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-media-spacing;
border-top-left-radius: if(
$bar-buttons-media-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-left-radius: if(
$bar-buttons-media-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
.bar-button-label.media {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-media-spacing;
margin-left: 0em;
}
.bar-button-label.media {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-media-spacing;
margin-left: 0em;
}
}
.bar_item_box_visible.media {
border: if(
$bar-buttons-media-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-border),
0em
);
}

27
scss/style/bar/menu.scss
View File

@@ -1,24 +1,25 @@
.bar-menu_label {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-icon);
font-size: 1.3em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-icon);
font-size: 1.3em;
border-radius: $bar-buttons-radius;
}
.bar_item_box_visible.style2.dashboard {
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-background);
.bar-menu_label {
color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-icon);
}
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-icon);
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-background);
.bar-menu_label {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-background);
color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-icon);
}
}
}
.style2 .bar-menu_label {
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
}
.bar_item_box_visible.dashboard {
border: if(
$bar-buttons-dashboard-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-border),
0em
);
}

70
scss/style/bar/network.scss
View File

@@ -1,26 +1,58 @@
.bar-button-label.network {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-network-text);
margin-left: $bar-buttons-network-spacing;
.bar-button-label.network-label {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-network-text);
margin-left: $bar-buttons-network-spacing;
}
.bar-button-icon.network {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
.bar-button-icon.network-icon {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
}
.style2 {
.bar-button-icon.network {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-network-spacing;
}
.bar-button-icon.network-icon {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-network-spacing;
border-top-left-radius: if(
$bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-left-radius: if(
$bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
.bar-button-label.network {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-network-spacing;
margin-left: 0em;
}
.bar-button-label.network-label {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-network-spacing;
margin-left: 0em;
}
&.no-label.network-container {
.bar-button-icon.network-icon {
border-top-right-radius: if(
$bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-right-radius: if(
$bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
}
}
.bar_item_box_visible.network {
border: if(
$bar-buttons-network-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-border),
0em
);
}

71
scss/style/bar/notifications.scss
View File

@@ -1,28 +1,61 @@
.bar-button-icon.notifications {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
font-size: 1.3em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
font-size: 1.3em;
}
.bar-button-label.notifications {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-notifications-total);
margin-left: $bar-buttons-notifications-spacing;
min-width: 1em;
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-notifications-total);
margin-left: $bar-buttons-notifications-spacing;
min-width: 1em;
}
.style2 {
.bar-button-icon.notifications {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-notifications-spacing;
}
.bar-button-icon.notifications {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-notifications-spacing;
border-top-left-radius: if(
$bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-left-radius: if(
$bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
.bar-button-label.notifications {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-notifications-spacing;
margin-left: 0em;
}
.bar-button-label.notifications {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-notifications-spacing;
margin-left: 0em;
}
&.no-label.notifications-container {
.bar-button-icon.notifications {
border-top-right-radius: if(
$bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-right-radius: if(
$bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
}
}
.bar_item_box_visible.notifications {
border: if(
$bar-buttons-notifications-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-border),
0em
);
}

8
scss/style/bar/systray.scss
View File

@@ -9,3 +9,11 @@
.style2.systray {
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
}
.bar_item_box_visible.systray {
border: if(
$bar-buttons-systray-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-systray-border),
0em
);
}

76
scss/style/bar/window_title.scss
View File

@@ -1,30 +1,66 @@
.bar-button-icon.windowtitle {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-icon);
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-icon);
}
.bar-button-label.windowtitle {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text);
margin-left: $bar-buttons-windowtitle-spacing;
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text);
margin-left: $bar-buttons-windowtitle-spacing;
&.no-icon {
margin-left: 0;
}
&.no-icon {
margin-left: 0;
}
}
.style2 {
.bar-button-icon.windowtitle {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-windowtitle-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-windowtitle-spacing;
}
.bar-button-icon.windowtitle {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-windowtitle-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-windowtitle-spacing;
border-top-left-radius: if(
$bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-left-radius: if(
$bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
.bar-button-label.windowtitle {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-windowtitle-spacing;
margin-left: 0em;
}
.bar-button-label.windowtitle {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-windowtitle-spacing;
margin-left: 0em;
&.no-icon {
padding-left: $bar-buttons-padding_x;
}
}
&.no-label.windowtitle-container {
.bar-button-icon.windowtitle {
border-top-right-radius: if(
$bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-right-radius: if(
$bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
}
}
.bar_item_box_visible.windowtitle {
border: if(
$bar-buttons-windowtitle-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-windowtitle-border),
0em
);
}

8
scss/style/bar/workspace.scss
View File

@@ -80,3 +80,11 @@
.style2.workspaces {
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
}
.bar_item_box_visible.workspaces {
border: if(
$bar-buttons-workspaces-enableBorder or $bar-buttons-enableBorders,
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-workspaces-border),
0em
);
}

423
scss/style/customModules/style.scss
View File

@@ -4,31 +4,31 @@
* #################################
*/
.bar-button-label {
margin-left: 0.5em;
color: $text;
margin-left: 0.5em;
color: $text;
}
.module-icon {
font-size: 1em;
font-size: 1em;
}
.style2 {
.bar-button-icon {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: 0.5em;
background: $text;
color: $bar-background;
}
.bar-button-icon {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: 0.5em;
background: $text;
color: $bar-background;
}
.bar-button-label {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: 0.5em;
margin-left: 0em;
}
.bar-button-label {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: 0.5em;
margin-left: 0em;
}
}
/*
@@ -36,48 +36,86 @@
* # Styling Function #
* #################################
*/
@mixin styleModule($class, $textColor, $iconColor, $iconBackground, $labelBackground, $spacing, $fontSize: 1em) {
.bar_item_box_visible {
&.#{$class} {
background: $labelBackground;
@mixin styleModule(
$class,
$textColor,
$iconColor,
$iconBackground,
$labelBackground,
$spacing,
$borderEnabled,
$borderColor,
$fontSize: 1em
) {
.bar_item_box_visible {
&.#{$class} {
background: $labelBackground;
border: if(
$borderEnabled or $bar-buttons-enableBorders,
$bar-buttons-borderSize solid if($bar-buttons-monochrome, $bar-buttons-icon, $borderColor),
0em
);
&.style2 {
background: transparent;
}
&.style2 {
background: transparent;
}
&:hover {
opacity: 0.5;
}
}
}
.module-label.#{$class} {
color: if($bar-buttons-monochrome, $bar-buttons-text, $textColor);
margin-left: $spacing;
border-radius: $bar-buttons-radius;
}
.module-icon.#{$class} {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $iconColor);
font-size: if($fontSize, $fontSize, 1em);
}
.style2 {
.module-icon.#{$class} {
background: if($bar-buttons-monochrome, $bar-buttons-icon, $iconBackground);
padding-right: $spacing;
color: if($bar-buttons-monochrome, $bar-buttons-background, $iconColor);
&:hover {
opacity: 0.5;
}
}
}
.module-label.#{$class} {
background: $labelBackground;
padding-left: $spacing * 1.5;
margin-left: 0em;
border-top-left-radius: 0em;
border-bottom-left-radius: 0em;
color: if($bar-buttons-monochrome, $bar-buttons-text, $textColor);
margin-left: $spacing;
border-radius: $bar-buttons-radius;
}
.module-icon.#{$class} {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $iconColor);
font-size: if($fontSize, $fontSize, 1em);
}
.style2 {
.module-icon.#{$class} {
background: if($bar-buttons-monochrome, $bar-buttons-icon, $iconBackground);
padding-right: $spacing;
color: if($bar-buttons-monochrome, $bar-buttons-background, $iconColor);
border-top-left-radius: if(
$borderEnabled or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-left-radius: if(
$borderEnabled or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
.module-label.#{$class} {
background: $labelBackground;
padding-left: $spacing * 1.5;
margin-left: 0em;
border-top-left-radius: 0em;
border-bottom-left-radius: 0em;
}
&.no-label.#{$class} {
.module-icon {
border-top-right-radius: if(
$borderEnabled or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
border-bottom-right-radius: if(
$borderEnabled or $bar-buttons-enableBorders,
$bar-buttons-radius * 0.4,
$bar-buttons-radius
);
}
}
}
}
}
/*
@@ -85,19 +123,25 @@
* # Ram Module Styling #
* #################################
*/
@include styleModule( //
// class name
'ram',
// label color
$bar-buttons-modules-ram-text,
// icon color
$bar-buttons-modules-ram-icon,
// icon background if split style is used
$bar-buttons-modules-ram-icon_background,
// label background
$bar-buttons-modules-ram-background,
// inner spacing
$bar-buttons-modules-ram-spacing //
@include styleModule(
//
// class name
'ram',
// label color
$bar-buttons-modules-ram-text,
// icon color
$bar-buttons-modules-ram-icon,
// icon background if split style is used
$bar-buttons-modules-ram-icon_background,
// label background
$bar-buttons-modules-ram-background,
// inner spacing
$bar-buttons-modules-ram-spacing,
//
// if border enabled
$bar-buttons-modules-ram-enableBorder,
// border color
$bar-buttons-modules-ram-border
);
/*
@@ -105,21 +149,26 @@
* # Cpu Module Styling #
* #################################
*/
@include styleModule( //
// class name
'cpu',
// label color
$bar-buttons-modules-cpu-text,
// icon color
$bar-buttons-modules-cpu-icon,
// icon background if split style is used
$bar-buttons-modules-cpu-icon_background,
// label background
$bar-buttons-modules-cpu-background,
// inner spacing
$bar-buttons-modules-cpu-spacing,
// custom font size
1.05em //
@include styleModule(
//
// class name
'cpu',
// label color
$bar-buttons-modules-cpu-text,
// icon color
$bar-buttons-modules-cpu-icon,
// icon background if split style is used
$bar-buttons-modules-cpu-icon_background,
// label background
$bar-buttons-modules-cpu-background,
// inner spacing
$bar-buttons-modules-cpu-spacing,
// if border enabled
$bar-buttons-modules-cpu-enableBorder,
// border color
$bar-buttons-modules-cpu-border,
// custom font size
1.05em //
);
/*
@@ -127,21 +176,26 @@
* # Storage Module Styling #
* #################################
*/
@include styleModule( //
// class name
'storage',
// label color
$bar-buttons-modules-storage-text,
// icon color
$bar-buttons-modules-storage-icon,
// icon background if split style is used
$bar-buttons-modules-storage-icon_background,
// label background
$bar-buttons-modules-storage-background,
// inner spacing
$bar-buttons-modules-storage-spacing,
// custom font size
1.3em //
@include styleModule(
//
// class name
'storage',
// label color
$bar-buttons-modules-storage-text,
// icon color
$bar-buttons-modules-storage-icon,
// icon background if split style is used
$bar-buttons-modules-storage-icon_background,
// label background
$bar-buttons-modules-storage-background,
// inner spacing
$bar-buttons-modules-storage-spacing,
// if border enabled
$bar-buttons-modules-storage-enableBorder,
// border color
$bar-buttons-modules-storage-border,
// custom font size
1.3em //
);
/*
@@ -149,21 +203,26 @@
* # Netstat Module Styling #
* #################################
*/
@include styleModule( //
// class name
'netstat',
// label color
$bar-buttons-modules-netstat-text,
// icon color
$bar-buttons-modules-netstat-icon,
// icon background if split style is used
$bar-buttons-modules-netstat-icon_background,
// label background
$bar-buttons-modules-netstat-background,
// inner spacing
$bar-buttons-modules-netstat-spacing,
// custom font size
1.2em //
@include styleModule(
//
// class name
'netstat',
// label color
$bar-buttons-modules-netstat-text,
// icon color
$bar-buttons-modules-netstat-icon,
// icon background if split style is used
$bar-buttons-modules-netstat-icon_background,
// label background
$bar-buttons-modules-netstat-background,
// inner spacing
$bar-buttons-modules-netstat-spacing,
// if border enabled
$bar-buttons-modules-netstat-enableBorder,
// border color
$bar-buttons-modules-netstat-border,
// custom font size
1.2em //
);
/*
@@ -171,21 +230,26 @@
* # KB Layout Module Styling #
* #################################
*/
@include styleModule( //
// class name
'kblayout',
// label color
$bar-buttons-modules-kbLayout-text,
// icon color
$bar-buttons-modules-kbLayout-icon,
// icon background if split style is used
$bar-buttons-modules-kbLayout-icon_background,
// label background
$bar-buttons-modules-kbLayout-background,
// inner spacing
$bar-buttons-modules-kbLayout-spacing,
// custom font size
1.2em //
@include styleModule(
//
// class name
'kblayout',
// label color
$bar-buttons-modules-kbLayout-text,
// icon color
$bar-buttons-modules-kbLayout-icon,
// icon background if split style is used
$bar-buttons-modules-kbLayout-icon_background,
// label background
$bar-buttons-modules-kbLayout-background,
// inner spacing
$bar-buttons-modules-kbLayout-spacing,
// if border enabled
$bar-buttons-modules-kbLayout-enableBorder,
// border color
$bar-buttons-modules-kbLayout-border,
// custom font size
1.2em //
);
/*
@@ -193,21 +257,26 @@
* # Updates Module Styling #
* #################################
*/
@include styleModule( //
// class name
'updates',
// label color
$bar-buttons-modules-updates-text,
// icon color
$bar-buttons-modules-updates-icon,
// icon background if split style is used
$bar-buttons-modules-updates-icon_background,
// label background
$bar-buttons-modules-updates-background,
// inner spacing
$bar-buttons-modules-updates-spacing,
// custom font size
1.2em //
@include styleModule(
//
// class name
'updates',
// label color
$bar-buttons-modules-updates-text,
// icon color
$bar-buttons-modules-updates-icon,
// icon background if split style is used
$bar-buttons-modules-updates-icon_background,
// label background
$bar-buttons-modules-updates-background,
// inner spacing
$bar-buttons-modules-updates-spacing,
// if border enabled
$bar-buttons-modules-updates-enableBorder,
// border color
$bar-buttons-modules-updates-border,
// custom font size
1.2em //
);
/*
@@ -215,21 +284,26 @@
* # Weather Module Styling #
* #################################
*/
@include styleModule( //
// class name
'weather-custom',
// label color
$bar-buttons-modules-weather-text,
// icon color
$bar-buttons-modules-weather-icon,
// icon background if split style is used
$bar-buttons-modules-weather-icon_background,
// label background
$bar-buttons-modules-weather-background,
// inner spacing
$bar-buttons-modules-weather-spacing,
// custom font size
1.2em //
@include styleModule(
//
// class name
'weather-custom',
// label color
$bar-buttons-modules-weather-text,
// icon color
$bar-buttons-modules-weather-icon,
// icon background if split style is used
$bar-buttons-modules-weather-icon_background,
// label background
$bar-buttons-modules-weather-background,
// inner spacing
$bar-buttons-modules-weather-spacing,
// if border enabled
$bar-buttons-modules-weather-enableBorder,
// border color
$bar-buttons-modules-weather-border,
// custom font size
1.2em //
);
/*
@@ -237,19 +311,24 @@
* # Power Module Styling #
* #################################
*/
@include styleModule( //
// class name
'powermodule',
// label color
$red,
// icon color
$bar-buttons-modules-power-icon,
// icon background if split style is used
$bar-buttons-modules-power-icon_background,
// label background
$bar-buttons-modules-power-background,
// inner spacing
$bar-buttons-modules-power-spacing,
// custom font size
1.3em //
@include styleModule(
//
// class name
'powermodule',
// label color
$red,
// icon color
$bar-buttons-modules-power-icon,
// icon background if split style is used
$bar-buttons-modules-power-icon_background,
// label background
$bar-buttons-modules-power-background,
// inner spacing
$bar-buttons-modules-power-spacing,
// if border enabled
$bar-buttons-modules-power-enableBorder,
// border color
$bar-buttons-modules-power-border,
// custom font size
1.3em //
);