Instantly share code, notes, and snippets.
Created
May 16, 2024 19:37
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save oops-wrong/a611d8b2565199f6b87507c0dae68063 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.ag-button { | |
align-items: center; | |
border-radius: 6px; | |
border: 1px solid transparent; | |
cursor: pointer; | |
display: flex; | |
font-size: 14px; | |
font-weight: 500; | |
line-height: 1; | |
min-height: 28px; | |
padding: 6px 8px; | |
position: relative; | |
user-select: none; | |
width: fit-content; | |
$self: &; | |
& + & { | |
margin-left: 8px; | |
} | |
&__content { | |
align-items: center; | |
display: flex; | |
height: 100%; | |
justify-content: center; | |
transition: opacity 0.2s; | |
width: 100%; | |
> .mat-icon { | |
flex-shrink: 0; | |
} | |
> .mat-icon:first-child { | |
margin-right: 8px; | |
} | |
> .mat-icon:last-child { | |
margin-left: 8px; | |
} | |
> .mat-icon:first-child:last-child { | |
margin: 0; | |
} | |
} | |
&.ag-button_icon { | |
padding: 0; | |
#{$self}__content { | |
> .mat-icon { | |
flex-shrink: 0; | |
font-size: 24px; | |
height: 1em; | |
width: 1em; | |
} | |
} | |
} | |
> .ag-button-loader { | |
height: 16px; | |
left: 50%; | |
position: absolute; | |
top: 50%; | |
width: 16px; | |
transform: translate3d(-50%, -50%, 0); | |
} | |
&:disabled, | |
&_disabled { | |
pointer-events: none; | |
} | |
&_loading { | |
pointer-events: none; | |
&:not(#{$self}_disabled) #{$self}__content { | |
opacity: 0; | |
} | |
} | |
&_big { | |
min-height: 40px; | |
font-size: 16px; | |
#{$self}__content { | |
padding: 0 20px; | |
} | |
} | |
&_normal { | |
padding: 7px 11px; | |
} | |
&_wide { | |
padding-left: 26px; | |
padding-right: 26px; | |
} | |
&_16 { | |
padding: 16px; | |
} | |
&_mini { | |
border-radius: 6px; | |
color: var(--ultra-text, #858585); | |
font-size: 16px; | |
min-height: auto; | |
padding: 5px; | |
.mat-icon { | |
font-size: inherit; | |
} | |
} | |
&_mini-2 { | |
border-radius: 4px; | |
font-size: 14px; | |
line-height: 16px; | |
min-height: auto; | |
padding: 2px; | |
.mat-icon { | |
font-size: inherit; | |
} | |
} | |
&_mini-4, | |
&_mini-6 { | |
border-radius: 4px; | |
font-size: 14px; | |
line-height: 16px; | |
min-height: auto; | |
padding: 4px; | |
} | |
&_mini-6 { | |
border-radius: 6px; | |
padding: 6px; | |
} | |
&_square { | |
font-size: 16px; | |
padding: 8px; | |
.mat-icon { | |
font-size: inherit; | |
} | |
} | |
&_space-between { | |
padding-left: 12px; | |
padding-right: 9px; | |
#{$self}__content { | |
justify-content: space-between; | |
} | |
} | |
&_left { | |
padding-left: 12px; | |
padding-right: 9px; | |
#{$self}__content { | |
justify-content: flex-start; | |
} | |
} | |
&_blue { | |
background: var(--ultra-blue, #2d64de); | |
border: 1px solid var(--ultra-blue, #2d64de); | |
color: var(--ultra-text-dark, #fff); | |
font-weight: 500; | |
transition: background-color 0.2s, border-color 0.2s; | |
&.active, | |
&:hover { | |
background: var(--ultra-blue-hover, #178fe3); | |
border: 1px solid var(--ultra-blue-hover, #178fe3); | |
} | |
&#{$self}_disabled { | |
background-color: var(--ultra-blue-disabled, #67b1e0); | |
border-color: var(--ultra-blue-disabled, #67b1e0); | |
} | |
&#{$self}_loading { | |
background-color: var(--ultra-blue-hover, #178fe3); | |
border-color: var(--ultra-blue-hover, #178fe3); | |
} | |
} | |
&_green { | |
background: var(--ultra-green, #039941); | |
border: 1px solid var(--ultra-green, #039941); | |
color: var(--ultra-text-dark, #fff); | |
font-weight: 500; | |
transition: background-color 0.2s, border-color 0.2s; | |
&.active, | |
&:hover { | |
background: var(--ultra-green-hover, #35ad67); | |
border: 1px solid var(--ultra-green-hover, #35ad67); | |
} | |
&#{$self}_disabled { | |
background-color: var(--ultra-green-disabled, #68c28d); | |
border-color: var(--ultra-green-disabled, #68c28d); | |
} | |
&#{$self}_loading { | |
background-color: var(--ultra-green, #039941); | |
border-color: var(--ultra-green, #039941); | |
} | |
} | |
&_white-blue { | |
background: var(--ultra-bg-main, #fff); | |
border: 1px solid var(--ultra-border, #d6d6d6); | |
color: var(--ultra-blue-text, #2d64de); | |
font-weight: 500; | |
transition: background-color 0.2s, color 0.2s, border-color 0.2s; | |
&.active, | |
&:hover { | |
color: var(--ultra-blue-text, #2d64de); | |
background: var(--ultra-gray, #f5f5f5); | |
} | |
&#{$self}_disabled { | |
opacity: 0.6; | |
} | |
} | |
&_light-blue { | |
background: var(--ultra-light-blue, #eaf0fc); | |
border: 1px solid var(--ultra-light-blue, #eaf0fc); | |
color: var(--ultra-blue-text, #2d64de); | |
font-weight: 500; | |
transition: background-color 0.2s, border-color 0.2s; | |
&.active, | |
&:hover { | |
background-color: var(--ultra-light-blue-hover, #d5e0f8); | |
border-color: var(--ultra-light-blue-hover, #d5e0f8); | |
} | |
&#{$self}_disabled { | |
background-color: var(--ultra-light-blue-disabled, #f9fbfe); | |
border-color: var(--ultra-light-blue-disabled, #f9fbfe); | |
opacity: 0.5; | |
} | |
&#{$self}_loading { | |
background-color: var(--ultra-light-blue, #eaf0fc); | |
border-color: var(--ultra-light-blue, #eaf0fc); | |
color: var(--ultra-blue-text, #2d64de); | |
} | |
} | |
&_transparent-gray.active, | |
&_gray { | |
background: var(--ultra-gray, #f5f5f5); | |
color: var(--ultra-black-like, #0d0d0d); | |
transition: background-color 0.2s, border-color 0.2s; | |
&.active, | |
&:hover { | |
background: var(--ultra-gray-hover, #ebebeb); | |
} | |
&#{$self}_disabled { | |
background-color: var(--ultra-gray, #f5f5f5); | |
opacity: 0.6; | |
} | |
&#{$self}_loading { | |
background-color: var(--ultra-gray, #f5f5f5); | |
} | |
} | |
&_gray-filled { | |
background: var(--ultra-gray-hover, #ebebeb); | |
color: var(--ultra-black-like, #0d0d0d); | |
transition: background-color 0.2s, border-color 0.2s; | |
&.active, | |
&:hover { | |
background: var(--ultra-border, #d6d6d6); | |
} | |
&#{$self}_disabled { | |
background-color: var(--ultra-gray, #f5f5f5); | |
opacity: 0.6; | |
} | |
&#{$self}_loading { | |
background-color: var(--ultra-gray-hover, #ebebeb); | |
} | |
} | |
&_black { | |
background: var(--ultra-black, #5a5a5a); | |
border: 1px solid var(--ultra-black, #5a5a5a); | |
color: var(--ultra-gray, #f5f5f5); | |
transition: background-color 0.2s, border-color 0.2s; | |
&.active, | |
&:hover { | |
background: var(--ultra-black-hover, #858585); | |
border-color: var(--ultra-black-hover, #858585); | |
} | |
&#{$self}_disabled { | |
background-color: var(--ultra-black, #5a5a5a); | |
border-color: var(--ultra-black, #5a5a5a); | |
opacity: 0.6; | |
} | |
&#{$self}_loading { | |
background-color: var(--ultra-black, #5a5a5a); | |
border-color: var(--ultra-black, #5a5a5a); | |
} | |
} | |
&_white-red { | |
background: var(--ultra-bg-main, #fff); | |
border: 1px solid var(--ultra-border, #d6d6d6); | |
color: var(--ultra-red, #dc2727); | |
font-weight: 500; | |
transition: background-color 0.2s, color 0.2s, border-color 0.2s; | |
&.active, | |
&:hover { | |
color: var(--ultra-red, #dc2727); | |
background: var(--ultra-gray, #f5f5f5); | |
} | |
&#{$self}_disabled { | |
opacity: 0.6; | |
} | |
} | |
&_light-red { | |
background: var(--ultra-light-red, #fdedee); | |
border: 1px solid var(--ultra-light-red, #fdedee); | |
color: var(--ultra-red, #dc2727); | |
font-weight: 500; | |
transition: background-color 0.2s, color 0.2s, border-color 0.2s; | |
&.active, | |
&:hover { | |
color: var(--ultra-red, #dc2727); | |
background: var(--ultra-light-red-hover, #fbe2e3); | |
border: 1px solid var(--ultra-light-red-hover, #fbe2e3); | |
} | |
&#{$self}_disabled { | |
background-color: var(--ultra-light-red, #fdedee); | |
border-color: var(--ultra-light-red, #fdedee); | |
opacity: 0.6; | |
} | |
&#{$self}_loading { | |
background-color: var(--ultra-light-red, #fdedee); | |
border-color: var(--ultra-light-red, #fdedee); | |
} | |
} | |
&_white-black { | |
background: var(--ultra-bg-main, #fff); | |
border: 1px solid var(--ultra-border-light, #d9d9d9); | |
color: var(--ultra-black-text, #0d0d0d); | |
font-weight: 500; | |
transition: background-color 0.2s, color 0.2s, border-color 0.2s; | |
&.active, | |
&:hover { | |
background: var(--ultra-gray, #f5f5f5); | |
border: 1px solid var(--ultra-border-light, #d9d9d9); | |
} | |
&#{$self}_disabled { | |
opacity: 0.6; | |
} | |
&#{$self}_loading { | |
background-color: var(--ultra-bg-main, #fff); | |
border-color: var(--ultra-border-light, #d9d9d9); | |
} | |
} | |
&_white-green { | |
background: var(--ultra-bg-main, #fff); | |
border: 1px solid var(--ultra-border, #d6d6d6); | |
color: var(--ultra-green, #039941); | |
font-weight: 500; | |
transition: background-color 0.2s, color 0.2s, border-color 0.2s; | |
&.active, | |
&:hover { | |
background: var(--ultra-gray, #f5f5f5); | |
border: 1px solid var(--ultra-border, #d6d6d6); | |
} | |
&#{$self}_disabled { | |
opacity: 0.6; | |
} | |
&#{$self}_loading { | |
background-color: var(--ultra-bg-main, #fff); | |
border-color: var(--ultra-border, #d6d6d6); | |
} | |
} | |
&_transparent-gray, | |
&_transparent-gray-darker { | |
color: var(--ultra-text, #858585); | |
} | |
&_transparent, | |
&_transparent-black { | |
color: var(--ultra-black-like, #0d0d0d); | |
} | |
&_transparent { | |
background: transparent; | |
border: 1px solid transparent; | |
font-weight: 500; | |
transition: background-color 0.2s, color 0.2s, border-color 0.2s; | |
} | |
&_transparent-gray, | |
&_transparent-black, | |
&_transparent-gray-darker { | |
background: transparent; | |
border: 1px solid transparent; | |
font-weight: 500; | |
transition: background-color 0.2s, color 0.2s, border-color 0.2s; | |
&.active-transparent { | |
color: var(--ultra-black-like, #0d0d0d); | |
} | |
&.active, | |
&:hover { | |
background: var(--ultra-gray, #f5f5f5); | |
color: var(--ultra-black-like, #0d0d0d); | |
} | |
&#{$self}_disabled { | |
opacity: 0.6; | |
} | |
&#{$self}_loading { | |
background-color: transparent; | |
border-color: transparent; | |
} | |
} | |
&_transparent-gray-darker { | |
&.active, | |
&:hover { | |
background: var(--ultra-gray-hover, #ebebeb); | |
color: var(--ultra-black-like, #0d0d0d); | |
} | |
} | |
&_transparent-blue { | |
background: transparent; | |
border: 1px solid transparent; | |
color: var(--ultra-blue-text, #2d64de); | |
font-weight: 500; | |
transition: background-color 0.2s, color 0.2s, border-color 0.2s; | |
&.active, | |
&:hover { | |
background: var(--ultra-gray, #f5f5f5); | |
} | |
&#{$self}_disabled { | |
opacity: 0.6; | |
} | |
&#{$self}_loading { | |
background-color: transparent; | |
border-color: transparent; | |
} | |
} | |
&_transparent-red { | |
background: transparent; | |
border: 1px solid transparent; | |
color: var(--ultra-red, #dc2727); | |
font-weight: 500; | |
transition: background-color 0.2s, color 0.2s, border-color 0.2s; | |
&.active, | |
&:hover { | |
background: var(--ultra-gray, #f5f5f5); | |
} | |
&#{$self}_disabled { | |
opacity: 0.6; | |
} | |
&#{$self}_loading { | |
background-color: transparent; | |
border-color: transparent; | |
} | |
} | |
} | |
.ag-button-loader { | |
display: block; | |
margin: auto; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment