wp-optimize
/
vendor
/
team-updraft
/
common-libs
/
src
/
updraft-theme
/
components
/
button
/
button.scss
button.scss in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 4.7.0, at vendor/team-updraft/common-libs/src/updraft-theme/components/button/button.scss
| 1 | @use "../../helpers/responsive-variables-generator.scss" as *; |
| 2 | @use "../../helpers/typography.scss" as *; |
| 3 | |
| 4 | $button-variables: ( |
| 5 | "padding-tert": ( |
| 6 | "mobile": "bu-2", |
| 7 | "desktop": "bu-2" |
| 8 | ), |
| 9 | "outline-tert": ( |
| 10 | "mobile": "bu-2", |
| 11 | "desktop": "bu-2" |
| 12 | ), |
| 13 | "large-padding-h": ( |
| 14 | "mobile": "bu-16", |
| 15 | "desktop": "bu-16" |
| 16 | ), |
| 17 | "large-padding-v": ( |
| 18 | "mobile": "bu-10", |
| 19 | "desktop": "bu-10" |
| 20 | ), |
| 21 | "large-min-height": ( |
| 22 | "mobile": "bu-48", |
| 23 | "desktop": "bu-48" |
| 24 | ), |
| 25 | "corner": ( |
| 26 | "mobile": "bu-32", |
| 27 | "desktop": "bu-32" |
| 28 | ), |
| 29 | "icon-basic-corner": ( |
| 30 | "mobile": "bu-4", |
| 31 | "desktop": "bu-4" |
| 32 | ), |
| 33 | "large-gap": ( |
| 34 | "mobile": "bu-8", |
| 35 | "desktop": "bu-8" |
| 36 | ), |
| 37 | "large-border": ( |
| 38 | "mobile": "bu-1", |
| 39 | "desktop": "bu-1" |
| 40 | ), |
| 41 | "large-outline": ( |
| 42 | "mobile": "bu-4", |
| 43 | "desktop": "bu-4" |
| 44 | ), |
| 45 | "medium-padding-h": ( |
| 46 | "mobile": "bu-16", |
| 47 | "desktop": "bu-16" |
| 48 | ), |
| 49 | "medium-padding-v": ( |
| 50 | "mobile": "bu-10", |
| 51 | "desktop": "bu-10" |
| 52 | ), |
| 53 | "medium-min-height": ( |
| 54 | "mobile": "bu-48", |
| 55 | "desktop": "bu-48" |
| 56 | ), |
| 57 | "medium-gap": ( |
| 58 | "mobile": "bu-8", |
| 59 | "desktop": "bu-8" |
| 60 | ), |
| 61 | "medium-border": ( |
| 62 | "mobile": "bu-1", |
| 63 | "desktop": "bu-1" |
| 64 | ), |
| 65 | "medium-outline": ( |
| 66 | "mobile": "bu-4", |
| 67 | "desktop": "bu-4" |
| 68 | ), |
| 69 | "small-padding-h": ( |
| 70 | "mobile": "bu-16", |
| 71 | "desktop": "bu-16" |
| 72 | ), |
| 73 | "small-padding-v": ( |
| 74 | "mobile": "bu-10", |
| 75 | "desktop": "bu-10" |
| 76 | ), |
| 77 | "small-min-height": ( |
| 78 | "mobile": "bu-48", |
| 79 | "desktop": "bu-48" |
| 80 | ), |
| 81 | "small-gap": ( |
| 82 | "mobile": "bu-6", |
| 83 | "desktop": "bu-6" |
| 84 | ), |
| 85 | "small-border": ( |
| 86 | "mobile": "bu-1", |
| 87 | "desktop": "bu-1" |
| 88 | ), |
| 89 | "small-outline": ( |
| 90 | "mobile": "bu-4", |
| 91 | "desktop": "bu-4" |
| 92 | ), |
| 93 | "icon-large-padding": ( |
| 94 | "mobile": "bu-12", |
| 95 | "desktop": "bu-12" |
| 96 | ), |
| 97 | "icon-small-padding": ( |
| 98 | "mobile": "bu-8", |
| 99 | "desktop": "bu-8" |
| 100 | ), |
| 101 | "icon-corner": ( |
| 102 | "mobile": "bu-48", |
| 103 | "desktop": "bu-48" |
| 104 | ), |
| 105 | ); |
| 106 | |
| 107 | @include tu-generate-responsive-variables("tu-button", $button-variables); |
| 108 | |
| 109 | $button-themes: ( |
| 110 | 'primary': ( |
| 111 | 'is-gradient': false, |
| 112 | 'base': var(--color-primary-600), |
| 113 | 'hover': var(--color-primary-700), |
| 114 | 'hover-background': var(--color-primary-50), |
| 115 | 'focus-outline': var(--color-primary-300), |
| 116 | 'disabled-background': var(--color-primary-200), |
| 117 | 'icon-button-background': var(--color-primary-50), |
| 118 | 'icon-button-hover-background': var(--color-primary-100), |
| 119 | ), |
| 120 | 'error': ( |
| 121 | 'is-gradient': false, |
| 122 | 'base': var(--color-status-error-600), |
| 123 | 'hover': var(--color-status-error-700), |
| 124 | 'hover-background': var(--color-status-error-50), |
| 125 | 'focus-outline': var(--color-status-error-200), |
| 126 | 'disabled-background': var(--color-status-error-200), |
| 127 | 'icon-button-background': var(--color-status-error-50), |
| 128 | 'icon-button-hover-background': var(--color-status-error-100), |
| 129 | ), |
| 130 | 'info': ( |
| 131 | 'is-gradient': false, |
| 132 | 'base': var(--color-status-info-600), |
| 133 | 'hover': var(--color-status-info-700), |
| 134 | 'hover-background': var(--color-status-info-50), |
| 135 | 'focus-outline': var(--color-status-info-200), |
| 136 | 'disabled-background': var(--color-status-info-200), |
| 137 | 'icon-button-background': var(--color-status-info-50), |
| 138 | 'icon-button-hover-background': var(--color-status-info-100), |
| 139 | ), |
| 140 | 'success': ( |
| 141 | 'is-gradient': false, |
| 142 | 'base': var(--color-status-success-600), |
| 143 | 'hover': var(--color-status-success-700), |
| 144 | 'hover-background': var(--color-status-success-50), |
| 145 | 'focus-outline': var(--color-status-success-200), |
| 146 | 'disabled-background': var(--color-status-success-200), |
| 147 | 'icon-button-background': var(--color-status-success-50), |
| 148 | 'icon-button-hover-background': var(--color-status-success-100), |
| 149 | ), |
| 150 | 'warning': ( |
| 151 | 'is-gradient': false, |
| 152 | 'base': var(--color-status-warning-600), |
| 153 | 'hover': var(--color-status-warning-700), |
| 154 | 'focus-outline': var(--color-status-warning-200), |
| 155 | 'icon-button-background': var(--color-status-warning-50), |
| 156 | 'icon-button-hover-background': var(--color-status-warning-100), |
| 157 | ), |
| 158 | 'premium': ( |
| 159 | 'is-gradient': true, |
| 160 | 'base': var(--color-premium-gradient), |
| 161 | 'hover': var(--color-premium-gradient-dark), |
| 162 | 'hover-background': var(--color-premium-gradient-light), |
| 163 | 'focus-outline': var(--color-primary-300), |
| 164 | 'disabled-background': var(--color-primary-200), |
| 165 | ), |
| 166 | 'white': ( |
| 167 | 'is-gradient': false, |
| 168 | 'base': var(--color-secondary-0), |
| 169 | 'hover': var(--color-primary-300), |
| 170 | 'focus-outline': var(--color-primary-300), |
| 171 | 'icon-button-text': var(--color-secondary-500), |
| 172 | 'icon-button-background': var(--color-secondary-0), |
| 173 | 'icon-button-hover-background': var(--color-secondary-50), |
| 174 | ), |
| 175 | 'grey': ( |
| 176 | 'is-gradient': false, |
| 177 | 'base': var(--color-secondary-600), |
| 178 | 'hover': var(--color-secondary-800), |
| 179 | 'focus-outline': var(--color-primary-300), |
| 180 | ), |
| 181 | ); |
| 182 | |
| 183 | tu-button { |
| 184 | display: contents; |
| 185 | |
| 186 | button { |
| 187 | display: inline-flex; |
| 188 | flex-direction: row; |
| 189 | justify-content: center; |
| 190 | align-items: center; |
| 191 | gap: var(--tu-button-large-gap); |
| 192 | border: var(--tu-button-large-border) solid transparent; |
| 193 | border-radius: var(--tu-button-corner); |
| 194 | min-height: var(--tu-button-large-min-height); |
| 195 | padding: var(--tu-button-large-padding-v) var(--tu-button-large-padding-h); |
| 196 | background: var(--color-primary-600); |
| 197 | cursor: pointer; |
| 198 | transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s; |
| 199 | color: var(--color-secondary-0); |
| 200 | @include tu-typography("button-large"); |
| 201 | |
| 202 | tu-icon::before { |
| 203 | background: var(--color-secondary-0) !important; |
| 204 | width: var(--tu-icon-small) !important; |
| 205 | height: var(--tu-icon-small) !important; |
| 206 | } |
| 207 | |
| 208 | &[size="medium" ]="medium"" ] { |
| 209 | gap: var(--tu-button-medium-gap); |
| 210 | min-height: var(--tu-button-medium-min-height); |
| 211 | padding: var(--tu-button-medium-padding-v) var(--tu-button-medium-padding-h); |
| 212 | @include tu-typography("button-medium"); |
| 213 | } |
| 214 | |
| 215 | &[size="small" ]="small"" ] { |
| 216 | gap: var(--tu-button-small-gap); |
| 217 | min-height: var(--tu-button-small-min-height); |
| 218 | padding: var(--tu-button-small-padding-v) var(--tu-button-small-padding-h); |
| 219 | @include tu-typography("button-small"); |
| 220 | |
| 221 | tu-icon::before { |
| 222 | width: var(--tu-icon-extra-small) !important; |
| 223 | height: var(--tu-icon-extra-small) !important; |
| 224 | } |
| 225 | } |
| 226 | |
| 227 | &:hover { |
| 228 | background: var(--color-primary-700); |
| 229 | } |
| 230 | |
| 231 | &:focus-visible { |
| 232 | outline: var(--tu-button-large-outline) solid var(--color-primary-400); |
| 233 | background: var(--color-primary-700); |
| 234 | border-color: transparent; |
| 235 | } |
| 236 | |
| 237 | // Common disabled styles start. |
| 238 | &[disabled]] { |
| 239 | &, |
| 240 | &[theme]] { |
| 241 | &, |
| 242 | &:hover { |
| 243 | background: var(--color-primary-200) !important; |
| 244 | cursor: not-allowed; |
| 245 | } |
| 246 | } |
| 247 | } |
| 248 | |
| 249 | &[disabled]][type="tertiary"]="tertiary""] { |
| 250 | &, |
| 251 | &[theme]] { |
| 252 | &, |
| 253 | &:hover { |
| 254 | color: var(--color-secondary-400) !important; |
| 255 | background: transparent !important; |
| 256 | cursor: not-allowed; |
| 257 | text-decoration: none !important; |
| 258 | |
| 259 | tu-icon::before { |
| 260 | background: var(--color-secondary-400) !important; |
| 261 | } |
| 262 | } |
| 263 | } |
| 264 | } |
| 265 | |
| 266 | &[disabled]][type="icon"]="icon""], |
| 267 | &[disabled]][type="secondary"]="secondary""] { |
| 268 | &, |
| 269 | &[theme]] { |
| 270 | &, |
| 271 | &:hover { |
| 272 | border: var(--tu-button-large-border) solid var(--color-secondary-100) !important; |
| 273 | background: var(--color-secondary-0) !important; |
| 274 | color: var(--color-secondary-400) !important; |
| 275 | cursor: not-allowed; |
| 276 | |
| 277 | tu-icon::before { |
| 278 | background: var(--color-secondary-400) !important; |
| 279 | } |
| 280 | } |
| 281 | } |
| 282 | } |
| 283 | // Common disabled styles end. |
| 284 | |
| 285 | // Default styles of each type button start. |
| 286 | &[type="icon"]="icon""], |
| 287 | &[type="secondary"]="secondary""], |
| 288 | &[type="tertiary"]="tertiary""] { |
| 289 | background: var(--color-secondary-0); |
| 290 | border-color: var(--color-primary-600); |
| 291 | color: var(--color-primary-600); |
| 292 | |
| 293 | tu-icon::before { |
| 294 | background: var(--color-primary-600) !important; |
| 295 | } |
| 296 | |
| 297 | &:hover, &:focus-visible { |
| 298 | background: var(--color-primary-50); |
| 299 | color: var(--color-primary-700); |
| 300 | |
| 301 | tu-icon::before { |
| 302 | background: var(--color-primary-700) !important; |
| 303 | } |
| 304 | } |
| 305 | |
| 306 | &:hover { |
| 307 | border-color: var(--color-primary-700); |
| 308 | } |
| 309 | |
| 310 | &:focus-visible { |
| 311 | outline: var(--tu-button-large-outline) solid var(--color-primary-300); |
| 312 | } |
| 313 | } |
| 314 | |
| 315 | &[type="tertiary"]="tertiary""] { |
| 316 | &, |
| 317 | &[theme]] { |
| 318 | border: none; |
| 319 | padding: 0 var(--tu-button-padding-tert); |
| 320 | background: transparent !important; |
| 321 | min-height: unset; |
| 322 | |
| 323 | &:hover { |
| 324 | text-decoration: underline; |
| 325 | } |
| 326 | } |
| 327 | } |
| 328 | |
| 329 | &[type="icon"]="icon""], |
| 330 | &[type="icon-basic"]="icon-basic""] { |
| 331 | &, |
| 332 | &[theme]] { |
| 333 | background: var(--color-primary-50); |
| 334 | border: none; |
| 335 | padding: var(--tu-button-icon-large-padding); |
| 336 | border-radius: var(--tu-button-icon-corner); |
| 337 | min-height: unset; |
| 338 | |
| 339 | .tu-button-content, |
| 340 | tu-icon:not(:first-child) { |
| 341 | display: none; |
| 342 | } |
| 343 | |
| 344 | &:hover { |
| 345 | background: var(--color-primary-100); |
| 346 | } |
| 347 | |
| 348 | &[disabled]], |
| 349 | &[disabled]]:hover { |
| 350 | background: var(--color-secondary-50) !important; |
| 351 | border: none !important; |
| 352 | } |
| 353 | } |
| 354 | } |
| 355 | |
| 356 | &[type="icon-basic"]="icon-basic""] { |
| 357 | padding: 0; |
| 358 | border-radius: var(--tu-button-icon-basic-corner); |
| 359 | background: transparent; |
| 360 | color: var(--color-secondary-500); |
| 361 | |
| 362 | &:hover { |
| 363 | background: transparent; |
| 364 | } |
| 365 | |
| 366 | tu-icon::before { |
| 367 | background: var(--color-secondary-500) !important; |
| 368 | } |
| 369 | } |
| 370 | // Default styles of each type button end. |
| 371 | |
| 372 | @each $theme-name, $colors in $button-themes { |
| 373 | $base: map-get($colors, 'base'); |
| 374 | $hover: map-get($colors, 'hover'); |
| 375 | $hover-background: map-get($colors, 'hover-background'); |
| 376 | $focus-outline: map-get($colors, 'focus-outline'); |
| 377 | $is-gradient: map-get($colors, 'is-gradient'); |
| 378 | $disabled-background: map-get($colors, 'disabled-background'); |
| 379 | $icon-button-background: map-get($colors, 'icon-button-background'); |
| 380 | $icon-button-hover-background: map-get($colors, 'icon-button-hover-background'); |
| 381 | $icon-button-text: map-get($colors, 'icon-button-text'); |
| 382 | |
| 383 | &[theme="#{$theme-name}"]="#{$theme-name}""] { |
| 384 | // Disabled style for CTA type button. |
| 385 | &[disabled]][type="cta"]="cta""] { |
| 386 | &, |
| 387 | &:hover { |
| 388 | background: $disabled-background; |
| 389 | border: none; |
| 390 | cursor: not-allowed; |
| 391 | } |
| 392 | } |
| 393 | |
| 394 | @if $is-gradient { |
| 395 | |
| 396 | &[type="cta"]="cta""] { |
| 397 | background: $base; |
| 398 | color: var(--color-secondary-0); |
| 399 | border: none; |
| 400 | -webkit-font-smoothing: antialiased; |
| 401 | |
| 402 | &:hover, &:focus-visible { |
| 403 | background: $hover; |
| 404 | } |
| 405 | } |
| 406 | |
| 407 | &[type="secondary"]="secondary""], |
| 408 | &[type="tertiary"]="tertiary""] { |
| 409 | position: relative; |
| 410 | z-index: 1; |
| 411 | border: var(--tu-button-large-border) solid transparent; |
| 412 | border-radius: var(--tu-button-corner); |
| 413 | |
| 414 | // Text. |
| 415 | background-image: $base; |
| 416 | background-clip: text; |
| 417 | -webkit-background-clip: text; |
| 418 | color: transparent; |
| 419 | |
| 420 | tu-icon::before { |
| 421 | background: $base !important; |
| 422 | } |
| 423 | |
| 424 | // Border. |
| 425 | &::before { |
| 426 | content: ""; |
| 427 | position: absolute; |
| 428 | inset: calc(-1 * var(--tu-button-large-border)); |
| 429 | z-index: -1; |
| 430 | border-radius: inherit; |
| 431 | padding: var(--tu-button-large-border); |
| 432 | |
| 433 | background: $base; |
| 434 | |
| 435 | mask: |
| 436 | linear-gradient(var(--color-secondary-0) 0 0) content-box, |
| 437 | linear-gradient(var(--color-secondary-0) 0 0); |
| 438 | -webkit-mask: |
| 439 | linear-gradient(var(--color-secondary-0) 0 0) content-box, |
| 440 | linear-gradient(var(--color-secondary-0) 0 0); |
| 441 | -webkit-mask-composite: xor; |
| 442 | mask-composite: exclude; |
| 443 | } |
| 444 | |
| 445 | // Background. |
| 446 | &::after { |
| 447 | content: ""; |
| 448 | position: absolute; |
| 449 | inset: 0; |
| 450 | z-index: -2; |
| 451 | border-radius: inherit; |
| 452 | background: transparent; |
| 453 | transition: background 0.3s ease; |
| 454 | } |
| 455 | |
| 456 | &[disabled]] { |
| 457 | &, |
| 458 | &:hover { |
| 459 | &::before { |
| 460 | background: var(--color-secondary-100); |
| 461 | } |
| 462 | } |
| 463 | } |
| 464 | |
| 465 | &:hover, &:focus-visible { |
| 466 | background-image: $hover, $hover-background; |
| 467 | -webkit-background-clip: text, padding-box; |
| 468 | background-clip: text, padding-box; |
| 469 | color: transparent; |
| 470 | |
| 471 | tu-icon::before { |
| 472 | background: $hover !important; |
| 473 | } |
| 474 | |
| 475 | &::before { |
| 476 | background: $hover; |
| 477 | } |
| 478 | |
| 479 | &::after { |
| 480 | display: none; |
| 481 | } |
| 482 | } |
| 483 | } |
| 484 | } @else { |
| 485 | &[type="cta"]="cta""] { |
| 486 | background: $base; |
| 487 | color: var(--color-secondary-0); |
| 488 | border-color: $base; |
| 489 | |
| 490 | tu-icon::before { |
| 491 | background: var(--color-secondary-0) !important; |
| 492 | } |
| 493 | |
| 494 | &:hover, &:focus-visible { |
| 495 | background: $hover; |
| 496 | border-color: $hover; |
| 497 | } |
| 498 | |
| 499 | &:focus-visible { |
| 500 | outline: var(--tu-button-large-outline) solid $focus-outline; |
| 501 | } |
| 502 | } |
| 503 | |
| 504 | &[type="icon"]="icon""], |
| 505 | &[type="secondary"]="secondary""], |
| 506 | &[type="tertiary"]="tertiary""] { |
| 507 | background: var(--color-secondary-0); |
| 508 | border-color: $base; |
| 509 | color: $base; |
| 510 | |
| 511 | tu-icon::before { |
| 512 | background: $base !important; |
| 513 | } |
| 514 | |
| 515 | &:hover, &:focus-visible { |
| 516 | background: $hover-background; |
| 517 | color: $hover; |
| 518 | |
| 519 | tu-icon::before { |
| 520 | background: $hover !important; |
| 521 | } |
| 522 | } |
| 523 | |
| 524 | &:hover { |
| 525 | border-color: $hover; |
| 526 | } |
| 527 | |
| 528 | &:focus-visible { |
| 529 | outline: var(--tu-button-large-outline) solid $focus-outline; |
| 530 | } |
| 531 | } |
| 532 | |
| 533 | &[type="icon"]="icon""] { |
| 534 | border: none; |
| 535 | background: $icon-button-background; |
| 536 | |
| 537 | tu-icon::before { |
| 538 | background: $icon-button-text !important; |
| 539 | } |
| 540 | |
| 541 | &:focus-visible tu-icon::before { |
| 542 | background: $icon-button-text !important; |
| 543 | } |
| 544 | |
| 545 | &:hover { |
| 546 | background: $icon-button-hover-background; |
| 547 | |
| 548 | tu-icon::before { |
| 549 | background: $icon-button-text !important; |
| 550 | } |
| 551 | } |
| 552 | } |
| 553 | } |
| 554 | } |
| 555 | } |
| 556 | } |
| 557 | } |
| 558 |