Skip to content

Commit

Permalink
chore(upload): prefix upload variables with $kendo-
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Added kendo prefix to all upload variables:

Change variable names from `$upload-*` to `$kendo-upload-*`.
  • Loading branch information
@TeyaVes @joneff
TeyaVes authored and joneff committed Dec 14, 2022
1 parent 3e767a8 commit d28ff89
Show file tree
Hide file tree
Showing 7 changed files with 191 additions and 191 deletions.
70 changes: 35 additions & 35 deletions packages/bootstrap/scss/upload/_variables.scss
View file
@@ -1,48 +1,48 @@
// Upload
$upload-border-width: 1px !default;
$upload-font-family: $font-family !default;
$upload-font-size: $font-size !default;
$upload-line-height: $line-height !default;
$upload-max-height: 300px !default;
$kendo-upload-border-width: 1px !default;
$kendo-upload-font-family: $font-family !default;
$kendo-upload-font-size: $font-size !default;
$kendo-upload-line-height: $line-height !default;
$kendo-upload-max-height: 300px !default;

$upload-bg: $component-bg !default;
$upload-text: $component-text !default;
$upload-border: $component-border !default;
$kendo-upload-bg: $component-bg !default;
$kendo-upload-text: $component-text !default;
$kendo-upload-border: $component-border !default;

$upload-dropzone-padding-x: k-map-get( $spacing, 2 ) !default;
$upload-dropzone-padding-y: k-map-get( $spacing, 2 ) !default;
$upload-dropzone-bg: $header-bg !default;
$upload-dropzone-text: $header-text !default;
$upload-dropzone-border: $upload-border !default;
$upload-dropzone-hover-bg: k-try-shade( $upload-dropzone-bg, .2 ) !default;
$kendo-upload-dropzone-padding-x: k-map-get( $spacing, 2 ) !default;
$kendo-upload-dropzone-padding-y: k-map-get( $spacing, 2 ) !default;
$kendo-upload-dropzone-bg: $header-bg !default;
$kendo-upload-dropzone-text: $header-text !default;
$kendo-upload-dropzone-border: $kendo-upload-border !default;
$kendo-upload-dropzone-hover-bg: k-try-shade( $kendo-upload-dropzone-bg, .2 ) !default;

$upload-status-text: $subtle-text !default;
$upload-status-text-opacity: null !default;
$kendo-upload-status-text: $subtle-text !default;
$kendo-upload-status-text-opacity: null !default;

$upload-item-padding-x: k-map-get( $spacing, 4 ) !default;
$upload-item-padding-y: k-map-get( $spacing, 4 ) !default;
$kendo-upload-item-padding-x: k-map-get( $spacing, 4 ) !default;
$kendo-upload-item-padding-y: k-map-get( $spacing, 4 ) !default;

$upload-multiple-items-spacing: 12px !default;
$kendo-upload-multiple-items-spacing: 12px !default;

$upload-validation-font-size: 11px !default;
$upload-icon-spacing: $icon-spacing !default;
$upload-icon-color: $subtle-text !default;
$kendo-upload-validation-font-size: 11px !default;
$kendo-upload-icon-spacing: $icon-spacing !default;
$kendo-upload-icon-color: $subtle-text !default;

$upload-item-image-width: 24px !default;
$upload-item-image-height: 34px !default;
$upload-item-image-border: 2px !default;
$kendo-upload-item-image-width: 24px !default;
$kendo-upload-item-image-height: 34px !default;
$kendo-upload-item-image-border: 2px !default;

$upload-group-icon-size: $icon-size-lg !default;
$kendo-upload-group-icon-size: $icon-size-lg !default;

$upload-progress-thickness: 2px !default;
$upload-progress-bg: $info !default;
$upload-progress-text: $component-text !default;
$kendo-upload-progress-thickness: 2px !default;
$kendo-upload-progress-bg: $info !default;
$kendo-upload-progress-text: $component-text !default;

$upload-success-bg: $success !default;
$upload-success-text: $success !default;
$kendo-upload-success-bg: $success !default;
$kendo-upload-success-text: $success !default;

$upload-error-bg: $error !default;
$upload-error-text: $error !default;
$upload-error-border: $error !default;
$kendo-upload-error-bg: $error !default;
$kendo-upload-error-text: $error !default;
$kendo-upload-error-border: $error !default;

$upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
$kendo-upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
70 changes: 35 additions & 35 deletions packages/classic/scss/upload/_variables.scss
View file
@@ -1,48 +1,48 @@
// Upload
$upload-border-width: 1px !default;
$upload-font-family: $font-family !default;
$upload-font-size: $font-size !default;
$upload-line-height: $line-height !default;
$upload-max-height: 300px !default;
$kendo-upload-border-width: 1px !default;
$kendo-upload-font-family: $font-family !default;
$kendo-upload-font-size: $font-size !default;
$kendo-upload-line-height: $line-height !default;
$kendo-upload-max-height: 300px !default;

$upload-bg: $component-bg !default;
$upload-text: $component-text !default;
$upload-border: $component-border !default;
$kendo-upload-bg: $component-bg !default;
$kendo-upload-text: $component-text !default;
$kendo-upload-border: $component-border !default;

$upload-dropzone-padding-x: k-map-get( $spacing, 2 ) !default;
$upload-dropzone-padding-y: k-map-get( $spacing, 2 ) !default;
$upload-dropzone-bg: $header-bg !default;
$upload-dropzone-text: $header-text !default;
$upload-dropzone-border: $upload-border !default;
$upload-dropzone-hover-bg: $hovered-bg !default;
$kendo-upload-dropzone-padding-x: k-map-get( $spacing, 2 ) !default;
$kendo-upload-dropzone-padding-y: k-map-get( $spacing, 2 ) !default;
$kendo-upload-dropzone-bg: $header-bg !default;
$kendo-upload-dropzone-text: $header-text !default;
$kendo-upload-dropzone-border: $kendo-upload-border !default;
$kendo-upload-dropzone-hover-bg: $hovered-bg !default;

$upload-status-text: $subtle-text !default;
$upload-status-text-opacity: null !default;
$kendo-upload-status-text: $subtle-text !default;
$kendo-upload-status-text-opacity: null !default;

$upload-item-padding-x: k-map-get( $spacing, 2 ) !default;
$upload-item-padding-y: k-map-get( $spacing, 2 ) !default;
$kendo-upload-item-padding-x: k-map-get( $spacing, 2 ) !default;
$kendo-upload-item-padding-y: k-map-get( $spacing, 2 ) !default;

$upload-multiple-items-spacing: 12px !default;
$kendo-upload-multiple-items-spacing: 12px !default;

$upload-validation-font-size: 11px !default;
$upload-icon-spacing: $icon-spacing !default;
$upload-icon-color: $subtle-text !default;
$kendo-upload-validation-font-size: 11px !default;
$kendo-upload-icon-spacing: $icon-spacing !default;
$kendo-upload-icon-color: $subtle-text !default;

$upload-item-image-width: 30px !default;
$upload-item-image-height: 30px !default;
$upload-item-image-border: 0px !default; // TODO: remove
$kendo-upload-item-image-width: 30px !default;
$kendo-upload-item-image-height: 30px !default;
$kendo-upload-item-image-border: 0px !default; // TODO: remove

$upload-group-icon-size: $icon-size-lg !default;
$kendo-upload-group-icon-size: $icon-size-lg !default;

$upload-progress-thickness: 2px !default;
$upload-progress-bg: $info !default;
$upload-progress-text: $component-text !default;
$kendo-upload-progress-thickness: 2px !default;
$kendo-upload-progress-bg: $info !default;
$kendo-upload-progress-text: $component-text !default;

$upload-success-bg: $success !default;
$upload-success-text: $success !default;
$kendo-upload-success-bg: $success !default;
$kendo-upload-success-text: $success !default;

$upload-error-bg: $error !default;
$upload-error-text: $error !default;
$upload-error-border: $error !default;
$kendo-upload-error-bg: $error !default;
$kendo-upload-error-text: $error !default;
$kendo-upload-error-border: $error !default;

