add km-buttongroup #31
This commit is contained in:
joneff
Родитель
19199af87a
Коммит
0de133aadf
102
demo/button.html
102
demo/button.html
|
|
@ -13,100 +13,56 @@
|
|||
<body>
|
||||
|
||||
|
||||
<div class="container" id="buttons">
|
||||
<div class="container">
|
||||
<legend>Buttons</legend>
|
||||
|
||||
<button class="btn btn-primary">Primary</button>
|
||||
<button class="btn btn-secondary">Default</button>
|
||||
|
|
||||
<button class="btn btn-primary hover">Primary</button>
|
||||
<button class="btn btn-secondary hover">Default</button>
|
||||
<button class="btn btn-primary hover">Hover</button>
|
||||
<button class="btn btn-secondary hover">Hover</button>
|
||||
|
|
||||
<button class="btn btn-primary active">Primary</button>
|
||||
<button class="btn btn-secondary active">Default</button>
|
||||
<button class="btn btn-primary active">Active</button>
|
||||
<button class="btn btn-secondary active">Active</button>
|
||||
|
|
||||
<button class="btn btn-primary disabled">Primary</button>
|
||||
<button class="btn btn-secondary disabled">Default</button>
|
||||
<button class="btn btn-primary disabled">Disabled</button>
|
||||
<button class="btn btn-secondary disabled">Disabled</button>
|
||||
<hr />
|
||||
<button class="k-button k-primary">Primary</button>
|
||||
<button class="k-button">Default</button>
|
||||
<button data-role="button" class="k-primary">Primary</button>
|
||||
<button data-role="button">Default</button>
|
||||
|
|
||||
<button class="k-button k-state-hover k-primary">Primary</button>
|
||||
<button class="k-button k-state-hover">Default</button>
|
||||
<button data-role="button" class="k-state-hover k-primary">Hover</button>
|
||||
<button data-role="button" class="k-state-hover">Hover</button>
|
||||
|
|
||||
<button class="k-button k-state-active k-primary">Primary</button>
|
||||
<button class="k-button k-state-active">Default</button>
|
||||
<button data-role="button" class="k-state-active k-primary">Active</button>
|
||||
<button data-role="button" class="k-state-active">Active</button>
|
||||
|
|
||||
<button class="k-button k-disabled k-primary">Primary</button>
|
||||
<button class="k-button k-disabled">Default</button>
|
||||
<button data-role="button" disabled="disabled" class="k-primary">Disabled</button>
|
||||
<button data-role="button" disabled="disabled">Disabled</button>
|
||||
<hr />
|
||||
<button class="km-button">Default</button>
|
||||
|
|
||||
<button class="km-button km-state-active">Active</button>
|
||||
|
|
||||
<button class="km-button km-state-disabled">Disabled</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container" id="button-groups">
|
||||
<legend>Button groups</legend>
|
||||
|
||||
<span class="btn-group" role="group">
|
||||
<button class="btn btn-primary">Primary</button>
|
||||
<button class="btn btn-secondary">Default</button>
|
||||
</span>
|
||||
|
|
||||
<span class="btn-group" role="group">
|
||||
<button class="btn btn-primary hover">Primary</button>
|
||||
<button class="btn btn-secondary hover">Default</button>
|
||||
</span>
|
||||
|
|
||||
<span class="btn-group" role="group">
|
||||
<button class="btn btn-primary active">Primary</button>
|
||||
<button class="btn btn-secondary active">Default</button>
|
||||
</span>
|
||||
|
|
||||
<span class="btn-group" role="group">
|
||||
<button class="btn btn-primary disabled">Primary</button>
|
||||
<button class="btn btn-secondary disabled">Default</button>
|
||||
</span>
|
||||
<hr />
|
||||
<span class="k-button-group">
|
||||
<button class="k-button k-primary">Primary</button>
|
||||
<button class="k-button">Default</button>
|
||||
</span>
|
||||
|
|
||||
<span class="k-button-group">
|
||||
<button class="k-button k-state-hover k-primary">Primary</button>
|
||||
<button class="k-button k-state-hover">Default</button>
|
||||
</span>
|
||||
|
|
||||
<span class="k-button-group">
|
||||
<button class="k-button k-state-active k-primary">Primary</button>
|
||||
<button class="k-button k-state-active">Default</button>
|
||||
</span>
|
||||
|
|
||||
<span class="k-button-group">
|
||||
<button class="k-button k-disabled k-primary">Primary</button>
|
||||
<button class="k-button k-disabled">Default</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container" id="compact">
|
||||
<div class="container">
|
||||
<legend>Compact</legend>
|
||||
|
||||
<button class="btn btn-primary btn-sm">Primary</button>
|
||||
<button class="btn btn-secondary btn-sm">Default</button>
|
||||
|
|
||||
<span class="btn-group btn-group-sm" role="group">
|
||||
<button class="btn btn-primary">Primary</button>
|
||||
<button class="btn btn-secondary">Default</button>
|
||||
</span>
|
||||
<hr />
|
||||
<button class="k-button k-primary k-compact">Primary</button>
|
||||
<button class="k-button k-compact">Default</button>
|
||||
|
|
||||
<span class="k-button-group k-compact">
|
||||
<button class="k-button k-primary">Primary</button>
|
||||
<button class="k-button">Default</button>
|
||||
</span>
|
||||
<button data-role="button" class="k-button k-primary k-compact">Primary</button>
|
||||
<button data-role="button" class="k-button k-compact">Default</button>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
kendo.init( $(".container") );
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Button group</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/button.css" />
|
||||
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||
|
||||
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
||||
<script src="http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<legend>Button groups</legend>
|
||||
|
||||
<span class="btn-group">
|
||||
<button class="btn btn-primary">Primary</button>
|
||||
<button class="btn btn-secondary">Default</button>
|
||||
</span>
|
||||
|
|
||||
<span class="btn-group">
|
||||
<button class="btn btn-primary hover">Hover</button>
|
||||
<button class="btn btn-secondary hover">Hover</button>
|
||||
</span>
|
||||
|
|
||||
<span class="btn-group">
|
||||
<button class="btn btn-primary active">Active</button>
|
||||
<button class="btn btn-secondary active">Active</button>
|
||||
</span>
|
||||
|
|
||||
<span class="btn-group">
|
||||
<button class="btn btn-primary disabled">Disabled</button>
|
||||
<button class="btn btn-secondary disabled">Disabled</button>
|
||||
</span>
|
||||
<hr />
|
||||
<span class="k-button-group">
|
||||
<button class="k-button k-primary">Primary</button>
|
||||
<button class="k-button">Default</button>
|
||||
</span>
|
||||
|
|
||||
<span class="k-button-group">
|
||||
<button class="k-button k-state-hover k-primary">Hover</button>
|
||||
<button class="k-button k-state-hover">Hover</button>
|
||||
</span>
|
||||
|
|
||||
<span class="k-button-group">
|
||||
<button class="k-button k-state-active k-primary">Active</button>
|
||||
<button class="k-button k-state-active">Active</button>
|
||||
</span>
|
||||
|
|
||||
<span class="k-button-group">
|
||||
<button class="k-button k-disabled k-primary">Disabled</button>
|
||||
<button class="k-button k-disabled">Disabled</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container" data-role="view">
|
||||
<legend>Compact</legend>
|
||||
|
||||
<span class="btn-group btn-group-sm" role="group">
|
||||
<button class="btn btn-primary">Primary</button>
|
||||
<button class="btn btn-secondary">Default</button>
|
||||
</span>
|
||||
<hr />
|
||||
<span class="k-button-group k-compact">
|
||||
<button class="k-button k-primary">Primary</button>
|
||||
<button class="k-button">Default</button>
|
||||
</span>
|
||||
<hr />
|
||||
<ul data-role="buttongroup">
|
||||
<li class="km-state-active">Primary</li>
|
||||
<li>Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
kendo.init( $(".container") );
|
||||
new kendo.mobile.Application();
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -13,10 +13,10 @@
|
|||
<style type="text/css">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body data-role="view">
|
||||
|
||||
|
||||
<div class="container" data-role="view">
|
||||
<div class="container">
|
||||
<legend>Switch</legend>
|
||||
<input type="checkbox" data-role="switch" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
.k-widget :before {
|
||||
box-sizing: content-box; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
background-color: #0275d8;
|
||||
border-color: #01549b; }
|
||||
|
||||
.k-button, .k-slider .k-draghandle, .k-colorpicker .k-select, .k-combobox .k-select, .k-dropdown .k-dropdown-wrap, .k-numerictextbox .k-select, .k-splitbar {
|
||||
.k-button, .km-button, .k-slider .k-draghandle, .k-colorpicker .k-select, .k-combobox .k-select, .k-dropdown .k-dropdown-wrap, .k-numerictextbox .k-select, .k-splitbar {
|
||||
color: #373a3c;
|
||||
background-color: #fff;
|
||||
border-color: #ccc; }
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
background-color: #e6e6e6;
|
||||
border-color: #adadad; }
|
||||
|
||||
.k-button:active, .k-button.k-state-active, .k-slider .k-draghandle.k-state-active, .k-colorpicker .k-state-active .k-select, .k-combobox .k-state-focused .k-select,
|
||||
.k-button:active, .k-button.k-state-active, .km-button.km-state-active, .k-slider .k-draghandle.k-state-active, .k-colorpicker .k-state-active .k-select, .k-combobox .k-state-focused .k-select,
|
||||
.k-combobox .k-state-active .k-select, .k-dropdown .k-state-active, .k-numerictextbox .k-state-active .k-select, .k-calendar .k-nav-prev:active,
|
||||
.k-calendar .k-nav-next:active,
|
||||
.k-calendar .k-nav-fast:active,
|
||||
|
|
@ -166,7 +166,8 @@
|
|||
/** #endregion */
|
||||
/** #region common/states */
|
||||
.k-disabled,
|
||||
.k-state-disabled {
|
||||
.k-state-disabled,
|
||||
.km-state-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -695,12 +696,12 @@
|
|||
box-shadow: inset 0 0 5px rgba(1, 84, 155, 0.5); }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -736,32 +737,32 @@
|
|||
border-radius: 0.25rem; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -817,9 +818,45 @@
|
|||
.k-button-group .k-button + .k-button {
|
||||
margin-left: -1px; }
|
||||
.k-button-group .k-button:hover,
|
||||
.k-button-group .k-button.k-state-hover {
|
||||
.k-button-group .k-button.k-state-hover,
|
||||
.k-button-group .k-button.k-state-active {
|
||||
z-index: 2; }
|
||||
|
||||
/** #endregion */
|
||||
/** #region km-button/layout */
|
||||
.km-button {
|
||||
padding: 0.5rem 1rem;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
font-size: 1rem;
|
||||
line-height: 1.25;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
vertical-align: middle; }
|
||||
.km-button:hover, .km-button:focus {
|
||||
text-decoration: none; }
|
||||
.km-button .k-icon {
|
||||
align-self: center; }
|
||||
|
||||
.km-buttongroup {
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
vertical-align: middle;
|
||||
position: relative; }
|
||||
.km-buttongroup .km-button {
|
||||
position: relative; }
|
||||
.km-buttongroup .km-button + .km-button {
|
||||
margin-left: -1px; }
|
||||
.km-buttongroup .km-button.km-state-active {
|
||||
z-index: 2; }
|
||||
|
||||
ul.km-buttongroup {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none; }
|
||||
|
||||
/** #endregion */
|
||||
/** #region button/theme */
|
||||
.k-button {
|
||||
|
|
@ -835,12 +872,26 @@
|
|||
border-radius: 0 0.25rem 0.25rem 0; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
/** #region km-button/theme */
|
||||
.km-button {
|
||||
border-radius: 0.25rem; }
|
||||
|
||||
.km-buttongroup .km-button {
|
||||
border-radius: 0; }
|
||||
|
||||
.km-buttongroup .km-button:first-child {
|
||||
border-radius: 0.25rem 0 0 0.25rem; }
|
||||
|
||||
.km-buttongroup .km-button:last-child {
|
||||
border-radius: 0 0.25rem 0.25rem 0; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -1235,12 +1286,12 @@
|
|||
border-color: inherit; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -1301,12 +1352,12 @@
|
|||
border-color: inherit; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -1328,12 +1379,12 @@
|
|||
border-radius: 0.25rem; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -1357,22 +1408,22 @@
|
|||
border-radius: 0.25rem; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -1426,12 +1477,12 @@
|
|||
border-radius: 0.1875rem; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -1486,52 +1537,52 @@
|
|||
border-radius: 0 0.25rem 0.25rem 0; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -1648,12 +1699,12 @@
|
|||
background-color: #f2dede; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -1756,12 +1807,12 @@
|
|||
box-shadow: inset 0 0 5px #01549b; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -1806,12 +1857,12 @@
|
|||
background-color: #f2dede; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -1878,22 +1929,22 @@
|
|||
/** #endregion */
|
||||
/** #region splitter/theme */
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -1964,22 +2015,22 @@
|
|||
border-color: #e5e5e5; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -2053,12 +2104,12 @@
|
|||
background-color: #0275d8; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -2121,12 +2172,12 @@
|
|||
box-shadow: inset 0 0 5px #01549b; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -2248,22 +2299,22 @@
|
|||
border-left-color: transparent; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -2341,12 +2392,12 @@
|
|||
border-radius: 0 0.25rem 0.25rem 0; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
@ -2423,12 +2474,12 @@
|
|||
box-shadow: inset 0 0 5px #01549b; }
|
||||
|
||||
/** #endregion */
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
||||
.k-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
.k-button[disabled], .km-button[disabled], .k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
pointer-events: none; }
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&[disabled] {
|
||||
@extend %disabled;
|
||||
|
|
@ -101,9 +102,69 @@
|
|||
}
|
||||
|
||||
.k-button:hover,
|
||||
.k-button.k-state-hover {
|
||||
.k-button.k-state-hover,
|
||||
.k-button.k-state-active {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@include exports("km-button/layout") {
|
||||
|
||||
// Button
|
||||
.km-button {
|
||||
padding: $button-padding-y $button-padding-x;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
font-size: $font-size;
|
||||
line-height: $form-line-height;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&[disabled] {
|
||||
@extend %disabled;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.k-icon {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Button group
|
||||
.km-buttongroup {
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
|
||||
.km-button {
|
||||
position: relative;
|
||||
}
|
||||
.km-button + .km-button {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.km-button.km-state-active {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
ul.km-buttongroup {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -37,4 +37,34 @@
|
|||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@include exports("km-button/theme") {
|
||||
|
||||
// Appearance
|
||||
.km-button {
|
||||
@include appearance( button );
|
||||
@include border-radius( $border-radius );
|
||||
|
||||
&.km-state-active { @include appearance( active-button ); }
|
||||
}
|
||||
|
||||
|
||||
// Button group
|
||||
.km-buttongroup {
|
||||
|
||||
.km-button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.km-button:first-child {
|
||||
@include border-radius( $border-radius 0 0 $border-radius );
|
||||
}
|
||||
.km-button:last-child {
|
||||
@include border-radius( 0 $border-radius $border-radius 0 );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -2,6 +2,11 @@
|
|||
@import "../mixins/all";
|
||||
|
||||
|
||||
// Dependencies
|
||||
@import "../common/base";
|
||||
@import "../common/icons";
|
||||
|
||||
|
||||
// Component
|
||||
@import "layout";
|
||||
@import "theme";
|
||||
|
|
@ -80,7 +80,8 @@
|
|||
|
||||
// Disabled
|
||||
.k-disabled,
|
||||
.k-state-disabled {
|
||||
.k-state-disabled,
|
||||
.km-state-disabled {
|
||||
@include disabled;
|
||||
}
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче