Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-02-15 01:08:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

playing with variables

Browse Source
This commit is contained in:
Dennis Eichhorn 2018-12-28 18:33:54 +01:00
parent 9a8f85de5d
commit 7d9542f5fc
17 changed files with 229 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
_vars.scss
View File

@ -3,18 +3,18 @@ $font-stack: arial, serif;
$font-color: #000; $font-color: #000;
$reverse-font-color: #fff; $reverse-font-color: #fff;
$font-size: 1rem; $font-size: 1rem;
$font-size-smaller: 0.9rem;
$background-color: #fff; $background-color: #fff;
$background-color: #e7ebf3;
$link-color: #fff; $link-color: #fff;
$link-decoration: none; $link-decoration: none;
$link-hover-color: #fff; $link-hover-color: #fff;
$link-hover-decoration: none; $link-hover-decoration: none;
$default-border: $default-border; $default-border: 1px;
$default-border-color: #000; $default-border-color: #000;
$default-border-radius: $default-border-radius; $default-border-radius: 3px;
$default-padding: 5px; $default-padding: 5px;
/* Content Container */ /* Content Container */
@ -23,6 +23,7 @@ $content-container-color: $reverse-font-color;
/* Content box */ /* Content box */
$content-box-background-color: $background-color; $content-box-background-color: $background-color;
$content-box-border: $default-border;
$content-box-border-color: $default-border-color; $content-box-border-color: $default-border-color;
$content-box-margin: $default-padding; $content-box-margin: $default-padding;
$content-box-padding: $default-padding; $content-box-padding: $default-padding;
@ -115,12 +116,21 @@ $breadcrumb-border-color: $default-border-color;
$breadcrumb-inactive-background: $content-background-color; $breadcrumb-inactive-background: $content-background-color;
$breadcrumb-active-background: $content-box-background-color; $breadcrumb-active-background: $content-box-background-color;
/* Input */
$input-border: $default-border;
$input-border-color: $default-border-color;
$input-invalid-border-color: #b85450;
$input-background: $background-color;
$input-font-size: $font-size;
$input-color: $font-color;
$input-placeholder-color: #cfcfcf;
/* Button */ /* Button */
$button-border: $default-border; $button-border: $default-border;
$button-border-color: $default-border-color; $button-border-color: $default-border-color;
$button-background: #f1f1f1; $button-background: #f1f1f1;
$button-active-background: #d6d6d6; $button-active-background: #d6d6d6;
$button-font-size: 0.9rem; $button-font-size: $font-size-smaller;
$button-height: 2rem; $button-height: 2rem;
$button-min-width: 70px; $button-min-width: 70px;
$button-padding: $default-padding; $button-padding: $default-padding;
@ -139,13 +149,18 @@ $canvas-border-color: $default-border-color;
/* Article */ /* Article */
$article-background: $content-box-background-color; $article-background: $content-box-background-color;
$article-padding: $default-padding; $article-padding: $default-padding;
$article-link-color: #8ea4ff;
$article-table-border: $default-border;
$article-table-border-color: #999;
$article-even-background: #eee;
/* Form */ /* Form */
$form-label-size: 0.9rem; $form-label-size: $font-size-smaller;
/* Icon */ /* Icon */
$icon-font-color: #fff; $icon-font-color: $reverse-font-color;
$icon-font-size: 0.9rem; $icon-font-size: $font-size-smaller;
/* Img */ /* Img */
$img-padding: $default-padding; $img-padding: $default-padding;
@ -153,3 +168,29 @@ $img-border: $default-border;
$img-border-color: $default-border-color; $img-border-color: $default-border-color;
$img-background: $content-box-background-color; $img-background: $content-box-background-color;
$img-border-radius: $default-border-radius; $img-border-radius: $default-border-radius;
/* list */
$list-padding: $default-padding;
$list-background: $background-color;
$list-border-radius: $default-border-radius;
$list-border: $default-border;
$list-border-color: $default-border-color;
/* pagination */
$pagination-border-radius: $default-border-radius;
$pagination-active-color: $reverse-font-color;
$pagination-active-background: #353535;
/* pre */
$pre-background: $background-color;
$pre-border-radius: $default-border-radius;
$pre-border: $default-border;
$pre-border-color: $default-border-color;
$pre-padding: $default-padding;
/* tag */
$tag-border: $default-border;
$tag-border-color: $default-border-color;
$tag-color: $reverse-font-color;
$tag-font-size: 0.7rem;

