_extends.scss
ASCII text
1@use "../../theme"; 2@use "../../theme-color"; 3@use "../../shadow"; 4@use "../../gnome-shell/sass/drawing"; 5@use "../../gnome-shell/sass/typography"; 6 7%button-shared { 8@include drawing.button(normal); 9@include typography.button; 10 11min-height: theme.$medium-size; 12padding: 0 16px; 13border-radius: theme.$corner-radius; 14&:focus { @include drawing.button(focus); } 15&:hover, &:checked { @include drawing.button(hover); } 16&:active { @include drawing.button(active);} 17&:insensitive { @include drawing.button(insensitive);} 18} 19%icon-button-shared { 20@include drawing.button(normal); 21 22min-height: theme.$medium-size; 23min-width: theme.$medium-size; 24padding: 6px; 25border-radius: theme.$corner-radius; 26&:focus { @include drawing.button(focus); } 27&:hover, &:checked { @include drawing.button(hover); } 28&:active { @include drawing.button(active);} 29&:insensitive { @include drawing.button(insensitive);} 30} 31%slider-shared { 32height: 20px; 33color: theme-color.$primary; 34-slider-height: 2px; 35-slider-background-color: theme-color.stroke(theme-color.$on-surface); //background of the trough 36-slider-border-color: transparent; //trough border color 37-slider-active-background-color: theme-color.$primary; //active trough fill 38-slider-active-border-color: transparent; //active trough border 39-slider-border-width: 0; 40-slider-handle-radius: 6px; 41} 42%separator-shared { 43-gradient-height: 1px; 44-gradient-start: theme-color.divider(theme-color.$on-surface); 45-gradient-end: theme-color.divider(theme-color.$on-surface); 46-margin-horizontal: 4px; 47height: 1.5em; 48} 49%dialog-entry-shared { 50@include drawing.entry(normal); 51 52width: 250px; 53min-height: theme.$medium-size; 54padding: 0 8px; 55border-radius: theme.$corner-radius theme.$corner-radius 0 0; 56color: theme-color.$on-surface; 57caret-color: theme-color.$on-surface; 58selection-background-color: theme-color.$selected-overlay; 59selected-color: theme-color.$on-surface; 60&:focus { 61@include drawing.entry(focus); 62 63padding: 0 8px; 64border-width: 0; 65color: theme-color.$on-surface; 66} 67} 68%desklet-shared { 69color: theme-color.$on-surface; 70border: none; 71padding: 12px; 72box-shadow: shadow.$z8; 73} 74%calendar-shared { 75width: 16px; 76height: 16px; 77border-radius: 999px; 78transition-duration: theme.$state-duration; 79&:active { background-color: theme-color.stroke(theme-color.$on-surface);} 80} 81%menu-shared { 82background-color: theme-color.$surface-z8; 83border-radius: theme.$corner-radius; 84color: theme-color.$on-surface; 85box-shadow: shadow.$z4; 86} 87%menu-button-label-shared { 88&:ltr { 89padding-left: 4px; 90} 91&:rtl { 92padding-right: 4px; 93} 94} 95%dialogs-subject-shared { 96font-weight: bold; 97color: theme-color.$on-surface; 98padding-top: 10px; 99padding-left: 17px; 100padding-bottom: 6px; 101} 102%dialogs-subject-rtl-shared { 103padding-left: 0; 104padding-right: 17px; 105} 106%dialogs-description-shared { 107color: theme-color.$on-surface; 108padding-left: 17px; 109width: 28em; 110} 111%check-box-shared { 112width: 24px; 113height: 24px; 114padding: (theme.$medium-size - 24px) / 2; 115border-radius: 100px; 116background-image: url(assets/checkbox-off.svg); 117} 118%radiobutton-shared { 119width: 20px; 120height: 20px; 121padding: (theme.$medium-size - 20px) / 2; 122border-radius: 100px; 123background-image: url(assets/radiobutton-off.svg); 124} 125%tile-shared { 126background-color: theme-color.$scrim-alt; 127border: 2px solid theme-color.divider(theme-color.$on-surface); 128} 129%tile-shared-snap { 130background-color: theme-color.$scrim-alt; 131border: 2px solid theme-color.$primary; 132} 133%osd-panel-shared { 134color: theme-color.$on-surface; 135background-color: theme-color.$surface-z8; 136border: none; 137border-radius: theme.$corner-radius; 138padding: 12px; 139box-shadow: shadow.$z8; 140} 141%osd-info-workspace-shared { 142@include typography.headline6; 143@extend %osd-panel-shared; 144 145text-align: center; 146padding: 8px 10px; 147} 148