@progress/kendo-theme-bootstrap 4.42.0 → 5.0.0-alpha.1

package/modules/@progress/kendo-theme-default/scss/button/_layout.scss

@@ -1,462 +0,0 @@
-@include exports("button/layout") {
-
-    // Button
-    .k-button {
-        @include border-radius( $button-border-radius );
-        padding: $button-padding-y $button-padding-x;
-        box-sizing: border-box;
-        border-width: $button-border-width;
-        border-style: solid;
-        font-size: $button-font-size;
-        line-height: $button-line-height;
-        font-family: $button-font-family;
-        text-align: center;
-        text-decoration: none;
-        white-space: nowrap;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: $icon-spacing;
-        vertical-align: middle;
-        user-select: none;
-        cursor: pointer;
-        outline: none;
-        -webkit-appearance: none;
-        position: relative;
-
-        &:disabled,
-        &.k-state-disabled {
-            @include disabled( $disabled-styling );
-        }
-
-        &::-moz-focus-inner {
-            padding: 0;
-            border: 0;
-            outline: 0;
-        }
-
-        &:hover,
-        &:focus {
-            text-decoration: none;
-            outline: 0;
-        }
-
-        .k-icon,
-        .k-image,
-        .k-sprite {
-            color: inherit;
-            align-self: center;
-            position: relative;
-        }
-
-    }
-
-
-    // Button icon
-    .k-button .k-button-icon {
-        color: inherit;
-        align-self: center;
-        position: relative;
-    }
-
-
-    // Button text
-    .k-button .k-button-text {}
-
-
-    // Text button
-    .k-text-button {
-
-        > .k-icon,
-        > .k-button-icon {
-            display: none;
-        }
-    }
-
-
-    // Icon button
-    .k-icon-button,
-    .k-button.k-button-icon {
-        padding: $button-padding-y;
-        width: $button-calc-size;
-        height: $button-calc-size;
-        gap: 0;
-
-        > .k-text,
-        > .k-button-text {
-            display: none;
-        }
-
-        .k-button-icon {
-            margin: 0;
-        }
-    }
-    // TODO: REMOVE
-    .k-button.k-button-icon {
-        padding: $button-padding-y;
-        width: $button-calc-size;
-        height: $button-calc-size;
-    }
-
-
-    // Input button
-    .k-input-button {}
-    .k-input-button.k-icon-button {}
-
-
-    // Menu Button
-    .k-menu-button,
-    .k-dropdown-button {
-        outline: 0;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        vertical-align: middle;
-    }
-
-
-    // Button group
-    .k-button-group {
-        margin: 0;
-        padding: 0;
-        border-width: 0;
-        box-sizing: border-box;
-        list-style: none;
-        outline: 0;
-        white-space: nowrap;
-        display: inline-flex;
-        flex-direction: row;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        .k-button {
-            @include border-radius( 0 );
-        }
-        .k-button ~ .k-button {
-            margin-inline-start: if( $button-border-width == 0, null, -$button-border-width );
-        }
-
-        .k-button:hover,
-        .k-button.k-state-hover,
-        .k-button:active,
-        .k-button.k-state-active,
-        .k-button.k-state-selected,
-        .k-button:focus,
-        .k-button.k-state-focus {
-            z-index: 2;
-        }
-
-        .k-group-start,
-        .k-button:first-child {
-            @include border-left-radius( $button-border-radius );
-        }
-        .k-group-end,
-        .k-button:last-child {
-            @include border-right-radius( $button-border-radius );
-        }
-        .k-group-start.k-group-end,
-        .k-button:first-child:last-child {
-            @include border-radius( $button-border-radius );
-        }
-
-    }
-
-    .k-button-group-stretched {
-        display: flex;
-
-        .k-button {
-            display: inline-block;
-            flex: 1 0 0%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-
-            > .k-icon {
-                vertical-align: text-bottom;
-            }
-        }
-    }
-
-
-    // Split button
-    .k-split-button {
-        border-width: 0;
-        border-radius: 0;
-        outline: 0;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        vertical-align: middle;
-
-        .k-button {
-            @include border-radius( 0 );
-        }
-
-        // .k-button
-        > .k-button:first-child {
-            @include border-left-radius( $button-border-radius );
-        }
-        > .k-split-button-arrow,
-        > .k-button:last-child {
-            @include border-right-radius( $button-border-radius );
-            margin-inline-start: if( $button-border-width == 0, null, -$button-border-width );
-            padding: $button-padding-y;
-            width: auto;
-            flex: none;
-        }
-
-        &[dir="rtl"] {
-            // k-button
-            > .k-button:first-child {
-                @include border-left-radius( 0 );
-                @include border-right-radius( $button-border-radius );
-            }
-            > .k-button:last-child {
-                @include border-right-radius( 0 );
-                @include border-left-radius( $button-border-radius );
-            }
-        }
-    }
-
-
-    // Flat button and bare
-    .k-button-flat {
-        border-color: transparent !important; // sass-lint:disable-line no-important
-        color: inherit;
-        background: none !important; // sass-lint:disable-line no-important
-        box-shadow: none !important; // sass-lint:disable-line no-important
-        transition: color .2s ease-in-out;
-
-        // Overlay background
-        &::before {
-            display: block;
-        }
-
-        // Focus ring
-        &::after {
-            box-shadow: inset 0 0 0 2px currentColor;
-            display: block;
-        }
-
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-
-            &::after {
-                opacity: .12;
-            }
-        }
-    }
-    .k-button.k-flat,
-    .k-button.k-bare {
-        @extend .k-button-flat;
-    }
-
-
-    // Outline button
-    .k-button-outline {
-        @include box-shadow( none );
-        color: inherit;
-        background: none;
-    }
-    .k-button.k-outline {
-        @extend .k-button-outline;
-    }
-
-
-    // Clear button
-    .k-button-clear {
-        border-color: transparent !important; // sass-lint:disable-line no-important
-        color: inherit;
-        background: none !important; // sass-lint:disable-line no-important
-        box-shadow: none !important; // sass-lint:disable-line no-important
-    }
-
-
-    // RTL
-    .k-rtl {
-
-        // Button group
-        .k-button-group {
-
-            .k-button {
-                @include border-radius( 0 );
-            }
-
-            .k-group-start,
-            .k-button:first-child {
-                @include border-right-radius( $button-border-radius );
-            }
-            .k-group-end,
-            .k-button:last-child {
-                @include border-left-radius( $button-border-radius );
-            }
-            .k-group-start.k-group-end,
-            .k-button:first-child:last-child {
-                @include border-radius( $button-border-radius );
-            }
-
-        }
-
-        // Split button
-        .k-split-button {
-
-            .k-button {
-                @include border-radius( 0 );
-            }
-
-            // k-button
-            > .k-button:first-child {
-                @include border-right-radius( $button-border-radius );
-            }
-            > .k-split-button-arrow,
-            > .k-button:last-child {
-                @include border-left-radius( $button-border-radius );
-            }
-        }
-    }
-
-}
-
-
-
-
-@include exports( "button/layout/overlay" ) {
-
-    // Button overlay
-    .k-button-overlay {
-        @include border-radius( inherit );
-        content: "";
-        background: currentColor;
-        opacity: 0;
-        display: none;
-        pointer-events: none;
-        position: absolute;
-        left: -$button-border-width;
-        right: -$button-border-width;
-        top: -$button-border-width;
-        bottom: -$button-border-width;
-        z-index: 0;
-        transition: opacity .2s ease-in-out;
-    }
-
-
-    .k-button {
-
-        &::before {
-            @extend .k-button-overlay;
-        }
-
-        // Hovered state
-        &:hover,
-        &.k-state-hover {
-            &::before {
-                opacity: $flat-button-hover-opacity;
-            }
-        }
-
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            &::before {
-                opacity: $flat-button-focus-opacity;
-            }
-        }
-        &.k-no-focus:not(:hover),
-        &.k-no-focus:not(.k-state-hover) {
-            &::before {
-                opacity: 0;
-            }
-        }
-
-        // Active state
-        &:active,
-        &.k-state-active {
-            &::before {
-                opacity: $flat-button-active-opacity;
-            }
-        }
-
-        // Selected state
-        &.k-state-selected {
-            &::before {
-                opacity: $flat-button-selected-opacity;
-            }
-        }
-
-    }
-
-}
-
-
-
-
-@include exports( "button/layout/focus-ring" ) {
-
-    .k-button {
-
-        &::after {
-            @include border-radius( $button-border-radius );
-            content: "";
-            opacity: 0;
-            display: none;
-            pointer-events: none;
-            position: absolute;
-            left: -$button-border-width;
-            right: -$button-border-width;
-            top: -$button-border-width;
-            bottom: -$button-border-width;
-            z-index: 0;
-            transition: opacity .2s ease-in-out;
-        }
-    }
-}
-
-
-
-
-@include exports( "button/ie-compat" ) {
-
-    .k-ie9,
-    .k-ie10 {
-
-        .k-button[disabled]:hover,
-        .k-button[disabled]:focus,
-        .k-button.k-state-disabled:hover,
-        .k-button.k-state-disabled:focus {
-            @include disabled-legacy-ie( $disabled-styling );
-        }
-
-    }
-
-    .k-ie {
-
-        .k-button,
-        .k-button-group {
-            display: inline-block;
-            overflow: visible; // IE9
-        }
-
-        .k-button-icontext {
-
-            .k-icon,
-            .k-image,
-            .k-sprite {
-                margin: 0 $icon-spacing 0 0;
-            }
-
-            &.k-rtl,
-            .k-rtl &,
-            &[dir="rtl"],
-            [dir="rtl"] & {
-                .k-icon,
-                .k-image,
-                .k-sprite {
-                    margin: 0 0 0 $icon-spacing;
-                }
-            }
-        }
-
-    }
-
-}