From f5b908d01160e8a971ec552faeb9d14a6d9cffea Mon Sep 17 00:00:00 2001 From: Rob Levin Date: Sun, 11 Oct 2020 09:28:45 -0700 Subject: [PATCH] Adds input addon items to CSS and Vue packages. --- agnosticui-css/demo-globals.css | 1 + agnosticui-css/index.html | 10 +- agnosticui-css/input.css | 36 +--- agnosticui-css/inputaddonitem.css | 20 +++ agnosticui-react/src/css/common.min.css | 2 +- agnosticui-svelte/src/css/common.min.css | 2 +- agnosticui-vue/copystyles.js | 5 + agnosticui-vue/src/css/common.min.css | 2 +- agnosticui-vue/src/stories/Button.vue | 160 +++++++----------- agnosticui-vue/src/stories/Input.stories.js | 17 +- agnosticui-vue/src/stories/Input.vue | 62 ++++++- agnosticui-vue/src/stories/InputAddonItem.vue | 57 +++++++ 12 files changed, 240 insertions(+), 134 deletions(-) create mode 100644 agnosticui-css/inputaddonitem.css create mode 100644 agnosticui-vue/src/stories/InputAddonItem.vue diff --git a/agnosticui-css/demo-globals.css b/agnosticui-css/demo-globals.css index 36b19304f..8990f8b63 100644 --- a/agnosticui-css/demo-globals.css +++ b/agnosticui-css/demo-globals.css @@ -14,6 +14,7 @@ @import "headernav.css"; @import "headernavitem.css"; @import "input.css"; +@import "inputaddonitem.css"; @import "progress.css"; body { diff --git a/agnosticui-css/index.html b/agnosticui-css/index.html index 6a68a62e1..5a6573195 100644 --- a/agnosticui-css/index.html +++ b/agnosticui-css/index.html @@ -27,14 +27,20 @@

Please open each individual component's page

Button
  • - Progress + Card

  • - Card

    + Flexbox Grid
  • Header

    • +
  • + Input +
    • +
  • + Progress +
    • diff --git a/agnosticui-css/input.css b/agnosticui-css/input.css index d9fb2fe3e..f8f09ad06 100644 --- a/agnosticui-css/input.css +++ b/agnosticui-css/input.css @@ -267,40 +267,22 @@ borders that visually conflict. */ cursor: not-allowed; } - -/* -* Input addons e.g. icons inside the input -*/ -.input-has-left-addon, -.input-has-right-addon, -.input-addon-container { - /* Maybe I should have defined another css prop for addon adjustments but trying - to avoid any extra variable explosion there--will need to keep an eye on this */ - --addon-padding: calc(var(--agnosticui-input-side-padding) * 1.5); -} +/** + * Input "has addon" + */ .input-addon-container { display: flex; position: relative; width: 100%; } -.input-addon-container .input { - flex: 1; -} - -.input-addon-container .input-addon-right, -.input-addon-container .input-addon-left { - position: absolute; - top: 50%; - transform: translateY(-50%); -} - -.input-addon-container .input-addon-left { - left: var(--addon-padding); -} -.input-addon-container .input-addon-right { - right: var(--addon-padding); +.input-has-left-addon, +.input-has-right-addon { + /* Maybe I should have defined another css prop for addon adjustments but trying + to avoid any extra variable explosion there--will need to keep an eye on this */ + --addon-padding: calc(var(--agnosticui-input-side-padding) * 1.5); + flex: 1; } .input-has-left-addon { diff --git a/agnosticui-css/inputaddonitem.css b/agnosticui-css/inputaddonitem.css new file mode 100644 index 000000000..1d249815c --- /dev/null +++ b/agnosticui-css/inputaddonitem.css @@ -0,0 +1,20 @@ +/* +* Input addons e.g. icons inside the input +*/ +.input-addon-right, +.input-addon-left { + /* Maybe I should have defined another css prop for addon adjustments but trying + to avoid any extra variable explosion there--will need to keep an eye on this */ + --addon-padding: calc(var(--agnosticui-input-side-padding) * 1.5); + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +.input-addon-left { + left: var(--addon-padding); +} + +.input-addon-right { + right: var(--addon-padding); +} diff --git a/agnosticui-react/src/css/common.min.css b/agnosticui-react/src/css/common.min.css index 215de6c1b..595a5d240 100644 --- a/agnosticui-react/src/css/common.min.css +++ b/agnosticui-react/src/css/common.min.css @@ -1 +1 @@ -:root{--agnosticui-primary:#077acb;--agnosticui-primary-from:#0662a2;--agnosticui-primary-to:#2087d0;--agnosticui-primary-hover:#2087d0;--agnosticui-secondary:#c94d2b;--agnosticui-secondary-from:#a33e23;--agnosticui-secondary-to:#bc583d;--agnosticui-secondary-hover:#bc583d;--agnosticui-error-color:#e42002;--agnosticui-gray-extra-light:#f8f8f8;--agnosticui-gray-light:#e9e9e9;--agnosticui-gray-mid:#d8d8d8;--agnosticui-gray-mid-dark:#ccc;--agnosticui-gray-dark:#757575;--agnosticui-dark:#333;--agnosticui-light:#fff}:root{--Space-80:80px;--Space-72:72px;--Space-64:64px;--Space-56:56px;--Space-48:48px;--Space-40:40px;--Space-32:32px;--Space-24:24px;--Space-16:16px;--Space-14:14px;--Space-12:12px;--Space-10:10px;--Space-8:8px;--Space-6:6px;--Space-4:4px;--agnosticui-vertical-pad:var(--Space-8);--agnosticui-line-height:20px;--agnosticui-side-padding:calc(1.5 * var(--Space-8))}:root{--agnosticui-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Open Sans","Ubuntu","Fira Sans",Helvetica,"Droid Sans","Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--agnosticui-font-family-serif:Georgia,Cambria,"Times New Roman",Times,serif;--agnosticui-font-family-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--agnosticui-h1:64px;--agnosticui-h2:48px;--agnosticui-h3:36px;--agnosticui-h4:24px;--agnosticui-h5:18px;--agnosticui-h6:14px;--agnosticui-body:16px;--agnosticui-font-weight-bold:600;--agnosticui-font-weight-light:300;--agnosticui-font-color:#333}:root{--agnosticui-timing-fast:200ms;--agnosticui-timing-medium:300ms;--agnosticui-timing-slow:450ms} \ No newline at end of file +:root{--agnosticui-primary:#077acb;--agnosticui-primary-from:#0662a2;--agnosticui-primary-to:#2087d0;--agnosticui-primary-hover:#2087d0;--agnosticui-secondary:#c94d2b;--agnosticui-secondary-from:#a33e23;--agnosticui-secondary-to:#bc583d;--agnosticui-secondary-hover:#bc583d;--agnosticui-error-color:#e42002;--agnosticui-gray-extra-light:#f8f8f8;--agnosticui-gray-light:#e9e9e9;--agnosticui-gray-mid:#d8d8d8;--agnosticui-gray-mid-dark:#ccc;--agnosticui-gray-dark:#757575;--agnosticui-dark:#333;--agnosticui-light:#fff}:root{--Space-80:80px;--Space-72:72px;--Space-64:64px;--Space-56:56px;--Space-48:48px;--Space-40:40px;--Space-32:32px;--Space-24:24px;--Space-16:16px;--Space-14:14px;--Space-12:12px;--Space-10:10px;--Space-8:8px;--Space-6:6px;--Space-4:4px;--agnosticui-vertical-pad:var(--Space-8);--agnosticui-line-height:20px;--agnosticui-side-padding:calc(1.5 * var(--Space-8))}:root{--agnosticui-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Open Sans","Ubuntu","Fira Sans",Helvetica,"Droid Sans","Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--agnosticui-font-family-serif:Georgia,Cambria,"Times New Roman",Times,serif;--agnosticui-font-family-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--agnosticui-h1:64px;--agnosticui-h2:48px;--agnosticui-h3:36px;--agnosticui-h4:24px;--agnosticui-h5:18px;--agnosticui-h6:12px;--agnosticui-body:16px;--agnosticui-font-weight-bold:600;--agnosticui-font-weight-light:300;--agnosticui-font-color:#333}:root{--agnosticui-timing-fast:200ms;--agnosticui-timing-medium:300ms;--agnosticui-timing-slow:450ms} \ No newline at end of file diff --git a/agnosticui-svelte/src/css/common.min.css b/agnosticui-svelte/src/css/common.min.css index 215de6c1b..595a5d240 100644 --- a/agnosticui-svelte/src/css/common.min.css +++ b/agnosticui-svelte/src/css/common.min.css @@ -1 +1 @@ -:root{--agnosticui-primary:#077acb;--agnosticui-primary-from:#0662a2;--agnosticui-primary-to:#2087d0;--agnosticui-primary-hover:#2087d0;--agnosticui-secondary:#c94d2b;--agnosticui-secondary-from:#a33e23;--agnosticui-secondary-to:#bc583d;--agnosticui-secondary-hover:#bc583d;--agnosticui-error-color:#e42002;--agnosticui-gray-extra-light:#f8f8f8;--agnosticui-gray-light:#e9e9e9;--agnosticui-gray-mid:#d8d8d8;--agnosticui-gray-mid-dark:#ccc;--agnosticui-gray-dark:#757575;--agnosticui-dark:#333;--agnosticui-light:#fff}:root{--Space-80:80px;--Space-72:72px;--Space-64:64px;--Space-56:56px;--Space-48:48px;--Space-40:40px;--Space-32:32px;--Space-24:24px;--Space-16:16px;--Space-14:14px;--Space-12:12px;--Space-10:10px;--Space-8:8px;--Space-6:6px;--Space-4:4px;--agnosticui-vertical-pad:var(--Space-8);--agnosticui-line-height:20px;--agnosticui-side-padding:calc(1.5 * var(--Space-8))}:root{--agnosticui-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Open Sans","Ubuntu","Fira Sans",Helvetica,"Droid Sans","Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--agnosticui-font-family-serif:Georgia,Cambria,"Times New Roman",Times,serif;--agnosticui-font-family-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--agnosticui-h1:64px;--agnosticui-h2:48px;--agnosticui-h3:36px;--agnosticui-h4:24px;--agnosticui-h5:18px;--agnosticui-h6:14px;--agnosticui-body:16px;--agnosticui-font-weight-bold:600;--agnosticui-font-weight-light:300;--agnosticui-font-color:#333}:root{--agnosticui-timing-fast:200ms;--agnosticui-timing-medium:300ms;--agnosticui-timing-slow:450ms} \ No newline at end of file +:root{--agnosticui-primary:#077acb;--agnosticui-primary-from:#0662a2;--agnosticui-primary-to:#2087d0;--agnosticui-primary-hover:#2087d0;--agnosticui-secondary:#c94d2b;--agnosticui-secondary-from:#a33e23;--agnosticui-secondary-to:#bc583d;--agnosticui-secondary-hover:#bc583d;--agnosticui-error-color:#e42002;--agnosticui-gray-extra-light:#f8f8f8;--agnosticui-gray-light:#e9e9e9;--agnosticui-gray-mid:#d8d8d8;--agnosticui-gray-mid-dark:#ccc;--agnosticui-gray-dark:#757575;--agnosticui-dark:#333;--agnosticui-light:#fff}:root{--Space-80:80px;--Space-72:72px;--Space-64:64px;--Space-56:56px;--Space-48:48px;--Space-40:40px;--Space-32:32px;--Space-24:24px;--Space-16:16px;--Space-14:14px;--Space-12:12px;--Space-10:10px;--Space-8:8px;--Space-6:6px;--Space-4:4px;--agnosticui-vertical-pad:var(--Space-8);--agnosticui-line-height:20px;--agnosticui-side-padding:calc(1.5 * var(--Space-8))}:root{--agnosticui-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Open Sans","Ubuntu","Fira Sans",Helvetica,"Droid Sans","Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--agnosticui-font-family-serif:Georgia,Cambria,"Times New Roman",Times,serif;--agnosticui-font-family-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--agnosticui-h1:64px;--agnosticui-h2:48px;--agnosticui-h3:36px;--agnosticui-h4:24px;--agnosticui-h5:18px;--agnosticui-h6:12px;--agnosticui-body:16px;--agnosticui-font-weight-bold:600;--agnosticui-font-weight-light:300;--agnosticui-font-color:#333}:root{--agnosticui-timing-fast:200ms;--agnosticui-timing-medium:300ms;--agnosticui-timing-slow:450ms} \ No newline at end of file diff --git a/agnosticui-vue/copystyles.js b/agnosticui-vue/copystyles.js index 25fe60e61..d8e686372 100644 --- a/agnosticui-vue/copystyles.js +++ b/agnosticui-vue/copystyles.js @@ -82,3 +82,8 @@ css = fs.readFileSync('../agnosticui-css/input.css', 'utf8'); const inputVue = fs.readFileSync('./src/stories/Input.vue', 'utf8'); const inputSynchronized = inputVue.replace(styleRegex, ``); fs.writeFileSync('./src/stories/Input.vue', inputSynchronized, 'utf8'); + +css = fs.readFileSync('../agnosticui-css/inputaddonitem.css', 'utf8'); +const inputAddonItemVue = fs.readFileSync('./src/stories/InputAddonItem.vue', 'utf8'); +const inputAddonItemSynchronized = inputAddonItemVue.replace(styleRegex, ``); +fs.writeFileSync('./src/stories/InputAddonItem.vue', inputAddonItemSynchronized, 'utf8'); diff --git a/agnosticui-vue/src/css/common.min.css b/agnosticui-vue/src/css/common.min.css index 215de6c1b..595a5d240 100644 --- a/agnosticui-vue/src/css/common.min.css +++ b/agnosticui-vue/src/css/common.min.css @@ -1 +1 @@ -:root{--agnosticui-primary:#077acb;--agnosticui-primary-from:#0662a2;--agnosticui-primary-to:#2087d0;--agnosticui-primary-hover:#2087d0;--agnosticui-secondary:#c94d2b;--agnosticui-secondary-from:#a33e23;--agnosticui-secondary-to:#bc583d;--agnosticui-secondary-hover:#bc583d;--agnosticui-error-color:#e42002;--agnosticui-gray-extra-light:#f8f8f8;--agnosticui-gray-light:#e9e9e9;--agnosticui-gray-mid:#d8d8d8;--agnosticui-gray-mid-dark:#ccc;--agnosticui-gray-dark:#757575;--agnosticui-dark:#333;--agnosticui-light:#fff}:root{--Space-80:80px;--Space-72:72px;--Space-64:64px;--Space-56:56px;--Space-48:48px;--Space-40:40px;--Space-32:32px;--Space-24:24px;--Space-16:16px;--Space-14:14px;--Space-12:12px;--Space-10:10px;--Space-8:8px;--Space-6:6px;--Space-4:4px;--agnosticui-vertical-pad:var(--Space-8);--agnosticui-line-height:20px;--agnosticui-side-padding:calc(1.5 * var(--Space-8))}:root{--agnosticui-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Open Sans","Ubuntu","Fira Sans",Helvetica,"Droid Sans","Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--agnosticui-font-family-serif:Georgia,Cambria,"Times New Roman",Times,serif;--agnosticui-font-family-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--agnosticui-h1:64px;--agnosticui-h2:48px;--agnosticui-h3:36px;--agnosticui-h4:24px;--agnosticui-h5:18px;--agnosticui-h6:14px;--agnosticui-body:16px;--agnosticui-font-weight-bold:600;--agnosticui-font-weight-light:300;--agnosticui-font-color:#333}:root{--agnosticui-timing-fast:200ms;--agnosticui-timing-medium:300ms;--agnosticui-timing-slow:450ms} \ No newline at end of file +:root{--agnosticui-primary:#077acb;--agnosticui-primary-from:#0662a2;--agnosticui-primary-to:#2087d0;--agnosticui-primary-hover:#2087d0;--agnosticui-secondary:#c94d2b;--agnosticui-secondary-from:#a33e23;--agnosticui-secondary-to:#bc583d;--agnosticui-secondary-hover:#bc583d;--agnosticui-error-color:#e42002;--agnosticui-gray-extra-light:#f8f8f8;--agnosticui-gray-light:#e9e9e9;--agnosticui-gray-mid:#d8d8d8;--agnosticui-gray-mid-dark:#ccc;--agnosticui-gray-dark:#757575;--agnosticui-dark:#333;--agnosticui-light:#fff}:root{--Space-80:80px;--Space-72:72px;--Space-64:64px;--Space-56:56px;--Space-48:48px;--Space-40:40px;--Space-32:32px;--Space-24:24px;--Space-16:16px;--Space-14:14px;--Space-12:12px;--Space-10:10px;--Space-8:8px;--Space-6:6px;--Space-4:4px;--agnosticui-vertical-pad:var(--Space-8);--agnosticui-line-height:20px;--agnosticui-side-padding:calc(1.5 * var(--Space-8))}:root{--agnosticui-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Open Sans","Ubuntu","Fira Sans",Helvetica,"Droid Sans","Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--agnosticui-font-family-serif:Georgia,Cambria,"Times New Roman",Times,serif;--agnosticui-font-family-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--agnosticui-h1:64px;--agnosticui-h2:48px;--agnosticui-h3:36px;--agnosticui-h4:24px;--agnosticui-h5:18px;--agnosticui-h6:12px;--agnosticui-body:16px;--agnosticui-font-weight-bold:600;--agnosticui-font-weight-light:300;--agnosticui-font-color:#333}:root{--agnosticui-timing-fast:200ms;--agnosticui-timing-medium:300ms;--agnosticui-timing-slow:450ms} \ No newline at end of file diff --git a/agnosticui-vue/src/stories/Button.vue b/agnosticui-vue/src/stories/Button.vue index 4f2131156..71d90b889 100644 --- a/agnosticui-vue/src/stories/Button.vue +++ b/agnosticui-vue/src/stories/Button.vue @@ -145,7 +145,7 @@ export default { } .btn:visited { - color: var(--agnosticui-btn-font-color, var(--agnosticui-dark)); + color: var(--agnosticui-btn-font-color, var(--agnosticui-dark));; } .btn:hover { @@ -177,18 +177,12 @@ export default { .btn.disabled, .btn:disabled { top: 0 !important; - background: var( - --agnosticui-btn-disabled-bg, - var(--agnosticui-gray-mid-dark) - ) !important; + background: var(--agnosticui-btn-disabled-bg, var(--agnosticui-gray-mid-dark)) !important; text-shadow: 0 1px 1px rgba(255, 255, 255, 1) !important; /* primary, secondary, natural, all look same when disabled; and we don't want to have an inadvertant looking blue primary border when disabled so it's transparent */ border-color: transparent; - color: var( - --agnosticui-btn-disabled-color, - var(--agnosticui-gray-dark) - ) !important; + color: var(--agnosticui-btn-disabled-color, var(--agnosticui-gray-dark)) !important; cursor: default !important; appearance: none !important; box-shadow: none !important; @@ -216,10 +210,7 @@ export default { } .btn-secondary { - background-color: var( - --agnosticui-btn-secondary, - var(--agnosticui-secondary) - ); + background-color: var(--agnosticui-btn-secondary, var(--agnosticui-secondary)); border-color: var(--agnosticui-btn-secondary, var(--agnosticui-secondary)); color: var(--agnosticui-btn-secondary-color, var(--agnosticui-light)); } @@ -230,10 +221,7 @@ export default { } .btn-secondary.btn-bordered:hover, .btn-secondary.btn-bordered:focus { - background-color: var( - --agnosticui-btn-secondary, - var(--agnosticui-secondary) - ); + background-color: var(--agnosticui-btn-secondary, var(--agnosticui-secondary)); color: var(--agnosticui-btn-secondary-color, var(--agnosticui-light)); } @@ -290,10 +278,7 @@ export default { * Raised Primary Buttons */ .btn-raised.btn-primary { - border-color: var( - --agnosticui-btn-primary-raised-to, - var(--agnosticui-primary-from) - ); + border-color: var(--agnosticui-btn-primary-raised-to, var(--agnosticui-primary-from)); background: -webkit-gradient( linear, left top, @@ -301,7 +286,9 @@ export default { from( var(--agnosticui-btn-primary-raised-from, var(--agnosticui-primary-from)) ), - to(var(--agnosticui-btn-primary-raised-to, var(--agnosticui-primary-to))) + to( + var(--agnosticui-btn-primary-raised-to, var(--agnosticui-primary-to)) + ) ); background: linear-gradient( var(--agnosticui-btn-primary-raised-from, var(--agnosticui-primary-from)), @@ -311,31 +298,20 @@ export default { .btn-raised.btn-primary:hover, .btn-raised.btn-primary:focus { - background: linear-gradient( - to bottom, - var( - --agnosticui-btn-primary-raised-hover-from, - var(--agnosticui-primary-hover) - ), - var(--agnosticui-btn-primary-raised-to, var(--agnosticui-primary-from)) - ); + background: linear-gradient(to bottom, var(--agnosticui-btn-primary-raised-hover-from, var(--agnosticui-primary-hover)), var(--agnosticui-btn-primary-raised-to, var(--agnosticui-primary-from))); background: -webkit-gradient( linear, left top, left bottom, from( - var( - --agnosticui-btn-primary-raised-hover-from, - var(--agnosticui-primary-hover) - ) + var(--agnosticui-btn-primary-raised-hover-from, var(--agnosticui-primary-hover)) ), - to(var(--agnosticui-btn-primary-raised-to, var(--agnosticui-primary-from))) + to( + var(--agnosticui-btn-primary-raised-to, var(--agnosticui-primary-from)) + ) ); background: linear-gradient( - var( - --agnosticui-btn-primary-raised-hover-from, - var(--agnosticui-primary-hover) - ), + var(--agnosticui-btn-primary-raised-hover-from, var(--agnosticui-primary-hover)), var(--agnosticui-btn-primary-raised-to, var(--agnosticui-primary-from)) ); } @@ -350,62 +326,43 @@ export default { * Raised Secondary Buttons */ .btn-raised.btn-secondary { - border-color: var( - --agnosticui-btn-secondary-raised-to, - var(--agnosticui-secondary-to) - ); + border-color: var(--agnosticui-btn-secondary-raised-to, var(--agnosticui-secondary-to)); background: -webkit-gradient( linear, left top, left bottom, from( - var( - --agnosticui-btn-secondary-raised-from, - var(--agnosticui-secondary-from) - ) + var(--agnosticui-btn-secondary-raised-from, var(--agnosticui-secondary-from)) ), to( - var(--agnosticui-btn-secondary-raised-to, var(--agnosticui-secondary-to)) + var( + --agnosticui-btn-secondary-raised-to, + var(--agnosticui-secondary-to) + ) ) ); background: linear-gradient( - var( - --agnosticui-btn-secondary-raised-from, - var(--agnosticui-secondary-from) - ), + var(--agnosticui-btn-secondary-raised-from, var(--agnosticui-secondary-from)), var(--agnosticui-btn-secondary-raised-to, var(--agnosticui-secondary-to)) ); } .btn-raised.btn-secondary:hover, .btn-raised.btn-secondary:focus { - background: linear-gradient( - to bottom, - var( - --agnosticui-btn-secondary-raised-hover-from, - var(--agnosticui-secondary-hover) - ), - var(--agnosticui-btn-secondary-raised-to, var(--agnosticui-secondary-to)) - ); + background: linear-gradient(to bottom, var(--agnosticui-btn-secondary-raised-hover-from, var(--agnosticui-secondary-hover)), var(--agnosticui-btn-secondary-raised-to, var(--agnosticui-secondary-to))); background: -webkit-gradient( linear, left top, left bottom, from( - var( - --agnosticui-btn-secondary-raised-hover-from, - var(--agnosticui-secondary-hover) - ) + var(--agnosticui-btn-secondary-raised-hover-from, var(--agnosticui-secondary-hover)) ), to( var(--agnosticui-btn-secondary-raised-to, var(--agnosticui-secondary-to)) ) ); background: linear-gradient( - var( - --agnosticui-btn-secondary-raised-hover-from, - var(--agnosticui-secondary-hover) - ), + var(--agnosticui-btn-secondary-raised-hover-from, var(--agnosticui-secondary-hover)), var(--agnosticui-btn-secondary-raised-to, var(--agnosticui-secondary-to)) ); } @@ -429,7 +386,7 @@ export default { */ .btn-large { font-size: calc( - var(--agnosticui-btn-font-size, var(--Space-16)) + var(--Space-4) + var(--agnosticui-btn-font-size, var(--Space-16)) + var(--Space-4) ); height: var(--Space-48); line-height: var(--Space-48); @@ -438,7 +395,7 @@ export default { .btn-small { font-size: calc( - var(--agnosticui-btn-font-size, var(--Space-16)) - var(--Space-4) + var(--agnosticui-btn-font-size, var(--Space-16)) - var(--Space-4) ); height: var(--Space-32); line-height: var(--Space-32); @@ -448,41 +405,44 @@ export default { /** * Rounded */ -.btn-rounded { - border-radius: var(--agnosticui-btn-radius, var(--Space-4)); -} - -.btn-pill { - border-radius: 200px; -} - -/* + .btn-rounded { + border-radius: var( + --agnosticui-btn-radius, + var(--Space-4) + ); + } + + .btn-pill { + border-radius: 200px; + } + + /* * Size Adjustment for equal height & width buttons * * Remove padding */ -.btn-circle { - border-radius: 100%; - width: var(--Space-40); - height: var(--Space-40); - padding: 0 !important; -} + .btn-circle { + border-radius: 100%; + width: var(--Space-40); + height: var(--Space-40); + padding: 0 !important; + } + + .btn-circle-large { + font-size: calc( + var(--agnosticui-btn-font-size, var(--Space-16)) + var(--Space-4) + ); + width: var(--Space-48); + height: var(--Space-48); + } -.btn-circle-large { - font-size: calc( - var(--agnosticui-btn-font-size, var(--Space-16)) + var(--Space-4) - ); - width: var(--Space-48); - height: var(--Space-48); -} - -.btn-circle-small { - font-size: calc( - var(--agnosticui-btn-font-size, var(--Space-16)) - var(--Space-4) - ); - width: var(--Space-32); - height: var(--Space-32); -} + .btn-circle-small { + font-size: calc( + var(--agnosticui-btn-font-size, var(--Space-16)) - var(--Space-4) + ); + width: var(--Space-32); + height: var(--Space-32); + } /** * Button Block (stacked) diff --git a/agnosticui-vue/src/stories/Input.stories.js b/agnosticui-vue/src/stories/Input.stories.js index 01fc12a41..882b93800 100644 --- a/agnosticui-vue/src/stories/Input.stories.js +++ b/agnosticui-vue/src/stories/Input.stories.js @@ -1,4 +1,5 @@ import Input from "./Input.vue"; +import InputAddonItem from "./InputAddonItem.vue"; const wrapper = () => { return { @@ -9,9 +10,23 @@ const wrapper = () => { export default { title: "Inputs", decorators: [wrapper], - component: Input, + components: [ + Input, + InputAddonItem, + ] } +export const InputAddons = () => ({ + components: { Input, InputAddonItem }, + template: '<', + props: ['value'], + data() { + return { + name: '' + } + }, +}) + export const Default = () => ({ components: { Input }, template: '', diff --git a/agnosticui-vue/src/stories/Input.vue b/agnosticui-vue/src/stories/Input.vue index 90bbce7ee..909082707 100644 --- a/agnosticui-vue/src/stories/Input.vue +++ b/agnosticui-vue/src/stories/Input.vue @@ -3,7 +3,23 @@ +
    + + + +
    \ No newline at end of file diff --git a/agnosticui-vue/src/stories/InputAddonItem.vue b/agnosticui-vue/src/stories/InputAddonItem.vue new file mode 100644 index 000000000..8d365a550 --- /dev/null +++ b/agnosticui-vue/src/stories/InputAddonItem.vue @@ -0,0 +1,57 @@ + + + + \ No newline at end of file