From 08eae0bb812357495f7ca00048a9a1b2d02114be Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Sun, 27 Sep 2020 15:29:40 +0400 Subject: [PATCH 1/4] Add rounded property for action buttons --- src/components/Button/SButton.vue | 37 ++++++++++++++++++++----------- src/stories/SButton.stories.ts | 4 ++++ 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue index ce9ee5ff..a6b0b8af 100644 --- a/src/components/Button/SButton.vue +++ b/src/components/Button/SButton.vue @@ -9,7 +9,7 @@ :disabled="disabled" :loading="isLoading" :autofocus="autofocus" - :circle="type === ButtonTypes.ACTION" + :circle="type === ButtonTypes.ACTION && rounded" :icon="elementIcon" @click="handleClick" > @@ -40,6 +40,12 @@ export default class SButton extends Vue { * By default it's set to `"primary"` */ @Prop({ default: ButtonTypes.PRIMARY, type: String }) readonly type!: string + /** + * Rounded property for `type="action"` buttons. + * + * By default it's set to `false` + */ + @Prop({ default: false, type: Boolean }) readonly rounded!: boolean /** * Size of button. Possible values: `"big"`, `"medium"`, `"small"`. * @@ -116,19 +122,20 @@ export default class SButton extends Vue { get computedClasses (): Array { const cssClasses: Array = [] + // TODO: change to `s-${size}` if ((this.elForm || this.elFormItem || {}).size) { cssClasses.push((this.elForm || this.elFormItem).size) } else if ((Object.values(ButtonSize) as Array).includes(this.size)) { cssClasses.push(this.size) } if ((Object.values(ButtonTypes) as Array).includes(this.type)) { - cssClasses.push(this.type) + cssClasses.push(`s-${this.type}`) } if (this.isLoading) { - cssClasses.push('loading') + cssClasses.push('s-loading') } if (this.alternative) { - cssClasses.push('alternative') + cssClasses.push('s-alternative') } return cssClasses } @@ -180,7 +187,7 @@ export default class SButton extends Vue { diff --git a/src/components/Breadcrumb/SBreadcrumbItem.vue b/src/components/Breadcrumb/SBreadcrumbItem.vue index 7d577779..0e324a7d 100644 --- a/src/components/Breadcrumb/SBreadcrumbItem.vue +++ b/src/components/Breadcrumb/SBreadcrumbItem.vue @@ -28,9 +28,9 @@ export default class SBreadcrumbItem extends Vue { diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker.vue index 316fa2a3..6500b96b 100644 --- a/src/components/DatePicker/SDatePicker.vue +++ b/src/components/DatePicker/SDatePicker.vue @@ -265,37 +265,37 @@ export default class SDatePicker extends Vue { width: 100%; } .el-range-separator { - color: $color-neutral-tertiary; + color: $s-color-neutral-tertiary; } .el-input__inner, .el-range-input { &::placeholder { - color: $color-neutral-secondary; + color: $s-color-neutral-secondary; opacity: 1; // Firefox } } &.is-active { - border-color: $color-neutral-border; + border-color: $s-color-neutral-border; } } &.has-value { .el-date-editor .el-range-separator { - color: $color-basic-black; + color: $s-color-basic-black; } } &.input { - min-height: $size-big; + min-height: $s-size-big; .el-input__inner { - height: $size-big; + height: $s-size-big; padding: 0 15px; - border: 1px solid $color-neutral-placeholder; - background-color: $color-neutral-placeholder; + border: 1px solid $s-color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; } &:hover { .el-input__inner { - border-color: $color-neutral-hover; + border-color: $s-color-neutral-hover; } .el-input__inner, .placeholder { - background-color: $color-neutral-hover; + background-color: $s-color-neutral-hover; } } .placeholder + .el-date-editor { @@ -308,25 +308,25 @@ export default class SDatePicker extends Vue { } &.focused { .el-input__inner { - border-color: $color-neutral-border; + border-color: $s-color-neutral-border; } .el-input__inner, .placeholder { - background-color: $color-basic-white; + background-color: $s-color-basic-white; } } &.disabled { .el-input__inner { - border-color: $color-neutral-border; + border-color: $s-color-neutral-border; } .el-input__inner, .placeholder { - color: $color-neutral-secondary; - background-color: $color-neutral-placeholder; + color: $s-color-neutral-secondary; + background-color: $s-color-neutral-placeholder; } } } .placeholder { // TODO: add default animation from material-ui - color: $color-neutral-secondary; + color: $s-color-neutral-secondary; text-align: left; font-size: 12px; padding: 0 15px; @@ -337,7 +337,7 @@ export default class SDatePicker extends Vue { position: absolute; z-index: 1; width: calc(100% - 15px); - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; pointer-events: none; } &.select { @@ -349,10 +349,10 @@ export default class SDatePicker extends Vue { border-radius: 8px; padding-left: 12px; &:hover { - border-color: $color-neutral-inactive; + border-color: $s-color-neutral-inactive; } &::placeholder, .el-range-input::placeholder { - color: $color-neutral-tertiary; + color: $s-color-neutral-tertiary; font-weight: bold; } } @@ -362,13 +362,13 @@ export default class SDatePicker extends Vue { right: 10px; top: 30%; pointer-events: none; - color: $color-neutral-tertiary; + color: $s-color-neutral-tertiary; transition: transform .3s; } &.focused { .el-date-editor.el-input__inner, .el-date-editor .el-input__inner { - border-color: $color-neutral-inactive; + border-color: $s-color-neutral-inactive; } &:not(.disabled) .s-icon-chevron-bottom { transform: rotate(180deg); @@ -376,31 +376,31 @@ export default class SDatePicker extends Vue { } &.has-value { .s-icon-chevron-bottom { - color: $color-basic-black; + color: $s-color-basic-black; } } &.disabled { .el-date-editor.el-input__inner, .el-date-editor .el-input__inner { - color: $color-neutral-inactive; - border-color: $color-neutral-border; - background-color: $color-basic-white; + color: $s-color-neutral-inactive; + border-color: $s-color-neutral-border; + background-color: $s-color-basic-white; &::placeholder { - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; } .el-range-input { - background-color: $color-basic-white; - color: $color-neutral-inactive; + background-color: $s-color-basic-white; + color: $s-color-neutral-inactive; &::placeholder { - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; } } .el-range-separator { - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; } } .s-icon-chevron-bottom { - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; } } } @@ -412,77 +412,77 @@ export default class SDatePicker extends Vue { .el-picker-panel__link-btn, .el-time-panel__btn, .el-date-range-picker__time-header > .el-icon-arrow-right { - color: $color-basic-black; + color: $s-color-basic-black; } .el-picker-panel { - border-color: $color-neutral-hover; + border-color: $s-color-neutral-hover; .el-picker-panel__content { .el-date-table { td { &.available:hover { - color: $color-main-brand; + color: $s-color-main-brand; } &.next-month, &.prev-month { - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; } } th { - border-bottom-color: $color-neutral-hover; + border-bottom-color: $s-color-neutral-hover; } } } .el-picker-panel__footer { - border-top-color: $color-neutral-hover; + border-top-color: $s-color-neutral-hover; > .el-button { height: 32px; border-radius: 4px; } } div[x-arrow].popper__arrow { - border-bottom-color: $color-neutral-hover; + border-bottom-color: $s-color-neutral-hover; } } .el-time-panel { border-radius: 4px; - border-color: $color-neutral-hover; + border-color: $s-color-neutral-hover; .el-time-panel__footer { - border-top-color: $color-neutral-hover; + border-top-color: $s-color-neutral-hover; } .el-time-spinner__item { &.active:not(.disabled) { - color: $color-basic-black; + color: $s-color-basic-black; } &:hover:not(.disabled):not(.active) { - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; } } .el-time-panel__content { &::after, &::before { - border-top-color: $color-neutral-hover; - border-bottom-color: $color-neutral-hover; + border-top-color: $s-color-neutral-hover; + border-bottom-color: $s-color-neutral-hover; } } } .el-date-table.is-week-mode .el-date-table__row { &.current, &:hover { div { - background-color: $color-main-hover-light; + background-color: $s-color-main-hover-light; } } } .el-month-table td.in-range div { - background-color: $color-main-hover-light; + background-color: $s-color-main-hover-light; &:hover { - background-color: $color-main-hover-light; + background-color: $s-color-main-hover-light; } } .el-date-table td.in-range div { - background-color: $color-main-hover-light; + background-color: $s-color-main-hover-light; &:hover { - background-color: $color-main-hover-light; + background-color: $s-color-main-hover-light; } } .el-date-range-picker__content.is-left { - border-right-color: $color-neutral-hover; + border-right-color: $s-color-neutral-hover; } diff --git a/src/components/Dialog/SDialog.vue b/src/components/Dialog/SDialog.vue index 258c6506..d15e4140 100644 --- a/src/components/Dialog/SDialog.vue +++ b/src/components/Dialog/SDialog.vue @@ -213,7 +213,7 @@ export default class SDialog extends Vue { .el-dialog__title { font-weight: bold; font-size: 16px; - color: $color-basic-black; + color: $s-color-basic-black; } > * { word-break: break-word; diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown.vue index bd0e5064..d5e4c6db 100644 --- a/src/components/Dropdown/SDropdown.vue +++ b/src/components/Dropdown/SDropdown.vue @@ -201,11 +201,11 @@ export default class SDropdown extends Vue { .el-dropdown__caret-button { &.secondary { &::before { - background-color: $color-neutral-border; + background-color: $s-color-neutral-border; } &:hover, &:active, &:focus { &::before { - background-color: $color-main-brand; + background-color: $s-color-main-brand; } } } diff --git a/src/components/Dropdown/SDropdownItem.vue b/src/components/Dropdown/SDropdownItem.vue index 9e729274..b3e04fd9 100644 --- a/src/components/Dropdown/SDropdownItem.vue +++ b/src/components/Dropdown/SDropdownItem.vue @@ -49,8 +49,8 @@ export default class SDropdownItem extends Vue { .el-dropdown-menu__item:not(.is-disabled) { &:hover, &:focus { - background-color: $color-neutral-placeholder; - color: $color-basic-black; + background-color: $s-color-neutral-placeholder; + color: $s-color-basic-black; } } diff --git a/src/components/Form/SFormItem.vue b/src/components/Form/SFormItem.vue index 1c7f347c..c65b50be 100644 --- a/src/components/Form/SFormItem.vue +++ b/src/components/Form/SFormItem.vue @@ -141,42 +141,42 @@ export default class SFormItem extends Vue { position: relative; padding-top: 8px; padding-left: 30px; - color: $color-basic-black; + color: $s-color-basic-black; &::before { content: ''; } } > [class^="s-input"]:not(.disabled) { .placeholder { - color: $color-error; - background-color: $color-main-base; + color: $s-color-error; + background-color: $s-color-main-base; } input, textarea { - background-color: $color-main-base; + background-color: $s-color-main-base; &::placeholder { - color: $color-error; + color: $s-color-error; } } &:hover { .placeholder, .el-input > input, .el-textarea > textarea { - background-color: $color-main-hover-light; + background-color: $s-color-main-hover-light; } .el-input > input, .el-textarea > textarea { - border-color: $color-error; + border-color: $s-color-error; } } &.focused { .placeholder, .el-input > input, .el-textarea > textarea { - background-color: $color-basic-white; + background-color: $s-color-basic-white; } .el-input > input, .el-textarea > textarea { - border-color: $color-error; + border-color: $s-color-error; } } } @@ -186,7 +186,7 @@ export default class SFormItem extends Vue { bottom: 0; left: 4px; font-size: 16px; - color: $color-error; + color: $s-color-error; } } } diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue index 5f8a87fc..a31c998e 100644 --- a/src/components/Input/SInput.vue +++ b/src/components/Input/SInput.vue @@ -239,14 +239,14 @@ export default class SInput extends Vue { .s-input { font-family: $font-family-default; width: 100%; - min-height: $size-big; + min-height: $s-size-big; position: relative; .el-input__suffix { z-index: 1; } .placeholder { // TODO: add default animation from material-ui - color: $color-neutral-secondary; + color: $s-color-neutral-secondary; text-align: left; font-size: 12px; padding: 0 15px; @@ -257,7 +257,7 @@ export default class SInput extends Vue { position: absolute; z-index: 1; width: calc(100% - 15px); - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; pointer-events: none; } .el-input, @@ -265,11 +265,11 @@ export default class SInput extends Vue { height: 100%; > input, > textarea { - height: $size-big; - border: 1px solid $color-neutral-placeholder; - background-color: $color-neutral-placeholder; + height: $s-size-big; + border: 1px solid $s-color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; &::placeholder { - color: $color-neutral-secondary; + color: $s-color-neutral-secondary; opacity: 1; // Firefox } } @@ -284,34 +284,34 @@ export default class SInput extends Vue { .placeholder, .el-input > input, .el-textarea > textarea { - background-color: $color-neutral-hover; + background-color: $s-color-neutral-hover; } .el-input > input, .el-textarea > textarea { - border-color: $color-neutral-hover; + border-color: $s-color-neutral-hover; } } &.focused { .placeholder, .el-input > input, .el-textarea > textarea { - background-color: $color-basic-white; + background-color: $s-color-basic-white; } .el-input > input, .el-textarea > textarea { - border-color: $color-neutral-border; + border-color: $s-color-neutral-border; } } &.disabled { .placeholder, .el-input > input, .el-textarea > textarea { - color: $color-neutral-secondary; - background-color: $color-neutral-placeholder; + color: $s-color-neutral-secondary; + background-color: $s-color-neutral-placeholder; } .el-input > input, .el-textarea > textarea { - border-color: $color-neutral-border; + border-color: $s-color-neutral-border; } } &.autofill { @@ -321,7 +321,7 @@ export default class SInput extends Vue { } .el-input > input { &:-webkit-autofill { - color: $color-basic-black !important; + color: $s-color-basic-black !important; animation-name: onAutoFillStart; // Expose a hook for JavaScript when auto fill is shown } &:not(:-webkit-autofill) { diff --git a/src/components/Input/SJsonInput.vue b/src/components/Input/SJsonInput.vue index 840dbc43..aab8ac66 100644 --- a/src/components/Input/SJsonInput.vue +++ b/src/components/Input/SJsonInput.vue @@ -116,8 +116,8 @@ $color-ide-boolean: #0000FF; .s-json-input { width: 100%; - border: 1px solid $color-neutral-border; - border-radius: $border-radius-default; + border: 1px solid $s-color-neutral-border; + border-radius: $s-border-radius-default; &.disabled { .ace-jsoneditor { pointer-events: none; @@ -126,7 +126,7 @@ $color-ide-boolean: #0000FF; } .ace_scroller, .ace_gutter-active-line { - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; } } } @@ -151,11 +151,11 @@ $color-ide-boolean: #0000FF; .ace_fold { border: none; background: none; - color: $color-basic-black; + color: $s-color-basic-black; margin-top: -13px; } .ace_text-layer { - color: $color-basic-black; + color: $s-color-basic-black; } .ace_variable { color: $color-ide-variable; @@ -176,10 +176,10 @@ $color-ide-boolean: #0000FF; border-top-right-radius: 3px; .ace_marker-layer { .ace_active-line { - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; } .ace_selection { - background: $color-neutral-border; + background: $s-color-neutral-border; } } } @@ -187,8 +187,8 @@ $color-ide-boolean: #0000FF; .jsoneditor-statusbar { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; - background-color: $color-neutral-placeholder; - color: $color-neutral-secondary; + background-color: $s-color-neutral-placeholder; + color: $s-color-neutral-secondary; .jsoneditor-parse-error-icon { // If full error message will be needed, then it should be removed display: none !important; @@ -196,9 +196,9 @@ $color-ide-boolean: #0000FF; } } .ace_gutter { - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; &-active-line { - background-color: $color-neutral-border; + background-color: $s-color-neutral-border; } // .ace_gutter-cell.ace_error { // @extend .s-icon-error; // TODO: fix the path for icon @@ -210,10 +210,10 @@ $color-ide-boolean: #0000FF; } .ace_tooltip { font-family: $font-family-default; - background: $color-basic-black; - border-color: $color-basic-black; - color: $color-basic-white; - border-radius: $border-radius-default; + background: $s-color-basic-black; + border-color: $s-color-basic-black; + color: $s-color-basic-white; + border-radius: $s-border-radius-default; padding: 10px; font-size: 12px; line-height: 1.2; diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue index 4f1b1aaa..1955da6d 100644 --- a/src/components/Pagination/SPagination.vue +++ b/src/components/Pagination/SPagination.vue @@ -201,16 +201,16 @@ export default class SPagination extends Vue { .el-pagination { .btn-prev, .btn-next { - color: $color-basic-black; + color: $s-color-basic-black; } button:disabled { - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; } .el-pagination__sizes { .el-select .el-input { width: 65px; .el-select__caret, .el-input__inner { - color: $color-basic-black; + color: $s-color-basic-black; font-weight: bold; } .el-select__caret { @@ -220,12 +220,12 @@ export default class SPagination extends Vue { border-radius: 8px; padding-right: 20px; padding-left: 5px; - background-color: $color-neutral-placeholder; - border-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; + border-color: $s-color-neutral-placeholder; } &.is-disabled { .el-select__caret, .el-input__inner { - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; } } } @@ -233,47 +233,47 @@ export default class SPagination extends Vue { .el-pagination__editor.el-input { .el-input__inner { border-radius: 8px; - background-color: $color-neutral-placeholder; - border-color: $color-neutral-placeholder; - color: $color-basic-black; + background-color: $s-color-neutral-placeholder; + border-color: $s-color-neutral-placeholder; + color: $s-color-basic-black; } &.is-disabled .el-input__inner { - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; } } .el-pagination__total, .per-page-text, .el-pagination__jump { - color: $color-neutral-secondary; + color: $s-color-neutral-secondary; font-weight: normal; } .el-pager li { - color: $color-basic-black; + color: $s-color-basic-black; &.btn-quicknext, &.btn-quickprev { - color: $color-basic-black; + color: $s-color-basic-black; } &:not(.disabled) { &:hover, &.active { - color: $color-main-brand; + color: $s-color-main-brand; } } &.disabled { - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; } } &.is-background { .el-pager li { - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; &.disabled { - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; } } .btn-prev, .btn-next { - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; &:disabled { - color: $color-neutral-inactive; - background-color: $color-neutral-placeholder; + color: $s-color-neutral-inactive; + background-color: $s-color-neutral-placeholder; } &:not(:disabled):hover { - color: $color-main-brand; + color: $s-color-main-brand; } } } diff --git a/src/components/Radio/SRadio.vue b/src/components/Radio/SRadio.vue index 19ded97c..975acd3e 100644 --- a/src/components/Radio/SRadio.vue +++ b/src/components/Radio/SRadio.vue @@ -79,7 +79,7 @@ export default class SRadio extends Vue { .el-radio { &.big { @extend .big; - line-height: $size-big; + line-height: $s-size-big; &.is-bordered { padding-top: 18px; } @@ -95,7 +95,7 @@ export default class SRadio extends Vue { } &.medium { @extend .medium; - line-height: $size-medium; + line-height: $s-size-medium; > .el-radio__input .el-radio__inner { width: 16px; height: 16px; @@ -108,7 +108,7 @@ export default class SRadio extends Vue { } &.small { @extend .small; - line-height: $size-small; + line-height: $s-size-small; &.is-bordered { padding-top: 9px; } @@ -128,33 +128,33 @@ export default class SRadio extends Vue { &.is-bordered { line-height: 0; &.is-disabled { - border-color: $color-neutral-border; + border-color: $s-color-neutral-border; } } > .el-radio__input { .el-radio__inner { - background-color: $color-basic-white; + background-color: $s-color-basic-white; &::after { - background-color: $color-main-brand; + background-color: $s-color-main-brand; } } &.is-checked .el-radio__inner { - background-color: $color-basic-white; + background-color: $s-color-basic-white; } &.is-disabled { .el-radio__inner { - background-color: $color-neutral-placeholder; - border-color: $color-neutral-border; + background-color: $s-color-neutral-placeholder; + border-color: $s-color-neutral-border; } &.is-checked .el-radio__inner { - background-color: $color-neutral-placeholder; - border-color: $color-neutral-border; + background-color: $s-color-neutral-placeholder; + border-color: $s-color-neutral-border; &::after { - background-color: $color-neutral-inactive; + background-color: $s-color-neutral-inactive; } } & + span.el-radio__label { - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; } } } diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue index fe3bc35f..88cba035 100644 --- a/src/components/ScrollSections/SScrollSections.vue +++ b/src/components/ScrollSections/SScrollSections.vue @@ -229,7 +229,7 @@ export default class SScrollSections extends Vue { &.disabled { cursor: not-allowed; pointer-events: none; - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; border-left: none; } } @@ -237,7 +237,7 @@ export default class SScrollSections extends Vue { } .s-scroll-content { padding-bottom: 90%; - color: $color-basic-black; + color: $s-color-basic-black; .title { font-size: 16px; } diff --git a/src/components/Select/SOptionGroup.vue b/src/components/Select/SOptionGroup.vue index df01ef52..abddf8b7 100644 --- a/src/components/Select/SOptionGroup.vue +++ b/src/components/Select/SOptionGroup.vue @@ -26,9 +26,9 @@ export default class SOptionGroup extends Vue { @import "../../styles/variables.scss"; .el-select-group__wrap:not(:last-of-type)::after { - background-color: $color-neutral-hover; + background-color: $s-color-neutral-hover; } .el-select-group__title { - color: $color-neutral-tertiary; + color: $s-color-neutral-tertiary; } diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue index 8ed019e1..7eb7798f 100644 --- a/src/components/Select/SSelect.vue +++ b/src/components/Select/SSelect.vue @@ -212,40 +212,40 @@ export default class SSelect extends Vue { } .el-input { &.is-focus .el-input__inner { - border-color: $color-neutral-placeholder; + border-color: $s-color-neutral-placeholder; } .el-input__inner { &::placeholder { - color: $color-neutral-secondary; + color: $s-color-neutral-secondary; opacity: 1; // Firefox } } .el-select__caret { - color: $color-neutral-secondary; + color: $s-color-neutral-secondary; } } } &.input { .el-select { .el-input__inner { - height: $size-big; + height: $s-size-big; padding: 0 15px; - border: 1px solid $color-neutral-placeholder; - background-color: $color-neutral-placeholder; + border: 1px solid $s-color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; &:focus { - border-color: $color-neutral-placeholder; + border-color: $s-color-neutral-placeholder; } } } &:hover { .el-select { .el-input__inner { - border-color: $color-neutral-hover; - background-color: $color-neutral-hover; + border-color: $s-color-neutral-hover; + background-color: $s-color-neutral-hover; } } .placeholder { - background-color: $color-neutral-hover; + background-color: $s-color-neutral-hover; } } .placeholder + .el-select { @@ -259,37 +259,37 @@ export default class SSelect extends Vue { &.focused { .el-select { .el-input__inner { - border-color: $color-neutral-border; - background-color: $color-basic-white; + border-color: $s-color-neutral-border; + background-color: $s-color-basic-white; } } .placeholder { - background-color: $color-basic-white; + background-color: $s-color-basic-white; } } &.disabled { .el-select { .el-select__caret { - color: $color-neutral-secondary; + color: $s-color-neutral-secondary; } .el-input__inner, .el-input__inner:hover { - border-color: $color-neutral-border; - color: $color-neutral-secondary; - background-color: $color-neutral-placeholder; + border-color: $s-color-neutral-border; + color: $s-color-neutral-secondary; + background-color: $s-color-neutral-placeholder; &::placeholder { - color: $color-neutral-secondary; + color: $s-color-neutral-secondary; } } } .placeholder { - color: $color-neutral-secondary; - background-color: $color-neutral-placeholder; + color: $s-color-neutral-secondary; + background-color: $s-color-neutral-placeholder; } } } .placeholder { // TODO: add default animation from material-ui - color: $color-neutral-secondary; + color: $s-color-neutral-secondary; text-align: left; font-size: 12px; padding: 0 15px; @@ -300,7 +300,7 @@ export default class SSelect extends Vue { position: absolute; z-index: 1; width: calc(100% - 15px); - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; pointer-events: none; } &.select { @@ -310,53 +310,53 @@ export default class SSelect extends Vue { padding-left: 12px; font-weight: bold; &:hover { - border-color: $color-neutral-inactive; + border-color: $s-color-neutral-inactive; } &::placeholder { - color: $color-neutral-tertiary; + color: $s-color-neutral-tertiary; font-weight: bold; } &:focus { - border-color: $color-neutral-inactive; + border-color: $s-color-neutral-inactive; } } .el-select__caret { - color: $color-neutral-tertiary; + color: $s-color-neutral-tertiary; } } &.focused { .el-select { .el-input__inner { - color: $color-basic-black; - border-color: $color-neutral-inactive; + color: $s-color-basic-black; + border-color: $s-color-neutral-inactive; &::placeholder { - color: $color-basic-black; + color: $s-color-basic-black; } } .el-select__caret { - color: $color-basic-black; + color: $s-color-basic-black; } } } &.has-value { .el-select { .el-select__caret { - color: $color-basic-black; + color: $s-color-basic-black; } } } &.disabled { .el-select { .el-input__inner { - color: $color-neutral-inactive; - border-color: $color-neutral-border; - background-color: $color-basic-white; + color: $s-color-neutral-inactive; + border-color: $s-color-neutral-border; + background-color: $s-color-basic-white; &::placeholder { - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; } } .el-select__caret { - color: $color-neutral-inactive; + color: $s-color-neutral-inactive; } } } @@ -367,24 +367,24 @@ export default class SSelect extends Vue { background-color: transparent; } &:hover { - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; } &.is-disabled { - color: $color-neutral-inactive;; + color: $s-color-neutral-inactive;; } } .el-select-dropdown.is-multiple .el-select-dropdown__item { > span { padding-left: 16px; vertical-align: top; - color: $color-basic-black; + color: $s-color-basic-black; } &::before { font-family: "element-icons"; content: "\e6da"; - color: $color-basic-white; - border: 1px solid $color-neutral-border; - background-color: $color-basic-white; + color: $s-color-basic-white; + border: 1px solid $s-color-neutral-border; + background-color: $s-color-basic-white; font-size: 16px; font-weight: bold; padding: 1px; @@ -396,12 +396,12 @@ export default class SSelect extends Vue { background-color: transparent; } &:hover { - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; } &::before { - color: $color-basic-white; - background-color: $color-main-brand; - border-color: $color-main-brand; + color: $s-color-basic-white; + background-color: $s-color-main-brand; + border-color: $s-color-main-brand; } &::after { content: ''; diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs.vue index b2ef4019..f0690eca 100644 --- a/src/components/Tab/STabs.vue +++ b/src/components/Tab/STabs.vue @@ -136,33 +136,33 @@ export default class STabs extends Vue { } } &:not(.is-active) { - color: $color-basic-black; + color: $s-color-basic-black; } } .el-tab-pane { - color: $color-basic-black; + color: $s-color-basic-black; } .el-tabs__nav-wrap::after { - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; } .el-tabs--card { > .el-tabs__header { - border-bottom-color: $color-neutral-hover; + border-bottom-color: $s-color-neutral-hover; .el-tabs__nav { - border-color: $color-neutral-hover; + border-color: $s-color-neutral-hover; border-top-left-radius: 8px; border-top-right-radius: 8px; } .el-tabs__item { - border-left-color: $color-neutral-hover; + border-left-color: $s-color-neutral-hover; } } } .el-tabs--border-card { - border-color: $color-neutral-border; + border-color: $s-color-neutral-border; > .el-tabs__header { - background-color: $color-neutral-placeholder; - border-bottom-color: $color-neutral-border; + background-color: $s-color-neutral-placeholder; + border-bottom-color: $s-color-neutral-border; } } &.rounded { @@ -170,7 +170,7 @@ export default class STabs extends Vue { width: fit-content; } .el-tabs__nav-wrap { - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; border-radius: 8px; height: 32px; padding-top: 2px; @@ -187,7 +187,7 @@ export default class STabs extends Vue { padding: 0 32px; } &.is-active { - color: $color-basic-black; + color: $s-color-basic-black; background-color: #FFFFFF; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04); border-radius: 8px; diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue index 2c15c19a..a5776490 100644 --- a/src/components/Table/STable.vue +++ b/src/components/Table/STable.vue @@ -365,7 +365,7 @@ export default class STable extends Vue { @import "../../styles/variables.scss"; .el-table--enable-row-hover .el-table__body tr:hover > td { - background-color: $color-neutral-hover; + background-color: $s-color-neutral-hover; border-left: none; border-right: none; } @@ -376,7 +376,7 @@ export default class STable extends Vue { &.current-row > td, &.el-table__row--striped > td, &.el-table__row--striped.current-row > td { - background-color: $color-neutral-hover; + background-color: $s-color-neutral-hover; border-left: none; border-right: none; } @@ -388,24 +388,24 @@ export default class STable extends Vue { padding-left: 13px; } .el-table thead { - color: $color-neutral-tertiary; + color: $s-color-neutral-tertiary; } .el-table--group, .el-table--border, .el-table th.is-leaf, .el-table td, .el-table--border th { - border-color: $color-neutral-placeholder; + border-color: $s-color-neutral-placeholder; } .el-table--group::after, .el-table--border::after { - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; } .el-table:not(.el-table--border)::before { - background-color: $color-basic-white; + background-color: $s-color-basic-white; } .el-table tr:last-child td { - border-bottom-color: $color-basic-white; + border-bottom-color: $s-color-basic-white; } .el-table__header { label.el-checkbox.is-disabled { @@ -462,6 +462,6 @@ export default class STable extends Vue { } .el-table__header-wrapper tbody td, .el-table__footer-wrapper tbody td { - background-color: $color-neutral-placeholder; + background-color: $s-color-neutral-placeholder; } diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue index 1cd77a70..ad1fe903 100644 --- a/src/components/Tooltip/STooltip.vue +++ b/src/components/Tooltip/STooltip.vue @@ -129,11 +129,11 @@ export default class STooltip extends Vue { .el-tooltip__popper { &.is-dark { - background-color: $color-basic-black; + background-color: $s-color-basic-black; } &.is-light { - color: $color-basic-black; + color: $s-color-basic-black; } - border-color: $color-basic-black; + border-color: $s-color-basic-black; } diff --git a/src/styles/common.scss b/src/styles/common.scss index dd3796c6..4388d5c9 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -23,15 +23,15 @@ html { } .big { - height: $size-big; + height: $s-size-big; } .medium { - height: $size-medium; + height: $s-size-medium; } .small { - height: $size-small; + height: $s-size-small; } button > span { @@ -70,25 +70,25 @@ button > span { .el-message-box { .el-message-box__header { .el-message-box__title { - color: $color-basic-black; + color: $s-color-basic-black; font-size: 16px; } } .el-message-box__btns { button.el-button.el-button--default.el-button--small { - height: $size-medium; + height: $s-size-medium; font-size: 14px; border-radius: 4px; &:hover, &:active, &:focus { - color: $color-main-brand; - background-color: $color-basic-white; - border-color: $color-main-brand; + color: $s-color-main-brand; + background-color: $s-color-basic-white; + border-color: $s-color-main-brand; } &.el-button--primary { &:hover, &:active, &:focus { - color: $color-basic-white; - background-color: $color-main-hover; - border-color: $color-main-hover; + color: $s-color-basic-white; + background-color: $s-color-main-hover; + border-color: $s-color-main-hover; } } } diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss index c008b6b0..ada8c48f 100644 --- a/src/styles/element-variables.scss +++ b/src/styles/element-variables.scss @@ -1,14 +1,14 @@ @import "./variables.scss"; -$--color-primary: $color-main-brand; -$--color-danger: $color-error; -$--border-color-base: $color-neutral-border; -$--color-text-regular: $color-basic-black; +$--color-primary: $s-color-main-brand; +$--color-danger: $s-color-error; +$--border-color-base: $s-color-neutral-border; +$--color-text-regular: $s-color-basic-black; /* Menu --------------------------*/ // $--menu-background-color: $transparent; -// $--menu-item-hover-fill: $color-basic-white; +// $--menu-item-hover-fill: $s-color-basic-white; /* icon font path, required */ $--font-path: "~element-ui/lib/theme-chalk/fonts"; diff --git a/src/styles/icons.scss b/src/styles/icons.scss index 53039ba4..0bcd5135 100644 --- a/src/styles/icons.scss +++ b/src/styles/icons.scss @@ -9,7 +9,7 @@ line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: $color-basic-black; + color: $s-color-basic-black; } $icons-font: 'soramitsu-icons' !important; /*_____________________________________________Icons variables_____________________________________________*/ diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 5b688981..6f082b07 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,28 +1,28 @@ // Main colors -$color-main-brand: #D0021B; -$color-main-hover: #E75264; -$color-main-inactive: #F6CCD1; -$color-main-hover-light: #FEE6E7; -$color-main-base: #FFF9FA; +$s-color-main-brand: #D0021B !default; +$s-color-main-hover: #E75264 !default; +$s-color-main-inactive: #F6CCD1 !default; +$s-color-main-hover-light: #FEE6E7 !default; +$s-color-main-base: #FFF9FA !default; // Neutral colors -$color-neutral-primary: #53565A; -$color-neutral-secondary: #75787B; -$color-neutral-tertiary: #909296; -$color-neutral-inactive: #C8C9C7; -$color-neutral-border: #D9D9D6; -$color-neutral-hover: #F0F0F0; -$color-neutral-placeholder: #F1F3F4; +$s-color-neutral-primary: #53565A !default; +$s-color-neutral-secondary: #75787B !default; +$s-color-neutral-tertiary: #909296 !default; +$s-color-neutral-inactive: #C8C9C7 !default; +$s-color-neutral-border: #D9D9D6 !default; +$s-color-neutral-hover: #F0F0F0 !default; +$s-color-neutral-placeholder: #F1F3F4 !default; // UI events colors -$color-error: #F0000B; +$s-color-error: #F0000B !default; // Basic colors -$color-basic-black: #2D2926; -$color-basic-white: #FFF; +$s-color-basic-black: #2D2926 !default; +$s-color-basic-white: #FFF !default; // Size -$size-big: 56px; -$size-medium: 40px; -$size-small: 32px; +$s-size-big: 56px !default; +$s-size-medium: 40px !default; +$s-size-small: 32px !default; -$border-radius-default: 4px; +$s-border-radius-default: 4px !default; // Fonts @font-face { font-family: "soramitsu-icons"; From 2751faaa487c23bf613949e488619c7946ea2165 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 30 Sep 2020 09:21:13 +0400 Subject: [PATCH 3/4] Fix css class names --- src/components/Button/SButton.vue | 13 ++++---- src/components/Card/SCard.vue | 4 +-- src/components/Checkbox/SCheckbox.vue | 14 ++++---- src/components/Collapse/SCollapseItem.vue | 8 ++--- src/components/DatePicker/SDatePicker.vue | 40 ++++++++++------------- src/components/Dropdown/SDropdown.vue | 6 ++-- src/components/Icon/SIcon.vue | 2 +- src/components/Input/SInput.vue | 32 +++++++++--------- src/components/Input/SJsonInput.vue | 8 ++--- src/components/Radio/SRadio.vue | 14 ++++---- src/components/Select/SOption.vue | 5 --- src/components/Select/SSelect.vue | 34 +++++++++---------- src/components/Tab/STabs.vue | 4 +-- src/stories/Dropdown/SDropdown.stories.ts | 4 +-- src/styles/common.scss | 6 ++-- 15 files changed, 92 insertions(+), 102 deletions(-) diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue index 21bdc59e..c686eccd 100644 --- a/src/components/Button/SButton.vue +++ b/src/components/Button/SButton.vue @@ -122,11 +122,10 @@ export default class SButton extends Vue { get computedClasses (): Array { const cssClasses: Array = [] - // TODO: change to `s-${size}` if ((this.elForm || this.elFormItem || {}).size) { - cssClasses.push((this.elForm || this.elFormItem).size) + cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`) } else if ((Object.values(ButtonSize) as Array).includes(this.size)) { - cssClasses.push(this.size) + cssClasses.push(`s-${this.size}`) } if ((Object.values(ButtonTypes) as Array).includes(this.type)) { cssClasses.push(`s-${this.type}`) @@ -193,7 +192,7 @@ export default class SButton extends Vue { position: absolute; left: var(--s-button-loading-left); } - &.small { + &.s-small { padding: 9px 15px; i { left: calc(var(--s-button-loading-left) + 2px); @@ -269,21 +268,21 @@ export default class SButton extends Vue { } .s-action { - &.big { + &.s-big { width: $s-size-big; padding: 12px; i { font-size: 20px; } } - &.medium { + &.s-medium { width: $s-size-medium; padding: 10px; i { font-size: 18px; } } - &.small { + &.s-small { width: $s-size-small; padding: 9px; i { diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue index 84d36d10..c589d701 100644 --- a/src/components/Card/SCard.vue +++ b/src/components/Card/SCard.vue @@ -1,7 +1,7 @@