forked from Hithomelabs/dotfiles
154 lines
3.9 KiB
SCSS
154 lines
3.9 KiB
SCSS
/*********
|
|
* Lists *
|
|
*********/
|
|
list, listview {
|
|
&, label { color: $text_color; }
|
|
background-color: $base_color;
|
|
border-color: $borders_color;
|
|
|
|
&:backdrop {
|
|
background-color: $backdrop_base_color;
|
|
border-color: $backdrop_borders_color;
|
|
}
|
|
|
|
&.horizontal row.separator,
|
|
&.separators.horizontal > row:not(.separator) {
|
|
border-left: 1px solid $borders_color;
|
|
}
|
|
&:not(.horizontal) row.separator,
|
|
&.separators:not(.horizontal) > row:not(.separator) {
|
|
border-bottom: 1px solid $borders_color;
|
|
}
|
|
}
|
|
|
|
row {
|
|
|
|
|
|
&:hover { transition: none; }
|
|
|
|
&:backdrop { transition: $backdrop_transition; }
|
|
|
|
&.activatable {
|
|
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
|
|
|
|
&:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); }
|
|
|
|
&:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
|
|
|
|
&:backdrop:hover { background-color: transparent; }
|
|
|
|
&:selected {
|
|
&:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
|
|
|
|
&.has-open-popup,
|
|
&:hover { background-color: transparentize($selected_bg_color, 0.2); }
|
|
|
|
&:backdrop { background-color: $backdrop_selected_bg_color; }
|
|
}
|
|
|
|
.view { background-color: transparent; }
|
|
|
|
&.button { @include button(normal); }
|
|
}
|
|
|
|
&:selected { @extend %selected_items; }
|
|
}
|
|
|
|
columnview {
|
|
// move padding to child cells
|
|
> listview > row {
|
|
padding: 0;
|
|
|
|
// align horizontal sizing with header buttons
|
|
> cell {
|
|
padding: 2px 6px;
|
|
|
|
&:not(:first-child) {
|
|
border-left: 1px solid transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// make column separators visible when :show-column-separators is true
|
|
&.column-separators > listview > row > cell {
|
|
border-left-color: $borders_color;
|
|
}
|
|
|
|
// shrink vertically for .data-table
|
|
&.data-table > listview > row > cell {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
}
|
|
|
|
treeexpander {
|
|
border-spacing: 4px;
|
|
}
|
|
|
|
/********************************************************
|
|
* Data Tables *
|
|
* treeview like tables with individual focusable cells *
|
|
* https://gitlab.gnome.org/GNOME/gtk/-/issues/2929 *
|
|
********************************************************/
|
|
|
|
columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {
|
|
outline: 2px solid $borders_color;
|
|
}
|
|
|
|
columnview row:not(:selected) cell editablelabel.editing:focus-within {
|
|
outline: 2px solid $selected_bg_color;
|
|
}
|
|
|
|
columnview row:not(:selected) cell editablelabel.editing text selection {
|
|
background-color: $backdrop_selected_bg_color;
|
|
color: transparent;
|
|
&:focus-within {
|
|
background-color: $selected_bg_color;
|
|
color: $fg_color;
|
|
}
|
|
}
|
|
|
|
/*******************************************************
|
|
* Rich Lists *
|
|
* Large list usually containing lots of widgets *
|
|
* https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 *
|
|
*******************************************************/
|
|
|
|
|
|
.rich-list { /* rich lists usually containing other widgets than just labels/text */
|
|
& > row {
|
|
padding: 8px 12px;
|
|
min-height: 32px; /* should be tall even when only containing a label */
|
|
|
|
& > box {
|
|
border-spacing: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/********************************************************
|
|
* Complex Lists *
|
|
* Put padding on the cell content so event controllers *
|
|
* can cover the whole area. *
|
|
********************************************************/
|
|
|
|
columnview.complex {
|
|
> listview > row > cell {
|
|
padding: 0;
|
|
> * {
|
|
padding: 8px 6px;
|
|
}
|
|
}
|
|
|
|
// shrink vertically for .data-table
|
|
&.data-table > listview > row > cell {
|
|
padding: 0;
|
|
> * {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.boxed-list-separate { &, &:backdrop { background-color: transparent; }} |