7111830e3c
* Add option for default workspace indicator radius
Enabling this option allows for the changing of the workspaces indicator
shape into a cornered rectangular/square shape.
This radius value was previously hard-coded for a full round indicator
shape. This change exposes an option in the `settings-dialog` under
Configuration > Bar > Workspaces > Indicator Radius
default value: `1.9rem * 0.6`
{
"theme.bar.buttons.workspaces.radius": "1.9rem * 0.6"
}
* Adds options for workspace indicator height, width, and active_width
This adds some additional options to allow for further customization to
the default workspace indicators.
Nests the radius from my previous commit into an indicator scoped option:
```ts
theme: {
bar: {
workspaces: {
indicator: {
radius: opt('1.9rem * 0.6'),
height: opt('4em'),
width: opt('4em'),
active_width: opt('12em'),
}
}
}
}
```
* Apply suggestions from code review
---------
Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
94 lines
3.0 KiB
SCSS
94 lines
3.0 KiB
SCSS
.workspaces {
|
|
label {
|
|
font-size: 0.2em;
|
|
min-width: $bar-buttons-workspaces-pill-width;
|
|
min-height: $bar-buttons-workspaces-pill-height;
|
|
border-radius: $bar-buttons-workspaces-pill-radius;
|
|
transition: 300ms * 0.5;
|
|
background-color: $bar-buttons-workspaces-available;
|
|
color: $bar-buttons-workspaces-available;
|
|
|
|
&.occupied {
|
|
background-color: $bar-buttons-workspaces-occupied;
|
|
color: $bar-buttons-workspaces-occupied;
|
|
min-width: $bar-buttons-workspaces-pill-width;
|
|
min-height: $bar-buttons-workspaces-pill-height;
|
|
}
|
|
|
|
&.active {
|
|
background-color: $bar-buttons-workspaces-active;
|
|
color: $bar-buttons-workspaces-active;
|
|
min-width: $bar-buttons-workspaces-pill-active_width;
|
|
min-height: $bar-buttons-workspaces-pill-height;
|
|
}
|
|
|
|
&.workspace-icon {
|
|
background-color: transparent;
|
|
min-width: 0em;
|
|
min-height: 0em;
|
|
border-radius: 0em;
|
|
transition: 300ms * 0.5;
|
|
font-size: 1em;
|
|
}
|
|
|
|
&.workspace-number {
|
|
background-color: transparent;
|
|
min-width: 0em;
|
|
min-height: 0em;
|
|
border-radius: 0em;
|
|
transition: 0ms;
|
|
padding: 0em 0.2em;
|
|
font-size: $bar-buttons-workspaces-fontSize;
|
|
}
|
|
|
|
&.underline {
|
|
border-top: 0.1em solid transparent;
|
|
border-bottom: 0.1em solid $bar-buttons-workspaces-numbered_active_underline_color;
|
|
transition: 0ms;
|
|
}
|
|
|
|
&.highlight {
|
|
transition: 0ms;
|
|
color: $bar-buttons-workspaces-numbered_active_highlighted_text_color;
|
|
border-radius: $bar-buttons-workspaces-numbered_active_highlight_border;
|
|
background-color: $bar-buttons-workspaces-active;
|
|
padding: 0em $bar-buttons-workspaces-numbered_active_highlight_padding;
|
|
}
|
|
}
|
|
}
|
|
|
|
.workspace-button {
|
|
&:hover label {
|
|
color: $bar-buttons-workspaces-hover;
|
|
|
|
&.default {
|
|
background-color: $bar-buttons-workspaces-hover;
|
|
}
|
|
}
|
|
|
|
&:hover .can_underline {
|
|
border-top: 0.1em solid transparent;
|
|
border-bottom: 0.1em solid
|
|
if($bar-buttons-monochrome, $bar-buttons-workspaces-hover, $bar-buttons-workspaces-hover);
|
|
}
|
|
|
|
&:hover .can_highlight {
|
|
background-color: $bar-buttons-workspaces-hover;
|
|
color: $bar-buttons-workspaces-numbered_active_highlighted_text_color;
|
|
border-radius: $bar-buttons-workspaces-numbered_active_highlight_border;
|
|
}
|
|
}
|
|
|
|
.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-borderColor, $bar-buttons-workspaces-border),
|
|
0em
|
|
);
|
|
}
|