diff --git a/src/assets/ic_add.png b/src/assets/ic_add.png new file mode 100644 index 00000000..7542822d Binary files /dev/null and b/src/assets/ic_add.png differ diff --git a/src/assets/ic_remove.png b/src/assets/ic_remove.png new file mode 100644 index 00000000..a6eec4f2 Binary files /dev/null and b/src/assets/ic_remove.png differ diff --git a/src/base/variable.less b/src/base/variable.less index 095ed6e3..11f67e82 100644 --- a/src/base/variable.less +++ b/src/base/variable.less @@ -23,9 +23,8 @@ // @PrimaryFont: 'Inter', sans-serif; // @WhiteColor: #ffffff; -@PrimaryTextColor: #36cc9b; +@PrimaryTextColor: #1ECCB0; // @LabelColor: #9b9b9b; - // @BackgroundColor: #f9f9f9; // @PlaceholderColor: #a4a4a4; @@ -86,7 +85,7 @@ @LabelColor: #9b9b9b; @BackgroundColor: #f9f9f9; @PlaceholderColor: #a4a4a4; -@HoverColor: #f3f3f3; +@HoverColor: #1ECCB0; @WarningColor: #f5a300; @InfoColor: #605ae0; @SuccessColor: #0a5f23; @@ -132,8 +131,8 @@ @ColorPrimary20Dark: var(--ColorPrimary20Dark, #16164b); @ColorPrimary30: var(--ColorPrimary30, #9999ff); @ColorPrimary40: var(--ColorPrimary40, #6464ff); -@ColorPrimary50: var(--ColorPrimary50, #3535f3); -@ColorPrimary60: var(--ColorPrimary60, #000093); +@ColorPrimary50: var(--ColorPrimary50, #000000); +@ColorPrimary60: var(--ColorPrimary60, #1ECCB0); @ColorPrimary70: var(--ColorPrimary70, #00004c); @ColorPrimary80: var(--ColorPrimary80, #010029); @ColorPrimaryDisabled: var(--ColorPrimaryDisabled, rgba(0, 0, 0, 0)); diff --git a/src/components/NBtn/NBtn.less b/src/components/NBtn/NBtn.less index 3ebd4226..6f8d3e74 100644 --- a/src/components/NBtn/NBtn.less +++ b/src/components/NBtn/NBtn.less @@ -2,6 +2,12 @@ .n-button { height: 4rem; + padding: 10px 20px; + border: 1px solid #ddd; + color: @BlackColor; + background-color: @PrimaryTextColor!important; + border-radius: 4px; + font-size: 14px; cursor: pointer; box-shadow: none; font-family: @PrimaryFont; @@ -19,6 +25,12 @@ padding: 0rem 2rem; border-radius: 0.3rem; color: @WhiteColor; + height: 32px; + border-radius: 1000px; + justify-content: center; + align-items: center; + font-weight: 700; + line-height: 13px; &:disabled { cursor: not-allowed; @@ -72,6 +84,36 @@ } } +.n-button-add { + background-image: url("../../assets/ic_add.png"); + background-repeat: no-repeat; + background-color: @PrimaryTextColor; + color: @BlackColor; + cursor: pointer; + border-radius: 3250px; + padding: 10px 21px 7px 10px; + display: flex; + flex-direction: row; + gap: 26px; + align-items: center; + justify-content: center; + flex-shrink: 0; + position: relative; + background-position: calc(100% - 3px) center; + width: 70px; + } + .n-button-delete { + position: absolute; + background-image: url("../../assets/ic_remove.png"); + background-repeat: no-repeat; + cursor: pointer; + align-items: center; + background-position: calc(100% - 3px) center; + background-size: 15px; + padding: 10px 21px 7px 10px; + font-size: 12px; + } + .hover-state { pointer-events: none; } @@ -217,7 +259,7 @@ } .n-button-rounded { - border-radius: 40px; + border-radius: 1000px; } .n-button-large { @@ -232,7 +274,7 @@ } .n-button-mid { - height: 4.8rem; + // height: 4.8rem; font-size: @BaseFontSize + 3; line-height: 2.5rem; min-width: 4.8rem; diff --git a/src/components/NBtn/NBtn.vue b/src/components/NBtn/NBtn.vue index 81c1a24c..6dec061e 100644 --- a/src/components/NBtn/NBtn.vue +++ b/src/components/NBtn/NBtn.vue @@ -62,8 +62,8 @@ export default { icon: this.icon, size:this.size, iconColor:this.iconColor, - flat: this.flat, - stroke: this.stroke, + //flat: this.flat, + //stroke: this.stroke, } }, this.$slots.default) @@ -77,7 +77,9 @@ export default { 'n-button-large': this.size == 'large', 'n-button-mid': this.size == 'medium', 'n-button-small': this.size == 'small', - 'n-button-focused': this.focused + 'n-button-focused': this.focused, + 'n-button-add': this.theme == 'add', + 'n-button-delete': this.theme == 'delete' }], attrs: { href: this.href, diff --git a/src/components/NBtn/NBtnContent.vue b/src/components/NBtn/NBtnContent.vue index 8038d000..3fb49946 100644 --- a/src/components/NBtn/NBtnContent.vue +++ b/src/components/NBtn/NBtnContent.vue @@ -1,101 +1,82 @@ - - - - + + \ No newline at end of file diff --git a/src/components/NCode/NCode.less b/src/components/NCode/NCode.less index 5e19fda0..dbe6cf53 100644 --- a/src/components/NCode/NCode.less +++ b/src/components/NCode/NCode.less @@ -17,11 +17,18 @@ display: block; -webkit-tap-highlight-color: transparent; outline: none; + border: none; text-align: center; - border-radius: 1.6rem; + //border-radius: 1.6rem; height: 4.8rem; width: 4.8rem; - + border-bottom: 2px solid @ColorPrimary80; + padding-bottom: @SpacingXs; + color:@ColorPrimaryGrey100; + border-radius: 0; + margin-bottom: 1px; + font-size: 16px; + font-weight: bold; &:focus, &:hover { border-color: @ColorPrimary60; @@ -30,10 +37,14 @@ @media screen and (max-width: 425px) { height: 3rem; width: 3rem; - border-radius: 1rem; + //border-radius: 1rem; } } +.bounce { + animation: pulse .3s ease-in-out alternate; +} + .n-code-input-field:hover::placeholder { color: @ColorPrimaryGrey80; font-weight: 500; diff --git a/src/components/NCode/NCode.vue b/src/components/NCode/NCode.vue index a1348b21..839fda8e 100644 --- a/src/components/NCode/NCode.vue +++ b/src/components/NCode/NCode.vue @@ -2,7 +2,7 @@
+
====================================================================
+
NMS Buttons
+ +
+ Add + Renew +
+
+ + +
+
+ +
+ +
+ + +
+ +
+ Small: + Medium: + Large: +
+
+