Added the ability to scale a popover. (#443)
* Added the ability to scale a popover. * Removed redundant code
This commit is contained in:
Jas Singh
GitHub
@@ -1,234 +1,240 @@
|
||||
@import "../colors";
|
||||
@import '../colors';
|
||||
|
||||
menu {
|
||||
margin: 6px;
|
||||
padding: 6px;
|
||||
background-color: $primary_bg;
|
||||
background-clip: border-box;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $secondary_bg;
|
||||
margin: 6px;
|
||||
padding: 6px;
|
||||
background-color: $primary_bg;
|
||||
background-clip: border-box;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $secondary_bg;
|
||||
|
||||
menuitem {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
min-height: 20px;
|
||||
min-width: 40px;
|
||||
padding: 4px 8px;
|
||||
color: #FFFFFF;
|
||||
font: initial;
|
||||
text-shadow: none;
|
||||
menuitem {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
min-height: 20px;
|
||||
min-width: 40px;
|
||||
padding: 4px 8px;
|
||||
color: #ffffff;
|
||||
font: initial;
|
||||
text-shadow: none;
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $secondary_bg;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $secondary_bg;
|
||||
}
|
||||
|
||||
arrow {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
separator {
|
||||
min-height: 1px;
|
||||
margin: 4px 0;
|
||||
background-color: $secondary_bg;
|
||||
}
|
||||
}
|
||||
|
||||
menu > arrow {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
padding: 4px;
|
||||
color: $secondary_bg;
|
||||
}
|
||||
|
||||
menu > arrow.top {
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $secondary_bg;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $secondary_bg;
|
||||
}
|
||||
|
||||
arrow {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
separator {
|
||||
min-height: 1px;
|
||||
margin: 4px 0;
|
||||
background-color: $secondary_bg
|
||||
}
|
||||
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
||||
}
|
||||
|
||||
menu>arrow {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
padding: 4px;
|
||||
color: $secondary_bg;
|
||||
}
|
||||
|
||||
menu>arrow.top {
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
|
||||
}
|
||||
|
||||
menu>arrow.bottom {
|
||||
margin-top: 8px;
|
||||
margin-bottom: -12px;
|
||||
border-radius: 6px;
|
||||
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
|
||||
menu > arrow.bottom {
|
||||
margin-top: 8px;
|
||||
margin-bottom: -12px;
|
||||
border-radius: 6px;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||||
}
|
||||
|
||||
check,
|
||||
radio {
|
||||
min-height: 15px;
|
||||
min-width: 15px;
|
||||
margin: 4px;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
background-color: $secondary_bg;
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
|
||||
min-height: 15px;
|
||||
min-width: 15px;
|
||||
margin: 4px;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
background-color: $secondary_bg;
|
||||
transition:
|
||||
all 75ms cubic-bezier(0, 0, 0.2, 1),
|
||||
box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
radio {
|
||||
border-radius: 9999px;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
check {
|
||||
border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
check:hover,
|
||||
radio:hover {
|
||||
box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
|
||||
background-color: $primary_bg;
|
||||
box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
|
||||
background-color: $primary_bg;
|
||||
}
|
||||
|
||||
check:active,
|
||||
radio:active {
|
||||
box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
|
||||
background-color: $primary_bg;
|
||||
box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
|
||||
background-color: $primary_bg;
|
||||
}
|
||||
|
||||
check:checked,
|
||||
check:indeterminate,
|
||||
radio:checked,
|
||||
radio:indeterminate {
|
||||
color: $primary_bg;
|
||||
background-color: $primary_fg;
|
||||
color: $primary_bg;
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
check:checked:hover,
|
||||
check:indeterminate:hover,
|
||||
radio:checked:hover,
|
||||
radio:indeterminate:hover {
|
||||
box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
|
||||
background-color: $primary_fg;
|
||||
box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
check:checked:active,
|
||||
check:indeterminate:active,
|
||||
radio:checked:active,
|
||||
radio:indeterminate:active {
|
||||
box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
|
||||
background-color: $primary_fg;
|
||||
box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
switch {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
margin: 4px 0;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
background-color: $secondary_bg;
|
||||
background-clip: padding-box;
|
||||
font-size: 0;
|
||||
color: transparent;
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
margin: 4px 0;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
background-color: $secondary_bg;
|
||||
background-clip: padding-box;
|
||||
font-size: 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
switch:checked {
|
||||
background-color: $primary_fg;
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
switch:disabled {
|
||||
opacity: 0.5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
switch slider {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
margin: 3px;
|
||||
border-radius: 9999px;
|
||||
outline: none;
|
||||
background-color: $default_fg;
|
||||
border: none;
|
||||
color: transparent;
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
min-width: 18px;
|
||||
min-height: 18px;
|
||||
margin: 3px;
|
||||
border-radius: 9999px;
|
||||
outline: none;
|
||||
background-color: $default_fg;
|
||||
border: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
scale {
|
||||
min-height: 2px;
|
||||
min-width: 2px;
|
||||
min-height: 2px;
|
||||
min-width: 2px;
|
||||
}
|
||||
|
||||
scale.horizontal {
|
||||
padding: 17px 12px;
|
||||
padding: 17px 12px;
|
||||
}
|
||||
|
||||
scale.vertical {
|
||||
padding: 12px 17px;
|
||||
padding: 12px 17px;
|
||||
}
|
||||
|
||||
scale slider {
|
||||
min-height: 18px;
|
||||
min-width: 18px;
|
||||
margin: -8px;
|
||||
min-height: 18px;
|
||||
min-width: 18px;
|
||||
margin: -8px;
|
||||
}
|
||||
|
||||
scale trough {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
outline: none;
|
||||
background-color: $secondary_bg;
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
outline: none;
|
||||
background-color: $secondary_bg;
|
||||
}
|
||||
|
||||
scale highlight {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
background-color: $primary_fg;
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
background-color: $primary_fg;
|
||||
}
|
||||
|
||||
scale highlight:disabled {
|
||||
background-color: #1e1e2e;
|
||||
background-color: #1e1e2e;
|
||||
}
|
||||
|
||||
scale fill {
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
scale fill:disabled {
|
||||
background-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
scale slider {
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
border-radius: 9999px;
|
||||
color: $primary_fg;
|
||||
background-color: $primary_bg;
|
||||
box-shadow: inset 0 0 0 2px $primary_fg;
|
||||
transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
|
||||
border-radius: 9999px;
|
||||
color: $primary_fg;
|
||||
background-color: $primary_bg;
|
||||
box-shadow: inset 0 0 0 2px $primary_fg;
|
||||
}
|
||||
|
||||
scale slider:hover {
|
||||
box-shadow: inset 0 0 0 2px $primary_fg, 0 0 0 8px transparentize($primary_fg, 0.9);
|
||||
box-shadow:
|
||||
inset 0 0 0 2px $primary_fg,
|
||||
0 0 0 8px transparentize($primary_fg, 0.9);
|
||||
}
|
||||
|
||||
scale slider:active {
|
||||
box-shadow: inset 0 0 0 4px $primary_fg, 0 0 0 8px transparentize($primary_fg, 0.9);
|
||||
box-shadow:
|
||||
inset 0 0 0 4px $primary_fg,
|
||||
0 0 0 8px transparentize($primary_fg, 0.9);
|
||||
}
|
||||
|
||||
tooltip {
|
||||
box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
separator {
|
||||
min-width: 1px;
|
||||
min-height: 1px;
|
||||
background-color: $secondary_bg;
|
||||
min-width: 1px;
|
||||
min-height: 1px;
|
||||
background-color: $secondary_bg;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
-gtk-icon-transform: rotate(1turn);
|
||||
}
|
||||
to {
|
||||
-gtk-icon-transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
spinner {
|
||||
background: none;
|
||||
opacity: 0;
|
||||
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
|
||||
background: none;
|
||||
opacity: 0;
|
||||
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
|
||||
}
|
||||
|
||||
spinner:checked {
|
||||
opacity: 1;
|
||||
animation: spin 1s linear infinite;
|
||||
opacity: 1;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@@ -22,34 +22,6 @@
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
window.popup {
|
||||
opacity: $bar-menus-opacity * 0.01;
|
||||
|
||||
menuitem {
|
||||
label {
|
||||
color: $bar-menus-popover-text;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
menu {
|
||||
border-color: $bar-menus-popover-border;
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
|
||||
}
|
||||
|
||||
separator {
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
|
||||
min-height: 0.075em;
|
||||
}
|
||||
|
||||
arrow {
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
|
||||
}
|
||||
}
|
||||
|
||||
tooltip {
|
||||
* {
|
||||
all: unset;
|
||||
|
||||
114
scss/style/common/popover_menu.scss
Normal file
114
scss/style/common/popover_menu.scss
Normal file
@@ -0,0 +1,114 @@
|
||||
@import '../colors';
|
||||
|
||||
$popoverScaling: $bar-menus-popover-scaling * 0.01;
|
||||
|
||||
window.popup {
|
||||
opacity: $bar-menus-opacity * $popoverScaling;
|
||||
|
||||
menu {
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-popover-border);
|
||||
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
|
||||
}
|
||||
|
||||
menuitem {
|
||||
transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
|
||||
padding: 0.3em * $popoverScaling 0.3em * $popoverScaling;
|
||||
|
||||
label {
|
||||
font-size: 1.2rem * $popoverScaling;
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
arrow {
|
||||
min-height: 1.2em * $popoverScaling;
|
||||
min-width: 1.2em * $popoverScaling;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||
margin-left: 0.5em * $popoverScaling;
|
||||
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
|
||||
}
|
||||
}
|
||||
|
||||
separator {
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
|
||||
min-height: 0.075em * $popoverScaling;
|
||||
}
|
||||
|
||||
arrow.top {
|
||||
margin-top: 0;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
||||
}
|
||||
|
||||
arrow.bottom {
|
||||
margin-top: 0.5em * $popoverScaling;
|
||||
margin-bottom: -0.6em * $popoverScaling;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||||
}
|
||||
|
||||
check,
|
||||
radio {
|
||||
min-height: 0.8em * $popoverScaling;
|
||||
min-width: 0.8em * $popoverScaling;
|
||||
margin-right: 0.5em * $popoverScaling;
|
||||
padding: 0;
|
||||
color: transparent;
|
||||
background-color: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
|
||||
transition:
|
||||
all 100ms cubic-bezier(0, 0, 0.2, 1),
|
||||
box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
radio {
|
||||
border-radius: 9999px;
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
check {
|
||||
border-radius: $bar-buttons-radius;
|
||||
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
check:hover,
|
||||
radio:hover {
|
||||
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
|
||||
}
|
||||
|
||||
check:active,
|
||||
radio:active {
|
||||
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
|
||||
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
check:checked,
|
||||
check:indeterminate,
|
||||
radio:checked,
|
||||
radio:indeterminate {
|
||||
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
|
||||
}
|
||||
|
||||
check:checked:hover,
|
||||
check:indeterminate:hover,
|
||||
radio:checked:hover,
|
||||
radio:indeterminate:hover {
|
||||
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
|
||||
}
|
||||
|
||||
check:checked:active,
|
||||
check:indeterminate:active,
|
||||
radio:checked:active,
|
||||
radio:indeterminate:active {
|
||||
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
|
||||
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user