15
article.scss
View File

@ -5,6 +5,15 @@ article {
padding: $article-padding; padding: $article-padding;
margin: 0; margin: 0;
a {
color: $article-link-color;
border-bottom: 1px dotted $article-link-color;
&:hover {
border-bottom: none;
}
}
p { p {
line-height: 1.5em; line-height: 1.5em;
} }
@ -27,15 +36,15 @@ article {
table { table {
border-collapse: collapse; border-collapse: collapse;
border: 1px solid #999; border: $article-table-border solid $article-table-border-color;
th, td { th, td {
padding: 5px; padding: 5px;
border: 1px solid #999; border: $article-table-border solid $article-table-border-color;
} }
tr:nth-child(2n) { tr:nth-child(2n) {
background: #eee; background: $article-even-background;
} }
} }
} }

2
clean.scss
View File

@ -21,7 +21,7 @@ ul {
} }
input, select, textarea, .textarea { input, select, textarea, .textarea {
box-sizing: border-box; @include box-sizing(border-box);
appearance: none; appearance: none;
box-shadow: none; box-shadow: none;

10
default.scss
View File

@ -11,14 +11,14 @@ body {
} }
pre { pre {
background: #fff; background: $pre-background;
@include border-radius(3px); @include border-radius($pre-border-radius);
border: 1px solid $content-border-color; border: $pre-border solid $pre-border-color;
padding: 5px; padding: $pre-padding;
overflow-x: scroll; overflow-x: scroll;
counter-reset: line; counter-reset: line;
width: 100%; width: 100%;
box-sizing: border-box; @include box-sizing(border-box);
span { span {
display: block; display: block;

64
input.scss
View File

@ -1,7 +1,7 @@
@import "_mixins", "_vars"; @import "_mixins", "_vars";
input, select, textarea, .textarea { input, select, textarea, .textarea {
border: 1px solid $content-border-color; border: $input-border solid $input-border-color;
} }
progress { progress {
@ -21,16 +21,16 @@ input[type="email"],
input[type="date"], input[type="date"],
input[type="number"], input[type="number"],
input[type="datetime-local"] { input[type="datetime-local"] {
box-sizing: border-box; @include box-sizing(border-box);
color: #454545; color: $input-color;
background: #fff; background: $input-background;
width: 100%; width: 100%;
height: 2rem; height: 2rem;
min-width: 70px; min-width: 70px;
max-width: 100%; max-width: 100%;
padding: 7px; padding: 7px;
font-size: 0.9rem; font-size: $input-font-size;
border: solid 1px #dcdcdc; border: $input-border solid $input-border-color;
transition: background 0.3s, border 0.3s; transition: background 0.3s, border 0.3s;
box-shadow: inset 1px 1px 4px -2px #c5c5c5; box-shadow: inset 1px 1px 4px -2px #c5c5c5;
@ -53,17 +53,17 @@ option {
} }
input[type="file"] { input[type="file"] {
border: solid 1px #dcdcdc; border: solid $input-font-size $input-background;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
color: #454545; color: $input-color;
padding: 10px; padding: 10px;
box-sizing: border-box; @include box-sizing(border-box);
} }
input::placeholder { input::placeholder {
color: #cfcfcf; color: $input-placeholder-color;
opacity: 1; opacity: 0.5;
} }
input::placeholder, textarea { input::placeholder, textarea {
@ -72,7 +72,7 @@ input::placeholder, textarea {
input:invalid { input:invalid {
transition: all 0.5s; transition: all 0.5s;
border: 1px solid #b85450; border-color: $input-invalid-border-color;
} }
textarea, .textarea { textarea, .textarea {
@ -118,13 +118,13 @@ input[type="range"] {
button { button {
@include box-sizing(border-box); @include box-sizing(border-box);
display: inline-block; display: inline-block;
background: #fff; background: $input-background;
height: 2rem; height: 2rem;
font-size: 1rem; font-size: $input-font-size;
min-width: 40px; min-width: 40px;
border-left: solid 1px #dcdcdc; border-left: solid $input-font-size $input-background;
border-top: solid 1px #dcdcdc; border-top: solid $input-font-size $input-background;
border-bottom: solid 1px #dcdcdc; border-bottom: solid $input-font-size $input-background;
border-right: none; border-right: none;
padding: 0; padding: 0;
@ -134,7 +134,7 @@ input[type="range"] {
flex-shrink: 0; flex-shrink: 0;
&:hover { &:hover {
background: #fff; background: $input-background;
} }
} }
@ -145,7 +145,7 @@ input[type="range"] {
input { input {
@include box-sizing(border-box); @include box-sizing(border-box);
font-size: 1em; font-size: $input-font-size;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
@ -154,32 +154,6 @@ input[type="range"] {
} }
} }
.dropdown {
position: relative;
display: inline-block;
&:hover .content {
display: block;
}
.content {
display: none;
position: absolute;
z-index: 2;
background: #fff;
input {
display: none;
}
label {
display: block;
margin: 5px;
padding: 5px;
}
}
}
select.plain { select.plain {
width: auto; width: auto;
margin: 0; margin: 0;

22
layout.scss
View File

@ -1,16 +1,16 @@
@import "color"; @import "color";
.ipt-wrap { .ipt-wrap {
display: table; display: table;
box-sizing: border-box; @include box-sizing(border-box);
.ipt-first { .ipt-first {
width: 100%; width: 100%;
display: table-cell; display: table-cell;
}
.ipt-second {
padding-left: 5px;
display: table-cell;
}
} }
.ipt-second {
padding-left: 5px;
display: table-cell;
}
}

9
link.scss
View File

@ -1,12 +1,3 @@
article a {
color: #8ea4ff;
border-bottom: 1px dotted #8ea4ff;
&:hover {
border-bottom: none;
}
}
.unseen { .unseen {
font-weight: bold; font-weight: bold;
} }

48
list.scss
View File

@ -1,22 +1,10 @@
@import "_mixins", "_vars"; @import "_mixins", "_vars";
ul.default li {
margin: 5px 0 5px 0;
&:first-child {
margin: 0 0 5px 0;
}
&:last-child {
margin: 5px 0 0 0;
}
}
ul.boxed { ul.boxed {
background: #fff; background: $list-background;
padding: 5px; padding: $list-padding;
@include border-radius(3px); @include border-radius($list-border-radius);
border: 1px solid $content-border-color; border: $list-border solid $list-border-color;
li { li {
margin: 5px 0 5px 0; margin: 5px 0 5px 0;
@ -33,33 +21,5 @@ ul.boxed {
ul.h-list li { ul.h-list li {
display: inline-block; display: inline-block;
margin: 5px 10px 5px 10px; margin: 5px 10px 5px 10px;
} }
.bullet-list {
margin: 0;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
td:first-child {
padding-right: 20px;
}
span {
margin-right: 5px;
}
}
.bullet {
width: 7px;
height: 7px;
border-radius: 30px;
background: #ccc;
display: inline-block;
&.active {
background: #000;
}
}

4
pagination.scss
View File

@ -13,8 +13,8 @@
} }
.active, a:hover, a:active { .active, a:hover, a:active {
color: #ffffff; color: $pagination-active-color;
background: #353535; background: $pagination-active-background;
@include box-shadow-out(#e8e8e8); @include box-shadow-out(#e8e8e8);
} }
} }

2
progress.scss
View File

@ -1,7 +1,7 @@
@import "_mixins", "_vars"; @import "_mixins", "_vars";
.meter { .meter {
height: 20px; /* Can be anything */ height: 20px; /* Can be anything */
position: relative; position: relative;
background: none !important; background: none !important;

33
section.scss
View File

@ -19,31 +19,16 @@
section.box { section.box {
@include box-shadow-bottom(#f1f1f1); @include box-shadow-bottom(#f1f1f1);
border: 1px solid $content-border-color; border: $content-box-border solid $content-box-border-color;
background: #fff; background: $content-box-background-color;
&.orange { @each $tuple in
border-top: 3px solid #FBA026; 'orange' #FBA026, 'red' #B8312F, 'green' #41A85F,
} 'blue' #2C82C9, 'purple' #553982, 'darkblue' #2969B0, 'purple' #553982 {
&.#{nth($tuple, 1)} {
&.red { background: #{nth($tuple, 2)};
border-top: 3px solid #B8312F; border-top: 3px solid #{nth($tuple, 2)};
} }
&.green {
border-top: 3px solid #41A85F;
}
&.blue {
border-top: 3px solid #2C82C9;
}
&.purple {
border-top: 3px solid #553982;
}
&.darkblue {
border-top: 3px solid #2969B0;
} }
} }

36
size.scss
View File

@ -1,33 +1,9 @@
.wf-100 { @each $tuple in
width: 100%; 'wf-100' 100%, 'wf-80' 80%, 'wf-20' 20%, 'wf-66' 66.66%,
} 'wf-50' 50%, 'wf-33' 33.33%, 'wf-25' 25%, 'wf-75' 75% {
.#{nth($tuple, 1)} {
.wf-80 { width: #{nth($tuple, 2)};
width: 80%; }
}
.wf-20 {
width: 20%;
}
.wf-50 {
width: 50%;
}
.wf-33 {
width: 33.33%;
}
.wf-25 {
width: 25%;
}
.wf-75 {
width: 75%;
}
.wf-66 {
width: 66.66%;
} }
.spacer { .spacer {

34
table.scss
View File

@ -19,33 +19,13 @@ table .sort-asc, table .sort-desc {
color: #fff; color: #fff;
} }
&.red { @each $tuple in
caption, thead { 'orange' #FBA026, 'red' #B8312F, 'green' #41A85F, 'white' #fff,
background: #B8312F; 'blue' #2C82C9, 'purple' #553982, 'darkblue' #2969B0, 'purple' #553982 {
} &.#{nth($tuple, 1)} {
} caption, thead {
background: #{nth($tuple, 2)};
&.orange { }
caption, thead {
background: #FBA026;
}
}
&.green {
caption, thead {
background: #41A85F;
}
}
&.blue {
caption, thead {
background: #2C82C9;
}
}
&.white {
caption, thead {
background: #fff;
} }
} }
} }

6
tag.scss
View File

@ -2,10 +2,10 @@
.tag { .tag {
cursor: pointer; cursor: pointer;
border: 1px solid $content-border-color; border: $tag-border solid $tag-border-color;
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
font-size: 0.7rem; font-size: $tag-font-size;
color: #fff; color: $tag-color;
display: inline-block; display: inline-block;
line-height: 1rem; line-height: 1rem;
} }

25
tests/StandardElements.htm
View File

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<base href="http://127.0.0.1/cssOMS/tests/">
<title>Style Test</title> <title>Style Test</title>
<link rel="stylesheet" type="text/css" href="/Resources/fontawesome/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="/Resources/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/cssOMS/styles.css"> <link rel="stylesheet" type="text/css" href="/cssOMS/styles.css">
@ -84,7 +85,7 @@
<script src="../../Web/Backend/js/global/ResponseEvents.js"></script> <script src="../../Web/Backend/js/global/ResponseEvents.js"></script>
<script src="../../Web/Backend/js/global/TouchEvents.js"></script> <script src="../../Web/Backend/js/global/TouchEvents.js"></script>
<script src="../../Web/Backend/js/global/VoiceEvents.js"></script> <script src="../../Web/Backend/js/global/VoiceEvents.js"></script>
<script src="../../Web/Backend/ServiceWorker.js"></script> <script src="load.js"></script>
</head> </head>
<body> <body>
<div style="width: 900px; padding: 20px; border: 1px solid #ff000000;" class="center"> <div style="width: 900px; padding: 20px; border: 1px solid #ff000000;" class="center">
@ -420,17 +421,27 @@
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge</label></td> <td colspan="2"><label>Input+Autocomplete+Dropdown+Badge</label></td>
<tr> <tr>
<td colspan="2"> <td colspan="2">
<div class="advancedInput"> <div class="advancedInput" id="input1">
<div class="inputOuter"> <div class="inputOuter">
<div class="inputbackground"> <div class="inputbackground">
<input type="text" emptyAfterSelect=true> <input class="inputClass" id="inputId" type="text" emptyAfterSelect="true" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
</div> </div>
</div> </div>
<div class="dropdown" isActive=true> <div class="dropdown" isActive="true">
<template id="rowElement"></template> <table>
<template id="rowElement" class="rowTemplate">
<tr>
<td data-tpl-value="/id" data-tpl-name="/id" data-value="">s</td>
<td data-tpl-value="/name/0" data-tpl-name="/name/0"></td>
<td data-tpl-value="/email" data-tpl-name="/eamil"></td>
</tr>
</template>
</table>
</div> </div>
<div class="tags" isActive=true> <div class="tags" isActive="true">
<template id="tagElement"></template> <template id="tagElement">
<span data-tpl-value="/name/0" data-tpl-name="/name/0" class="badge"></span>
</template>
</div> </div>
</div> </div>
<tr> <tr>

28
tests/app.htm Normal file
View File

@ -0,0 +1,28 @@
<html>
<head>
<meta charset="utf-8">
<title>Style Test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
</header>
<nav>
<ul>
<li></li>
</ul>
</nav>
<main>
<section>
<form></form>
</section>
<section>
<article>
<h1>Title H1</h1>
</article>
</section>
</main>
</body>
</html>

65
tests/load.js
View File

@ -42,18 +42,6 @@
jsOMS.Uri.UriFactory.setQuery('/lang', window.location.href.substr(this.request.getBase().length).split('/')[0]); jsOMS.Uri.UriFactory.setQuery('/lang', window.location.href.substr(this.request.getBase().length).split('/')[0]);
this.uiManager.bind(); 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 () setResponseMessages ()
@ -127,4 +115,57 @@ jsOMS.ready(function ()
/** global: jsOMS */ /** global: jsOMS */
window.omsApp = new jsOMS.Application(); window.omsApp = new jsOMS.Application();
const inputElement = document.getElementById('input1');
const dataList = inputElement.getElementsByClassName('dropdown')[0].getElementsByTagName('table')[0];
const dataTpl = inputElement.getElementsByClassName('rowTemplate')[0];
const src = inputElement.getElementsByClassName('inputClass')[0].getAttribute('data-src');
document.getElementById('inputId').addEventListener('keyup', function(e) {
if (typeof src !== 'undefined' && src !== '') {
while (dataList.firstChild) {
dataList.removeChild(dataList.firstChild);
}
const request = new jsOMS.Message.Request.Request(src);
request.setSuccess(function (data) {
data = JSON.parse(data.response);
const dataLength = data.length;
console.table(data);
for(let i = 0; i < dataLength; ++i) {
const newRow = dataTpl.content.cloneNode(true);
const fields = newRow.querySelectorAll('[data-tpl-value]');
const fieldLength = fields.length;
for (let j = 0; j < fieldLength; ++j) {
console.log(jsOMS.getArray(fields[j].getAttribute('data-tpl-value'), data[i]));
fields[j].appendChild(document.createTextNode(jsOMS.getArray(fields[j].getAttribute('data-tpl-name'), data[i])));
}
dataList.appendChild(newRow);
}
});
request.send();
}
// check if data-src is available
// if yes load data with delay of x ms
// if dropdown active
// put data into dropdown
// select highest fit
// with enter/tab the text is completed
// if tags is true
// move selected to tag
// if emptyafter select is true
// remove content from input field
// else
// autocomplete text based on selecteion
// else put directly into input field and/or tag list depending on settings
// if not check drop down for search results/data and do similar tasks as above
// .... reorder ... currently strucuture sux!
// the dropdown should be a table because the data might be in tables (e.g. first name, second name, address etc. for a result)
});
}); });