nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

scss: add popover styles

Browse source 
For GTK emoji picker
This commit is contained in:
2 * r + 2 * t 2025-03-23 13:50:34 +11:00
parent 5e0bc359bf
commit 0230997d76
3 changed files with 99 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
scss/common.scss Normal file
View file

@ -0,0 +1,85 @@
@use "scheme";
@use "lib";
@use "font";
label.icon {
@include font.icon;
}
.notification {
.inner {
@include lib.rounded(8);
@include font.main;
background-color: scheme.$base;
color: scheme.$text;
padding: lib.s(10) lib.s(12);
@include lib.spacing($vertical: true);
}
.header,
.content {
padding: 0 lib.s(5);
}
.header {
@include font.mono;
@include lib.spacing(8);
}
.content {
@include lib.spacing(10);
}
.app-icon {
font-size: lib.s(18);
}
.image {
@include lib.rounded(10);
background-size: cover;
background-position: center;
margin-top: lib.s(3);
min-width: lib.s(64);
min-height: lib.s(64);
&.small {
min-width: lib.s(48);
min-height: lib.s(48);
}
}
.summary {
@include font.title;
font-size: lib.s(16);
}
.body {
font-size: lib.s(14);
color: scheme.$subtext0;
}
.actions {
@include lib.spacing;
& > * {
@include lib.rounded(5);
@include lib.element-decel;
padding: lib.s(5) lib.s(10);
background-color: scheme.$surface0;
&:hover,
&:focus {
background-color: scheme.$surface1;
}
&:active {
background-color: scheme.$surface2;
}
}
}
}

94
scss/widgets.scss
View file

@ -3,88 +3,6 @@
@use "lib";
@use "font";
label.icon {
@include font.icon;
}
.notification {
.inner {
@include lib.rounded(8);
@include font.main;
background-color: scheme.$base;
color: scheme.$text;
padding: lib.s(10) lib.s(12);
@include lib.spacing($vertical: true);
}
.header,
.content {
padding: 0 lib.s(5);
}
.header {
@include font.mono;
@include lib.spacing(8);
}
.content {
@include lib.spacing(10);
}
.app-icon {
font-size: lib.s(18);
}
.image {
@include lib.rounded(10);
background-size: cover;
background-position: center;
margin-top: lib.s(3);
min-width: lib.s(64);
min-height: lib.s(64);
&.small {
min-width: lib.s(48);
min-height: lib.s(48);
}
}
.summary {
@include font.title;
font-size: lib.s(16);
}
.body {
font-size: lib.s(14);
color: scheme.$subtext0;
}
.actions {
@include lib.spacing;
& > * {
@include lib.rounded(5);
@include lib.element-decel;
padding: lib.s(5) lib.s(10);
background-color: scheme.$surface0;
&:hover,
&:focus {
background-color: scheme.$surface1;
}
&:active {
background-color: scheme.$surface2;
}
}
}
}
separator,
.separator {
@include lib.rounded(2);
@ -199,3 +117,15 @@ scrollbar {
}
}
}
popover {
@include -appear;
@include lib.rounded(10);
@include lib.border(scheme.$yellow, 0.4);
@include font.mono;
padding: lib.s(8);
background-color: scheme.$base;
color: scheme.$text;
font-size: lib.s(14);
}

3
style.scss
View file

@ -1,8 +1,9 @@
@use "sass:color";
@use "scss/scheme";
// Common widgets
// Common styles
@use "scss/widgets";
@use "scss/common";
// Modules
@use "scss/bar";