Improved sliders with marks, sliders in fine-tune

This commit is contained in:
Eudaimon 2022-04-23 11:17:56 +02:00
parent 36a201343b
commit 5a0ce409d8
9 changed files with 313 additions and 493 deletions

View file

@ -0,0 +1,26 @@
/**********************
* Touch Copy & Paste *
*********************/
//touch selection handlebars for the Popover.osd above
cursor-handle {
//copying slider code, so not DRYing, here...
//I don't know how to test this...
@include button(normal-alt);
border: 1px solid darken($alt_borders_color, 3%);
border-radius: 100%;
transition: $button_transition;
transition-property: background, border, box-shadow;
min-height: 18px;
min-width: 10px;
&:hover { @include button(hover-alt, $edge: $shadow_color); }
&:active { border-color: $progress_border_color; }
&:disabled { @include button(insensitive); }
&.top:dir(ltr), &.bottom:dir(rtl) {border-radius: 100% 5px 5px 5px;}
&.bottom:dir(ltr), &.top:dir(rtl) {border-radius: 5px 100% 5px 5px;}
}

View file

@ -567,3 +567,88 @@ levelbar {
}
}
}
/**********************
* Touch Copy & Paste *
*********************/
//touch selection handlebars for the Popover.osd above
cursor-handle {
background-color: transparent;
background-image: none;
box-shadow: none;
border-style: none;
@each $s,$as in ('',''),
(':hover','-hover'),
(':active','-active') { //no need for insensitive and backdrop
&.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
$_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
url('#{$_url}@2.png'));
padding-left: 10px;
}
&.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
$_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
url('#{$_url}@2.png'));
padding-right: 10px;
}
&.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
$_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
url('#{$_url}@2.png'));
}
}
}
//inside scale .color
&.fine-tune {
&.horizontal {
&:dir(ltr), &:dir(rtl) { // specificity bump
padding: 0 0 12px 0;
trough {
padding-bottom: 7px;
background-position: 0 -6px;
}
slider {
margin-bottom: -15px;
margin-top: 6px;
}
}
}
&.vertical {
&:dir(ltr) {
padding: 0 0 0 12px;
trough {
padding-left: 7px;
background-position: 6px 0;
}
slider {
margin-left: -15px;
margin-right: 6px;
}
}
&:dir(rtl) {
padding: 0 12px 0 0;
trough {
padding-right: 7px;
background-position: -6px 0;
}
slider {
margin-right: -15px;
margin-left: 6px;
}
}
}
}

View file

@ -423,5 +423,45 @@
&.dragging,
&.hovering { opacity: 0.8; }
}*/
}
/**********************
* Touch Copy & Paste *
*********************/
//touch selection handlebars for the Popover.osd above
cursor-handle {
background-color: transparent;
background-image: none;
box-shadow: none;
border-style: none;
min-width: 20px;
min-height: 24px;
padding-left: 20px;
padding-right: 20px;
padding-top: 24px;
padding-bottom: 24px;
@each $s,$as in ('',''),
(':hover','-hover'),
(':active','-active') { //no need for insensitive and backdrop
&.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
$_url: '#{$assets}/text-select-start#{$as}#{$asset_suffix}';
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
url('#{$_url}@2.png'));
}
&.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
$_url: '#{$assets}/text-select-end#{$as}#{$asset_suffix}';
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
url('#{$_url}@2.png'));
}
&.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
$_url: '#{$assets}/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
url('#{$_url}@2.png'));
}
}
}