From 9a8f85de5dd534bab97745a9c28680524deeb442 Mon Sep 17 00:00:00 2001 From: Dennis Eichhorn Date: Wed, 26 Dec 2018 17:15:17 +0100 Subject: [PATCH] Testing with variables --- _vars.scss | 146 ++++++++++++++++++++++++----- accordion.scss | 28 +++--- alert.scss | 8 +- article.scss | 41 +++++++++ blockquote.scss | 8 +- breadcrumb.scss | 20 ++-- button.scss | 34 +++---- canvas.scss | 4 +- default.scss | 44 +-------- form.scss | 13 +-- icon.scss | 12 ++- image.scss | 20 ++-- styles.scss | 2 +- tests/StandardElements.htm | 184 ++++++++++++++++++++++++++++++++++++- tests/load.js | 130 ++++++++++++++++++++++++++ 15 files changed, 551 insertions(+), 143 deletions(-) create mode 100644 article.scss create mode 100644 tests/load.js diff --git a/_vars.scss b/_vars.scss index cb02cdb..08faeea 100644 --- a/_vars.scss +++ b/_vars.scss @@ -1,43 +1,54 @@ /* Global */ $font-stack: arial, serif; $font-color: #000; -$font-size: 1em; +$reverse-font-color: #fff; +$font-size: 1rem; $background-color: #fff; +$background-color: #e7ebf3; $link-color: #fff; $link-decoration: none; $link-hover-color: #fff; $link-hover-decoration: none; +$default-border: $default-border; +$default-border-color: #000; +$default-border-radius: $default-border-radius; +$default-padding: 5px; + /* Content Container */ -$content-container-padding: 5px; -$content-container-color: #fff; +$content-container-padding: $default-padding; +$content-container-color: $reverse-font-color; /* Content box */ -$content-box-background-color: #fff; -$content-box-border-color: #000; -$content-box-margin: 5px; -$content-box-padding: 5px; -$content-box-font-size: 1em; -$content-box-font-color: #000; +$content-box-background-color: $background-color; +$content-box-border-color: $default-border-color; +$content-box-margin: $default-padding; +$content-box-padding: $default-padding; +$content-box-font-size: $font-size; +$content-box-font-color: $font-color; + +$content-border-color: #b7b7b7; +$content-borderlight-color: #dddddd; +$content-background-color: #f5f5ff; /* Navigation */ $nav-top-background-color: #000; -$nav-top-font-color: #fff; +$nav-top-font-color: $reverse-font-color; $nav-top-padding: 3px; -$nav-side-background-color: #000; -$nav-side-font-color: #fff; -$nav-side-padding: 3px; +$nav-side-background-color: $nav-top-background-color; +$nav-side-font-color: $nav-top-font-color; +$nav-side-padding: $nav-top-padding; -$nav-main-background-color: #000; -$nav-main-font-color: #fff; -$nav-main-padding: 3px; +$nav-main-background-color: $nav-side-background-color; +$nav-main-font-color: $nav-side-font-color; +$nav-main-padding: $nav-top-padding; -$nav-contentside-background-color: #000; -$nav-contentside-font-color: #fff; -$nav-contentside-padding: 3px; +$nav-contentside-background-color: $nav-side-background-color; +$nav-contentside-font-color: $nav-side-font-color; +$nav-contentside-padding: $nav-top-padding; /* Colors */ $red: #f00; @@ -49,7 +60,96 @@ $black: #000; $pink: #f0f; $purple: #7D26CD; -$content-border-color: #b7b7b7; -$content-borderlight-color: #dddddd; -$background-color: #e7ebf3; -$content-background-color: #f5f5ff; \ No newline at end of file +/* Accordion */ +$accordion-margin-top-bottom: 10px; +$accordion-margin-left-right: 30px; + +$accordion-border-size: $default-border; +$accordion-border-color: $default-border-color; + +// Label +$accordion-padding-top-bottom: $default-padding; +$accordion-padding-left-right: 20px; +$accordion-font-size: $font-size; + +$accordion-inactive-color-start: #e0e3eb; +$accordion-inactive-color-end: #f5f5ff; +$accordion-inactive-background: #f5f5ff; +$accordion-inactive-foreground: #777; + +$accordion-active-color-start: #fff; +$accordion-active-color-end: #fff; +$accordion-active-background: $content-box-background-color; +$accordion-active-foreground: $font-color; + +$accordion-hover-color-start: #fff; +$accordion-hover-color-end: #fff; +$accordion-hover-background: $content-box-background-color; + +$accordion-border-radius: $default-border-radius; + +// Content +$accordion-padding: 10px; + +/* Log */ +$log-padding: $default-padding; +$log-margin: 5px; +$log-border: 2px; + +/* Blockquote */ +$blockquote-padding: 10px; +$blockquote-background: $content-box-background-color; + +$blockquote-border: $default-border; +$blockquote-border-color: $default-border-color; +$blockquote-border-radius: $default-border-radius; + +/* Breadcrumbs */ +$breadcrumb-font-size: 12px; +$breadcrumb-padding: 10px; + +$breadcrumb-border: $default-border; +$breadcrumb-border-radius: $default-border-radius; +$breadcrumb-border-color: $default-border-color; + +$breadcrumb-inactive-background: $content-background-color; +$breadcrumb-active-background: $content-box-background-color; + +/* Button */ +$button-border: $default-border; +$button-border-color: $default-border-color; +$button-background: #f1f1f1; +$button-active-background: #d6d6d6; +$button-font-size: 0.9rem; +$button-height: 2rem; +$button-min-width: 70px; +$button-padding: $default-padding; + +// Breadcrumb buttons +$button-crumb-font-size: 12px; +$button-crumb-background: #f5f5ff; +$button-crumb-active-background: $content-box-background-color; +$button-crumb-padding: 10px; + +/* Canvas */ +$canvas-background: $content-box-background-color; +$canvas-border: $default-border; +$canvas-border-color: $default-border-color; + +/* Article */ +$article-background: $content-box-background-color; +$article-padding: $default-padding; + +/* Form */ +$form-label-size: 0.9rem; + +/* Icon */ +$icon-font-color: #fff; +$icon-font-size: 0.9rem; + +/* Img */ +$img-padding: $default-padding; +$img-border: $default-border; +$img-border-color: $default-border-color; +$img-background: $content-box-background-color; +$img-border-radius: $default-border-radius; \ No newline at end of file diff --git a/accordion.scss b/accordion.scss index 21a1d66..549ff33 100644 --- a/accordion.scss +++ b/accordion.scss @@ -1,15 +1,15 @@ @import "_mixins", "_vars"; .ac-container{ - margin: 10px auto 30px auto; + margin: $accordion-margin-top-bottom auto $accordion-margin-left-right auto; text-align: left; > input { display: none; &:checked + label { - @include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff); - color: #000; + @include gradient-top-bottom($accordion-active-color-start, 0, $accordion-active-color-end, 100, $accordion-active-background); + color: $accordion-active-foreground; + section { display: inherit; @@ -23,30 +23,30 @@ label { display: block; - padding: 5px 20px; + padding: $accordion-padding-top-bottom $accordion-padding-left-right; position: relative; z-index: 20; margin-top: -1px; cursor: pointer; - color: #777; - font-size: 1em; - border: 1px solid $content-border-color; - @include border-radius(3px); - @include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color); + color: $accordion-inactive-foreground; + font-size: $accordion-font-size; + border: $accordion-border-size solid $accordion-border-color; + @include border-radius($accordion-border-radius); + @include gradient-top-bottom($accordion-inactive-color-start, 0, $accordion-inactive-color-end, 100, $accordion-inactive-background); &:hover { - @include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff); + @include gradient-top-bottom($accordion-hover-color-start, 0, $accordion-hover-color-end, 100, $accordion-hover-background); } } > section { - background: $content-background-color; + background: $content-box-background-color; overflow: hidden; height: auto; position: relative; z-index: 10; - border-left: 1px solid $content-border-color; - border-right: 1px solid $content-border-color; - padding: 10px; + border-left: $accordion-border-size solid $accordion-border-color; + border-right: $accordion-border-size solid $accordion-border-color; + padding: $accordion-padding; } } diff --git a/alert.scss b/alert.scss index b27e67c..64ca87c 100644 --- a/alert.scss +++ b/alert.scss @@ -1,6 +1,8 @@ +@import "_mixins", "_vars"; + .log-msg { - padding: 5px; - margin: 5px; + padding: $log-padding; + margin: $log-margin; } @each $tuple in @@ -10,7 +12,7 @@ 'info' #b6d2ff #85b0ee #4865a5 { .log-msg-status-#{nth($tuple, 1)} { background: #{nth($tuple, 2)}; - border: 2px solid #{nth($tuple, 3)}; + border: $log-border solid #{nth($tuple, 3)}; color: #{nth($tuple, 4)}; } } \ No newline at end of file diff --git a/article.scss b/article.scss new file mode 100644 index 0000000..4b95ffa --- /dev/null +++ b/article.scss @@ -0,0 +1,41 @@ +@import "_mixins", "_vars"; + +article { + background: $article-background; + padding: $article-padding; + margin: 0; + + p { + line-height: 1.5em; + } + + ol, ul { + margin-left: 30px; + } + + ul { + list-style: disc; + } + + blockquote { + margin: 10px 0 10px 0; + + p:last-child { + margin-bottom: 0; + } + } + + table { + border-collapse: collapse; + border: 1px solid #999; + + th, td { + padding: 5px; + border: 1px solid #999; + } + + tr:nth-child(2n) { + background: #eee; + } + } +} diff --git a/blockquote.scss b/blockquote.scss index 2f53e71..b28105a 100644 --- a/blockquote.scss +++ b/blockquote.scss @@ -1,9 +1,9 @@ @import "_mixins", "_vars"; blockquote { - border: 1px solid $content-borderlight-color; - background: #ffffff; - padding: 10px; + border: $blockquote-border solid $blockquote-border-color; + background: $blockquote-background; + padding: $blockquote-padding; @include box-sizing(border-box); - @include border-radius(3px); + @include border-radius($blockquote-border-radius); } diff --git a/breadcrumb.scss b/breadcrumb.scss index f50a7e3..470f242 100644 --- a/breadcrumb.scss +++ b/breadcrumb.scss @@ -3,12 +3,12 @@ .crumbs-1 { list-style: none; overflow: hidden; - font-size: 12px; + font-size: $breadcrumb-font-size; li { - background: $content-background-color; - border: 1px solid $content-border-color; - padding: 10px 10px 10px 20px; + background: $breadcrumb-inactive-background; + border: $breadcrumb-border solid $breadcrumb-border-color; + padding: $breadcrumb-padding; position: relative; display: block; float: left; @@ -18,7 +18,7 @@ @include box-shadow-out(#ffffff); &:first-child { - @include border-left-radius(3px); + @include border-left-radius($breadcrumb-border-radius); } &:not(.last):after, &:before { @@ -28,7 +28,7 @@ height: 0; border-top: 18px solid transparent; border-bottom: 17px solid transparent; - border-left: 14px solid $content-background-color; + border-left: 14px solid $breadcrumb-border-color; position: absolute; top: 50%; margin-top: -18px; @@ -40,8 +40,8 @@ } &:before { - border-left-color: $content-border-color; - margin-left: 1px; + border-left-color: $breadcrumb-border-color; + margin-left: $breadcrumb-border; z-index: 1; } @@ -52,7 +52,7 @@ .last { padding-right: 20px; - @include border-right-radius(3px); + @include border-right-radius($breadcrumb-border-radius); &:before { border: none; @@ -64,6 +64,6 @@ } .active, li:hover { - background: #ffffff; + background: $breadcrumb-active-background; } } diff --git a/button.scss b/button.scss index e013cd7..decade7 100644 --- a/button.scss +++ b/button.scss @@ -5,18 +5,18 @@ } button, input[type="submit"], input[type="button"], a.button { - border: 1px solid $content-border-color; + border: $button-border solid $button-border-color; cursor: pointer; text-shadow: 1px 1px 1px #ffffff; - min-width: 70px; - height: 2rem; - font-size: 0.9rem; - background: #f1f1f1; + min-width: $button-min-width; + height: $button-height; + font-size: $button-font-size; + background: $button-background; @include box-shadow-out(#ffffff); &:hover, :active { text-shadow: -1px -1px 1px #ffffff; - background: #d6d6d6; + background: $button-active-background; } } @@ -50,10 +50,10 @@ ul.btns { font-size: 12px; li { - background: $content-background-color; - border-left: 1px solid $content-border-color; - border-top: 1px solid $content-border-color; - border-bottom: 1px solid $content-border-color; + background: $button-crumb-background; + border-left: $button-border solid $button-border-color; + border-top: $button-border solid $button-border-color; + border-bottom: $button-border solid $button-border-color; float: left; text-shadow: -1px -1px 1px #ffffff; cursor: pointer; @@ -61,18 +61,18 @@ ul.btns { @include box-shadow-out(#ffffff); &:last-child { - border-right: 1px solid $content-border-color; + border-right: $button-border solid $button-border-color; } &:before { - border-left-color: $content-border-color; + border-left-color: $button-border-color; margin-left: 1px; } } a { display: block; - padding: 10px; + padding: $button-crumb-padding; } .active { @@ -80,18 +80,18 @@ ul.btns { } .active, li:hover { - background: #ffffff; + background: $button-crumb-active-background; } } button.simple { - background: $content-background-color; - border: 1px solid $content-border-color; + background: $button-background; + border: $button-border solid $button-border-color; text-shadow: -1px -1px 1px #ffffff; padding: 5px; min-width: 40px; &:hover { - background: #ffffff; + background: $button-background; } } diff --git a/canvas.scss b/canvas.scss index aa7015b..5726e3b 100644 --- a/canvas.scss +++ b/canvas.scss @@ -1,7 +1,7 @@ @import "_mixins", "_vars"; canvas { - background: #fff; - border: 1px solid #000; + background: $canvas-background; + border: $canvas-border solid $canvas-border-color; user-select: none; } diff --git a/default.scss b/default.scss index baaf43c..9e40856 100644 --- a/default.scss +++ b/default.scss @@ -3,7 +3,7 @@ body { background: $background-color; font-family: Open Sans, sans-serif; - font-size: 0.9em; + font-size: $font-size; } .clear { @@ -34,44 +34,4 @@ pre { width: 30px; } } -} - -article { - background: #fff; - padding: 5px; - margin: 0; - - p { - line-height: 1.5em; - } - - ol, ul { - margin-left: 30px; - } - - ul { - list-style: disc; - } - - blockquote { - margin: 10px 0 10px 0; - - p:last-child { - margin-bottom: 0; - } - } - - table { - border-collapse: collapse; - border: 1px solid #999; - - th, td { - padding: 5px; - border: 1px solid #999; - } - - tr:nth-child(2n) { - background: #eee; - } - } -} +} \ No newline at end of file diff --git a/form.scss b/form.scss index c78fa09..0c2cd16 100644 --- a/form.scss +++ b/form.scss @@ -15,7 +15,7 @@ form { } label { - font-size: 0.9em; + font-size: $form-label-size; color: #878787; text-shadow: -1px -1px 1px #ffffff; } @@ -24,21 +24,12 @@ form { margin-left: 3px; } - .inputPrefix { - border-left: 1px solid $content-border-color; - border-top: 1px solid $content-border-color; - border-bottom: 1px solid $content-border-color; - line-height: 2em; - height: 100%; - background: #bebebe; - } - .layout td+td { padding-left: 5px; } .list { - font-size: 0.9em; + font-size: $form-label-size; td { white-space: nowrap; diff --git a/icon.scss b/icon.scss index 21f9d33..91001b4 100644 --- a/icon.scss +++ b/icon.scss @@ -1,5 +1,7 @@ +@import "_mixins", "_vars"; + .infoIcon { - width: .9rem; + width: $icon-font-size; text-align: center; vertical-align: middle; position: relative; @@ -11,13 +13,13 @@ position: absolute; right: -.55rem; top: -.45rem; - width: .9rem; - height: .9rem; - line-height: .9rem; + width: $icon-font-size; + height: $icon-font-size; + line-height: $icon-font-size; border-radius: 50%; text-align: center; - color: #fff; + color: $icon-font-color; background: rgba(209, 96, 89, 1); } } diff --git a/image.scss b/image.scss index f343b13..8d789b7 100644 --- a/image.scss +++ b/image.scss @@ -2,24 +2,24 @@ img { &.frame-1 { - padding: 5px; - background: $content-background-color; - border: 1px solid $content-border-color; + padding: $img-padding; + background: $img-background; + border: $img-border solid $img-border-color; @include box-shadow-out(#ffffff); - @include border-radius(3px); + @include border-radius($img-border-radius); } &.frame-2 { - border: 1px solid $content-border-color; - background: $content-background-color; + border: $img-border solid $img-border-color; + background: $img-background; } &.frame-3 { - padding: 5px; - background: #ffffff; - border: 1px solid $content-border-color; + padding: $img-padding; + background: $img-background; + border: $img-border solid $img-border-color; @include box-shadow-out(#ffffff); - @include border-radius(3px); + @include border-radius($img-border-radius); } } diff --git a/styles.scss b/styles.scss index 2f8a389..65fa4b6 100644 --- a/styles.scss +++ b/styles.scss @@ -1,3 +1,3 @@ @import "_vars", "clean", "_mixins", "default", "color", "size", "transformation", "alignment", "visibility", "animate", "grid"; -@import "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "main", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag"; +@import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "main", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag"; @import "media"; diff --git a/tests/StandardElements.htm b/tests/StandardElements.htm index 8058dde..5cc15c6 100644 --- a/tests/StandardElements.htm +++ b/tests/StandardElements.htm @@ -1,8 +1,90 @@ + Style Test + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -206,10 +288,11 @@

