diff --git a/zero.Web/App/Components/Buttons/button.vue b/zero.Web/App/Components/Buttons/button.vue new file mode 100644 index 00000000..1189769d --- /dev/null +++ b/zero.Web/App/Components/Buttons/button.vue @@ -0,0 +1,50 @@ + + + + + + \ No newline at end of file diff --git a/zero.Web/App/Components/Forms/property.vue b/zero.Web/App/Components/Forms/property.vue new file mode 100644 index 00000000..151874c0 --- /dev/null +++ b/zero.Web/App/Components/Forms/property.vue @@ -0,0 +1,101 @@ + + + + + + \ No newline at end of file diff --git a/zero.Web/Sass/Core/_all.scss b/zero.Web/Sass/Core/_all.scss index 03fc2eee..685eb508 100644 --- a/zero.Web/Sass/Core/_all.scss +++ b/zero.Web/Sass/Core/_all.scss @@ -10,3 +10,5 @@ @import "core"; @import "icons"; + +@import "forms"; \ No newline at end of file diff --git a/zero.Web/Sass/Core/_core.scss b/zero.Web/Sass/Core/_core.scss index 7affbc1b..6b48b78e 100644 --- a/zero.Web/Sass/Core/_core.scss +++ b/zero.Web/Sass/Core/_core.scss @@ -61,31 +61,23 @@ button h1 { - @extend %font; + @extend %font-headline; font-size: calc(1.4rem + 0.1vmin); - font-weight: 600; + font-weight: 400; margin: -0.3rem 0 3rem; } h2 { - @extend %font; - font-size: calc(1.3rem + 0.1vmin); - font-weight: 700; - margin: 0 0 2.5rem; + @extend %font-headline; + font-size: calc(1.4rem + 0.1vmin); + font-weight: 400; + margin: 0 0 2rem; } -h2, h3 +h3 { - @extend %font; -} - -@media (max-width: 730px) -{ - h2 - { - margin: 0 0 6px; - } + @extend %font-headline; } diff --git a/zero.Web/Sass/Core/_forms.scss b/zero.Web/Sass/Core/_forms.scss new file mode 100644 index 00000000..8bd8e2b3 --- /dev/null +++ b/zero.Web/Sass/Core/_forms.scss @@ -0,0 +1,18 @@ + + +input, textarea +{ + @extend %font; + background: var(--color-bg); + border: 1px solid var(--color-line); + font-size: $font-size; + display: inline-block; + height: 36px; + padding: 6px 10px; + line-height: 1.5; + color: var(--color-fg); + border-radius: 0; + vertical-align: middle; + box-sizing: border-box; + width: 100%; +} diff --git a/zero.Web/Sass/Core/_mixins.scss b/zero.Web/Sass/Core/_mixins.scss index 122684cc..19ce7492 100644 --- a/zero.Web/Sass/Core/_mixins.scss +++ b/zero.Web/Sass/Core/_mixins.scss @@ -7,7 +7,8 @@ font-family: $font-family; font-weight: $weight; font-style: $style; - src: url('#{$file-path}.ttf') format('truetype'), - url('#{$file-path}.woff') format('woff'); + src: url('#{$file-path}.woff2') format('woff2'), + url('#{$file-path}.woff') format('woff'), + url('#{$file-path}.ttf') format('truetype'); } } \ No newline at end of file diff --git a/zero.Web/Sass/Core/_settings.scss b/zero.Web/Sass/Core/_settings.scss index 091acae6..82512840 100644 --- a/zero.Web/Sass/Core/_settings.scss +++ b/zero.Web/Sass/Core/_settings.scss @@ -1,12 +1,26 @@ :root { + // accent colors + --color-primary: #222; + --color-negative: #d82853; + // foreground/text color --color-fg: #222; - --color-fg-mid: #919294; + --color-fg-mid: #6f7375; + --color-fg-light: #919294; // background color shades --color-bg: #fff; --color-bg-light: #f8f9fa; --color-bg-mid: #f4f5f6; + + // line colors + --color-line: #eaebec; } + + +// font sizes + +$font-size: 14px; +$font-size-s: 12px; \ No newline at end of file diff --git a/zero.Web/Sass/Core/_typography.scss b/zero.Web/Sass/Core/_typography.scss index 6a2ae1c2..e99a9e7d 100644 --- a/zero.Web/Sass/Core/_typography.scss +++ b/zero.Web/Sass/Core/_typography.scss @@ -5,13 +5,13 @@ $font-headline-name: 'TwCenMt'; @include font-face($font-icon-name, '/Assets/Fonts/Feather/feather', 400); -@include font-face($font-text-name, '/Assets/Fonts/Lato/Lato-Light', 100); +@include font-face($font-text-name, '/Assets/Fonts/Lato/LatoLatin-Light', 100); -@include font-face($font-text-name, '/Assets/Fonts/Lato/Lato-Thin', 300); +@include font-face($font-text-name, '/Assets/Fonts/Lato/LatoLatin-Regular', 400); -@include font-face($font-text-name, '/Assets/Fonts/Lato/Lato-Regular', 400); +@include font-face($font-text-name, '/Assets/Fonts/Lato/LatoLatin-Bold', 700); -@include font-face($font-text-name, '/Assets/Fonts/Lato/Lato-Bold', 700); +@include font-face($font-text-name, '/Assets/Fonts/Lato/LatoLatin-Black', 700); @include font-face($font-headline-name, '/Assets/Fonts/TwCenMt/twcenmt-regular', 400); @@ -19,12 +19,13 @@ $font-headline-name: 'TwCenMt'; %font { - font-family: $font-text-name, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-family: $font-text-name, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } %font-headline { - font-family: $font-headline-name, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-family: $font-text-name, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + //font-family: $font-headline-name, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } %font-icon diff --git a/zero.Web/Sass/Modules/Buttons/_button.scss b/zero.Web/Sass/Modules/Buttons/_button.scss index c4359aea..86d85f44 100644 --- a/zero.Web/Sass/Modules/Buttons/_button.scss +++ b/zero.Web/Sass/Modules/Buttons/_button.scss @@ -1,5 +1,56 @@  +button +{ + @extend %font; + + &:focus + { + outline: 1px dotted var(--color-line); + } +} + +.ui-button +{ + display: inline-block; + color: white; + background: var(--color-primary); + padding: 0 30px; + height: 40px; + line-height: 40px; + border-radius: 3px; + font-size: 14px; + font-weight: 600; + margin: 0; + -webkit-backface-visibility: hidden; + -webkit-appearance: none; + outline: none; + cursor: pointer; + user-select: none; + border: none; + margin-top: 2rem; + will-change: transform, background, border-color; + transition: background .2s, transform .2s, opacity .2s; + overflow: hidden; + @extend %font; + + &:hover + { + opacity: 0.9; + } + + &:active + { + opacity: 1; + } + + &.is-disabled, &[disabled] + { + pointer-events: none; + //background: var(--color-dark); + } +} + /*button { diff --git a/zero.Web/Sass/Modules/_all.scss b/zero.Web/Sass/Modules/_all.scss index d844190e..f04aefa9 100644 --- a/zero.Web/Sass/Modules/_all.scss +++ b/zero.Web/Sass/Modules/_all.scss @@ -1,2 +1,2 @@ -@import "Buttons/_button"; \ No newline at end of file +@import "Buttons/button"; \ No newline at end of file diff --git a/zero.Web/Sass/Setup/_all.scss b/zero.Web/Sass/Setup/_all.scss index e31dd7bb..a6d69862 100644 --- a/zero.Web/Sass/Setup/_all.scss +++ b/zero.Web/Sass/Setup/_all.scss @@ -1,2 +1,4 @@ @import "canvas"; + +@import "steps"; diff --git a/zero.Web/Sass/Setup/_buttons.scss b/zero.Web/Sass/Setup/_buttons.scss deleted file mode 100644 index 5f282702..00000000 --- a/zero.Web/Sass/Setup/_buttons.scss +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/zero.Web/Sass/Setup/_canvas.scss b/zero.Web/Sass/Setup/_canvas.scss index 3d9cd94d..bd3e906e 100644 --- a/zero.Web/Sass/Setup/_canvas.scss +++ b/zero.Web/Sass/Setup/_canvas.scss @@ -13,6 +13,7 @@ body, html html { height: 100%; + -webkit-text-size-adjust: 100%; } body @@ -44,6 +45,7 @@ body min-height: 600px; position: relative; z-index: 2; + padding: 2rem; } body:before diff --git a/zero.Web/Sass/Setup/_steps.scss b/zero.Web/Sass/Setup/_steps.scss new file mode 100644 index 00000000..999f93b4 --- /dev/null +++ b/zero.Web/Sass/Setup/_steps.scss @@ -0,0 +1,39 @@ + + +.setup +{ + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; +} + +.setup-step +{ + +} + +.setup-step h2 +{ + text-align: center; +} + +.setup-step p +{ + color: var(--color-fg-mid); + font-size: 0.9rem; + line-height: 1.6; + margin: 0 0 2rem; +} + +.setup-step p b +{ + color: var(--color-fg); + font-weight: 600; +} + +.setup-step .ui-property + .ui-property +{ + padding-top: 0; + border-top: none; +} \ No newline at end of file diff --git a/zero.Web/Setup/Steps/step-user.vue b/zero.Web/Setup/Steps/step-user.vue new file mode 100644 index 00000000..5d3ab54c --- /dev/null +++ b/zero.Web/Setup/Steps/step-user.vue @@ -0,0 +1,44 @@ + + + + \ No newline at end of file diff --git a/zero.Web/Setup/setup.vue b/zero.Web/Setup/setup.vue index d4bdbb31..c7a984f6 100644 --- a/zero.Web/Setup/setup.vue +++ b/zero.Web/Setup/setup.vue @@ -1,18 +1,35 @@