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(); +});