711 lines
18 KiB
CSS
711 lines
18 KiB
CSS
/*region Variables*/
|
|
:root {
|
|
/*size*/
|
|
--ui-btn-size-xs: 26px;
|
|
--ui-btn-size-sm: 31px;
|
|
--ui-btn-size-md: 39px;
|
|
--ui-btn-size-lg: 47px;
|
|
/*default param*/
|
|
--ui-btn-padding: 0 20px;
|
|
--ui-btn-padding-right: 20px;
|
|
--ui-btn-min-width: 80px;
|
|
--ui-btn-height: var(--ui-btn-size-md);
|
|
--ui-btn-font-size: 12px;
|
|
--ui-btn-background: #868d95;
|
|
--ui-btn-background-hover: #5b6573;
|
|
--ui-btn-background-active: #3b506e;
|
|
--ui-btn-border-color: #868d95;
|
|
--ui-btn-border-color-hover: #5b6573;
|
|
--ui-btn-border-color-active: #3b506e;
|
|
--ui-btn-border: 1px solid var(--ui-btn-border-color);
|
|
--ui-btn-opacity-after: .3;
|
|
--ui-btn-colors-after-bg: #fff;
|
|
--ui-btn-colors-before-bg: #fff;
|
|
--ui-btn-color: #fff;
|
|
--ui-btn-color-hover: #fff;
|
|
--ui-btn-color-active: #fff;
|
|
--ui-btn-box-shadow: none;
|
|
--ui-btn-box-shadow-hover: none;
|
|
--ui-btn-box-shadow-active: none;
|
|
--ui-btn-text-shadow: none;
|
|
--ui-btn-text-shadow-hover: none;
|
|
--ui-btn-text-shadow-active: none;
|
|
/**/
|
|
--ui-btn-clock-white: url(/bitrix/js/ui/buttons/images/ui-loader-clock-white.min.svg?v=1.1);
|
|
--ui-btn-clock-black: url(/bitrix/js/ui/buttons/images/ui-loader-clock-black.min.svg?v=1.1);
|
|
--ui-btn-wait-white: url(/bitrix/js/ui/buttons/images/ui-loader-wait-white.min.svg?v=1.1);
|
|
--ui-btn-wait-black: url(/bitrix/js/ui/buttons/images/ui-loader-wait-black.min.svg?v=1.1);
|
|
|
|
}
|
|
|
|
/*endregion*/
|
|
|
|
/*region Base style*/
|
|
.ui-btn-container { margin: 15px 0; }
|
|
|
|
.ui-btn-container-center { text-align: center; }
|
|
|
|
.ui-btn,
|
|
.ui-btn-main,
|
|
.ui-btn-extra,
|
|
.ui-btn-menu {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
height: var(--ui-btn-height);
|
|
outline: none;
|
|
border: var(--ui-btn-border);
|
|
border-color: var(--ui-btn-border-color);
|
|
background-color: var(--ui-btn-background);
|
|
box-shadow: var(--ui-btn-box-shadow);
|
|
text-shadow: var(--ui-btn-text-shadow);
|
|
cursor: pointer;
|
|
transition: 160ms background-color linear, 160ms color linear, 160ms opacity linear, 160ms border-color linear;
|
|
}
|
|
|
|
.ui-btn,
|
|
.ui-btn-main {
|
|
position: relative;
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
padding: var(--ui-btn-padding);
|
|
color: var(--ui-btn-color);
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
font: var(--ui-btn-font-size)/calc(var(--ui-btn-height) - 2px) "OpenSans-Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.ui-btn,
|
|
.ui-btn-double,
|
|
.ui-btn-split {
|
|
line-height: calc(var(--ui-btn-height) - 2px);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ui-btn {
|
|
min-width: var(--ui-btn-min-width);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.ui-btn-double,
|
|
.ui-btn-split {
|
|
position: relative;
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-webkit-box-align: stretch;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
padding-right: 30px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.ui-btn-main {
|
|
padding-right: var(--ui-btn-padding-right);
|
|
border-right: none !important;
|
|
border-radius: 2px 0 0 2px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.ui-btn-extra,
|
|
.ui-btn-menu {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 30px;
|
|
border-left: none !important;
|
|
border-radius: 0 2px 2px 0;
|
|
}
|
|
|
|
.ui-btn:hover,
|
|
a.ui-btn:focus,
|
|
.ui-btn-main:hover,
|
|
.ui-btn-main:focus,
|
|
.ui-btn-extra:hover,
|
|
.ui-btn-menu:hover,
|
|
.ui-btn.ui-btn-hover,
|
|
.ui-btn-hover .ui-btn-main,
|
|
.ui-btn-hover .ui-btn-extra,
|
|
.ui-btn-hover .ui-btn-menu,
|
|
.ui-btn-main-hover .ui-btn-main,
|
|
.ui-btn-extra-hover .ui-btn-extra,
|
|
.ui-btn-menu-hover .ui-btn-menu {
|
|
border-color: var(--ui-btn-border-color-hover);
|
|
background-color: var(--ui-btn-background-hover);
|
|
box-shadow: var(--ui-btn-box-shadow-hover);
|
|
color: var(--ui-btn-color-hover);
|
|
text-decoration: none;
|
|
text-shadow: var(--ui-btn-text-shadow-hover);
|
|
}
|
|
|
|
.ui-btn:active,
|
|
a.ui-btn:focus,
|
|
a.ui-btn-split:focus,
|
|
a.ui-btn-double:focus,
|
|
.ui-btn-main:active,
|
|
.ui-btn-menu:active,
|
|
.ui-btn-extra:active,
|
|
.ui-btn-wait.ui-btn,
|
|
.ui-btn-wait .ui-btn-main,
|
|
.ui-btn-clock.ui-btn,
|
|
.ui-btn-clock .ui-btn-main,
|
|
.ui-btn-active.ui-btn,
|
|
.ui-btn-active .ui-btn-main,
|
|
.ui-btn-active .ui-btn-menu,
|
|
.ui-btn-active .ui-btn-extra,
|
|
.ui-btn-main-active .ui-btn-main,
|
|
.ui-btn-menu-active .ui-btn-menu,
|
|
.ui-btn-extra-active .ui-btn-extra,
|
|
.ui-btn-wait.ui-btn:hover,
|
|
.ui-btn-wait .ui-btn-main:hover,
|
|
.ui-btn-clock.ui-btn:hover,
|
|
.ui-btn-clock .ui-btn-main:hover,
|
|
.ui-btn-active.ui-btn:hover,
|
|
.ui-btn-active .ui-btn-main:hover,
|
|
.ui-btn-active .ui-btn-menu:hover,
|
|
.ui-btn-active .ui-btn-extra:hover,
|
|
.ui-btn-main-active .ui-btn-main:hover,
|
|
.ui-btn-menu-active .ui-btn-menu:hover,
|
|
.ui-btn-extra-active .ui-btn-extra:hover {
|
|
outline: none;
|
|
border-color: var(--ui-btn-border-color-active);
|
|
background-color: var(--ui-btn-background-active);
|
|
box-shadow: var(--ui-btn-box-shadow-active);
|
|
color: var(--ui-btn-color-active);
|
|
text-shadow: var(--ui-btn-text-shadow-active);
|
|
}
|
|
|
|
.ui-btn-extra:after,
|
|
.ui-btn-menu:after {
|
|
position: absolute;
|
|
top: 7px;
|
|
bottom: 6px;
|
|
left: 0;
|
|
width: 1px;
|
|
background-color: var(--ui-btn-colors-after-bg);
|
|
content: '';
|
|
opacity: var(--ui-btn-opacity-after);
|
|
}
|
|
|
|
.ui-btn-extra:before,
|
|
.ui-btn-menu:before {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
box-sizing: border-box;
|
|
margin-top: -2px;
|
|
margin-left: -4px;
|
|
width: 8px;
|
|
border: 4px solid transparent;
|
|
border-top-color: var(--ui-btn-colors-before-bg);
|
|
background: none;
|
|
content: '';
|
|
transition: 160ms background-color linear, 160ms color linear, 160ms opacity linear, 160ms border-color linear;
|
|
}
|
|
|
|
.ui-btn + .ui-btn,
|
|
.ui-btn + .ui-btn-double,
|
|
.ui-btn-double + .ui-btn,
|
|
.ui-btn-double + .ui-btn-double,
|
|
.ui-btn + .ui-btn-split,
|
|
.ui-btn-split + .ui-btn,
|
|
.ui-btn-split + .ui-btn-split,
|
|
.ui-btn + script + .ui-btn,
|
|
.ui-btn + script + .ui-btn-split,
|
|
.ui-btn-split + script + .ui-btn,
|
|
.ui-btn-split + script + .ui-btn-split,
|
|
.ui-ctl + .ui-btn,
|
|
.ui-ctl + .ui-btn-double,
|
|
.ui-ctl + .ui-btn-split { margin-left: 12px; }
|
|
|
|
.ui-btn-text {
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
}
|
|
|
|
/*endregion*/
|
|
|
|
/*region Size*/
|
|
.ui-btn-md {
|
|
--ui-btn-padding: 0 19px;
|
|
--ui-btn-padding-right: 12px;
|
|
--ui-btn-min-width: 80px;
|
|
--ui-btn-height: var(--ui-btn-size-md);
|
|
--ui-btn-font-size: 12px;
|
|
}
|
|
|
|
.ui-btn-lg {
|
|
--ui-btn-padding: 0 26px;
|
|
--ui-btn-padding-right: 12px;
|
|
--ui-btn-min-width: 90px;
|
|
--ui-btn-height: var(--ui-btn-size-lg);
|
|
--ui-btn-font-size: 12px;
|
|
}
|
|
|
|
.ui-btn-sm {
|
|
--ui-btn-padding: 0 17px;
|
|
--ui-btn-padding-right: 10px;
|
|
--ui-btn-min-width: 70px;
|
|
--ui-btn-height: var(--ui-btn-size-sm);
|
|
--ui-btn-font-size: 12px;
|
|
}
|
|
|
|
.ui-btn-xs {
|
|
--ui-btn-padding: 0 15px;
|
|
--ui-btn-padding-right: 9px;
|
|
--ui-btn-min-width: 66px;
|
|
--ui-btn-height: var(--ui-btn-size-xs);
|
|
--ui-btn-font-size: 11px;
|
|
}
|
|
|
|
.ui-btn-double.ui-btn-lg,
|
|
.ui-btn-split.ui-btn-lg { padding-right: 33px; }
|
|
|
|
.ui-btn-lg.ui-btn { border-radius: 3px; }
|
|
|
|
.ui-btn-lg .ui-btn-main { border-radius: 3px 0 0 3px; }
|
|
|
|
.ui-btn-lg.ui-btn-double,
|
|
.ui-btn-lg.ui-btn-split { padding-right: 34px; }
|
|
|
|
.ui-btn-lg .ui-btn-extra,
|
|
.ui-btn-lg .ui-btn-menu {
|
|
width: 34px;
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
|
|
.ui-btn-sm.ui-btn-double,
|
|
.ui-btn-sm.ui-btn-split { padding-right: 28px; }
|
|
|
|
.ui-btn-sm .ui-btn-extra,
|
|
.ui-btn-sm .ui-btn-menu {
|
|
width: 28px;
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
|
|
.ui-btn-lg .ui-btn-extra:before,
|
|
.ui-btn-lg .ui-btn-menu:before { margin-top: -3px; }
|
|
|
|
.ui-btn-lg .ui-btn-extra:after,
|
|
.ui-btn-lg .ui-btn-menu:after {
|
|
top: 11px;
|
|
bottom: 10px;
|
|
opacity: .25;
|
|
}
|
|
|
|
/*endregion*/
|
|
|
|
/*region Colors*/
|
|
/*region Color Variables*/
|
|
.ui-btn-default { /* default variables */ }
|
|
|
|
.ui-btn-success {
|
|
--ui-btn-background: #bbed21;
|
|
--ui-btn-background-hover: #d2f95f;
|
|
--ui-btn-background-active: #b2e232;
|
|
--ui-btn-border-color: #bbed21;
|
|
--ui-btn-border-color-hover: #d2f95f;
|
|
--ui-btn-border-color-active: #b2e232;
|
|
--ui-btn-opacity-after: .2;
|
|
--ui-btn-colors-after-bg: #535c69;
|
|
--ui-btn-colors-before-bg: #535c69;
|
|
--ui-btn-color: #535c69;
|
|
--ui-btn-color-hover: #535c69;
|
|
--ui-btn-color-active: #535c69;
|
|
}
|
|
|
|
.ui-btn-success-light {
|
|
--ui-btn-background: #e1f0b1;
|
|
--ui-btn-background-hover: #eaf5c5;
|
|
--ui-btn-background-active: #d3e59a;
|
|
--ui-btn-border-color: #e1f0b1;
|
|
--ui-btn-border-color-hover: #eaf5c5;
|
|
--ui-btn-border-color-active: #d3e59a;
|
|
--ui-btn-opacity-after: .2;
|
|
--ui-btn-colors-after-bg: #333;
|
|
--ui-btn-colors-before-bg: #a3bf63;
|
|
--ui-btn-color: #668d13;
|
|
--ui-btn-color-hover: #668d13;
|
|
--ui-btn-color-active: #668d13;
|
|
}
|
|
|
|
.ui-btn-success-dark {
|
|
--ui-btn-background: #86a732;
|
|
--ui-btn-background-hover: #a2bf54;
|
|
--ui-btn-background-active: #a2bf54;
|
|
--ui-btn-border-color: #86a732;
|
|
--ui-btn-border-color-hover: #a2bf54;
|
|
--ui-btn-border-color-active: #a2bf54;
|
|
--ui-btn-opacity-after: .2;
|
|
--ui-btn-colors-after-bg: #fff;
|
|
--ui-btn-colors-before-bg: #a3bf63;
|
|
--ui-btn-color: #fff;
|
|
--ui-btn-color-hover: #fff;
|
|
--ui-btn-color-active: #fff;
|
|
}
|
|
|
|
.ui-btn-danger {
|
|
--ui-btn-background: #f1361a;
|
|
--ui-btn-background-hover: #cc1c00;
|
|
--ui-btn-background-active: #d24430;
|
|
--ui-btn-border-color: #f1361a;
|
|
--ui-btn-border-color-hover: #cc1c00;
|
|
--ui-btn-border-color-active: #d24430;
|
|
--ui-btn-opacity-after: .3;
|
|
--ui-btn-color: #fff;
|
|
--ui-btn-color-hover: #fff;
|
|
--ui-btn-color-active: #fff;
|
|
}
|
|
|
|
.ui-btn-danger-dark {
|
|
--ui-btn-background: #a21429;
|
|
--ui-btn-background-hover: #c43d51;
|
|
--ui-btn-background-active: #c43d51;
|
|
--ui-btn-border-color: #a21429;
|
|
--ui-btn-border-color-hover: #c43d51;
|
|
--ui-btn-border-color-active: #c43d51;
|
|
--ui-btn-opacity-after: .3;
|
|
--ui-btn-color: #fff;
|
|
--ui-btn-color-hover: #fff;
|
|
--ui-btn-color-active: #fff;
|
|
}
|
|
|
|
.ui-btn-danger-light {
|
|
--ui-btn-background: #ffccca;
|
|
--ui-btn-background-hover: #ffdcdb;
|
|
--ui-btn-background-active: #f2b6b3;
|
|
--ui-btn-border-color: #ffccca;
|
|
--ui-btn-border-color-hover: #ffdcdb;
|
|
--ui-btn-border-color-active: #f2b6b3;
|
|
--ui-btn-opacity-after: .2;
|
|
--ui-btn-colors-after-bg: #333;
|
|
--ui-btn-colors-before-bg: #eb8783;
|
|
--ui-btn-color: #d7413c;
|
|
--ui-btn-color-hover: #d7413c;
|
|
--ui-btn-color-active: #d7413c;
|
|
}
|
|
|
|
.ui-btn-primary {
|
|
--ui-btn-background: #3bc8f5;
|
|
--ui-btn-background-hover: #3eddff;
|
|
--ui-btn-background-active: #12b1e3;
|
|
--ui-btn-border-color: #3bc8f5;
|
|
--ui-btn-border-color-hover: #3eddff;
|
|
--ui-btn-border-color-active: #12b1e3;
|
|
--ui-btn-color: #fff;
|
|
--ui-btn-color-hover: #fff;
|
|
--ui-btn-color-active: #fff;
|
|
}
|
|
|
|
.ui-btn-primary-dark {
|
|
--ui-btn-background: #399fc2;
|
|
--ui-btn-background-hover: #37aed4;
|
|
--ui-btn-background-active: #37aed4;
|
|
--ui-btn-border-color: #399fc2;
|
|
--ui-btn-border-color-hover: #37aed4;
|
|
--ui-btn-border-color-active: #37aed4;
|
|
--ui-btn-color: #fff;
|
|
--ui-btn-color-hover: #fff;
|
|
--ui-btn-color-active: #fff;
|
|
}
|
|
|
|
.ui-btn-secondary {
|
|
--ui-btn-background: #c5e7f4;
|
|
--ui-btn-background-hover: #d1eef9;
|
|
--ui-btn-background-active: #aee0f2;
|
|
--ui-btn-border-color: #aee0f2;
|
|
--ui-btn-border-color-hover: #aee0f2;
|
|
--ui-btn-border-color-active: #aee0f2;
|
|
--ui-btn-opacity-after: .3;
|
|
--ui-btn-colors-after-bg: #535c69;
|
|
--ui-btn-colors-before-bg: #535c69;
|
|
--ui-btn-color: #535c69;
|
|
--ui-btn-color-hover: #535c69;
|
|
--ui-btn-color-active: #535c69;
|
|
}
|
|
|
|
.ui-btn-link {
|
|
--ui-btn-background: transparent;
|
|
--ui-btn-background-hover: transparent;
|
|
--ui-btn-background-active: transparent;
|
|
--ui-btn-border-color: transparent;
|
|
--ui-btn-border-color-hover: transparent;
|
|
--ui-btn-border-color-active: transparent;
|
|
--ui-btn-opacity-after: .3;
|
|
--ui-btn-colors-after-bg: #535c69;
|
|
--ui-btn-colors-before-bg: #535c69;
|
|
--ui-btn-color: #535c69;
|
|
--ui-btn-color-hover: #80868e;
|
|
--ui-btn-color-active: #535c69;
|
|
}
|
|
|
|
.ui-btn-light {
|
|
--ui-btn-background: transparent;
|
|
--ui-btn-background-hover: #f6f8f9;
|
|
--ui-btn-background-active: #d6f1fb;
|
|
--ui-btn-border-color: transparent;
|
|
--ui-btn-border-color-hover: #f6f8f9;
|
|
--ui-btn-border-color-active: #d6f1fb;
|
|
--ui-btn-opacity-after: .3;
|
|
--ui-btn-colors-after-bg: #535c69;
|
|
--ui-btn-colors-before-bg: #535c69;
|
|
--ui-btn-color: #535c69;
|
|
--ui-btn-color-hover: #333;
|
|
--ui-btn-color-active: #000;
|
|
}
|
|
|
|
.ui-btn-light-border {
|
|
--ui-btn-background: transparent;
|
|
--ui-btn-background-hover: #cfd4d8;
|
|
--ui-btn-background-active: #dde2e5;
|
|
--ui-btn-border-color: #c6cdd3;
|
|
--ui-btn-border-color-hover: #c6cdd3;
|
|
--ui-btn-border-color-active: #9fa4ab;
|
|
--ui-btn-opacity-after: .3;
|
|
--ui-btn-colors-after-bg: #535c69;
|
|
--ui-btn-colors-before-bg: #535c69;
|
|
--ui-btn-color: #535b69;
|
|
--ui-btn-color-hover: #535b69;
|
|
--ui-btn-color-active: #535b69;
|
|
}
|
|
|
|
/*endregion*/
|
|
|
|
/*region Button Color*/
|
|
|
|
/*region Link button*/
|
|
.ui-btn-link.ui-btn {
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.ui-btn-link .ui-btn-main { padding-left: 0; }
|
|
|
|
/*endregion*/
|
|
|
|
/*region Light-border button*/
|
|
|
|
/*region Fix for Themes*/
|
|
.bitrix24-light-theme .ui-btn-themes.ui-btn-link,
|
|
.bitrix24-light-theme .ui-btn-themes.ui-btn-light,
|
|
.bitrix24-light-theme .ui-btn-themes.ui-btn-light-border {
|
|
--ui-btn-background: rgba(255, 255, 255, .15);
|
|
--ui-btn-background-hover: rgba(255, 255, 255, .3);
|
|
--ui-btn-background-active: rgba(255, 255, 255, .4);
|
|
--ui-btn-colors-after-bg: #fff;
|
|
--ui-btn-colors-before-bg: #fff;
|
|
--ui-btn-color: #fff;
|
|
--ui-btn-color-hover: #fff;
|
|
--ui-btn-color-active: #fff;
|
|
}
|
|
|
|
.bitrix24-light-theme .ui-btn-themes.ui-btn-light-border { --ui-btn-border-color: rgba(255, 255, 255, .4); }
|
|
|
|
|
|
.bitrix24-dark-theme .ui-btn-themes.ui-btn-link,
|
|
.bitrix24-dark-theme .ui-btn-themes.ui-btn-light,
|
|
.bitrix24-dark-theme .ui-btn-themes.ui-btn-light-border {
|
|
--ui-btn-background: rgba(0, 0, 0, .07);
|
|
--ui-btn-background-hover: rgba(0, 0, 0, .1);
|
|
--ui-btn-background-active: rgba(0, 0, 0, .15);
|
|
--ui-btn-colors-after-bg: rgba(51, 51, 51, .8);
|
|
--ui-btn-colors-before-bg: rgba(51, 51, 51, .8);
|
|
--ui-btn-color: rgba(51, 51, 51, .8);
|
|
--ui-btn-color-hover: rgba(51, 51, 51, .8);;
|
|
--ui-btn-color-active: rgba(51, 51, 51, .8);;
|
|
}
|
|
|
|
.bitrix24-dark-theme .ui-btn-themes.ui-btn-light-border { --ui-btn-border-color: rgba(0, 0, 0, .06); }
|
|
|
|
|
|
/*endregion*/
|
|
|
|
/*endregion*/
|
|
|
|
/*endregion*/
|
|
|
|
/*endregion*/
|
|
|
|
/*region Others*/
|
|
|
|
.ui-btn-round { border-radius: calc(var(--ui-btn-height) / 2) !important; }
|
|
|
|
.ui-btn-no-caps,
|
|
.ui-btn-no-caps .ui-btn-main {
|
|
text-transform: none;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/*region Counter*/
|
|
.ui-btn-counter {
|
|
display: inline-block;
|
|
padding: 0 8px;
|
|
border-radius: 10px;
|
|
background-color: #f34829;
|
|
color: #fff;
|
|
vertical-align: middle;
|
|
font: 11px/19px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ui-btn-text + .ui-btn-counter { margin-left: 12px; }
|
|
|
|
.ui-btn-lg .ui-btn-counter { margin-left: 15px; }
|
|
|
|
/*endregion*/
|
|
|
|
/*region Dropdown*/
|
|
.ui-btn.ui-btn-dropdown,
|
|
.ui-btn-dropdown .ui-btn-main { padding-right: 29px; }
|
|
|
|
.ui-btn.ui-btn-dropdown:before,
|
|
.ui-btn-dropdown .ui-btn-main:before {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 13px;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
margin-top: -1.5px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-bottom: 2px solid;
|
|
border-left: 2px solid;
|
|
content: '';
|
|
transform: translateY(-50%) rotate(-45deg);
|
|
}
|
|
|
|
.ui-btn.ui-btn-dropdown:before,
|
|
.ui-btn-dropdown .ui-btn-main:before { border-color: var(--ui-btn-color); }
|
|
|
|
.ui-btn.ui-btn-empty.ui-btn-dropdown:before,
|
|
.ui-btn.ui-btn-collapsed.ui-btn-dropdown:before,
|
|
.ui-btn-empty.ui-btn-dropdown .ui-btn-main:before,
|
|
.ui-btn-collapsed.ui-btn-dropdown .ui-btn-main:before {
|
|
right: auto;
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
left: 50%;
|
|
}
|
|
|
|
.ui-btn.ui-btn-empty.ui-btn-dropdown[class*="ui-btn-icon-"]:before,
|
|
.ui-btn.ui-btn-collapsed.ui-btn-dropdown[class*="ui-btn-icon-"]:before,
|
|
.ui-btn-empty.ui-btn-dropdown[class*="ui-btn-icon-"] .ui-btn-main:before,
|
|
.ui-btn-collapsed.ui-btn-dropdown[class*="ui-btn-icon-"] .ui-btn-main:before {
|
|
right: 12px;
|
|
transform: translateY(-50%) rotate(-45deg);
|
|
left: auto;
|
|
}
|
|
|
|
/*endregion*/
|
|
|
|
/*region Disabled*/
|
|
.ui-btn.ui-btn-disabled,
|
|
.ui-btn.ui-btn-disabled:hover,
|
|
.ui-btn.ui-btn-disabled:active,
|
|
.ui-btn[disabled],
|
|
.ui-btn[disabled]:hover,
|
|
.ui-btn[disabled]:active,
|
|
.ui-btn-disabled .ui-btn-main,
|
|
.ui-btn-disabled .ui-btn-main:hover,
|
|
.ui-btn-disabled .ui-btn-main:active,
|
|
.ui-btn-disabled .ui-btn-extra,
|
|
.ui-btn-disabled .ui-btn-extra:hover,
|
|
.ui-btn-disabled .ui-btn-extra:active,
|
|
.ui-btn-disabled .ui-btn-menu,
|
|
.ui-btn-disabled .ui-btn-menu:hover,
|
|
.ui-btn-disabled .ui-btn-menu:active,
|
|
.ui-btn-main-disabled .ui-btn-main,
|
|
.ui-btn-main-disabled .ui-btn-main:hover,
|
|
.ui-btn-main-disabled .ui-btn-main:active,
|
|
.ui-btn-extra-disabled .ui-btn-extra,
|
|
.ui-btn-extra-disabled .ui-btn-extra:hover,
|
|
.ui-btn-extra-disabled .ui-btn-extra:active,
|
|
.ui-btn-menu-disabled .ui-btn-menu,
|
|
.ui-btn-menu-disabled .ui-btn-menu:hover,
|
|
.ui-btn-menu-disabled .ui-btn-menu:active {
|
|
opacity: .4;
|
|
cursor: not-allowed;
|
|
background-color: var(--ui-btn-background);
|
|
border-color: var(--ui-btn-border-color);
|
|
}
|
|
|
|
/*endregion*/
|
|
|
|
/*region Wait*/
|
|
.ui-btn.ui-btn-wait,
|
|
.ui-btn-wait .ui-btn-main {
|
|
background-position: center !important;
|
|
background-repeat: no-repeat !important;
|
|
color: transparent !important;
|
|
}
|
|
|
|
.ui-btn.ui-btn-wait:after,
|
|
.ui-btn-wait .ui-btn-main:after { opacity: 0; }
|
|
|
|
.ui-btn-wait,
|
|
.ui-btn-wait.ui-btn-danger,
|
|
.ui-btn-wait.ui-btn-primary,
|
|
.ui-btn-wait.ui-btn-default,
|
|
.ui-btn-wait.ui-btn-danger-dark,
|
|
.ui-btn-wait.ui-btn-success-dark,
|
|
.ui-btn-wait.ui-btn-primary-dark { --ui-btn-wait-loader: var(--ui-btn-wait-white); }
|
|
|
|
.ui-btn-wait.ui-btn-link,
|
|
.ui-btn-wait.ui-btn-secondary,
|
|
.ui-btn-wait.ui-btn-light,
|
|
.ui-btn-wait.ui-btn-success,
|
|
.ui-btn-wait.ui-btn-light-border,
|
|
.ui-btn-wait.ui-btn-link { --ui-btn-wait-loader: var(--ui-btn-wait-black); }
|
|
|
|
.ui-btn.ui-btn-wait,
|
|
.ui-btn-wait .ui-btn-main { background-image: var(--ui-btn-wait-loader); }
|
|
|
|
/*endregion*/
|
|
|
|
/*region Clock*/
|
|
.ui-btn.ui-btn-clock,
|
|
.ui-btn-double.ui-btn-clock .ui-btn-main,
|
|
.ui-btn-split.ui-btn-clock .ui-btn-main {
|
|
background-position: center !important;
|
|
background-repeat: no-repeat !important;
|
|
color: transparent !important;
|
|
}
|
|
|
|
.ui-btn.ui-btn-clock:after,
|
|
.ui-btn-double.ui-btn-clock .ui-btn-main:after,
|
|
.ui-btn-split.ui-btn-clock .ui-btn-main:after { opacity: 0; }
|
|
|
|
.ui-btn-clock,
|
|
.ui-btn-clock.ui-btn-danger,
|
|
.ui-btn-clock.ui-btn-primary,
|
|
.ui-btn-clock.ui-btn-default,
|
|
.ui-btn-clock.ui-btn-danger-dark,
|
|
.ui-btn-clock.ui-btn-success-dark,
|
|
.ui-btn-clock.ui-btn-primary-dark { --ui-btn-clock-loader: var(--ui-btn-clock-white); }
|
|
|
|
.ui-btn-clock.ui-btn-link,
|
|
.ui-btn-clock.ui-btn-secondary,
|
|
.ui-btn-clock.ui-btn-light,
|
|
.ui-btn-clock.ui-btn-success,
|
|
.ui-btn-clock.ui-btn-light-border,
|
|
.ui-btn-clock.ui-btn-link { --ui-btn-clock-loader: var(--ui-btn-clock-black); }
|
|
|
|
.ui-btn.ui-btn-clock,
|
|
.ui-btn-clock .ui-btn-main { background-image: var(--ui-btn-clock-loader); }
|
|
|
|
/*endregion*/
|
|
|
|
/*endregion*/ |