Created
January 16, 2023 20:00
-
-
Save primerproyecto/dc6877972027cd079f0ea6210461967b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| $buttons: primary, outstanding-toolbar, outstandingWhite, outstandingWhite ; | |
| $buttonsSize: small, medium, large; | |
| @each $buton in $buttons { | |
| @each $size in $buttonsSize { | |
| .tk-#{$buton}-#{$size} { | |
| display: inline-flex; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| border-radius: var(--default-border-radius); | |
| text-decoration: none; | |
| font-size: var(--btn-#{$size}-textsize); | |
| background-repeat: no-repeat; | |
| background-position: center left; | |
| transition: background .25s !important; | |
| background-size: 0% 100%; | |
| margin-left:1px; | |
| //background-image: linear-gradient(90deg, hsl(var(--outstanding-color-h), var(--outstanding-color-s),calc(var(--outstanding-color-l) + (100% - var(--outstanding-color-l)) * 0.2)), hsl(var(--outstanding-color-h),var(--outstanding-color-s), var(--outstanding-color-l ))); | |
| // background-image: linear-gradient(90deg, lighten(map-get($tkVariables, 'outstanding-color'), 10%), var(--outstanding-color)); | |
| border-width:0px; | |
| //background-color: hsl(var(--outstanding-color-h),var(--outstanding-color-s), var(--outstanding-color-l )); | |
| background-color: var(--outstanding-color); | |
| .x-btn-wrap { | |
| height: 100% !important; | |
| width: 100%; | |
| span.x-btn-button { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row-reverse; | |
| height: 100% !important; | |
| padding: 0.2rem 0em; | |
| span.x-btn-inner { | |
| @if $size == 'small' { | |
| height: 1.125rem; | |
| } | |
| @if $size == 'medium' { | |
| height: 1.5rem; | |
| } | |
| @if $size == 'large' { | |
| height: 2rem; | |
| } | |
| color: var(--white-color); | |
| font-size: var(--btn-#{$size}-textsize); | |
| font-family: 'Roboto-Medium', helvetica, arial; | |
| display: flex; | |
| font-weight: 500; | |
| align-items: center; | |
| /* line-height: var(--default-button-lineHeight-#{$size}); */ | |
| line-height: 1rem; | |
| } | |
| span.x-btn-icon-el { | |
| position: static !important; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-left: 1px; | |
| justify-content: flex-start; | |
| font-weight: bold; | |
| // width: var(--btn-#{$size}-iconsize); | |
| height: var(--btn-#{$size}-iconsize); | |
| margin-right: 0.1em; | |
| font-size: var(--btn-#{$size}-iconsize); | |
| color: var(--white-color); | |
| font-family: var(--icon-font-family); | |
| &:empty { | |
| display: none; | |
| } | |
| } | |
| } | |
| &.x-btn-split { | |
| @if $size == small { | |
| padding-right: 20px; | |
| // @include btnBackgroundImage('../css/images/tools/angle-down.svg', 9px); | |
| @media all and (-ms-high-contrast:none){ | |
| // @include btnBackgroundImage('../css/images/tools/angle-down.svg', 30px); | |
| background-size: 20px 20px !important; | |
| } | |
| &:after { | |
| position: absolute; | |
| top:0; | |
| bottom:0; | |
| right: 16px; | |
| content: ''; | |
| width: 1px; | |
| background-color: var(--green-800); | |
| } | |
| } | |
| @if $size == medium { | |
| padding-right: 24px; | |
| // @include btnBackgroundImage('../css/images/tools/angle-down.svg', 10px); | |
| @media all and (-ms-high-contrast:none){ | |
| // @include btnBackgroundImage('../css/images/tools/angle-down.svg', 30px); | |
| background-size: 20px 20px !important; | |
| background-position-x: 103% !important; | |
| } | |
| &:after { | |
| position: absolute; | |
| top:0; | |
| bottom:0; | |
| right: 19px; | |
| content: ''; | |
| width: 1px; | |
| background-color: var(--green-800); | |
| } | |
| } | |
| background-position-x: right; | |
| background-position-y: center; | |
| position: relative; | |
| span.x-btn-button { | |
| padding-right: 0px; | |
| span.x-btn-inner { | |
| padding-right: 8px; | |
| } | |
| span.x-btn-icon-el { | |
| font-family: var(--icon-font-family); | |
| &:empty { | |
| display: none; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| &.x-btn-#{$buton}-#{$size}-over, | |
| // &.x-btn-#{$buton}-#{$size}-focus, | |
| &:hover, | |
| &:focus { | |
| border-width:3px; | |
| background-size: 100% 100%; | |
| border-color: transparent !important; | |
| span.x-btn-button { | |
| span.x-btn-inner { | |
| color: var(--white-color) !important; | |
| } | |
| } | |
| span.x-btn-icon-el { | |
| // font-weight: bold; | |
| color: var(--white-color); | |
| } | |
| &.x-btn-split { | |
| span.x-btn-icon-el { | |
| color: var(--white-color) !important; | |
| } | |
| } | |
| } | |
| &.x-icon-text-left { | |
| span.x-btn-button { | |
| height: var(--btn-#{$size}-iconsize); | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| } | |
| } | |
| &.full-width { | |
| span.x-btn-wrap { | |
| span.x-btn-button { | |
| justify-content: center !important; | |
| } | |
| } | |
| } | |
| &.x-btn-#{$buton}-#{$size}-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed !important; | |
| } | |
| } | |
| } | |
| } |
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
| .tk-primary-small { | |
| display: inline-flex; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| border-radius: var(--default-border-radius); | |
| text-decoration: none; | |
| font-size: var(--btn-small-textsize); | |
| background-repeat: no-repeat; | |
| background-position: center left; | |
| transition: background 0.25s !important; | |
| background-size: 0% 100%; | |
| margin-left: 1px; | |
| border-width: 0px; | |
| background-color: var(--outstanding-color); | |
| } | |
| .tk-primary-small .x-btn-wrap { | |
| height: 100% !important; | |
| width: 100%; | |
| } | |
| .tk-primary-small .x-btn-wrap span.x-btn-button { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row-reverse; | |
| height: 100% !important; | |
| padding: 0.2rem 0em; | |
| } | |
| .tk-primary-small .x-btn-wrap span.x-btn-button span.x-btn-inner { | |
| height: 1.125rem; | |
| color: var(--white-color); | |
| font-size: var(--btn-small-textsize); | |
| font-family: "Roboto-Medium", helvetica, arial; | |
| display: flex; | |
| font-weight: 500; | |
| align-items: center; | |
| /* line-height: var(--default-button-lineHeight-small); */ | |
| line-height: 1rem; | |
| } | |
| .tk-primary-small .x-btn-wrap span.x-btn-button span.x-btn-icon-el { | |
| position: static !important; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-left: 1px; | |
| justify-content: flex-start; | |
| font-weight: bold; | |
| height: var(--btn-small-iconsize); | |
| margin-right: 0.1em; | |
| font-size: var(--btn-small-iconsize); | |
| color: var(--white-color); | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-primary-small .x-btn-wrap span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-primary-small .x-btn-wrap.x-btn-split { | |
| padding-right: 20px; | |
| background-position-x: right; | |
| background-position-y: center; | |
| position: relative; | |
| } | |
| @media all and (-ms-high-contrast: none) { | |
| .tk-primary-small .x-btn-wrap.x-btn-split { | |
| background-size: 20px 20px !important; | |
| } | |
| } | |
| .tk-primary-small .x-btn-wrap.x-btn-split:after { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 16px; | |
| content: ""; | |
| width: 1px; | |
| background-color: var(--green-800); | |
| } | |
| .tk-primary-small .x-btn-wrap.x-btn-split span.x-btn-button { | |
| padding-right: 0px; | |
| } | |
| .tk-primary-small .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-inner { | |
| padding-right: 8px; | |
| } | |
| .tk-primary-small .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el { | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-primary-small .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-primary-small.x-btn-primary-small-over, .tk-primary-small:hover, .tk-primary-small:focus { | |
| border-width: 3px; | |
| background-size: 100% 100%; | |
| border-color: transparent !important; | |
| } | |
| .tk-primary-small.x-btn-primary-small-over span.x-btn-button span.x-btn-inner, .tk-primary-small:hover span.x-btn-button span.x-btn-inner, .tk-primary-small:focus span.x-btn-button span.x-btn-inner { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-primary-small.x-btn-primary-small-over span.x-btn-icon-el, .tk-primary-small:hover span.x-btn-icon-el, .tk-primary-small:focus span.x-btn-icon-el { | |
| color: var(--white-color); | |
| } | |
| .tk-primary-small.x-btn-primary-small-over.x-btn-split span.x-btn-icon-el, .tk-primary-small:hover.x-btn-split span.x-btn-icon-el, .tk-primary-small:focus.x-btn-split span.x-btn-icon-el { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-primary-small.x-icon-text-left span.x-btn-button { | |
| height: var(--btn-small-iconsize); | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| } | |
| .tk-primary-small.full-width span.x-btn-wrap span.x-btn-button { | |
| justify-content: center !important; | |
| } | |
| .tk-primary-small.x-btn-primary-small-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed !important; | |
| } | |
| .tk-primary-medium { | |
| display: inline-flex; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| border-radius: var(--default-border-radius); | |
| text-decoration: none; | |
| font-size: var(--btn-medium-textsize); | |
| background-repeat: no-repeat; | |
| background-position: center left; | |
| transition: background 0.25s !important; | |
| background-size: 0% 100%; | |
| margin-left: 1px; | |
| border-width: 0px; | |
| background-color: var(--outstanding-color); | |
| } | |
| .tk-primary-medium .x-btn-wrap { | |
| height: 100% !important; | |
| width: 100%; | |
| } | |
| .tk-primary-medium .x-btn-wrap span.x-btn-button { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row-reverse; | |
| height: 100% !important; | |
| padding: 0.2rem 0em; | |
| } | |
| .tk-primary-medium .x-btn-wrap span.x-btn-button span.x-btn-inner { | |
| height: 1.5rem; | |
| color: var(--white-color); | |
| font-size: var(--btn-medium-textsize); | |
| font-family: "Roboto-Medium", helvetica, arial; | |
| display: flex; | |
| font-weight: 500; | |
| align-items: center; | |
| /* line-height: var(--default-button-lineHeight-medium); */ | |
| line-height: 1rem; | |
| } | |
| .tk-primary-medium .x-btn-wrap span.x-btn-button span.x-btn-icon-el { | |
| position: static !important; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-left: 1px; | |
| justify-content: flex-start; | |
| font-weight: bold; | |
| height: var(--btn-medium-iconsize); | |
| margin-right: 0.1em; | |
| font-size: var(--btn-medium-iconsize); | |
| color: var(--white-color); | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-primary-medium .x-btn-wrap span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-primary-medium .x-btn-wrap.x-btn-split { | |
| padding-right: 24px; | |
| background-position-x: right; | |
| background-position-y: center; | |
| position: relative; | |
| } | |
| @media all and (-ms-high-contrast: none) { | |
| .tk-primary-medium .x-btn-wrap.x-btn-split { | |
| background-size: 20px 20px !important; | |
| background-position-x: 103% !important; | |
| } | |
| } | |
| .tk-primary-medium .x-btn-wrap.x-btn-split:after { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 19px; | |
| content: ""; | |
| width: 1px; | |
| background-color: var(--green-800); | |
| } | |
| .tk-primary-medium .x-btn-wrap.x-btn-split span.x-btn-button { | |
| padding-right: 0px; | |
| } | |
| .tk-primary-medium .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-inner { | |
| padding-right: 8px; | |
| } | |
| .tk-primary-medium .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el { | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-primary-medium .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-primary-medium.x-btn-primary-medium-over, .tk-primary-medium:hover, .tk-primary-medium:focus { | |
| border-width: 3px; | |
| background-size: 100% 100%; | |
| border-color: transparent !important; | |
| } | |
| .tk-primary-medium.x-btn-primary-medium-over span.x-btn-button span.x-btn-inner, .tk-primary-medium:hover span.x-btn-button span.x-btn-inner, .tk-primary-medium:focus span.x-btn-button span.x-btn-inner { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-primary-medium.x-btn-primary-medium-over span.x-btn-icon-el, .tk-primary-medium:hover span.x-btn-icon-el, .tk-primary-medium:focus span.x-btn-icon-el { | |
| color: var(--white-color); | |
| } | |
| .tk-primary-medium.x-btn-primary-medium-over.x-btn-split span.x-btn-icon-el, .tk-primary-medium:hover.x-btn-split span.x-btn-icon-el, .tk-primary-medium:focus.x-btn-split span.x-btn-icon-el { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-primary-medium.x-icon-text-left span.x-btn-button { | |
| height: var(--btn-medium-iconsize); | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| } | |
| .tk-primary-medium.full-width span.x-btn-wrap span.x-btn-button { | |
| justify-content: center !important; | |
| } | |
| .tk-primary-medium.x-btn-primary-medium-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed !important; | |
| } | |
| .tk-primary-large { | |
| display: inline-flex; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| border-radius: var(--default-border-radius); | |
| text-decoration: none; | |
| font-size: var(--btn-large-textsize); | |
| background-repeat: no-repeat; | |
| background-position: center left; | |
| transition: background 0.25s !important; | |
| background-size: 0% 100%; | |
| margin-left: 1px; | |
| border-width: 0px; | |
| background-color: var(--outstanding-color); | |
| } | |
| .tk-primary-large .x-btn-wrap { | |
| height: 100% !important; | |
| width: 100%; | |
| } | |
| .tk-primary-large .x-btn-wrap span.x-btn-button { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row-reverse; | |
| height: 100% !important; | |
| padding: 0.2rem 0em; | |
| } | |
| .tk-primary-large .x-btn-wrap span.x-btn-button span.x-btn-inner { | |
| height: 2rem; | |
| color: var(--white-color); | |
| font-size: var(--btn-large-textsize); | |
| font-family: "Roboto-Medium", helvetica, arial; | |
| display: flex; | |
| font-weight: 500; | |
| align-items: center; | |
| /* line-height: var(--default-button-lineHeight-large); */ | |
| line-height: 1rem; | |
| } | |
| .tk-primary-large .x-btn-wrap span.x-btn-button span.x-btn-icon-el { | |
| position: static !important; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-left: 1px; | |
| justify-content: flex-start; | |
| font-weight: bold; | |
| height: var(--btn-large-iconsize); | |
| margin-right: 0.1em; | |
| font-size: var(--btn-large-iconsize); | |
| color: var(--white-color); | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-primary-large .x-btn-wrap span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-primary-large .x-btn-wrap.x-btn-split { | |
| background-position-x: right; | |
| background-position-y: center; | |
| position: relative; | |
| } | |
| .tk-primary-large .x-btn-wrap.x-btn-split span.x-btn-button { | |
| padding-right: 0px; | |
| } | |
| .tk-primary-large .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-inner { | |
| padding-right: 8px; | |
| } | |
| .tk-primary-large .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el { | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-primary-large .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-primary-large.x-btn-primary-large-over, .tk-primary-large:hover, .tk-primary-large:focus { | |
| border-width: 3px; | |
| background-size: 100% 100%; | |
| border-color: transparent !important; | |
| } | |
| .tk-primary-large.x-btn-primary-large-over span.x-btn-button span.x-btn-inner, .tk-primary-large:hover span.x-btn-button span.x-btn-inner, .tk-primary-large:focus span.x-btn-button span.x-btn-inner { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-primary-large.x-btn-primary-large-over span.x-btn-icon-el, .tk-primary-large:hover span.x-btn-icon-el, .tk-primary-large:focus span.x-btn-icon-el { | |
| color: var(--white-color); | |
| } | |
| .tk-primary-large.x-btn-primary-large-over.x-btn-split span.x-btn-icon-el, .tk-primary-large:hover.x-btn-split span.x-btn-icon-el, .tk-primary-large:focus.x-btn-split span.x-btn-icon-el { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-primary-large.x-icon-text-left span.x-btn-button { | |
| height: var(--btn-large-iconsize); | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| } | |
| .tk-primary-large.full-width span.x-btn-wrap span.x-btn-button { | |
| justify-content: center !important; | |
| } | |
| .tk-primary-large.x-btn-primary-large-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed !important; | |
| } | |
| .tk-outstanding-toolbar-small { | |
| display: inline-flex; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| border-radius: var(--default-border-radius); | |
| text-decoration: none; | |
| font-size: var(--btn-small-textsize); | |
| background-repeat: no-repeat; | |
| background-position: center left; | |
| transition: background 0.25s !important; | |
| background-size: 0% 100%; | |
| margin-left: 1px; | |
| border-width: 0px; | |
| background-color: var(--outstanding-color); | |
| } | |
| .tk-outstanding-toolbar-small .x-btn-wrap { | |
| height: 100% !important; | |
| width: 100%; | |
| } | |
| .tk-outstanding-toolbar-small .x-btn-wrap span.x-btn-button { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row-reverse; | |
| height: 100% !important; | |
| padding: 0.2rem 0em; | |
| } | |
| .tk-outstanding-toolbar-small .x-btn-wrap span.x-btn-button span.x-btn-inner { | |
| height: 1.125rem; | |
| color: var(--white-color); | |
| font-size: var(--btn-small-textsize); | |
| font-family: "Roboto-Medium", helvetica, arial; | |
| display: flex; | |
| font-weight: 500; | |
| align-items: center; | |
| /* line-height: var(--default-button-lineHeight-small); */ | |
| line-height: 1rem; | |
| } | |
| .tk-outstanding-toolbar-small .x-btn-wrap span.x-btn-button span.x-btn-icon-el { | |
| position: static !important; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-left: 1px; | |
| justify-content: flex-start; | |
| font-weight: bold; | |
| height: var(--btn-small-iconsize); | |
| margin-right: 0.1em; | |
| font-size: var(--btn-small-iconsize); | |
| color: var(--white-color); | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstanding-toolbar-small .x-btn-wrap span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstanding-toolbar-small .x-btn-wrap.x-btn-split { | |
| padding-right: 20px; | |
| background-position-x: right; | |
| background-position-y: center; | |
| position: relative; | |
| } | |
| @media all and (-ms-high-contrast: none) { | |
| .tk-outstanding-toolbar-small .x-btn-wrap.x-btn-split { | |
| background-size: 20px 20px !important; | |
| } | |
| } | |
| .tk-outstanding-toolbar-small .x-btn-wrap.x-btn-split:after { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 16px; | |
| content: ""; | |
| width: 1px; | |
| background-color: var(--green-800); | |
| } | |
| .tk-outstanding-toolbar-small .x-btn-wrap.x-btn-split span.x-btn-button { | |
| padding-right: 0px; | |
| } | |
| .tk-outstanding-toolbar-small .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-inner { | |
| padding-right: 8px; | |
| } | |
| .tk-outstanding-toolbar-small .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el { | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstanding-toolbar-small .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstanding-toolbar-small.x-btn-outstanding-toolbar-small-over, .tk-outstanding-toolbar-small:hover, .tk-outstanding-toolbar-small:focus { | |
| border-width: 3px; | |
| background-size: 100% 100%; | |
| border-color: transparent !important; | |
| } | |
| .tk-outstanding-toolbar-small.x-btn-outstanding-toolbar-small-over span.x-btn-button span.x-btn-inner, .tk-outstanding-toolbar-small:hover span.x-btn-button span.x-btn-inner, .tk-outstanding-toolbar-small:focus span.x-btn-button span.x-btn-inner { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstanding-toolbar-small.x-btn-outstanding-toolbar-small-over span.x-btn-icon-el, .tk-outstanding-toolbar-small:hover span.x-btn-icon-el, .tk-outstanding-toolbar-small:focus span.x-btn-icon-el { | |
| color: var(--white-color); | |
| } | |
| .tk-outstanding-toolbar-small.x-btn-outstanding-toolbar-small-over.x-btn-split span.x-btn-icon-el, .tk-outstanding-toolbar-small:hover.x-btn-split span.x-btn-icon-el, .tk-outstanding-toolbar-small:focus.x-btn-split span.x-btn-icon-el { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstanding-toolbar-small.x-icon-text-left span.x-btn-button { | |
| height: var(--btn-small-iconsize); | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| } | |
| .tk-outstanding-toolbar-small.full-width span.x-btn-wrap span.x-btn-button { | |
| justify-content: center !important; | |
| } | |
| .tk-outstanding-toolbar-small.x-btn-outstanding-toolbar-small-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed !important; | |
| } | |
| .tk-outstanding-toolbar-medium { | |
| display: inline-flex; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| border-radius: var(--default-border-radius); | |
| text-decoration: none; | |
| font-size: var(--btn-medium-textsize); | |
| background-repeat: no-repeat; | |
| background-position: center left; | |
| transition: background 0.25s !important; | |
| background-size: 0% 100%; | |
| margin-left: 1px; | |
| border-width: 0px; | |
| background-color: var(--outstanding-color); | |
| } | |
| .tk-outstanding-toolbar-medium .x-btn-wrap { | |
| height: 100% !important; | |
| width: 100%; | |
| } | |
| .tk-outstanding-toolbar-medium .x-btn-wrap span.x-btn-button { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row-reverse; | |
| height: 100% !important; | |
| padding: 0.2rem 0em; | |
| } | |
| .tk-outstanding-toolbar-medium .x-btn-wrap span.x-btn-button span.x-btn-inner { | |
| height: 1.5rem; | |
| color: var(--white-color); | |
| font-size: var(--btn-medium-textsize); | |
| font-family: "Roboto-Medium", helvetica, arial; | |
| display: flex; | |
| font-weight: 500; | |
| align-items: center; | |
| /* line-height: var(--default-button-lineHeight-medium); */ | |
| line-height: 1rem; | |
| } | |
| .tk-outstanding-toolbar-medium .x-btn-wrap span.x-btn-button span.x-btn-icon-el { | |
| position: static !important; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-left: 1px; | |
| justify-content: flex-start; | |
| font-weight: bold; | |
| height: var(--btn-medium-iconsize); | |
| margin-right: 0.1em; | |
| font-size: var(--btn-medium-iconsize); | |
| color: var(--white-color); | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstanding-toolbar-medium .x-btn-wrap span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstanding-toolbar-medium .x-btn-wrap.x-btn-split { | |
| padding-right: 24px; | |
| background-position-x: right; | |
| background-position-y: center; | |
| position: relative; | |
| } | |
| @media all and (-ms-high-contrast: none) { | |
| .tk-outstanding-toolbar-medium .x-btn-wrap.x-btn-split { | |
| background-size: 20px 20px !important; | |
| background-position-x: 103% !important; | |
| } | |
| } | |
| .tk-outstanding-toolbar-medium .x-btn-wrap.x-btn-split:after { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 19px; | |
| content: ""; | |
| width: 1px; | |
| background-color: var(--green-800); | |
| } | |
| .tk-outstanding-toolbar-medium .x-btn-wrap.x-btn-split span.x-btn-button { | |
| padding-right: 0px; | |
| } | |
| .tk-outstanding-toolbar-medium .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-inner { | |
| padding-right: 8px; | |
| } | |
| .tk-outstanding-toolbar-medium .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el { | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstanding-toolbar-medium .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstanding-toolbar-medium.x-btn-outstanding-toolbar-medium-over, .tk-outstanding-toolbar-medium:hover, .tk-outstanding-toolbar-medium:focus { | |
| border-width: 3px; | |
| background-size: 100% 100%; | |
| border-color: transparent !important; | |
| } | |
| .tk-outstanding-toolbar-medium.x-btn-outstanding-toolbar-medium-over span.x-btn-button span.x-btn-inner, .tk-outstanding-toolbar-medium:hover span.x-btn-button span.x-btn-inner, .tk-outstanding-toolbar-medium:focus span.x-btn-button span.x-btn-inner { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstanding-toolbar-medium.x-btn-outstanding-toolbar-medium-over span.x-btn-icon-el, .tk-outstanding-toolbar-medium:hover span.x-btn-icon-el, .tk-outstanding-toolbar-medium:focus span.x-btn-icon-el { | |
| color: var(--white-color); | |
| } | |
| .tk-outstanding-toolbar-medium.x-btn-outstanding-toolbar-medium-over.x-btn-split span.x-btn-icon-el, .tk-outstanding-toolbar-medium:hover.x-btn-split span.x-btn-icon-el, .tk-outstanding-toolbar-medium:focus.x-btn-split span.x-btn-icon-el { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstanding-toolbar-medium.x-icon-text-left span.x-btn-button { | |
| height: var(--btn-medium-iconsize); | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| } | |
| .tk-outstanding-toolbar-medium.full-width span.x-btn-wrap span.x-btn-button { | |
| justify-content: center !important; | |
| } | |
| .tk-outstanding-toolbar-medium.x-btn-outstanding-toolbar-medium-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed !important; | |
| } | |
| .tk-outstanding-toolbar-large { | |
| display: inline-flex; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| border-radius: var(--default-border-radius); | |
| text-decoration: none; | |
| font-size: var(--btn-large-textsize); | |
| background-repeat: no-repeat; | |
| background-position: center left; | |
| transition: background 0.25s !important; | |
| background-size: 0% 100%; | |
| margin-left: 1px; | |
| border-width: 0px; | |
| background-color: var(--outstanding-color); | |
| } | |
| .tk-outstanding-toolbar-large .x-btn-wrap { | |
| height: 100% !important; | |
| width: 100%; | |
| } | |
| .tk-outstanding-toolbar-large .x-btn-wrap span.x-btn-button { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row-reverse; | |
| height: 100% !important; | |
| padding: 0.2rem 0em; | |
| } | |
| .tk-outstanding-toolbar-large .x-btn-wrap span.x-btn-button span.x-btn-inner { | |
| height: 2rem; | |
| color: var(--white-color); | |
| font-size: var(--btn-large-textsize); | |
| font-family: "Roboto-Medium", helvetica, arial; | |
| display: flex; | |
| font-weight: 500; | |
| align-items: center; | |
| /* line-height: var(--default-button-lineHeight-large); */ | |
| line-height: 1rem; | |
| } | |
| .tk-outstanding-toolbar-large .x-btn-wrap span.x-btn-button span.x-btn-icon-el { | |
| position: static !important; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-left: 1px; | |
| justify-content: flex-start; | |
| font-weight: bold; | |
| height: var(--btn-large-iconsize); | |
| margin-right: 0.1em; | |
| font-size: var(--btn-large-iconsize); | |
| color: var(--white-color); | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstanding-toolbar-large .x-btn-wrap span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstanding-toolbar-large .x-btn-wrap.x-btn-split { | |
| background-position-x: right; | |
| background-position-y: center; | |
| position: relative; | |
| } | |
| .tk-outstanding-toolbar-large .x-btn-wrap.x-btn-split span.x-btn-button { | |
| padding-right: 0px; | |
| } | |
| .tk-outstanding-toolbar-large .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-inner { | |
| padding-right: 8px; | |
| } | |
| .tk-outstanding-toolbar-large .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el { | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstanding-toolbar-large .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstanding-toolbar-large.x-btn-outstanding-toolbar-large-over, .tk-outstanding-toolbar-large:hover, .tk-outstanding-toolbar-large:focus { | |
| border-width: 3px; | |
| background-size: 100% 100%; | |
| border-color: transparent !important; | |
| } | |
| .tk-outstanding-toolbar-large.x-btn-outstanding-toolbar-large-over span.x-btn-button span.x-btn-inner, .tk-outstanding-toolbar-large:hover span.x-btn-button span.x-btn-inner, .tk-outstanding-toolbar-large:focus span.x-btn-button span.x-btn-inner { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstanding-toolbar-large.x-btn-outstanding-toolbar-large-over span.x-btn-icon-el, .tk-outstanding-toolbar-large:hover span.x-btn-icon-el, .tk-outstanding-toolbar-large:focus span.x-btn-icon-el { | |
| color: var(--white-color); | |
| } | |
| .tk-outstanding-toolbar-large.x-btn-outstanding-toolbar-large-over.x-btn-split span.x-btn-icon-el, .tk-outstanding-toolbar-large:hover.x-btn-split span.x-btn-icon-el, .tk-outstanding-toolbar-large:focus.x-btn-split span.x-btn-icon-el { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstanding-toolbar-large.x-icon-text-left span.x-btn-button { | |
| height: var(--btn-large-iconsize); | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| } | |
| .tk-outstanding-toolbar-large.full-width span.x-btn-wrap span.x-btn-button { | |
| justify-content: center !important; | |
| } | |
| .tk-outstanding-toolbar-large.x-btn-outstanding-toolbar-large-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed !important; | |
| } | |
| .tk-outstandingWhite-small { | |
| display: inline-flex; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| border-radius: var(--default-border-radius); | |
| text-decoration: none; | |
| font-size: var(--btn-small-textsize); | |
| background-repeat: no-repeat; | |
| background-position: center left; | |
| transition: background 0.25s !important; | |
| background-size: 0% 100%; | |
| margin-left: 1px; | |
| border-width: 0px; | |
| background-color: var(--outstanding-color); | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap { | |
| height: 100% !important; | |
| width: 100%; | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap span.x-btn-button { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row-reverse; | |
| height: 100% !important; | |
| padding: 0.2rem 0em; | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap span.x-btn-button span.x-btn-inner { | |
| height: 1.125rem; | |
| color: var(--white-color); | |
| font-size: var(--btn-small-textsize); | |
| font-family: "Roboto-Medium", helvetica, arial; | |
| display: flex; | |
| font-weight: 500; | |
| align-items: center; | |
| /* line-height: var(--default-button-lineHeight-small); */ | |
| line-height: 1rem; | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap span.x-btn-button span.x-btn-icon-el { | |
| position: static !important; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-left: 1px; | |
| justify-content: flex-start; | |
| font-weight: bold; | |
| height: var(--btn-small-iconsize); | |
| margin-right: 0.1em; | |
| font-size: var(--btn-small-iconsize); | |
| color: var(--white-color); | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split { | |
| padding-right: 20px; | |
| background-position-x: right; | |
| background-position-y: center; | |
| position: relative; | |
| } | |
| @media all and (-ms-high-contrast: none) { | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split { | |
| background-size: 20px 20px !important; | |
| } | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split:after { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 16px; | |
| content: ""; | |
| width: 1px; | |
| background-color: var(--green-800); | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split span.x-btn-button { | |
| padding-right: 0px; | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-inner { | |
| padding-right: 8px; | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el { | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstandingWhite-small.x-btn-outstandingWhite-small-over, .tk-outstandingWhite-small:hover, .tk-outstandingWhite-small:focus { | |
| border-width: 3px; | |
| background-size: 100% 100%; | |
| border-color: transparent !important; | |
| } | |
| .tk-outstandingWhite-small.x-btn-outstandingWhite-small-over span.x-btn-button span.x-btn-inner, .tk-outstandingWhite-small:hover span.x-btn-button span.x-btn-inner, .tk-outstandingWhite-small:focus span.x-btn-button span.x-btn-inner { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstandingWhite-small.x-btn-outstandingWhite-small-over span.x-btn-icon-el, .tk-outstandingWhite-small:hover span.x-btn-icon-el, .tk-outstandingWhite-small:focus span.x-btn-icon-el { | |
| color: var(--white-color); | |
| } | |
| .tk-outstandingWhite-small.x-btn-outstandingWhite-small-over.x-btn-split span.x-btn-icon-el, .tk-outstandingWhite-small:hover.x-btn-split span.x-btn-icon-el, .tk-outstandingWhite-small:focus.x-btn-split span.x-btn-icon-el { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstandingWhite-small.x-icon-text-left span.x-btn-button { | |
| height: var(--btn-small-iconsize); | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| } | |
| .tk-outstandingWhite-small.full-width span.x-btn-wrap span.x-btn-button { | |
| justify-content: center !important; | |
| } | |
| .tk-outstandingWhite-small.x-btn-outstandingWhite-small-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed !important; | |
| } | |
| .tk-outstandingWhite-medium { | |
| display: inline-flex; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| border-radius: var(--default-border-radius); | |
| text-decoration: none; | |
| font-size: var(--btn-medium-textsize); | |
| background-repeat: no-repeat; | |
| background-position: center left; | |
| transition: background 0.25s !important; | |
| background-size: 0% 100%; | |
| margin-left: 1px; | |
| border-width: 0px; | |
| background-color: var(--outstanding-color); | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap { | |
| height: 100% !important; | |
| width: 100%; | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap span.x-btn-button { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row-reverse; | |
| height: 100% !important; | |
| padding: 0.2rem 0em; | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap span.x-btn-button span.x-btn-inner { | |
| height: 1.5rem; | |
| color: var(--white-color); | |
| font-size: var(--btn-medium-textsize); | |
| font-family: "Roboto-Medium", helvetica, arial; | |
| display: flex; | |
| font-weight: 500; | |
| align-items: center; | |
| /* line-height: var(--default-button-lineHeight-medium); */ | |
| line-height: 1rem; | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap span.x-btn-button span.x-btn-icon-el { | |
| position: static !important; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-left: 1px; | |
| justify-content: flex-start; | |
| font-weight: bold; | |
| height: var(--btn-medium-iconsize); | |
| margin-right: 0.1em; | |
| font-size: var(--btn-medium-iconsize); | |
| color: var(--white-color); | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split { | |
| padding-right: 24px; | |
| background-position-x: right; | |
| background-position-y: center; | |
| position: relative; | |
| } | |
| @media all and (-ms-high-contrast: none) { | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split { | |
| background-size: 20px 20px !important; | |
| background-position-x: 103% !important; | |
| } | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split:after { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 19px; | |
| content: ""; | |
| width: 1px; | |
| background-color: var(--green-800); | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split span.x-btn-button { | |
| padding-right: 0px; | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-inner { | |
| padding-right: 8px; | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el { | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstandingWhite-medium.x-btn-outstandingWhite-medium-over, .tk-outstandingWhite-medium:hover, .tk-outstandingWhite-medium:focus { | |
| border-width: 3px; | |
| background-size: 100% 100%; | |
| border-color: transparent !important; | |
| } | |
| .tk-outstandingWhite-medium.x-btn-outstandingWhite-medium-over span.x-btn-button span.x-btn-inner, .tk-outstandingWhite-medium:hover span.x-btn-button span.x-btn-inner, .tk-outstandingWhite-medium:focus span.x-btn-button span.x-btn-inner { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstandingWhite-medium.x-btn-outstandingWhite-medium-over span.x-btn-icon-el, .tk-outstandingWhite-medium:hover span.x-btn-icon-el, .tk-outstandingWhite-medium:focus span.x-btn-icon-el { | |
| color: var(--white-color); | |
| } | |
| .tk-outstandingWhite-medium.x-btn-outstandingWhite-medium-over.x-btn-split span.x-btn-icon-el, .tk-outstandingWhite-medium:hover.x-btn-split span.x-btn-icon-el, .tk-outstandingWhite-medium:focus.x-btn-split span.x-btn-icon-el { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstandingWhite-medium.x-icon-text-left span.x-btn-button { | |
| height: var(--btn-medium-iconsize); | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| } | |
| .tk-outstandingWhite-medium.full-width span.x-btn-wrap span.x-btn-button { | |
| justify-content: center !important; | |
| } | |
| .tk-outstandingWhite-medium.x-btn-outstandingWhite-medium-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed !important; | |
| } | |
| .tk-outstandingWhite-large { | |
| display: inline-flex; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| border-radius: var(--default-border-radius); | |
| text-decoration: none; | |
| font-size: var(--btn-large-textsize); | |
| background-repeat: no-repeat; | |
| background-position: center left; | |
| transition: background 0.25s !important; | |
| background-size: 0% 100%; | |
| margin-left: 1px; | |
| border-width: 0px; | |
| background-color: var(--outstanding-color); | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap { | |
| height: 100% !important; | |
| width: 100%; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap span.x-btn-button { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row-reverse; | |
| height: 100% !important; | |
| padding: 0.2rem 0em; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap span.x-btn-button span.x-btn-inner { | |
| height: 2rem; | |
| color: var(--white-color); | |
| font-size: var(--btn-large-textsize); | |
| font-family: "Roboto-Medium", helvetica, arial; | |
| display: flex; | |
| font-weight: 500; | |
| align-items: center; | |
| /* line-height: var(--default-button-lineHeight-large); */ | |
| line-height: 1rem; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap span.x-btn-button span.x-btn-icon-el { | |
| position: static !important; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-left: 1px; | |
| justify-content: flex-start; | |
| font-weight: bold; | |
| height: var(--btn-large-iconsize); | |
| margin-right: 0.1em; | |
| font-size: var(--btn-large-iconsize); | |
| color: var(--white-color); | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap.x-btn-split { | |
| background-position-x: right; | |
| background-position-y: center; | |
| position: relative; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap.x-btn-split span.x-btn-button { | |
| padding-right: 0px; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-inner { | |
| padding-right: 8px; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el { | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstandingWhite-large.x-btn-outstandingWhite-large-over, .tk-outstandingWhite-large:hover, .tk-outstandingWhite-large:focus { | |
| border-width: 3px; | |
| background-size: 100% 100%; | |
| border-color: transparent !important; | |
| } | |
| .tk-outstandingWhite-large.x-btn-outstandingWhite-large-over span.x-btn-button span.x-btn-inner, .tk-outstandingWhite-large:hover span.x-btn-button span.x-btn-inner, .tk-outstandingWhite-large:focus span.x-btn-button span.x-btn-inner { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstandingWhite-large.x-btn-outstandingWhite-large-over span.x-btn-icon-el, .tk-outstandingWhite-large:hover span.x-btn-icon-el, .tk-outstandingWhite-large:focus span.x-btn-icon-el { | |
| color: var(--white-color); | |
| } | |
| .tk-outstandingWhite-large.x-btn-outstandingWhite-large-over.x-btn-split span.x-btn-icon-el, .tk-outstandingWhite-large:hover.x-btn-split span.x-btn-icon-el, .tk-outstandingWhite-large:focus.x-btn-split span.x-btn-icon-el { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstandingWhite-large.x-icon-text-left span.x-btn-button { | |
| height: var(--btn-large-iconsize); | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| } | |
| .tk-outstandingWhite-large.full-width span.x-btn-wrap span.x-btn-button { | |
| justify-content: center !important; | |
| } | |
| .tk-outstandingWhite-large.x-btn-outstandingWhite-large-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed !important; | |
| } | |
| .tk-outstandingWhite-small { | |
| display: inline-flex; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| border-radius: var(--default-border-radius); | |
| text-decoration: none; | |
| font-size: var(--btn-small-textsize); | |
| background-repeat: no-repeat; | |
| background-position: center left; | |
| transition: background 0.25s !important; | |
| background-size: 0% 100%; | |
| margin-left: 1px; | |
| border-width: 0px; | |
| background-color: var(--outstanding-color); | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap { | |
| height: 100% !important; | |
| width: 100%; | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap span.x-btn-button { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row-reverse; | |
| height: 100% !important; | |
| padding: 0.2rem 0em; | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap span.x-btn-button span.x-btn-inner { | |
| height: 1.125rem; | |
| color: var(--white-color); | |
| font-size: var(--btn-small-textsize); | |
| font-family: "Roboto-Medium", helvetica, arial; | |
| display: flex; | |
| font-weight: 500; | |
| align-items: center; | |
| /* line-height: var(--default-button-lineHeight-small); */ | |
| line-height: 1rem; | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap span.x-btn-button span.x-btn-icon-el { | |
| position: static !important; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-left: 1px; | |
| justify-content: flex-start; | |
| font-weight: bold; | |
| height: var(--btn-small-iconsize); | |
| margin-right: 0.1em; | |
| font-size: var(--btn-small-iconsize); | |
| color: var(--white-color); | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split { | |
| padding-right: 20px; | |
| background-position-x: right; | |
| background-position-y: center; | |
| position: relative; | |
| } | |
| @media all and (-ms-high-contrast: none) { | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split { | |
| background-size: 20px 20px !important; | |
| } | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split:after { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 16px; | |
| content: ""; | |
| width: 1px; | |
| background-color: var(--green-800); | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split span.x-btn-button { | |
| padding-right: 0px; | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-inner { | |
| padding-right: 8px; | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el { | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstandingWhite-small .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstandingWhite-small.x-btn-outstandingWhite-small-over, .tk-outstandingWhite-small:hover, .tk-outstandingWhite-small:focus { | |
| border-width: 3px; | |
| background-size: 100% 100%; | |
| border-color: transparent !important; | |
| } | |
| .tk-outstandingWhite-small.x-btn-outstandingWhite-small-over span.x-btn-button span.x-btn-inner, .tk-outstandingWhite-small:hover span.x-btn-button span.x-btn-inner, .tk-outstandingWhite-small:focus span.x-btn-button span.x-btn-inner { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstandingWhite-small.x-btn-outstandingWhite-small-over span.x-btn-icon-el, .tk-outstandingWhite-small:hover span.x-btn-icon-el, .tk-outstandingWhite-small:focus span.x-btn-icon-el { | |
| color: var(--white-color); | |
| } | |
| .tk-outstandingWhite-small.x-btn-outstandingWhite-small-over.x-btn-split span.x-btn-icon-el, .tk-outstandingWhite-small:hover.x-btn-split span.x-btn-icon-el, .tk-outstandingWhite-small:focus.x-btn-split span.x-btn-icon-el { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstandingWhite-small.x-icon-text-left span.x-btn-button { | |
| height: var(--btn-small-iconsize); | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| } | |
| .tk-outstandingWhite-small.full-width span.x-btn-wrap span.x-btn-button { | |
| justify-content: center !important; | |
| } | |
| .tk-outstandingWhite-small.x-btn-outstandingWhite-small-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed !important; | |
| } | |
| .tk-outstandingWhite-medium { | |
| display: inline-flex; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| border-radius: var(--default-border-radius); | |
| text-decoration: none; | |
| font-size: var(--btn-medium-textsize); | |
| background-repeat: no-repeat; | |
| background-position: center left; | |
| transition: background 0.25s !important; | |
| background-size: 0% 100%; | |
| margin-left: 1px; | |
| border-width: 0px; | |
| background-color: var(--outstanding-color); | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap { | |
| height: 100% !important; | |
| width: 100%; | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap span.x-btn-button { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row-reverse; | |
| height: 100% !important; | |
| padding: 0.2rem 0em; | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap span.x-btn-button span.x-btn-inner { | |
| height: 1.5rem; | |
| color: var(--white-color); | |
| font-size: var(--btn-medium-textsize); | |
| font-family: "Roboto-Medium", helvetica, arial; | |
| display: flex; | |
| font-weight: 500; | |
| align-items: center; | |
| /* line-height: var(--default-button-lineHeight-medium); */ | |
| line-height: 1rem; | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap span.x-btn-button span.x-btn-icon-el { | |
| position: static !important; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-left: 1px; | |
| justify-content: flex-start; | |
| font-weight: bold; | |
| height: var(--btn-medium-iconsize); | |
| margin-right: 0.1em; | |
| font-size: var(--btn-medium-iconsize); | |
| color: var(--white-color); | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split { | |
| padding-right: 24px; | |
| background-position-x: right; | |
| background-position-y: center; | |
| position: relative; | |
| } | |
| @media all and (-ms-high-contrast: none) { | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split { | |
| background-size: 20px 20px !important; | |
| background-position-x: 103% !important; | |
| } | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split:after { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 19px; | |
| content: ""; | |
| width: 1px; | |
| background-color: var(--green-800); | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split span.x-btn-button { | |
| padding-right: 0px; | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-inner { | |
| padding-right: 8px; | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el { | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstandingWhite-medium .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstandingWhite-medium.x-btn-outstandingWhite-medium-over, .tk-outstandingWhite-medium:hover, .tk-outstandingWhite-medium:focus { | |
| border-width: 3px; | |
| background-size: 100% 100%; | |
| border-color: transparent !important; | |
| } | |
| .tk-outstandingWhite-medium.x-btn-outstandingWhite-medium-over span.x-btn-button span.x-btn-inner, .tk-outstandingWhite-medium:hover span.x-btn-button span.x-btn-inner, .tk-outstandingWhite-medium:focus span.x-btn-button span.x-btn-inner { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstandingWhite-medium.x-btn-outstandingWhite-medium-over span.x-btn-icon-el, .tk-outstandingWhite-medium:hover span.x-btn-icon-el, .tk-outstandingWhite-medium:focus span.x-btn-icon-el { | |
| color: var(--white-color); | |
| } | |
| .tk-outstandingWhite-medium.x-btn-outstandingWhite-medium-over.x-btn-split span.x-btn-icon-el, .tk-outstandingWhite-medium:hover.x-btn-split span.x-btn-icon-el, .tk-outstandingWhite-medium:focus.x-btn-split span.x-btn-icon-el { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstandingWhite-medium.x-icon-text-left span.x-btn-button { | |
| height: var(--btn-medium-iconsize); | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| } | |
| .tk-outstandingWhite-medium.full-width span.x-btn-wrap span.x-btn-button { | |
| justify-content: center !important; | |
| } | |
| .tk-outstandingWhite-medium.x-btn-outstandingWhite-medium-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed !important; | |
| } | |
| .tk-outstandingWhite-large { | |
| display: inline-flex; | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| border-radius: var(--default-border-radius); | |
| text-decoration: none; | |
| font-size: var(--btn-large-textsize); | |
| background-repeat: no-repeat; | |
| background-position: center left; | |
| transition: background 0.25s !important; | |
| background-size: 0% 100%; | |
| margin-left: 1px; | |
| border-width: 0px; | |
| background-color: var(--outstanding-color); | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap { | |
| height: 100% !important; | |
| width: 100%; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap span.x-btn-button { | |
| display: flex; | |
| align-items: center; | |
| flex-direction: row-reverse; | |
| height: 100% !important; | |
| padding: 0.2rem 0em; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap span.x-btn-button span.x-btn-inner { | |
| height: 2rem; | |
| color: var(--white-color); | |
| font-size: var(--btn-large-textsize); | |
| font-family: "Roboto-Medium", helvetica, arial; | |
| display: flex; | |
| font-weight: 500; | |
| align-items: center; | |
| /* line-height: var(--default-button-lineHeight-large); */ | |
| line-height: 1rem; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap span.x-btn-button span.x-btn-icon-el { | |
| position: static !important; | |
| display: inline-flex; | |
| align-items: center; | |
| padding-left: 1px; | |
| justify-content: flex-start; | |
| font-weight: bold; | |
| height: var(--btn-large-iconsize); | |
| margin-right: 0.1em; | |
| font-size: var(--btn-large-iconsize); | |
| color: var(--white-color); | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap.x-btn-split { | |
| background-position-x: right; | |
| background-position-y: center; | |
| position: relative; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap.x-btn-split span.x-btn-button { | |
| padding-right: 0px; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-inner { | |
| padding-right: 8px; | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el { | |
| font-family: var(--icon-font-family); | |
| } | |
| .tk-outstandingWhite-large .x-btn-wrap.x-btn-split span.x-btn-button span.x-btn-icon-el:empty { | |
| display: none; | |
| } | |
| .tk-outstandingWhite-large.x-btn-outstandingWhite-large-over, .tk-outstandingWhite-large:hover, .tk-outstandingWhite-large:focus { | |
| border-width: 3px; | |
| background-size: 100% 100%; | |
| border-color: transparent !important; | |
| } | |
| .tk-outstandingWhite-large.x-btn-outstandingWhite-large-over span.x-btn-button span.x-btn-inner, .tk-outstandingWhite-large:hover span.x-btn-button span.x-btn-inner, .tk-outstandingWhite-large:focus span.x-btn-button span.x-btn-inner { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstandingWhite-large.x-btn-outstandingWhite-large-over span.x-btn-icon-el, .tk-outstandingWhite-large:hover span.x-btn-icon-el, .tk-outstandingWhite-large:focus span.x-btn-icon-el { | |
| color: var(--white-color); | |
| } | |
| .tk-outstandingWhite-large.x-btn-outstandingWhite-large-over.x-btn-split span.x-btn-icon-el, .tk-outstandingWhite-large:hover.x-btn-split span.x-btn-icon-el, .tk-outstandingWhite-large:focus.x-btn-split span.x-btn-icon-el { | |
| color: var(--white-color) !important; | |
| } | |
| .tk-outstandingWhite-large.x-icon-text-left span.x-btn-button { | |
| height: var(--btn-large-iconsize); | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| } | |
| .tk-outstandingWhite-large.full-width span.x-btn-wrap span.x-btn-button { | |
| justify-content: center !important; | |
| } | |
| .tk-outstandingWhite-large.x-btn-outstandingWhite-large-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed !important; | |
| } |
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
| { | |
| "sass": { | |
| "compiler": "dart-sass/1.32.12", | |
| "extensions": {}, | |
| "syntax": "SCSS", | |
| "outputStyle": "expanded" | |
| }, | |
| "autoprefixer": false | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment