Current Path : /var/www/www-root/data/www.catalog.monolith-realty.ru/bitrix/js/ui/buttons/ |
Current File : /var/www/www-root/data/www.catalog.monolith-realty.ru/bitrix/js/ui/buttons/ui.buttons.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*/