feat: use mixins from @telerik/kendo-theme-default
This commit is contained in:
joneff
Alex Gyoshev
Родитель
2e58e693af
Коммит
f293a2be4b
|
|
@ -1,3 +1,12 @@
|
|||
@import "utils/all";
|
||||
@import "helpers/all";
|
||||
@import "appearance/all";
|
||||
// Core
|
||||
@import "../../node_modules/@telerik/kendo-theme-default/src/mixins/import-once";
|
||||
@import "../../node_modules/@telerik/kendo-theme-default/src/mixins/placeholder-selectors";
|
||||
|
||||
|
||||
// Utils
|
||||
@import "../../node_modules/@telerik/kendo-theme-default/src/mixins/decoration";
|
||||
@import "../../node_modules/@telerik/kendo-theme-default/src/mixins/compact";
|
||||
|
||||
|
||||
// Appearance
|
||||
@import "../../node_modules/@telerik/kendo-theme-default/src/mixins/all";
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
@import "../utils/decoration";
|
||||
|
||||
@import "panel";
|
||||
@import "button";
|
||||
@import "input";
|
||||
@import "node";
|
||||
|
||||
@mixin appearance( $what ) {
|
||||
|
||||
// Panels
|
||||
@if ( $what == panel ) {
|
||||
@include appearance_panel;
|
||||
}
|
||||
@if ( $what == popup ) {
|
||||
@include appearance_popup;
|
||||
}
|
||||
|
||||
|
||||
// Header
|
||||
@if ( $what == header ) {
|
||||
@include appearance_header;
|
||||
}
|
||||
@if ( $what == hovered-header ) {
|
||||
@include appearance_hovered-header;
|
||||
}
|
||||
@if ( $what == selected-header ) {
|
||||
@include appearance_selected-header;
|
||||
}
|
||||
@if ( $what == disabled-header ) {
|
||||
@include appearance_disabled-header;
|
||||
}
|
||||
|
||||
|
||||
// Button
|
||||
@if ( $what == button ) {
|
||||
@include appearance_button;
|
||||
}
|
||||
@if ( $what == hovered-button ) {
|
||||
@include appearance_hovered-button;
|
||||
}
|
||||
@if ( $what == active-button ) {
|
||||
@include appearance_active-button;
|
||||
}
|
||||
@if ( $what == disabled-button ) {
|
||||
@include appearance_disabled-button;
|
||||
}
|
||||
|
||||
|
||||
// Primary button
|
||||
@if ( $what == primary-button ) {
|
||||
@include appearance_primary-button;
|
||||
}
|
||||
@if ( $what == hovered-primary-button ) {
|
||||
@include appearance_hovered-primary-button;
|
||||
}
|
||||
@if ( $what == active-primary-button ) {
|
||||
@include appearance_active-primary-button;
|
||||
}
|
||||
@if ( $what == disabled-primary-button ) {
|
||||
@include appearance_disabled-primary-button;
|
||||
}
|
||||
|
||||
|
||||
// Input
|
||||
@if ( $what == input ) {
|
||||
@include appearance_input;
|
||||
}
|
||||
@if ( $what == hovered-input ) {
|
||||
@include appearance_hovered-input;
|
||||
}
|
||||
@if ( $what == focused-input ) {
|
||||
@include appearance_focused-input;
|
||||
}
|
||||
@if ( $what == disabled-input ) {
|
||||
@include appearance_disabled-input;
|
||||
}
|
||||
|
||||
|
||||
// Node
|
||||
@if ( $what == node ) {
|
||||
@include appearance_node;
|
||||
}
|
||||
@if ( $what == hovered-node ) {
|
||||
@include appearance_hovered-node;
|
||||
}
|
||||
@if ( $what == selected-node ) {
|
||||
@include appearance_selected-node;
|
||||
}
|
||||
@if ( $what == disabled-node ) {
|
||||
@include appearance_disabled-node;
|
||||
}
|
||||
|
||||
|
||||
// List item
|
||||
@if ( $what == list-item ) {
|
||||
@include appearance_list-item;
|
||||
}
|
||||
@if ( $what == hovered-list-item ) {
|
||||
@include appearance_hovered-list-item;
|
||||
}
|
||||
@if ( $what == selected-list-item ) {
|
||||
@include appearance_selected-list-item;
|
||||
}
|
||||
@if ( $what == disabled-list-item ) {
|
||||
@include appearance_disabled-list-item;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
$_button-imported: false !default;
|
||||
|
||||
@if ( $_button-imported == false ) {
|
||||
|
||||
%appearance_button {
|
||||
color: $button-color;
|
||||
background-color: $button-bg;
|
||||
border-color: $button-border;
|
||||
@include linear-gradient( $button-gradient );
|
||||
}
|
||||
%appearance_hovered-button {
|
||||
color: $button-hovered-color;
|
||||
background-color: $button-hovered-bg;
|
||||
border-color: $button-hovered-border;
|
||||
@include linear-gradient( $button-hovered-gradient );
|
||||
}
|
||||
%appearance_active-button {
|
||||
color: $button-active-color;
|
||||
background-color: $button-active-bg;
|
||||
border-color: $button-active-border;
|
||||
@include linear-gradient( $button-active-gradient );
|
||||
}
|
||||
%appearance_disabled-button {
|
||||
color: $button-disabled-color;
|
||||
background-color: $button-disabled-bg;
|
||||
border-color: $button-disabled-border;
|
||||
@include linear-gradient( $button-disabled-gradient );
|
||||
}
|
||||
|
||||
%appearance_primary-button {
|
||||
color: $primary-button-color;
|
||||
background-color: $primary-button-bg;
|
||||
border-color: $primary-button-border;
|
||||
@include linear-gradient( $primary-button-gradient );
|
||||
}
|
||||
%appearance_hovered-primary-button {
|
||||
color: $primary-button-hovered-color;
|
||||
background-color: $primary-button-hovered-bg;
|
||||
border-color: $primary-button-hovered-border;
|
||||
@include linear-gradient( $primary-button-hovered-gradient );
|
||||
}
|
||||
%appearance_active-primary-button {
|
||||
color: $primary-button-active-color;
|
||||
background-color: $primary-button-active-bg;
|
||||
border-color: $primary-button-active-border;
|
||||
@include linear-gradient( $primary-button-active-gradient );
|
||||
}
|
||||
%appearance_disabled-primary-button {
|
||||
color: $primary-button-disabled-color;
|
||||
background-color: $primary-button-disabled-bg;
|
||||
border-color: $primary-button-disabled-border;
|
||||
@include linear-gradient( $primary-button-disabled-gradient );
|
||||
}
|
||||
|
||||
$_button-imported: true;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@mixin appearance_button { @extend %appearance_button };
|
||||
@mixin appearance_hovered-button { @extend %appearance_hovered-button };
|
||||
@mixin appearance_active-button { @extend %appearance_active-button };
|
||||
@mixin appearance_disabled-button { @extend %appearance_disabled-button };
|
||||
|
||||
@mixin appearance_primary-button { @extend %appearance_primary-button };
|
||||
@mixin appearance_hovered-primary-button { @extend %appearance_hovered-primary-button };
|
||||
@mixin appearance_active-primary-button { @extend %appearance_active-primary-button };
|
||||
@mixin appearance_disabled-primary-button { @extend %appearance_disabled-primary-button };
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
$_input-imported: false !default;
|
||||
|
||||
@if ( $_input-imported == false ) {
|
||||
|
||||
%appearance_input {
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
border-color: $input-border;
|
||||
}
|
||||
%appearance_hovered-input {
|
||||
color: $input-hovered-color;
|
||||
background-color: $input-hovered-bg;
|
||||
border-color: $input-hovered-border;
|
||||
}
|
||||
%appearance_focused-input {
|
||||
color: $input-active-color;
|
||||
background-color: $input-active-bg;
|
||||
border-color: $input-active-border;
|
||||
}
|
||||
%appearance_disabled-input {
|
||||
color: $input-disabled-color;
|
||||
background-color: $input-disabled-bg;
|
||||
border-color: $input-disabled-border;
|
||||
}
|
||||
|
||||
$_input-imported: true;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@mixin appearance_input { @extend %appearance_input; }
|
||||
@mixin appearance_hovered-input { @extend %appearance_hovered-input; }
|
||||
@mixin appearance_focused-input { @extend %appearance_focused-input; }
|
||||
@mixin appearance_disabled-input { @extend %appearance_disabled-input; }
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
$_node-imported: false !default;
|
||||
|
||||
@if ( $_node-imported == false ) {
|
||||
|
||||
%appearance_node {
|
||||
color: $node-color;
|
||||
background-color: $node-bg;
|
||||
border-color: $node-border;
|
||||
@include linear-gradient( $node-gradient );
|
||||
}
|
||||
%appearance_hovered-node {
|
||||
color: $node-hovered-color;
|
||||
background-color: $node-hovered-bg;
|
||||
border-color: $node-hovered-border;
|
||||
@include linear-gradient( $node-hovered-gradient );
|
||||
}
|
||||
%appearance_selected-node {
|
||||
color: $node-selected-color;
|
||||
background-color: $node-selected-bg;
|
||||
border-color: $node-selected-border;
|
||||
@include linear-gradient( $node-selected-gradient );
|
||||
}
|
||||
%appearance_disabled-node {
|
||||
color: $node-disabled-color;
|
||||
background-color: $node-disabled-bg;
|
||||
border-color: $node-disabled-border;
|
||||
@include linear-gradient( $node-disabled-gradient );
|
||||
}
|
||||
|
||||
%appearance_list-item {
|
||||
color: $list-item-color;
|
||||
background-color: $list-item-bg;
|
||||
}
|
||||
%appearance_hovered-list-item {
|
||||
color: $list-item-hovered-color;
|
||||
background-color: $list-item-hovered-bg;
|
||||
}
|
||||
%appearance_selected-list-item {
|
||||
color: $list-item-selected-color;
|
||||
background-color: $list-item-selected-bg;
|
||||
}
|
||||
%appearance_disabled-list-item {
|
||||
color: $list-item-disabled-color;
|
||||
background-color: $list-item-disabled-bg;
|
||||
}
|
||||
|
||||
$_node-imported: true;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@mixin appearance_node { @extend %appearance_node };
|
||||
@mixin appearance_hovered-node { @extend %appearance_hovered-node };
|
||||
@mixin appearance_selected-node { @extend %appearance_selected-node };
|
||||
@mixin appearance_disabled-node { @extend %appearance_disabled-node };
|
||||
|
||||
@mixin appearance_list-item { @extend %appearance_list-item };
|
||||
@mixin appearance_hovered-list-item { @extend %appearance_hovered-list-item };
|
||||
@mixin appearance_selected-list-item { @extend %appearance_selected-list-item };
|
||||
@mixin appearance_disabled-list-item { @extend %appearance_disabled-list-item };
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
$_panel-imported: false !default;
|
||||
|
||||
@if ( $_panel-imported == false ) {
|
||||
|
||||
%appearance_panel {
|
||||
color: $panel-color;
|
||||
background-color: $panel-bg;
|
||||
border-color: $panel-border;
|
||||
}
|
||||
%appearance_popup {
|
||||
color: $popup-color;
|
||||
background-color: $popup-bg;
|
||||
border-color: $popup-border;
|
||||
}
|
||||
|
||||
%appearance_header {
|
||||
color: $header-color;
|
||||
background-color: $header-bg;
|
||||
border-color: $header-border;
|
||||
@include linear-gradient( $header-gradient );
|
||||
}
|
||||
%appearance_hovered-header {
|
||||
color: $header-hovered-color;
|
||||
background-color: $header-hovered-bg;
|
||||
border-color: $header-hovered-border;
|
||||
@include linear-gradient( $header-hovered-gradient );
|
||||
}
|
||||
%appearance_selected-header {
|
||||
color: $header-selected-color;
|
||||
background-color: $header-selected-bg;
|
||||
border-color: $header-selected-border;
|
||||
@include linear-gradient( $header-selected-gradient );
|
||||
}
|
||||
%appearance_disabled-header {
|
||||
color: $header-disabled-color;
|
||||
background-color: $header-disabled-bg;
|
||||
border-color: $header-disabled-border;
|
||||
@include linear-gradient( $header-disabled-gradient );
|
||||
}
|
||||
|
||||
$_panel-imported: true;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@mixin appearance_panel { @extend %appearance_panel; }
|
||||
@mixin appearance_popup { @extend %appearance_popup; }
|
||||
|
||||
@mixin appearance_header { @extend %appearance_header };
|
||||
@mixin appearance_hovered-header { @extend %appearance_hovered-header };
|
||||
@mixin appearance_selected-header { @extend %appearance_selected-header };
|
||||
@mixin appearance_disabled-header { @extend %appearance_disabled-header };
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import "extends";
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
$_extends-imported: false !default;
|
||||
|
||||
@if ( $_extends-imported == false ) {
|
||||
|
||||
/// Box sizing `border-box`
|
||||
%border-box {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/// Box sizing `content-box`
|
||||
%content-box {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/// Display `none`
|
||||
%display-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/// Display `block`
|
||||
%display-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/// Display `inline-block`
|
||||
%display-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/// Display `inline`
|
||||
%display-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/// Display `flex`
|
||||
%display-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/// Position `static`
|
||||
%position-static {
|
||||
position: static;
|
||||
}
|
||||
|
||||
/// Position `relative`
|
||||
%position-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/// Position `absolute`
|
||||
%position-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/// Position `fixed`
|
||||
%position-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
/// Overflow `hidden`
|
||||
%overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/// Overflow X `auto`
|
||||
%overflow-x-auto {
|
||||
@extend %overflow-hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/// Overflow Y `auto`
|
||||
%overflow-y-auto {
|
||||
@extend %overflow-hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/// Text align `left`
|
||||
%text-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/// Text align `center`
|
||||
%text-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/// Text align `right`
|
||||
%text-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/// Float `left`
|
||||
%float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/// Float `right`
|
||||
%float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/// Vertical align `middle`
|
||||
%vertical-align-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/// Cursor `pointer`
|
||||
%cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/// Cursor `default`
|
||||
%cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/// Text Decoration
|
||||
%text-decoration-none {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
%text-decoration-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/// Font weight `normal`
|
||||
%font-weight-normal {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/// Font weight `bold`
|
||||
%font-weight-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
%ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/// Poiter events
|
||||
%pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
%pointer-events-all {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
$_extends-imported: true;
|
||||
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import "exports";
|
||||
@import "decoration";
|
||||
@import "compact";
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
@mixin compact {
|
||||
.k-compact &,
|
||||
&.k-compact {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
@mixin linear-gradient( $gradient ) {
|
||||
@if $gradient {
|
||||
@if $gradient == none {
|
||||
background-image: none
|
||||
}
|
||||
@else {
|
||||
background-image: linear-gradient( $gradient );
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin box-shadow( $shadow ) {
|
||||
@if $shadow {
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
}
|
||||
@mixin border-radius( $radius ) {
|
||||
@if $radius {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
@mixin fill( $color: null, $bg: null, $border: null, $gradient: null ) {
|
||||
color: $color;
|
||||
background-color: $bg;
|
||||
border-color: $border;
|
||||
@include linear-gradient( $gradient );
|
||||
}
|
||||
@mixin outline( $color: null ) {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Disabled
|
||||
@mixin disabled {
|
||||
cursor: $cursor-disabled;
|
||||
opacity: .65;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
$_disabled-imported: false !default;
|
||||
|
||||
@if ( $_disabled-imported == false ) {
|
||||
%disabled {
|
||||
@include disabled;
|
||||
}
|
||||
|
||||
$_disabled-imported: true;
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
$imported-modules: () !default;
|
||||
|
||||
@mixin exports($name) {
|
||||
@if not index($imported-modules, $name) {
|
||||
$imported-modules: append($imported-modules, $name) !global;
|
||||
/** #region #{$name} */
|
||||
@content;
|
||||
/** #endregion */
|
||||
} @else {
|
||||
//@warn 'Module `#{$name}` has already been imported.';
|
||||
}
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче