diff --git a/demo/index.html b/demo/index.html index 991ac2c..3cac068 100644 --- a/demo/index.html +++ b/demo/index.html @@ -28,7 +28,6 @@ -

VMK UI Kit

Demo page placeholder. Component sections will be added here.

@@ -76,23 +75,5 @@ @@include('./partials/loader.html')
- diff --git a/demo/partials/data-patterns.html b/demo/partials/data-patterns.html index a5cb83b..8d0b37a 100644 --- a/demo/partials/data-patterns.html +++ b/demo/partials/data-patterns.html @@ -26,11 +26,8 @@

Date picker trigger

- - -

File upload with preview

-
- - +
+
+ diff --git a/demo/partials/file-upload.html b/demo/partials/file-upload.html index 43302a2..e88fa8a 100644 --- a/demo/partials/file-upload.html +++ b/demo/partials/file-upload.html @@ -17,8 +17,10 @@ Choose files Images get thumbnails, other files show their type. - + + +
diff --git a/demo/partials/input-group.html b/demo/partials/input-group.html index 96e9b89..3f72afb 100644 --- a/demo/partials/input-group.html +++ b/demo/partials/input-group.html @@ -16,11 +16,11 @@ diff --git a/demo/partials/progress.html b/demo/partials/progress.html index 5a515fc..600f665 100644 --- a/demo/partials/progress.html +++ b/demo/partials/progress.html @@ -1,29 +1,33 @@ -
+

Progress

Linear progress

-
-
-
+
+
+
+
-
-
-
+
+
+
-
-
+
+
+

Sizes

-
-
-
-
-
+
+
+
+
+
+
+

Step indicators

