From 00141502072b9aa0a37edb698c05973e596ac19f Mon Sep 17 00:00:00 2001 From: "Val Erastov (xibyte)" Date: Thu, 21 May 2020 17:17:06 -0700 Subject: [PATCH] work on typography --- modules/ui/styles/global/dialog.less | 19 ++++++++ .../{init => global}/documentation.less | 2 +- modules/ui/styles/{init => global}/form.less | 0 modules/ui/styles/global/headers.less | 24 ++++++++++ modules/ui/styles/global/icons.less | 46 +++++++++++++++++++ modules/ui/styles/{init => global}/index.less | 4 ++ modules/ui/styles/{init => global}/links.less | 0 modules/ui/styles/{init => global}/main.less | 14 +++--- .../ui/styles/{init => global}/minireset.less | 0 .../ui/styles/{init => global}/scroll.less | 0 modules/ui/styles/{init => global}/svg.less | 0 .../ui/styles/{init => global}/tables.less | 2 +- modules/ui/styles/global/typography.less | 38 +++++++++++++++ modules/ui/styles/init/icons.less | 19 -------- modules/ui/styles/theme.less | 1 - 15 files changed, 141 insertions(+), 28 deletions(-) create mode 100644 modules/ui/styles/global/dialog.less rename modules/ui/styles/{init => global}/documentation.less (93%) rename modules/ui/styles/{init => global}/form.less (100%) create mode 100644 modules/ui/styles/global/headers.less create mode 100644 modules/ui/styles/global/icons.less rename modules/ui/styles/{init => global}/index.less (74%) rename modules/ui/styles/{init => global}/links.less (100%) rename modules/ui/styles/{init => global}/main.less (63%) rename modules/ui/styles/{init => global}/minireset.less (100%) rename modules/ui/styles/{init => global}/scroll.less (100%) rename modules/ui/styles/{init => global}/svg.less (100%) rename modules/ui/styles/{init => global}/tables.less (96%) create mode 100644 modules/ui/styles/global/typography.less delete mode 100644 modules/ui/styles/init/icons.less diff --git a/modules/ui/styles/global/dialog.less b/modules/ui/styles/global/dialog.less new file mode 100644 index 00000000..6a66581f --- /dev/null +++ b/modules/ui/styles/global/dialog.less @@ -0,0 +1,19 @@ +.dialog { + +} + +.dialog-content { + +} + +.dialog-buttons { + +} + +.dialog-ok { + +} + +.dialog-cancel { + +} \ No newline at end of file diff --git a/modules/ui/styles/init/documentation.less b/modules/ui/styles/global/documentation.less similarity index 93% rename from modules/ui/styles/init/documentation.less rename to modules/ui/styles/global/documentation.less index 3607d3ba..1fef4634 100644 --- a/modules/ui/styles/init/documentation.less +++ b/modules/ui/styles/global/documentation.less @@ -1,6 +1,6 @@ .documentation-content { background: #323444; - font-size: 13px; + font-size: 16px; padding: 10px; } diff --git a/modules/ui/styles/init/form.less b/modules/ui/styles/global/form.less similarity index 100% rename from modules/ui/styles/init/form.less rename to modules/ui/styles/global/form.less diff --git a/modules/ui/styles/global/headers.less b/modules/ui/styles/global/headers.less new file mode 100644 index 00000000..65120ba8 --- /dev/null +++ b/modules/ui/styles/global/headers.less @@ -0,0 +1,24 @@ +h1, .h1 { + font-size: 2em; + font-weight: bold; +} +h2, .h2 { + font-size: 1.5em; + font-weight: bold; +} +h3, .h3 { + font-size: 1.17em; + font-weight: bold; +} +h4, .h4 { + font-size: 1em; + font-weight: bold; +} +h5, .h5 { + font-size: .83em; + font-weight: bold; +} +h6, .h6 { + font-size: .67em; + font-weight: bold; +} \ No newline at end of file diff --git a/modules/ui/styles/global/icons.less b/modules/ui/styles/global/icons.less new file mode 100644 index 00000000..de147b93 --- /dev/null +++ b/modules/ui/styles/global/icons.less @@ -0,0 +1,46 @@ +.icon-16 svg { + width: 16px; + height: 16px +} + +.icon-32 svg { + width: 32px; + height: 32px +} + +.icon-48 svg { + width: 48px; + height: 48px +} + +.icon-64 svg { + width: 64px; + height: 64px +} + +.icon-spin { + -webkit-animation: icon-spin 2s infinite linear; + animation: icon-spin 2s infinite linear; +} + +@-webkit-keyframes icon-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} + +@keyframes icon-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} \ No newline at end of file diff --git a/modules/ui/styles/init/index.less b/modules/ui/styles/global/index.less similarity index 74% rename from modules/ui/styles/init/index.less rename to modules/ui/styles/global/index.less index 2c4297fa..687c7830 100644 --- a/modules/ui/styles/init/index.less +++ b/modules/ui/styles/global/index.less @@ -1,4 +1,6 @@ @import "./minireset.less"; +@import "./typography.less"; +@import "./headers"; @import "../theme.less"; @import "../mixins.less"; @import "./main.less"; @@ -8,4 +10,6 @@ @import "./svg.less"; @import "./icons.less"; @import "./scroll"; +@import "./tree"; @import "./documentation"; +@import "./dialog.less"; diff --git a/modules/ui/styles/init/links.less b/modules/ui/styles/global/links.less similarity index 100% rename from modules/ui/styles/init/links.less rename to modules/ui/styles/global/links.less diff --git a/modules/ui/styles/init/main.less b/modules/ui/styles/global/main.less similarity index 63% rename from modules/ui/styles/init/main.less rename to modules/ui/styles/global/main.less index 5383ed50..a8287a86 100644 --- a/modules/ui/styles/init/main.less +++ b/modules/ui/styles/global/main.less @@ -1,24 +1,22 @@ html, pre { - font: @font-size 'Lucida Grande', sans-serif; + .regular-typography; + font-family: 'Roboto', 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, sans-serif; } body { background-color: @bg-color; color: @font-color; - font-family: 'Roboto', 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, sans-serif; } iframe { border: 0; } + .disable-selection { .no-selection(); } -.compact-font, .condensed { - font-family: 'Roboto Condensed', 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, sans-serif; -} pre { line-height: 1.5; @@ -26,4 +24,8 @@ pre { .hover:hover { background-color: @color-highlight; -} \ No newline at end of file +} + +path { + stroke: currentColor; +} diff --git a/modules/ui/styles/init/minireset.less b/modules/ui/styles/global/minireset.less similarity index 100% rename from modules/ui/styles/init/minireset.less rename to modules/ui/styles/global/minireset.less diff --git a/modules/ui/styles/init/scroll.less b/modules/ui/styles/global/scroll.less similarity index 100% rename from modules/ui/styles/init/scroll.less rename to modules/ui/styles/global/scroll.less diff --git a/modules/ui/styles/init/svg.less b/modules/ui/styles/global/svg.less similarity index 100% rename from modules/ui/styles/init/svg.less rename to modules/ui/styles/global/svg.less diff --git a/modules/ui/styles/init/tables.less b/modules/ui/styles/global/tables.less similarity index 96% rename from modules/ui/styles/init/tables.less rename to modules/ui/styles/global/tables.less index e2de3f88..9c1d30b8 100644 --- a/modules/ui/styles/init/tables.less +++ b/modules/ui/styles/global/tables.less @@ -1,5 +1,5 @@ table { - font-size: @font-size; + .mid-typography; } table.striped { diff --git a/modules/ui/styles/global/typography.less b/modules/ui/styles/global/typography.less new file mode 100644 index 00000000..e046fbea --- /dev/null +++ b/modules/ui/styles/global/typography.less @@ -0,0 +1,38 @@ +.svgSize(@size) { + svg { + width: @size; + height: @size; + } +} + +.small-typography { + font-size: 12px; + line-height: 1.3; + .svgSize(16px); +} + +.mid-typography { + font-size: 13px; + line-height: 1.35; + .svgSize(16px); +} + +.regular-typography { + font-size: 14px; + line-height: 1.4; + .svgSize(17px); +} + +.comfort-typography { + font-size: 16px; + line-height: 1.5; + .svgSize(18px) +} + +.condensed { + font-family: 'Roboto Condensed', 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, sans-serif; +} + +.padded { + padding: 0.5em; +} \ No newline at end of file diff --git a/modules/ui/styles/init/icons.less b/modules/ui/styles/init/icons.less deleted file mode 100644 index a6d56962..00000000 --- a/modules/ui/styles/init/icons.less +++ /dev/null @@ -1,19 +0,0 @@ -.icon-16 svg { - width: 16px; - height: 16px -} - -.icon-32 svg { - width: 32px; - height: 32px -} - -.icon-48 svg { - width: 48px; - height: 48px -} - -.icon-64 svg { - width: 64px; - height: 64px -} \ No newline at end of file diff --git a/modules/ui/styles/theme.less b/modules/ui/styles/theme.less index 17e70c59..d26ac087 100644 --- a/modules/ui/styles/theme.less +++ b/modules/ui/styles/theme.less @@ -26,7 +26,6 @@ @color-text-highlight: #9cdaf7; -@font-size: 11px; //@work-area-toolbar-bg-color: ; //@work-area-toolbar-font-color: ;