$upload-focused-shadow: 0 0 0 2px rgba( black, .13 ) !default;
$kendo-upload-focused-shadow: 0 0 0 2px rgba( black, .13 ) !default;
46 changes: 23 additions & 23 deletions packages/default/scss/upload/_layout.scss
View file
@@ -1,13 +1,13 @@
@include exports("upload/layout") {

.k-upload {
border-width: $upload-border-width;
border-width: $kendo-upload-border-width;
border-style: solid;
box-sizing: border-box;
outline: 0;
font-family: $upload-font-family;
font-size: $upload-font-size;
line-height: $upload-line-height;
font-family: $kendo-upload-font-family;
font-size: $kendo-upload-font-size;
line-height: $kendo-upload-line-height;
position: relative;
display: block;
-webkit-touch-callout: none;
Expand All @@ -25,7 +25,7 @@

// Drop zone
.k-dropzone {
padding: $upload-dropzone-padding-y $upload-dropzone-padding-x;
padding: $kendo-upload-dropzone-padding-y $kendo-upload-dropzone-padding-x;
border-width: 0;
text-align: right;
display: flex;
Expand All @@ -51,7 +51,7 @@
position: relative;

> .k-icon {
margin-right: $upload-icon-spacing;
margin-right: $kendo-upload-icon-spacing;
}
}

Expand All @@ -72,7 +72,7 @@

// Upload files list
.k-upload-files {
max-height: $upload-max-height;
max-height: $kendo-upload-max-height;
overflow-y: auto;
margin: 0;
padding: 0;
Expand All @@ -97,7 +97,7 @@
}

.k-file {
padding: $upload-item-padding-y $upload-item-padding-x calc(#{$upload-item-padding-y} + #{$upload-progress-thickness});
padding: $kendo-upload-item-padding-y $kendo-upload-item-padding-x calc(#{$kendo-upload-item-padding-y} + #{$kendo-upload-progress-thickness});
border-width: 0 0 1px;
border-style: solid;
outline: none;
Expand Down Expand Up @@ -125,7 +125,7 @@
}

.k-upload-pct {
margin: 0 $upload-icon-spacing;
margin: 0 $kendo-upload-icon-spacing;
font-weight: normal;
vertical-align: middle;
}
Expand Down Expand Up @@ -159,23 +159,23 @@
.k-file-size,
.k-file-information,
.k-file-validation-message {
font-size: $upload-validation-font-size;
font-size: $kendo-upload-validation-font-size;
line-height: 1;
}

.k-file-extension-wrapper,
.k-multiple-files-extension-wrapper,
.k-file-invalid-extension-wrapper,
.k-multiple-files-invalid-extension-wrapper {
margin: ($upload-item-image-border / 2) 0;
margin: ($kendo-upload-item-image-border / 2) 0;
width: 24px;
height: 34px;
border-width: 2px;
border-style: solid;
font-size: ($font-size * .57);
text-transform: uppercase;
position: absolute;
top: $upload-item-padding-y;
top: $kendo-upload-item-padding-y;
}

.k-file-group-wrapper,
Expand All @@ -184,7 +184,7 @@
.k-multiple-files-invalid-group-wrapper {

.k-file-group {
font-size: $upload-group-icon-size;
font-size: $kendo-upload-group-icon-size;
}

.k-file-state {
Expand All @@ -211,7 +211,7 @@
.k-file-single > .k-file-extension-wrapper + .k-file-name-size-wrapper {
// 24px - image width
margin-left: calc( 24px + #{$spacer-x} );
// 34px - $upload-item-image-height; 2px - $upload-item-image-border;
// 34px - $kendo-upload-item-image-height; 2px - $kendo-upload-item-image-border;
min-height: 34px + (2px * 2);
display: block;
overflow: hidden;
Expand Down Expand Up @@ -305,53 +305,53 @@
.k-upload-files .k-file-name-size-wrapper {
margin-left: 0;
margin-right: 0;
min-height: $upload-group-icon-size;
min-height: $kendo-upload-group-icon-size;
display: block;
overflow: hidden;
flex: 1 0 0;
}

// old rendering
.k-file-multiple > .k-file-name-size-wrapper {
margin-left: $upload-item-padding-x;
margin-left: $kendo-upload-item-padding-x;
}

.k-multiple-files-wrapper,
.k-file-single > .k-file-name-size-wrapper,
.k-file > .k-file-name-size-wrapper {
margin-left: $padding-x;
margin-right: 0;
min-height: $upload-group-icon-size;
min-height: $kendo-upload-group-icon-size;
display: block;
overflow: hidden;
flex: 1 0 0;
}

.k-multiple-files-wrapper {
.k-file-name-size-wrapper {
margin-bottom: $upload-multiple-items-spacing;
margin-bottom: $kendo-upload-multiple-items-spacing;
display: block;
}

.k-file-information {
margin-top: -($upload-multiple-items-spacing / 3);
margin-top: -($kendo-upload-multiple-items-spacing / 3);
}
}

// old rendering
.k-progress {
height: $upload-progress-thickness;
height: $kendo-upload-progress-thickness;
position: absolute;
bottom: 0;
left: 0;
}

.k-progressbar {
height: $upload-progress-thickness;
height: $kendo-upload-progress-thickness;
position: absolute;
bottom: $upload-item-padding-y / 2;
bottom: $kendo-upload-item-padding-y / 2;
// successed
width: calc(100% - #{$upload-item-padding-x} * 2);
width: calc(100% - #{$kendo-upload-item-padding-x} * 2);

.k-progress {
position: absolute;
Expand Down

0 comments on commit d28ff89

Please sign in to comment.