chore: point scss/common/... to theme-default/...
This commit is contained in:
Родитель
470fec6258
Коммит
04a3799082
|
@ -1,3 +1,5 @@
|
|||
@import "base";
|
||||
@import "icons";
|
||||
@import "animations";
|
||||
@import "animations";
|
||||
@import "forms";
|
||||
@import "dragclue";
|
|
@ -1,289 +1 @@
|
|||
@include exports("animation/container") {
|
||||
|
||||
.k-animation-container {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@include exports("animation/effect") {
|
||||
|
||||
.k-push-right {
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
|
||||
&-enter-active,
|
||||
&-appear-active {
|
||||
transform: translate(0, 0);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translate(0, -100%);
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
transform: translate(100%, -100%);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave-active + &-leave-active,
|
||||
&-enter-active + &-enter-active {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.k-push-left {
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
|
||||
&-enter-active,
|
||||
&-appear-active {
|
||||
transform: translate(0, 0);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translate(0, -100%);
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
transform: translate(-100%, -100%);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave-active + &-leave-active,
|
||||
&-enter-active + &-enter-active {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.k-push-down {
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translate(0, -100%);
|
||||
}
|
||||
|
||||
&-enter-active,
|
||||
&-appear-active {
|
||||
transform: translate(0, 0);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translate(0, -100%);
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
transform: translate(0, 0);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.k-push-up {
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translate(0, 100%);
|
||||
}
|
||||
|
||||
&-enter-active,
|
||||
&-appear-active {
|
||||
transform: translate(0, 0);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translate(0, -100%);
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
transform: translate(0, -200%);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.k-expand {
|
||||
.k-child-animation-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.k-fade {
|
||||
&-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 500ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
opacity: 0;
|
||||
transition: opacity 500ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave-active + &-leave-active,
|
||||
&-enter-active + &-enter-active {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.k-zoom-in {
|
||||
&-enter,
|
||||
&-appear {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-active,
|
||||
&-appear-active {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translate(0, -100%) scale(1);
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
transform: translate(0, -100%) scale(0);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.k-zoom-out {
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
&-enter-active,
|
||||
&-appear-active {
|
||||
transform: scale(1);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave {
|
||||
opacity: 1;
|
||||
transform: translate(0, -100%);
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
opacity: 0;
|
||||
transition: opacity 300ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.k-slide-in {
|
||||
&-appear {
|
||||
opacity: .1;
|
||||
transform: translate(0, -3em);
|
||||
|
||||
.k-centered {
|
||||
transform: translate(-50%, -60%);
|
||||
}
|
||||
}
|
||||
|
||||
&-appear-active {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
transition: transform .3s cubic-bezier(.2, .6, .4, 1), opacity .3s cubic-bezier(.2, 1, .2, 1);
|
||||
|
||||
.k-centered {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.k-slide-down {
|
||||
&-enter {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
transform: translateY(0);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
transform: translateY(-100%);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.k-slide-up {
|
||||
&-enter {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
transform: translateY(0);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
transform: translateY(100%);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.k-slide-right {
|
||||
&-enter {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
transform: translateX(-100%);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.k-slide-left {
|
||||
&-enter {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
transform: translateX(0);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
transform: translateX(100%);
|
||||
transition: transform 300ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@import "../../node_modules/@progress/kendo-theme-default/scss/common/animations";
|
|
@ -1,23 +1 @@
|
|||
@include exports( "common/dragclue" ) {
|
||||
|
||||
// Layout
|
||||
.k-drag-clue {
|
||||
padding: $padding-y-sm $padding-x-sm;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
font-size: $font-size-sm;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
}
|
||||
.k-drag-status {
|
||||
margin-right: .4ex;
|
||||
}
|
||||
|
||||
|
||||
// Theme
|
||||
.k-drag-clue {
|
||||
@include appearance( selected-node );
|
||||
}
|
||||
|
||||
}
|
||||
@import "../../node_modules/@progress/kendo-theme-default/scss/common/dragclue";
|
|
@ -1,51 +1 @@
|
|||
// TODO: input padding
|
||||
$input-padding-x: 1em;
|
||||
$input-padding-y: .5em;
|
||||
|
||||
@include exports("forms/layout") {
|
||||
|
||||
.k-dropdown-wrap,
|
||||
.k-picker-wrap {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
|
||||
.k-input {
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
color: inherit;
|
||||
background: none;
|
||||
font: inherit;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.k-select {
|
||||
padding: $button-padding-y;
|
||||
border-width: 0 0 0 1px;
|
||||
border-style: solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.k-icon {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
%form-control {
|
||||
border-width: 0;
|
||||
line-height: $form-line-height;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
@import "../../node_modules/@progress/kendo-theme-default/scss/common/forms";
|
|
@ -1 +1 @@
|
|||
@import "../../node_modules/@progress/kendo-theme-default/scss/common/icons";
|
||||
@import "../../node_modules/@progress/kendo-theme-default/scss/common/icons";
|
|
@ -1,69 +0,0 @@
|
|||
// TODO: dropdown item padding
|
||||
$dropdown-item-padding-x: 1em;
|
||||
$dropdown-item-padding-y: .5em;
|
||||
|
||||
// TODO: popup padding
|
||||
$popup-padding-x: 2px;
|
||||
$popup-padding-y: 2px;
|
||||
|
||||
@include exports( "common/popup" ) {
|
||||
|
||||
// Layout
|
||||
.k-popup {
|
||||
margin: 0;
|
||||
padding: $popup-padding-y 0;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
|
||||
.k-item {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.k-animation-container {
|
||||
.k-popup {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Theme
|
||||
.k-popup {
|
||||
@include appearance( popup );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@include exports( "common/list" ) {
|
||||
|
||||
// Layout
|
||||
.k-list-scroller {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
.k-list {
|
||||
height: auto;
|
||||
}
|
||||
.k-list .k-item {
|
||||
padding: 3px $dropdown-item-padding-x;
|
||||
}
|
||||
|
||||
|
||||
// Theme
|
||||
.k-list {}
|
||||
.k-list .k-state-hover {
|
||||
@include appearance( hovered-list-item );
|
||||
}
|
||||
.k-list .k-state-selected {
|
||||
@include appearance( selected-list-item );
|
||||
}
|
||||
.k-list .k-state-focused {
|
||||
border-color: $node-selected-border;
|
||||
// TODO: consider extracting focused shadow to variable
|
||||
// sass-lint:disable no-color-literals
|
||||
box-shadow: inset 0 0 5px rgba( $node-selected-border, .5 );
|
||||
// sass-lint:disable no-color-literals
|
||||
}
|
||||
}
|
Загрузка…
Ссылка в новой задаче