evui 2.1.0 → 2.1.1

package/src/components/button/button.vue

@@ -6,15 +6,13 @@
     @click="onClick"
   >
     <span :class="`${prefixCls}-span`">
-      <slot/>
+      <slot />
     </span>
   </button>
 </template>
 
 <script>
-  import '@/styles/evui.css';
-
-  const prefixCls = 'evui-btn';
+  const prefixCls = 'ev-btn';
 
   export default {
     props: {
@@ -22,8 +20,8 @@
         type: String,
         default: 'button',
         validator(value) {
-            const list = ['button', 'submit', 'reset'];
-            return list.indexOf(value) > -1;
+          const list = ['button', 'submit', 'reset'];
+          return list.indexOf(value) > -1;
         },
       },
       type: {
@@ -61,9 +59,13 @@
     data() {
       return {
         prefixCls,
-        btnClass: this._getBtnClass(),
       };
     },
+    computed: {
+      btnClass() {
+        return this._getBtnClass();
+      },
+    },
     methods: {
       onClick(event) {
         this.$emit('click', event);
@@ -80,239 +82,312 @@
   };
 </script>
 
-<style>
-.evui-btn {
-  display: inline-block;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  vertical-align: middle;
-  line-height: 100%;
-  font-size: 12px;
-  cursor: pointer;
-  user-select: none;
-  transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;
-}
-.evui-btn:hover {
-  opacity: 0.8;
-}
-.evui-btn.active,
-.evui-btn:active {
-  background-color:#fff;
-  border-color:#2b85e4;
-}
-.evui-btn.disabled>*,
-.evui-btn[disabled]>* {
-  pointer-events: none;
-}
-.evui-btn.disabled,
-.evui-btn.disabled:active,
-.evui-btn.disabled:hover,
-.evui-btn[disabled],
-.evui-btn[disabled]:active,
-.evui-btn[disabled]:hover {
-  color:#bbbec4;
-  background-color:#f7f7f7;
-  border-color:#dddee1;
-}
-
-.evui-btn-span{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/** evui-btn > type(primary) **/
-
-.evui-btn-primary {
-  color:#fff;
-  background-color:#2d8cf0;
-  border-color:#2d8cf0;
-}
-.evui-btn-primary:hover {
-  background-color:#50A5F0;
-  border-color:#50A5F0;
-}
-.evui-btn-primary.active,
-.evui-btn-primary:active {
-  background-color:#2b85e4;
-  border-color:#2b85e4;
-}
-.evui-btn-primary.disabled,
-.evui-btn-primary.disabled:active,
-.evui-btn-primary.disabled:hover,
-.evui-btn-primary[disabled],
-.evui-btn-primary[disabled]:active,
-.evui-btn-primary[disabled]:hover {
-  color:#bbbec4;
-  background-color:#f7f7f7;
-  border-color:#dddee1;
-}
-
-/** evui-btn > type(gost) **/
-
-.evui-btn-ghost {
-  color: #495060;
-  background-color: transparent;
-  border-color: #dddee1
-}
-.evui-btn-ghost:hover {
-  color: #57a3f3;
-  background-color: transparent;
-  border-color: #57a3f3
-}
-.evui-btn-ghost.active,
-.evui-btn-ghost:active {
-  color: #2b85e4;
-  background-color: transparent;
-  border-color: #2b85e4
-}
-.evui-btn-ghost:focus {
-  -webkit-box-shadow: 0 0 0 2px rgba(45, 140, 240, .2);
-  box-shadow: 0 0 0 2px rgba(45, 140, 240, .2)
-}
-.evui-btn-ghost.disabled,
-.evui-btn-ghost.disabled:active,
-.evui-btn-ghost.disabled:focus,
-.evui-btn-ghost.disabled:hover,
-.evui-btn-ghost[disabled],
-.evui-btn-ghost[disabled]:active,
-.evui-btn-ghost[disabled]:focus,
-.evui-btn-ghost[disabled]:hover{
-  color: #bbbec4;
-  background-color: #f7f7f7;
-  border-color: #dddee1
-}
-
-/** evui-btn > type(dashed) **/
-
-.evui-btn-dashed {
-  color: #495060;
-  background-color: transparent;
-  border-color: #dddee1;
-  border-style: dashed
-}
-.evui-btn-dashed:hover {
-  color: #6d7380;
-  background-color: rgba(255, 255, 255, .2);
-  border-color: #e4e5e7
-}
-.evui-btn-dashed.active,
-.evui-btn-dashed:active {
-  color: #454c5b;
-  background-color: rgba(0, 0, 0, .05);
-  border-color: rgba(0, 0, 0, .05)
-}
-.evui-btn-dashed.disabled,
-.evui-btn-dashed.disabled:active,
-.evui-btn-dashed.disabled:focus,
-.evui-btn-dashed.disabled:hover,
-.evui-btn-dashed[disabled],
-.evui-btn-dashed[disabled]:active,
-.evui-btn-dashed[disabled]:focus,
-.evui-btn-dashed[disabled]:hover,
-fieldset[disabled] .evui-btn-dashed,
-fieldset[disabled] .evui-btn-dashed:active,
-fieldset[disabled] .evui-btn-dashed:focus,
-fieldset[disabled] .evui-btn-dashed:hover {
-  color: #bbbec4;
-  background-color: #f7f7f7;
-  border-color: #dddee1
-}
-.evui-btn-dashed:hover {
-  color: #57a3f3;
-  background-color: transparent;
-  border-color: #57a3f3
-}
-.evui-btn-dashed:active {
-  color: #2b85e4;
-  background-color: transparent;
-  border-color: #2b85e4
-}
-.evui-btn-dashed:focus {
-  -webkit-box-shadow: 0 0 0 2px rgba(45, 140, 240, .2);
-  box-shadow: 0 0 0 2px rgba(45, 140, 240, .2)
-}
-
-/** evui-btn > type(text) **/
-
-.evui-btn-text {
-  color: #000000;
-  background-color: transparent;
-  border-color: transparent;
-}
-.evui-btn-text:hover {
-  color: #6d7380;
-  background-color: rgba(255,255,255,.2);
-  border-color: rgba(255,255,255,.2)
-}
-.evui-btn-text:active {
-  color: #454c5b;
-  background-color: rgba(0,0,0,.05);
-  border-color: rgba(0,0,0,.05)
-}
-.evui-btn-text:hover {
-  color: #57a3f3;
-  background-color: transparent;
-  border-color: transparent;
-}
-.evui-btn-text:active {
-  color:#2b85e4;
-  background-color:transparent;
-  border-color:transparent
-}
-.evui-btn-text.disabled,
-.evui-btn-text.disabled:active,
-.evui-btn-text.disabled:hover,
-.evui-btn-text[disabled],
-.evui-btn-text[disabled]:active,
-.evui-btn-text[disabled]:hover {
-  color: #bbbec4;
-  background-color: #f7f7f7;
-  border-color: #dddee1
-}
-
-/** evui-btn > shape > circle **/
-
-.evui-btn-radius {
-  border-radius: 32px;
-}
-.evui-btn-circle {
-  padding: 9px;
-  border-radius: 50%;
-}
-
-/** size **/
-
-.evui-btn-size-small {
-  padding: 7px 10px;
-  font-size: 12px;
-}
-.evui-btn-size-medium {
-  padding: 8px 12px;
-  font-size: 14px;
-}
-.evui-btn-size-large {
-  padding: 10px 14px;
-  font-size: 16px;
-}
-
-.evui-btn-size-small i { font-size: 12px !important; }
-.evui-btn-size-medium i { font-size: 14px !important; }
-.evui-btn-size-large i { font-size: 16px !important; }
-
-@keyframes spin {
-  to { -webkit-transform: rotate(360deg); }
-}
-@-webkit-keyframes spin {
-  to { -webkit-transform: rotate(360deg); }
-}
-@-webkit-keyframes grdAiguille{
-  0%{-webkit-transform:rotate(0deg);}
-  100%{-webkit-transform:rotate(360deg);}
-}
-@keyframes grdAiguille{
-  0%{transform:rotate(0deg);}
-  100%{transform:rotate(360deg);}
-}
+<style lang="scss">
+  @import '~@/styles/default';
+
+  $border-radius-circle: 50%;
+  $border-radius-half: 32px;
+
+  .ev-btn {
+    display: inline-block;
+    border: $border-solid transparent;
+    border-radius: $border-radius-base;
+    background-color: $color-gray60;
+    color: $color-white;
+    cursor: pointer;
+    user-select: none;
+    transition: color .2s linear,
+      background-color .2s linear,
+      border .2s linear,
+      opacity .2s linear,
+      box-shadow .2s linear;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &.active,
+    &:active {
+      background-color: $color-white;
+
+      @include evThemify() {
+        border-color: evThemed('color-primary');
+      }
+    }
+
+    &.disabled>*,
+    &[disabled]>* {
+      pointer-events: none;
+    }
+
+    &.disabled,
+    &.disabled:active,
+    &.disabled:hover,
+    &[disabled],
+    &[disabled]:active,
+    &[disabled]:hover {
+      cursor: default;
+
+      @include evThemify() {
+        color: evThemed('button-disabled') !important;
+        background-color: evThemed('button-disabled-bg') !important;
+        border-color: evThemed('button-disabled-border') !important;
+      }
+    }
+
+    &-span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  /** ev-btn > type(primary) **/
+  .ev-btn-primary {
+    color: $color-white;
+
+    @include evThemify() {
+      background-color: evThemed('color-primary');
+      border-color: evThemed('color-primary');
+    }
+
+    &.active,
+    &:active {
+      @include evThemify() {
+        background-color: darken(evThemed('color-primary'), 10%);
+        border-color: darken(evThemed('color-primary'), 10%);
+      }
+    }
+  }
+
+  /** ev-btn > type(info) **/
+  .ev-btn-info {
+    color: $color-white;
+
+    @include evThemify() {
+      background-color: evThemed('color-info') !important;
+      border-color: evThemed('color-info') !important;
+    }
+
+    &.active,
+    &:active {
+      @include evThemify() {
+        background-color: darken(evThemed('color-info'), 10%) !important;
+        border-color: darken(evThemed('color-info'), 10%) !important;
+      }
+    }
+  }
+
+  /** ev-btn > type(warning) **/
+  .ev-btn-warning {
+    color: $color-white;
+
+    @include evThemify() {
+      background-color: evThemed('color-warning');
+      border-color: evThemed('color-warning');
+    }
+
+    &.active,
+    &:active {
+      @include evThemify() {
+        background-color: darken(evThemed('color-warning'), 10%);
+        border-color: darken(evThemed('color-warning'), 10%);
+      }
+    }
+  }
+
+  /** ev-btn > type(error) **/
+  .ev-btn-error {
+    color: $color-white !important;
+
+    @include evThemify() {
+      background-color: evThemed('color-error');
+      border-color: evThemed('color-error');
+    }
+
+    &.active,
+    &:active {
+      @include evThemify() {
+        background-color: darken(evThemed('color-error'), 10%);
+        border-color: darken(evThemed('color-error'), 10%);
+      }
+    }
+  }
+
+
+  /** ev-btn > type(ghost) **/
+  .ev-btn-ghost {
+    background-color: transparent;
+
+    @include evThemify() {
+      color: evThemed('button-ghost');
+      border-color: evThemed('button-ghost-border');
+    }
+
+    &.active,
+    &:active {
+      @include evThemify() {
+        color: evThemed('color-primary');
+        border-color: evThemed('color-primary');
+      }
+    }
+  }
+
+  /** ev-btn > type(dashed) **/
+  .ev-btn-dashed {
+    background-color: transparent;
+    border-style: dashed;
+
+    @include evThemify() {
+      color: evThemed('button-dashed');
+      border-color: evThemed('button-dashed-border');
+    }
+
+    &.active,
+    &:active {
+      @include evThemify() {
+        color: evThemed('color-primary');
+        border-color: evThemed('color-primary');
+      }
+    }
+  }
+
+  fieldset[disabled] .ev-btn-dashed,
+  fieldset[disabled] .ev-btn-dashed:active,
+  fieldset[disabled] .ev-btn-dashed:focus,
+  fieldset[disabled] .ev-btn-dashed:hover {
+    @include evThemify() {
+      color: evThemed('button-disabled') !important;
+      background-color: evThemed('button-disabled-bg') !important;
+      border-color: evThemed('button-disabled-border') !important;
+    }
+  }
+
+  /*
+   ** 스타일 적용 안 되어 주석 처리 **
+  .ev-btn-dashed:focus {
+    -webkit-box-shadow: 0 0 0 2px rgba(45, 140, 240, .2);
+    box-shadow: 0 0 0 2px rgba(45, 140, 240, .2)
+  }
+  */
+
+  /** ev-btn > type(text) **/
+  .ev-btn-text {
+    background-color: transparent;
+    border-color: transparent;
+
+    @include evThemify() {
+      color: evThemed('button-text');
+    }
+
+    &:hover {
+      @include evThemify() {
+        color: evThemed('color-info');
+      }
+    }
+
+    &.active,
+    &:active {
+      @include evThemify() {
+        color: evThemed('color-primary');
+      }
+    }
+  }
+  /*
+   ** 중복으로 주석 처리 **
+  .ev-btn-text:hover {
+    color: #6d7380;
+    background-color: rgba(255,255,255,.2);
+    border-color: rgba(255,255,255,.2)
+  }
+  .ev-btn-text:active {
+    color: #454c5b;
+    background-color: rgba(0,0,0,.05);
+    border-color: rgba(0,0,0,.05)
+  }
+  */
+
+  /** ev-btn > shape > circle **/
+  .ev-btn-radius {
+    border-radius: 32px;
+  }
+  .ev-btn-circle {
+    border-radius: 50%;
+  }
+
+  /** size **/
+  .ev-btn-size-small {
+    padding: 7px 10px;
+    font-size: $font-size-base;
+
+    &.ev-btn-circle {
+      padding: 7px;
+    }
+
+    i {
+      font-size: $font-size-base !important;
+    }
+  }
+
+  .ev-btn-size-medium {
+    padding: 8px 12px;
+    font-size: $font-size-medium;
+
+    &.ev-btn-circle {
+      padding: 8px;
+    }
+
+    i {
+      font-size: $font-size-medium !important;
+    }
+  }
+
+  .ev-btn-size-large {
+    padding: 10px 14px;
+    font-size: $font-size-large;
+
+    &.ev-btn-circle {
+      padding: 10px;
+    }
+
+    i {
+      font-size: $font-size-large !important;
+    }
+  }
+
+  @-webkit-keyframes spin {
+    to {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes spin {
+    to {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+  @-webkit-keyframes grdAiguille {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
 
+  @keyframes grdAiguille {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
 </style>