Form

+

Default

- +
@@ -328,6 +411,105 @@ +

Input

+
+
+ +
+ + + + + + + + + +
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+
+ +

To List

+
+
+
+ + + + + + + + + + +
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+
+ +

Dropdown

+
+
+
+ + + + + + + + + + +
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+
+

Navigation

Content

diff --git a/tests/load.js b/tests/load.js new file mode 100644 index 0000000..aef06f4 --- /dev/null +++ b/tests/load.js @@ -0,0 +1,130 @@ +(function (jsOMS) +{ + "use strict"; + + jsOMS.Application = class { + constructor () + { + jsOMS.Autoloader.initPreloaded(); + + this.logger = jsOMS.Log.Logger.getInstance(); + window.logger = this.logger; + + this.cacheManager = new jsOMS.DataStorage.CacheManager(); + this.storageManager = new jsOMS.DataStorage.StorageManager(); + this.eventManager = new jsOMS.Event.EventManager(); + this.responseManager = new jsOMS.Message.Response.ResponseManager(); + this.dispatcher = new jsOMS.Dispatcher.Dispatcher(); + this.assetManager = new jsOMS.Asset.AssetManager(); + this.acountManager = new jsOMS.Account.AccountManager(); + this.uiManager = new jsOMS.UI.UIManager(this); + this.inputManager = new jsOMS.UI.Input.InputManager(this); + this.moduleManager = new jsOMS.Module.ModuleManager(this); + this.readManager = new jsOMS.UI.Input.Voice.ReadManager(); + this.voiceManager = new jsOMS.UI.Input.Voice.VoiceManager(this); + this.notifyManager = new jsOMS.Message.Notification.NotificationManager(); + this.request = new jsOMS.Uri.Http(window.location.href); + + this.request.setRootPath( + jsOMS.Uri.Http.parseUrl( + document.getElementsByTagName('base')[0].href + ).path + ); + + this.setResponseMessages(); + + this.setActions(); + this.setKeyboardActions(); + this.setMouseActions(); + this.setVoiceActions(); + + jsOMS.Uri.UriFactory.setupUriBuilder(this.request); + jsOMS.Uri.UriFactory.setQuery('/lang', window.location.href.substr(this.request.getBase().length).split('/')[0]); + + this.uiManager.bind(); + this.setupServiceWorker(); + }; + + setupServiceWorker () + { + /** global: navigator */ + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('/Web/Backend/ServiceWorker.js', {scope: this.request.getBase()}).catch(function (e) + { + jsOMS.Log.Logger.instance.warning('ServiceWorker registration failed.'); + }); + } + }; + + setResponseMessages () + { + /** global: RESPONSE_EVENTS */ + for(let key in RESPONSE_EVENTS) { + if(RESPONSE_EVENTS.hasOwnProperty(key)) { + this.responseManager.add(key, RESPONSE_EVENTS[key]); + } + } + }; + + setActions () + { + /** global: ACTION_EVENTS */ + for(let key in ACTION_EVENTS) { + if(ACTION_EVENTS.hasOwnProperty(key)) { + this.uiManager.getActionManager().add(key, ACTION_EVENTS[key]); + } + } + }; + + setKeyboardActions () + { + /** global: KEYBOARD_EVENTS */ + let length = KEYBOARD_EVENTS.length; + + for(let i = 0; i < length; i++) { + this.inputManager.getKeyboardManager().add( + KEYBOARD_EVENTS[i]['element'], + KEYBOARD_EVENTS[i]['keys'], + KEYBOARD_EVENTS[i]['callback'] + ); + } + }; + + setMouseActions () + { + /** global: MOUSE_EVENTS */ + let length = MOUSE_EVENTS.length; + + for(let i = 0; i < length; i++) { + this.inputManager.getMouseManager().add( + MOUSE_EVENTS[i]['element'], + MOUSE_EVENTS[i]['type'], + MOUSE_EVENTS[i]['button'], + MOUSE_EVENTS[i]['callback'], + MOUSE_EVENTS[i]['exact'] + ); + } + }; + + setVoiceActions () + { + /** global: VOICE_EVENTS */ + for(let key in VOICE_EVENTS) { + if(VOICE_EVENTS.hasOwnProperty(key)) { + this.voiceManager.add(key, VOICE_EVENTS[key]); + } + } + + this.voiceManager.setup(); + this.voiceManager.start(); + }; + } +}(window.jsOMS = window.jsOMS || {})); + +jsOMS.ready(function () +{ + "use strict"; + + /** global: jsOMS */ + window.omsApp = new jsOMS.Application(); +});