Update
This commit is contained in:
root
224
core/bitrix/js/ui/buttons/@type/ui.buttons.d.ts
vendored
224
core/bitrix/js/ui/buttons/@type/ui.buttons.d.ts
vendored
@@ -1,224 +0,0 @@
|
||||
declare module 'ui.buttons'
|
||||
{
|
||||
namespace UI
|
||||
{
|
||||
class BaseButton
|
||||
{
|
||||
constructor(options: { [key: string]: any })
|
||||
render(): HTMLElement
|
||||
renderTo(node: HTMLElement): HTMLElement | null
|
||||
getContainer(): HTMLElement
|
||||
setText(text: string): BaseButton
|
||||
getText(): string
|
||||
getTag(): any
|
||||
setProps(props: { [key: string]: string }): BaseButton
|
||||
getProps(): { [key: string]: string }
|
||||
setDataSet(dataset: { [key: string]: string }): { [key: string]: string }
|
||||
getDataSet(): DOMStringMap
|
||||
addClass(className: string): BaseButton
|
||||
removeClass(className: string): BaseButton
|
||||
setDisabled(state: boolean): BaseButton
|
||||
isDisabled(): boolean
|
||||
isInputType(): boolean
|
||||
bindEvents(events: { [key: string]: () => void }): BaseButton
|
||||
unbindEvents(events: { [key: string]: () => void }): BaseButton
|
||||
bindEvent(event: string, handler: (event: Event) => void): BaseButton
|
||||
unbindEvent(event: string, handler: (event: Event) => void): BaseButton
|
||||
}
|
||||
|
||||
class Button extends BaseButton
|
||||
{
|
||||
static Size: {
|
||||
LARGE: string,
|
||||
MEDIUM: string,
|
||||
SMALL: string,
|
||||
EXTRA_SMALL: string,
|
||||
};
|
||||
|
||||
static Color: {
|
||||
DANGER: string,
|
||||
DANGER_DARK: string,
|
||||
DANGER_LIGHT: string,
|
||||
SUCCESS: string,
|
||||
SUCCESS_LIGHT: string,
|
||||
PRIMARY_DARK: string,
|
||||
PRIMARY: string,
|
||||
SECONDARY: string,
|
||||
LINK: string,
|
||||
LIGHT: string,
|
||||
LIGHT_BORDER: string,
|
||||
};
|
||||
|
||||
static State: {
|
||||
HOVER: string,
|
||||
ACTIVE: string,
|
||||
DISABLED: string,
|
||||
CLOCKING: string,
|
||||
WAITING: string,
|
||||
};
|
||||
|
||||
static Icon: {
|
||||
UNFOLLOW: string,
|
||||
FOLLOW: string,
|
||||
ADD: string,
|
||||
STOP: string,
|
||||
START: string,
|
||||
ADD_FOLDER: string,
|
||||
PAUSE: string,
|
||||
SETTING: string,
|
||||
TASK: string,
|
||||
INFO: string,
|
||||
SEARCH: string,
|
||||
PRINT: string,
|
||||
LIST: string,
|
||||
BUSINESS: string,
|
||||
BUSINESS_CONFIRM: string,
|
||||
BUSINESS_WARNING: string,
|
||||
CAMERA: string,
|
||||
PHONE_UP: string,
|
||||
PHONE_DOWN: string,
|
||||
BACK: string,
|
||||
REMOVE: string,
|
||||
DONE: string,
|
||||
DISK: string,
|
||||
};
|
||||
|
||||
static Tag: {
|
||||
BUTTON: number,
|
||||
LINK: number,
|
||||
SUBMIT: number,
|
||||
INPUT: number,
|
||||
};
|
||||
|
||||
static Style: {
|
||||
NO_CAPS: string,
|
||||
ROUND: string,
|
||||
DROPDOWN: string,
|
||||
};
|
||||
|
||||
setSize(size: string): Button
|
||||
getSize(): string
|
||||
setColor(color: string): Button
|
||||
getColor(): string
|
||||
setIcon(icon: string): Button
|
||||
getIcon(): string
|
||||
setState(state: string): Button
|
||||
getState(): string
|
||||
setNoCaps(value: boolean): Button
|
||||
setRound(value: boolean): Button
|
||||
setDropdown(value: boolean): Button
|
||||
setMenu(options: { [key: string]: any }): Button
|
||||
getMenuBindElement(): HTMLElement
|
||||
getMenuClickElement(): HTMLElement
|
||||
getMenuWindow(): any
|
||||
setId(id: string): Button
|
||||
getId(): string | null
|
||||
setActive(value: boolean): Button
|
||||
isActive(): boolean
|
||||
setHovered(value: boolean): Button
|
||||
isHover(): boolean
|
||||
setDisabled(value: boolean): Button
|
||||
isDisabled(): boolean
|
||||
setWaiting(value: boolean): Button
|
||||
isWaiting(): boolean
|
||||
setClocking(value: boolean): Button
|
||||
isClocking(): boolean
|
||||
setContext(context: any): void
|
||||
getContext(): any
|
||||
}
|
||||
|
||||
class SaveButton extends Button
|
||||
{
|
||||
}
|
||||
|
||||
class CreateButton extends Button
|
||||
{
|
||||
}
|
||||
|
||||
class AddButton extends Button
|
||||
{
|
||||
}
|
||||
|
||||
class SendButton extends Button
|
||||
{
|
||||
}
|
||||
|
||||
class ApplyButton extends Button
|
||||
{
|
||||
}
|
||||
|
||||
class CancelButton extends Button
|
||||
{
|
||||
}
|
||||
|
||||
class CloseButton extends Button
|
||||
{
|
||||
}
|
||||
|
||||
class SplitButton extends Button
|
||||
{
|
||||
static State: {
|
||||
HOVER: string,
|
||||
MAIN_HOVER: string,
|
||||
MENU_HOVER: string,
|
||||
ACTIVE: string,
|
||||
MAIN_ACTIVE: string,
|
||||
MENU_ACTIVE: string,
|
||||
DISABLED: string,
|
||||
MAIN_DISABLED: string,
|
||||
MENU_DISABLED: string,
|
||||
CLOCKING: string,
|
||||
WAITING: string,
|
||||
};
|
||||
|
||||
getMainButton(): SplitSubButton
|
||||
getMenuButton(): SplitSubButton
|
||||
getMenuTarget(): any
|
||||
}
|
||||
|
||||
class SplitSubButton extends BaseButton
|
||||
{
|
||||
static Type: {
|
||||
MAIN: string,
|
||||
MENU: string,
|
||||
};
|
||||
|
||||
setSplitButton(button: SplitButton): SplitSubButton
|
||||
getSplitButton(): SplitButton
|
||||
isMainButton(): boolean
|
||||
isMenuButton(): boolean
|
||||
setActive(value: boolean): SplitSubButton
|
||||
isActive(): boolean
|
||||
setHovered(value: boolean): SplitSubButton
|
||||
isHovered(): boolean
|
||||
}
|
||||
|
||||
class SaveSplitButton extends SplitButton
|
||||
{
|
||||
}
|
||||
|
||||
class CreateSplitButton extends SplitButton
|
||||
{
|
||||
}
|
||||
|
||||
class AddSplitButton extends SplitButton
|
||||
{
|
||||
}
|
||||
|
||||
class SendSplitButton extends SplitButton
|
||||
{
|
||||
}
|
||||
|
||||
class ApplySplitButton extends SplitButton
|
||||
{
|
||||
}
|
||||
|
||||
class CancelSplitButton extends SplitButton
|
||||
{
|
||||
}
|
||||
|
||||
class CloseSplitButton extends SplitButton
|
||||
{
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1754,7 +1754,8 @@ this.BX = this.BX || {};
|
||||
if (_classStaticPrivateMethodGet(this, ButtonManager$$1, _getCounter).call(this, counterNode)) {
|
||||
var _counterNode;
|
||||
options.rightCounter = {
|
||||
value: _classStaticPrivateMethodGet(this, ButtonManager$$1, _getCounter).call(this, counterNode)
|
||||
value: _classStaticPrivateMethodGet(this, ButtonManager$$1, _getCounter).call(this, counterNode),
|
||||
style: _classStaticPrivateMethodGet(this, ButtonManager$$1, _getCounterStyle).call(this, counterNode)
|
||||
};
|
||||
options.counterNode = undefined;
|
||||
options.counter = undefined;
|
||||
@@ -1874,6 +1875,12 @@ this.BX = this.BX || {};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
function _getCounterStyle(counterNode) {
|
||||
if (!main_core.Type.isDomNode(counterNode)) {
|
||||
return null;
|
||||
}
|
||||
return _classStaticPrivateMethodGet(this, ButtonManager$$1, _getEnumProp).call(this, counterNode, ui_cnt.CounterStyle);
|
||||
}
|
||||
function _getEnumProp(node, enumeration) {
|
||||
for (let key in enumeration) {
|
||||
if (!enumeration.hasOwnProperty(key)) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -2,7 +2,7 @@ import { Type, Reflection, Dom, Runtime, Tag } from 'main.core';
|
||||
import { EventEmitter, BaseEvent } from 'main.core.events';
|
||||
import { MenuItem } from 'main.popup';
|
||||
import { Switcher } from 'ui.switcher';
|
||||
import { Counter } from 'ui.cnt';
|
||||
import { Counter, CounterStyle } from 'ui.cnt';
|
||||
|
||||
import BaseButton from './base-button';
|
||||
import Button from './button/button';
|
||||
@@ -159,6 +159,7 @@ export default class ButtonManager
|
||||
{
|
||||
options.rightCounter = {
|
||||
value: this.#getCounter(counterNode),
|
||||
style: this.#getCounterStyle(counterNode),
|
||||
};
|
||||
|
||||
options.counterNode = undefined;
|
||||
@@ -331,6 +332,21 @@ export default class ButtonManager
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {HTMLElement} counterNode
|
||||
* @return {string | null}
|
||||
*/
|
||||
static #getCounterStyle(counterNode: HTMLElement): string | null
|
||||
{
|
||||
if (!Type.isDomNode(counterNode))
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.#getEnumProp(counterNode, CounterStyle);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {HTMLElement} node
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import type { BaseButtonOptions } from '../base-button-options';
|
||||
import ButtonSize from './button-size';
|
||||
import ButtonStyle from './button-style';
|
||||
import AirButtonStyle from './air-button-style';
|
||||
import ButtonColor from './button-color';
|
||||
import ButtonIcon from './button-icon';
|
||||
import ButtonState from './button-state';
|
||||
@@ -19,8 +21,8 @@ export type ButtonOptions = BaseButtonOptions & {
|
||||
round?: boolean,
|
||||
dropdown?: boolean,
|
||||
dependOnTheme?: boolean,
|
||||
// Use only with useAirTheme: true option
|
||||
style?: boolean;
|
||||
// Use only with useAirDesign: true option
|
||||
style?: ButtonStyle & AirButtonStyle;
|
||||
wide?: boolean;
|
||||
iconPosition?: 'left' | 'right';
|
||||
rightCounter?: CounterOptions;
|
||||
|
||||
@@ -1,782 +0,0 @@
|
||||
/*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-margin-left: 12px;
|
||||
--ui-btn-radius: 2px;
|
||||
/**/
|
||||
--ui-btn-clock-white: url(/bitrix/js/ui/buttons/src/css/images/ui-loader-clock-white.min.svg?v=1.4);
|
||||
--ui-btn-clock-black: url(/bitrix/js/ui/buttons/src/css/images/ui-loader-clock-black.min.svg?v=1.4);
|
||||
--ui-btn-wait-white: url(/bitrix/js/ui/buttons/src/css/images/ui-loader-wait-white.min.svg?v=1.2);
|
||||
--ui-btn-wait-black: url(/bitrix/js/ui/buttons/src/css/images/ui-loader-wait-black.min.svg?v=1.2);
|
||||
}
|
||||
|
||||
/*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;
|
||||
outline: none;
|
||||
height: var(--ui-btn-height);
|
||||
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 linear background-color,
|
||||
160ms linear color,
|
||||
160ms linear opacity,
|
||||
160ms linear box-shadow,
|
||||
160ms linear border-color;
|
||||
}
|
||||
|
||||
.ui-btn,
|
||||
.ui-btn-main {
|
||||
position: relative;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-box-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) var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
|
||||
font-weight: var(--ui-font-weight-bold, 700);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ui-btn,
|
||||
.ui-btn-split {
|
||||
line-height: calc(var(--ui-btn-height) - 2px);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui-btn { border-radius: var(--ui-btn-radius) }
|
||||
|
||||
.ui-btn-min { min-width: var(--ui-btn-min-width); }
|
||||
|
||||
.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: var(--ui-btn-height);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ui-btn-main {
|
||||
padding-right: var(--ui-btn-padding-right);
|
||||
border-right: none !important;
|
||||
border-radius: var(--ui-btn-radius) 0 0 var(--ui-btn-radius);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ui-btn-extra,
|
||||
.ui-btn-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: var(--ui-btn-height);
|
||||
border-left: none !important;
|
||||
border-radius: 0 var(--ui-btn-radius) var(--ui-btn-radius) 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,
|
||||
.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-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-split { margin-left: var(--ui-btn-margin-left); }
|
||||
|
||||
.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-split.ui-btn-lg { padding-right: 33px; }
|
||||
|
||||
.ui-btn-lg.ui-btn:not(.ui-btn-round) { --ui-btn-radius: 3px; }
|
||||
|
||||
.ui-btn-lg:not(.ui-btn-round) .ui-btn-main { --ui-btn-radius: 3px; }
|
||||
|
||||
.ui-btn-lg.ui-btn-split { padding-right: 34px; }
|
||||
|
||||
.ui-btn-lg .ui-btn-extra,
|
||||
.ui-btn-lg .ui-btn-menu { width: 34px; }
|
||||
|
||||
.ui-btn-lg:not(.ui-btn-round) .ui-btn-extra,
|
||||
.ui-btn-lg:not(.ui-btn-round) .ui-btn-menu { --ui-btn-radius: 3px; }
|
||||
|
||||
.ui-btn-sm.ui-btn-split { padding-right: 28px; }
|
||||
|
||||
.ui-btn-sm .ui-btn-extra,
|
||||
.ui-btn-sm .ui-btn-menu { width: 28px; }
|
||||
|
||||
.ui-btn-sm:not(.ui-btn-round) .ui-btn-extra,
|
||||
.ui-btn-sm:not(.ui-btn-round) .ui-btn-menu { --ui-btn-radius: 3px; }
|
||||
|
||||
.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-padding: 0 6px;
|
||||
/*--ui-btn-margin-left: 18px;*/
|
||||
}
|
||||
|
||||
.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 {
|
||||
--ui-btn-color: #ebebeb;
|
||||
--ui-btn-color-hover: #fff;
|
||||
--ui-btn-color-active: #fff;
|
||||
}
|
||||
|
||||
.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 {
|
||||
--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,
|
||||
.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 { --ui-btn-radius: calc(var(--ui-btn-height) / 2); }
|
||||
|
||||
.ui-btn-no-caps,
|
||||
.ui-btn-no-caps .ui-btn-main {
|
||||
text-transform: none;
|
||||
font-size: calc(var(--ui-btn-font-size) + 2px);
|
||||
font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
|
||||
font-weight: var(--ui-font-weight-semi-bold, 600);
|
||||
}
|
||||
|
||||
|
||||
.ui-btn-shadow,
|
||||
.ui-btn-shadow:hover,
|
||||
.ui-btn-shadow.ui-btn-hover { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.18); }
|
||||
|
||||
.ui-btn-shadow:active,
|
||||
.ui-btn-shadow.ui-btn-active { box-shadow: 0 0 1px 0 rgba(0,0,0,0.18); }
|
||||
|
||||
/*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 var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
|
||||
font-weight: var(--ui-font-weight-regular, 400);
|
||||
}
|
||||
|
||||
.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-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-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*/
|
||||
|
||||
/*region Links*/
|
||||
:root {
|
||||
--ui-link-color: #216bb6;
|
||||
--ui-link-border-color: #216bb6;
|
||||
}
|
||||
|
||||
.ui-link,
|
||||
*.ui-link:hover {
|
||||
cursor: pointer;
|
||||
font: 13px/22px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
|
||||
color: var(--ui-link-color);
|
||||
transition: 250ms linear color, 250ms linear border-color;
|
||||
}
|
||||
|
||||
.ui-link + .ui-link,
|
||||
.ui-link + script + .ui-link { margin-left: 12px; }
|
||||
|
||||
.ui-link,
|
||||
.ui-link-primary {
|
||||
--ui-link-color: #216bb6;
|
||||
--ui-link-border-color: #216bb6
|
||||
}
|
||||
|
||||
.ui-link:hover,
|
||||
.ui-link-primary:hover {
|
||||
--ui-link-color: #2067b0;
|
||||
--ui-link-border-color: #2067b0
|
||||
}
|
||||
|
||||
.ui-link-secondary {
|
||||
--ui-link-color: #80868e;
|
||||
--ui-link-border-color: #d8d8d8
|
||||
}
|
||||
|
||||
.ui-link-secondary:hover {
|
||||
--ui-link-color: #333;
|
||||
--ui-link-border-color: #333
|
||||
}
|
||||
|
||||
.ui-link-dark {
|
||||
--ui-link-color: #333;
|
||||
--ui-link-border-color: #333
|
||||
}
|
||||
|
||||
.ui-link-dark:hover {
|
||||
--ui-link-color: #000;
|
||||
--ui-link-border-color: #000
|
||||
}
|
||||
|
||||
.ui-link-solid { border-bottom: 1px solid var(--ui-link-border-color); }
|
||||
|
||||
.ui-link-dashed { border-bottom: 1px dashed var(--ui-link-border-color); }
|
||||
|
||||
.ui-link-dotted { border-bottom: 1px dotted var(--ui-link-border-color); }
|
||||
|
||||
/*endregion*/
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,711 +0,0 @@
|
||||
/*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*/
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user