-
+
2 3 diff --git a/src/scss/components/_file-upload.scss b/src/scss/components/_file-upload.scss index b34e0de..66a7239 100644 --- a/src/scss/components/_file-upload.scss +++ b/src/scss/components/_file-upload.scss @@ -6,7 +6,7 @@ @use "../kit-deps" as *; -$file-attachment-size: 160px; +$file-attachment-size: 130px; .file-upload-panel { width: 100%; @@ -118,15 +118,15 @@ .file-upload-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax($file-attachment-size, 1fr)); - gap: $space-4; + gap: $space-5; } .file-attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax($file-attachment-size, 1fr)); - gap: $space-4; + gap: $space-5; width: 100%; - max-width: 760px; + max-width: 640px; } .file-upload-preview-item, @@ -205,8 +205,8 @@ display: inline-flex; align-items: center; justify-content: center; - width: 48px; - height: 48px; + width: 40px; + height: 40px; border-radius: $radius-md; background: $neutral-100; color: $neutral-600; @@ -222,10 +222,10 @@ z-index: 1; display: block; margin-top: auto; - padding: 0 $space-3 $space-3; + padding: 0 $space-3 $space-2; color: $neutral-900; font-family: $font-family-base; - font-size: 13px; + font-size: 12px; font-weight: $font-weight-semibold; line-height: 1.3; white-space: nowrap; @@ -253,7 +253,7 @@ align-items: flex-start; justify-content: space-between; gap: $space-2; - padding: $space-3 $space-3 $space-2; + padding: $space-2 $space-2 0; } .file-attachment-format { @@ -264,7 +264,7 @@ background: $neutral-100; color: $neutral-700; font-family: $font-family-base; - font-size: 13px; + font-size: 11px; font-weight: $font-weight-bold; text-transform: uppercase; line-height: 1; @@ -303,6 +303,13 @@ .file-upload-preview-visual { background: repeating-conic-gradient($neutral-100 0% 25%, $neutral-0 0% 50%) 50% / 40px 40px; } + + .file-attachment-name { + position: absolute; + bottom: 0; + left: 0; + right: 0; + } } .file-attachment.is-error, @@ -323,13 +330,13 @@ .file-attachment-visual, .file-upload-preview-visual { color: $danger-text; - font-size: 40px; + font-size: 32px; &::before { content: ""; position: absolute; - width: 72px; - height: 72px; + width: 56px; + height: 56px; border-radius: $radius-full; background: $neutral-0; z-index: -1; diff --git a/src/scss/components/_forms.scss b/src/scss/components/_forms.scss index 8691c7f..a8c3388 100644 --- a/src/scss/components/_forms.scss +++ b/src/scss/components/_forms.scss @@ -107,6 +107,46 @@ &.input-icon-right { padding-right: $space-8; } + + &.input-date { + min-height: 48px; + padding: $space-3 $space-4; + background-color: $neutral-0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right $space-3 center; + background-size: 20px 20px; + border: $border-width-base $border-style-base $neutral-300; + border-radius: $radius-lg; + font-family: $font-family-base; + font-size: 15px; + font-weight: $font-weight-medium; + color: $neutral-900; + cursor: pointer; + + &::-webkit-calendar-picker-indicator { + opacity: 0; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + cursor: pointer; + } + + &:hover:not(:disabled):not([readonly]) { + border-color: $mint-600; + } + + &:focus { + outline: none; + border-color: $mint-600; + box-shadow: 0 0 0 3px #{rgba($mint-600, 0.24)}; + } + + &::placeholder { + color: $neutral-500; + } + } } .input-help { diff --git a/src/scss/components/_input-group.scss b/src/scss/components/_input-group.scss index 589ae17..2c37940 100644 --- a/src/scss/components/_input-group.scss +++ b/src/scss/components/_input-group.scss @@ -37,6 +37,7 @@ color: $neutral-700; background-color: $neutral-50; border: 0; + border-radius: 0; font-family: $font-family-base; font-size: 14px; font-weight: $font-weight-semibold; @@ -46,6 +47,23 @@ font-size: $icon-size-md; color: currentColor; } + + // Any nested icon button should fill the action slot seamlessly. + & .btn { + min-height: auto; + width: $control-height-md; + height: $control-height-md; + margin: -$space-3; + padding: 0; + border: 0; + border-radius: 0; + background-color: transparent; + color: inherit; + + &:hover:not(:disabled):not(.is-disabled) { + background-color: rgba($neutral-900, 0.06); + } + } } .input-group-action { @@ -101,6 +119,12 @@ .input-group-addon, .input-group-action { min-width: $control-height-sm; + + & .btn { + width: $control-height-sm; + height: $control-height-sm; + margin: calc(-1 * #{$space-2}) calc(-1 * #{$space-3}); + } } .input-group-input, diff --git a/src/scss/components/_progress.scss b/src/scss/components/_progress.scss index 9b84763..16ba7de 100644 --- a/src/scss/components/_progress.scss +++ b/src/scss/components/_progress.scss @@ -8,11 +8,16 @@ // Linear progress .progress { width: 100%; + max-width: 600px; height: 8px; border-radius: $radius-full; background-color: $neutral-100; overflow: hidden; + & + .progress { + margin-top: $space-5; + } + .progress-bar { height: 100%; border-radius: $radius-full; diff --git a/src/scss/components/_timeline.scss b/src/scss/components/_timeline.scss index a87571c..e379dbd 100644 --- a/src/scss/components/_timeline.scss +++ b/src/scss/components/_timeline.scss @@ -26,7 +26,7 @@ position: absolute; top: 32px; bottom: -$space-4; - left: 15px; + left: 23px; width: 2px; background: $border-color-muted; } diff --git a/src/scss/demo.scss b/src/scss/demo.scss index d2abd0e..febeb78 100644 --- a/src/scss/demo.scss +++ b/src/scss/demo.scss @@ -48,6 +48,11 @@ &:last-child { margin-bottom: 0; } + + &.demo-row-vertical { + flex-direction: column; + align-items: stretch; + } } .color-card { diff --git a/src/vue/components/GnIconButton.js b/src/vue/components/GnIconButton.js index 519433b..99e1e22 100644 --- a/src/vue/components/GnIconButton.js +++ b/src/vue/components/GnIconButton.js @@ -20,7 +20,7 @@ inheritAttrs: false, props: { icon: { type: String, required: true }, - label: { type: String, required: true }, + label: { type: String, default: "" }, variant: { type: String, default: "secondary" }, size: { type: String, default: "md" }, disabled: { type: Boolean, default: false }, diff --git a/src/vue/utils.js b/src/vue/utils.js index 8444b44..36143ae 100644 --- a/src/vue/utils.js +++ b/src/vue/utils.js @@ -111,6 +111,9 @@ "chevron-left": "arrows/chevron/left", "chevron-up": "arrows/chevron/up", "chevron-down": "arrows/chevron/down", + "magnifying-glass": "essentials/search", + search: "essentials/search", + "warning-circle": "essentials/alert/circle", plus: "essentials/plus", minus: "essentials/minus", x: "essentials/close-cross",