Warning, /plasma/breeze-gtk/src/gtk3/widgets/_button.scss is written in an unsupported language. File is not indexed.
0001 @charset "UTF-8";
0002
0003 // buttons
0004
0005 @mixin btn-highlight($c) {
0006 $bg: gtk("@theme_button_background_normal");
0007 $fg: gtk("@theme_button_foreground_normal");
0008
0009 background-color: gtkalpha($c, 0.2);
0010 border-color: gtkmix($c, gtkmix($bg, $fg, 0.333), 0.5);
0011 }
0012
0013 @mixin bg-gradient($bg) {
0014 background: linear-gradient(
0015 180deg,
0016 gtkmix($bg, white, 0.03125) 0%,
0017 $bg 50%,
0018 gtkmix($bg, black, 0.03125) 100%
0019 );
0020 }
0021
0022 @mixin linked() {
0023 border-right-style: none;
0024 border-radius: 0;
0025
0026 &:first-child {
0027 border-top-left-radius: $r;
0028 border-bottom-left-radius: $r;
0029 }
0030 &:last-child {
0031 border-right-style: solid;
0032 border-top-right-radius: $r;
0033 border-bottom-right-radius: $r;
0034 }
0035
0036 &:only-child {
0037 border-style: solid;
0038 border-radius: $r;
0039 }
0040
0041 &:not(:only-child):not(:first-child) {
0042 margin-left: 0;
0043 }
0044 &:not(:only-child):not(:last-child) {
0045 margin-right: 0;
0046 }
0047 }
0048
0049 @mixin linked-vertical() {
0050 border-bottom-style: none;
0051 border-radius: 0;
0052
0053 &:first-child {
0054 border-top-left-radius: $r;
0055 border-top-right-radius: $r;
0056 }
0057
0058 &:last-child {
0059 border-bottom-style: solid;
0060 border-bottom-left-radius: $r;
0061 border-bottom-right-radius: $r;
0062 }
0063
0064 &:only-child {
0065 border-style: solid;
0066 }
0067
0068 &:not(:only-child):not(:first-child) {
0069 margin-top: 0;
0070 }
0071 &:not(:only-child):not(:last-child) {
0072 margin-bottom: 0;
0073 }
0074 }
0075
0076 @mixin linked-side() {
0077 &:focus {
0078 + entry {
0079 border-left-color: gtk(
0080 "@theme_view_active_decoration_color"
0081 );
0082 }
0083 + button {
0084 border-left-color: gtk(
0085 "@theme_button_decoration_focus"
0086 );
0087 }
0088 }
0089 &:hover {
0090 + entry {
0091 border-left-color: gtk(
0092 "@theme_view_active_decoration_color"
0093 );
0094 }
0095 + button {
0096 border-left-color: gtk(
0097 "@theme_button_decoration_hover"
0098 );
0099 }
0100 }
0101 }
0102
0103 @mixin linked-side-vertical() {
0104 &:focus {
0105 + entry {
0106 border-top-color: gtk("@theme_view_active_decoration_color");
0107 }
0108 + button {
0109 border-top-color: gtk("@theme_view_active_decoration_color");
0110 }
0111 }
0112 &:hover {
0113 + entry {
0114 border-top-color: gtk("@theme_view_active_decoration_color");
0115 }
0116 + button {
0117 border-top-color: gtk("@theme_view_active_decoration_color");
0118 }
0119 }
0120 }
0121
0122 // button styles mixin: $t is normal or toolbutton
0123 @mixin neobutton($t) {
0124 &.suggested-action {
0125 @include btn-highlight(
0126 gtk("@theme_button_decoration_focus")
0127 );
0128 }
0129 &.destructive-action {
0130 @include btn-highlight(gtk("@error_color"));
0131 }
0132
0133 @if $t == normal {
0134 box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.125);
0135 text-shadow: none;
0136 -gtk-icon-shadow: none;
0137
0138 color: gtk("@theme_button_foreground_normal");
0139 border-color: gtk("@borders");
0140 @include bg-gradient(
0141 gtk("@theme_button_background_normal")
0142 );
0143
0144 &:backdrop {
0145 box-shadow: none;
0146 background: gtk("@theme_button_background_normal");
0147 }
0148
0149 &:checked {
0150 background: gtkalpha(
0151 gtk("@theme_button_foreground_normal"),
0152 0.125
0153 );
0154 box-shadow: none;
0155 }
0156
0157 &:hover {
0158 border-color: gtk("@theme_button_decoration_hover");
0159
0160 &:not(:checked):not(:active) {
0161 background: gtk("@theme_button_background_normal");
0162 }
0163 }
0164
0165 &:active {
0166 box-shadow: none;
0167 background: gtkalpha(
0168 gtk("@theme_button_decoration_hover"),
0169 0.333
0170 );
0171 }
0172
0173 &:focus {
0174 border-color: gtk("@theme_button_decoration_focus");
0175 }
0176
0177 &:disabled {
0178 box-shadow: none;
0179 color: gtk("@theme_button_foreground_insensitive");
0180 border-color: gtk("@insensitive_borders");
0181 background: gtk(
0182 "@theme_button_background_insensitive"
0183 );
0184
0185 &:active,
0186 &:checked {
0187 color: gtk(
0188 "@theme_button_foreground_active_insensitive"
0189 );
0190 }
0191 }
0192 } @else if $t == toolbutton {
0193 border-color: transparent;
0194 background: transparent;
0195 background-color: transparent;
0196 background-image: none;
0197 box-shadow: none;
0198 color: gtk("@theme_button_foreground_normal");
0199
0200 text-shadow: none;
0201 -gtk-icon-shadow: none;
0202
0203 &:checked {
0204 border-color: gtkmix(
0205 gtk("@theme_button_background_normal"),
0206 gtk("@theme_button_foreground_normal"),
0207 0.3
0208 );
0209 background-color: gtkalpha(
0210 gtk("@theme_button_foreground_normal"),
0211 0.125
0212 );
0213 }
0214
0215 &:hover {
0216 border-color: gtk("@theme_button_decoration_hover");
0217
0218 &:not(:checked):not(:active) {
0219 background: unset;
0220 }
0221 }
0222
0223 &:active {
0224
0225 border-color: gtk("@theme_button_decoration_hover");
0226 background-color: gtkalpha(
0227 gtk("@theme_button_decoration_hover"),
0228 0.333
0229 );
0230 }
0231
0232
0233 &:focus {
0234 border-color: gtk("@theme_button_decoration_focus");
0235 }
0236 }
0237 }
0238
0239 /***********
0240 * Buttons *
0241 ***********/
0242
0243 // stuff for .needs-attention
0244 $_dot_color: gtk("@theme_button_decoration_focus");
0245 @keyframes needs_attention {
0246 from {
0247 background-image: -gtk-gradient(
0248 radial,
0249 center center,
0250 0,
0251 center center,
0252 0.01,
0253 to($_dot_color),
0254 to(transparent)
0255 );
0256 }
0257 to {
0258 background-image: -gtk-gradient(
0259 radial,
0260 center center,
0261 0,
0262 center center,
0263 0.5,
0264 to(gtk("@theme_selected_bg_color")),
0265 to(transparent)
0266 );
0267 }
0268 }
0269
0270 %buttons {
0271 border: 1px solid;
0272 border-radius: $r;
0273 padding: 6px 6px;
0274 background-clip: border-box;
0275
0276 @include neobutton(normal);
0277 &.flat {
0278 @include neobutton(toolbutton);
0279 }
0280
0281 separator {
0282 background-color: transparent;
0283 background-image: none;
0284 color: transparent;
0285 }
0286 }
0287 %button,
0288 button {
0289 @at-root %button_basic,
0290 & {
0291 @extend %buttons;
0292 &.osd {
0293 @extend %buttons;
0294 }
0295 //overlay / OSD style
0296 .osd & {
0297 //@extend %buttons;
0298 }
0299
0300 &.image-button {
0301 min-height: 16px;
0302 min-width: 16px;
0303 padding: 6px;
0304 }
0305
0306 &.text-button {
0307 padding-left: 6px;
0308 padding-right: 6px;
0309 }
0310
0311 &.circular {
0312 min-width: 18px;
0313 min-height: 18px;
0314 border-radius: 9999px;
0315 }
0316
0317 &.text-button.image-button {
0318 padding-left: 6px;
0319 padding-right: 6px;
0320 label {
0321 padding-left: 6px;
0322 padding-right: 6px;
0323 }
0324 }
0325 // FIXME
0326 // &:drop(active) {
0327 // color: $drop_target_color;
0328 // border-color: $drop_target_color;
0329 // box-shadow: inset 0 0 0 1px $drop_target_color;
0330 // }
0331 }
0332
0333 @at-root %button_selected,
0334 & {
0335 row:selected & {
0336 border-color: gtk("@theme_selected_bg_color");
0337
0338 &.flat:not(:active):not(:checked):not(:hover):not(disabled) {
0339 color: gtk("@theme_selected_fg_color");
0340 border-color: transparent;
0341
0342 &:backdrop {
0343 color: gtk("@theme_unfocused_selected_fg_color");
0344 }
0345 }
0346 }
0347 }
0348
0349 .stack-switcher > & {
0350 // to position the needs attention dot, padding is added to the button
0351 // child, a label needs just lateral padding while an icon needs vertical
0352 // padding added too.
0353 > label {
0354 padding-left: 6px; // label padding
0355 padding-right: 6px; //
0356 }
0357 > image {
0358 padding-left: 6px; // image padding
0359 padding-right: 6px; //
0360 padding-top: 3px; //
0361 padding-bottom: 3px; //
0362 }
0363 &.text-button {
0364 padding: 6px; // needed or it will get overridden
0365 }
0366 &.image-button {
0367 // we want image buttons to have a 1:1 aspect ratio, so compensation
0368 // of the padding added to the GtkImage is needed
0369 padding: 3px 0px;
0370 }
0371 &.needs-attention > label,
0372 &.needs-attention > image {
0373 @extend %needs_attention;
0374 }
0375 &.needs-attention:active > label,
0376 &.needs-attention:active > image,
0377 &.needs-attention:focus > label,
0378 &.needs-attention:focus > image,
0379 &.needs-attention:checked > label,
0380 &.needs-attention:checked > image {
0381 animation: none;
0382 background-image: none;
0383 }
0384 }
0385
0386 //inline-toolbar buttons
0387 .inline-toolbar &,
0388 .inline-toolbar &:backdrop {
0389 border-radius: $r;
0390 border-width: 1px;
0391 }
0392
0393 .primary-toolbar & {
0394 -gtk-icon-shadow: none;
0395 }
0396 }
0397
0398 /**************
0399 * ComboBoxes *
0400 **************/
0401 combobox {
0402 arrow {
0403 -gtk-icon-source: -gtk-icontheme($arrow_down);
0404 min-height: 16px;
0405 min-width: 16px;
0406 }
0407
0408 button {
0409 padding-top: 4px;
0410 padding-bottom: 4px;
0411 }
0412
0413 > box > button.combo:only-child {
0414 // remove a shadow for headerbar comboboxes
0415 headerbar &,
0416 .linked & {
0417 box-shadow: none;
0418 }
0419
0420 arrow {
0421 min-width: 14px;
0422
0423 &:dir(rtl) {
0424 margin-left: -3px;
0425 }
0426
0427 &:dir(ltr) {
0428 margin-right: -3px;
0429 }
0430 }
0431 }
0432 }
0433
0434 %needs_attention {
0435 animation: needs_attention 150ms ease-in;
0436 $_dot_shadow: gtk("@theme_button_foreground_normal");
0437 $_dot_shadow_r: 0.5;
0438 background-image: -gtk-gradient(
0439 radial,
0440 center center,
0441 0,
0442 center center,
0443 0.5,
0444 to($_dot_color),
0445 to(transparent)
0446 ),
0447 -gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), to(transparent));
0448 background-size: 6px 6px, 6px 6px;
0449 background-repeat: no-repeat;
0450 background-position: right 3px, right 4px;
0451 &:backdrop {
0452 background-size: 6px 6px, 0 0;
0453 }
0454 &:dir(rtl) {
0455 background-position: left 3px, left 4px;
0456 }
0457 }
0458
0459 box.linked:not(.vertical),
0460 box.inline-toolbar:not(.vertical),
0461 buttonbox.linked:not(.vertical) {
0462 &:not(.dialog-action-area) { // make an exception for dialog buttons to look more consistent in Qt environment
0463 entry,
0464 button {
0465 // if we have a box-shadow, buttons look raised while the
0466 // other elements aren't, which looks weird, and we can't really
0467 // fix it, so just drop the box shadow in this case.
0468 &:not(.combo) {
0469 box-shadow: none;
0470 }
0471 @include linked();
0472 @include linked-side();
0473 }
0474 }
0475 }
0476
0477 box.linked.vertical,
0478 box.inline-toolbar.vertical,
0479 buttonbox.linked.vertical {
0480 &:not(.dialog-action-area) {
0481 entry,
0482 button {
0483 &:not(.combo) {
0484 box-shadow: none;
0485 }
0486 @include linked-vertical();
0487 @include linked-side-vertical();
0488 }
0489 }
0490 }
0491
0492 stackswitcher.linked {
0493 button:not(.flat) {
0494 box-shadow: none;
0495 @include linked();
0496 @include linked-side();
0497 }
0498 }
0499
0500 %undecorated_button {
0501 border-color: transparent;
0502 background-color: transparent;
0503 background-image: none;
0504 box-shadow: none;
0505 text-shadow: none;
0506 -gtk-icon-shadow: none;
0507 }