mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-01-11 19:18:40 +00:00
Re structure styles
This commit is contained in:
parent
531b06145c
commit
82cc53e633
105
_mixins.scss
105
_mixins.scss
|
|
@ -1,105 +0,0 @@
|
|||
@mixin box-sizing($box-model) {
|
||||
-moz-box-sizing: $box-model;
|
||||
-webkit-box-sizing: $box-model;
|
||||
box-sizing: $box-model;
|
||||
}
|
||||
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-ms-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@mixin border-top-radius($radius) {
|
||||
-webkit-border-top-right-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
-webkit-border-top-left-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@mixin border-right-radius($radius) {
|
||||
-webkit-border-bottom-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
-webkit-border-top-right-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@mixin border-bottom-radius($radius) {
|
||||
-webkit-border-bottom-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
-webkit-border-bottom-left-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@mixin border-left-radius($radius) {
|
||||
-webkit-border-bottom-left-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
-webkit-border-top-left-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@mixin border-bottomleft-radius($radius) {
|
||||
-webkit-border-bottom-left-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@mixin border-bottomright-radius($radius) {
|
||||
-webkit-border-bottom-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@mixin border-topright-radius($radius) {
|
||||
-webkit-border-top-right-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@mixin gradient-top-bottom($start, $pos, $end, $pos2, $bg) {
|
||||
background: $bg;
|
||||
background: -moz-linear-gradient(top, $start $pos, $end $pos2);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop($pos, $start), color-stop($pos2, $end));
|
||||
background: -webkit-linear-gradient(top, $start $pos, $end $pos2);
|
||||
background: -o-linear-gradient(top, $start $pos, $end $pos2);
|
||||
background: -ms-linear-gradient(top, $start $pos, $end $pos2);
|
||||
background: linear-gradient(to bottom, $start $pos, $end $pos2);
|
||||
}
|
||||
|
||||
@mixin box-shadow-top($color) {
|
||||
-moz-box-shadow: inset 0px 1px 0px 0px $color;
|
||||
-webkit-box-shadow: inset 0px 1px 0px 0px $color;
|
||||
box-shadow: inset 0px 1px 0px 0px $color;
|
||||
}
|
||||
|
||||
@mixin box-shadow-left($color) {
|
||||
-moz-box-shadow: inset 1px 0px 0px 0px $color;
|
||||
-webkit-box-shadow: inset 1px 0px 0px 0px $color;
|
||||
box-shadow: inset 1px 0px 0px 0px $color;
|
||||
}
|
||||
|
||||
@mixin box-shadow-bottom($color) {
|
||||
-moz-box-shadow: 0px 1px 0px 0px $color;
|
||||
-webkit-box-shadow: 0px 1px 0px 0px $color;
|
||||
box-shadow: 0px 1px 0px 0px $color;
|
||||
}
|
||||
|
||||
@mixin box-shadow-out($color) {
|
||||
-moz-box-shadow: inset 1px 1px 0px 0px $color;
|
||||
-webkit-box-shadow: inset 1px 1px 0px 0px $color;
|
||||
box-shadow: inset 1px 1px 0px 0px $color;
|
||||
}
|
||||
|
||||
@mixin transform-rotate($deg) {
|
||||
-webkit-transform: rotate($deg);
|
||||
-moz-transform: rotate($deg);
|
||||
-o-transform: rotate($deg);
|
||||
-ms-transform: rotate($deg);
|
||||
transform: rotate($deg);
|
||||
}
|
||||
198
_vars.scss
198
_vars.scss
|
|
@ -1,198 +0,0 @@
|
|||
/* Global */
|
||||
$font-stack: arial, serif;
|
||||
$font-color: #676a6c;
|
||||
$reverse-font-color: #fff;
|
||||
$font-size: 1rem;
|
||||
$font-size-smaller: 0.9rem;
|
||||
|
||||
$background-color: #fff;
|
||||
|
||||
$link-color: #fff;
|
||||
$link-decoration: none;
|
||||
$link-hover-color: #fff;
|
||||
$link-hover-decoration: none;
|
||||
|
||||
$default-border: 1px;
|
||||
$default-border-color: #d6d6d6;
|
||||
$default-border-radius: 3px;
|
||||
$default-padding: 5px;
|
||||
|
||||
$default-highlighter: #FBA026;
|
||||
|
||||
/* Content Container */
|
||||
$content-container-padding: $default-padding;
|
||||
$content-container-color: $reverse-font-color;
|
||||
|
||||
/* Content box */
|
||||
$content-box-background-color: $background-color;
|
||||
$content-box-border: $default-border;
|
||||
$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: $reverse-font-color;
|
||||
$nav-top-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: $nav-side-background-color;
|
||||
$nav-main-font-color: $nav-side-font-color;
|
||||
$nav-main-padding: $nav-top-padding;
|
||||
|
||||
$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;
|
||||
$green: #0f0;
|
||||
$blue: #00f;
|
||||
$yellow: #ff0;
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
$pink: #f0f;
|
||||
$purple: #7D26CD;
|
||||
|
||||
/* 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 10px 10px 20px;
|
||||
|
||||
$breadcrumb-border: $default-border;
|
||||
$breadcrumb-border-radius: 3px;
|
||||
$breadcrumb-border-color: $default-border-color;
|
||||
|
||||
$breadcrumb-inactive-background: $content-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-border: $default-border;
|
||||
$button-border-color: $default-border-color;
|
||||
$button-background: #f1f1f1;
|
||||
$button-active-background: #d6d6d6;
|
||||
$button-font-size: $font-size-smaller;
|
||||
$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;
|
||||
$article-link-color: #8ea4ff;
|
||||
|
||||
$article-table-border: $default-border;
|
||||
$article-table-border-color: #999;
|
||||
$article-even-background: #eee;
|
||||
|
||||
/* Form */
|
||||
$form-label-size: $font-size-smaller;
|
||||
|
||||
/* Icon */
|
||||
$icon-font-color: $reverse-font-color;
|
||||
$icon-font-size: $font-size-smaller;
|
||||
|
||||
/* 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;
|
||||
|
||||
/* 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.6rem;
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
.ac-container{
|
||||
margin: $accordion-margin-top-bottom auto $accordion-margin-left-right auto;
|
||||
margin: 1rem auto 1rem auto;
|
||||
text-align: left;
|
||||
|
||||
> input {
|
||||
display: none;
|
||||
|
||||
&:checked + label {
|
||||
@include gradient-top-bottom($accordion-active-color-start, 0, $accordion-active-color-end, 100, $accordion-active-background);
|
||||
color: $accordion-active-foreground;
|
||||
background: var(--button-colored-background);
|
||||
color: var(--text-on-background-color-2);
|
||||
|
||||
+ section {
|
||||
display: inherit;
|
||||
|
|
@ -23,30 +23,29 @@
|
|||
|
||||
label {
|
||||
display: block;
|
||||
padding: $accordion-padding-top-bottom $accordion-padding-left-right;
|
||||
padding: 1rem 1rem;
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
margin-top: -1px;
|
||||
cursor: pointer;
|
||||
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);
|
||||
color: var(--text-on-background-color-2);
|
||||
font-size: 1rem;
|
||||
border: 1rem solid var(--box-border);
|
||||
background: var(--box-border);
|
||||
|
||||
&:hover {
|
||||
@include gradient-top-bottom($accordion-hover-color-start, 0, $accordion-hover-color-end, 100, $accordion-hover-background);
|
||||
background: var(--button-colored-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
> section {
|
||||
background: $content-box-background-color;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
border-left: $accordion-border-size solid $accordion-border-color;
|
||||
border-right: $accordion-border-size solid $accordion-border-color;
|
||||
padding: $accordion-padding;
|
||||
border-left: 1rem solid var(--box-border);
|
||||
border-right: 1rem solid var(--box-border);
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
.log-msg {
|
||||
padding: $log-padding;
|
||||
margin: $log-margin;
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
@each $tuple in
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
'info' #b6d2ff #85b0ee #4865a5 {
|
||||
.log-msg-status-#{nth($tuple, 1)} {
|
||||
background: #{nth($tuple, 2)};
|
||||
border: $log-border solid #{nth($tuple, 3)};
|
||||
border: 1px solid #{nth($tuple, 3)};
|
||||
color: #{nth($tuple, 4)};
|
||||
}
|
||||
}
|
||||
14
article.scss
14
article.scss
|
|
@ -1,7 +1,7 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
article {
|
||||
background: $article-background;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
|
|
@ -54,8 +54,8 @@ article {
|
|||
}
|
||||
|
||||
a {
|
||||
color: $article-link-color;
|
||||
border-bottom: 1px dotted $article-link-color;
|
||||
color: var(--link-color);
|
||||
border-bottom: 1px dotted var(--link-color);
|
||||
|
||||
&:hover {
|
||||
border-bottom: none;
|
||||
|
|
@ -93,17 +93,17 @@ article {
|
|||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: $article-table-border solid $article-table-border-color;
|
||||
border: 1px solid var(--box-border);
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
th, td {
|
||||
padding: 5px;
|
||||
border: $article-table-border solid $article-table-border-color;
|
||||
border: 1px solid var(--box-border);
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background: $article-even-background;
|
||||
background: var(--table-row-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
blockquote {
|
||||
border: $blockquote-border solid $blockquote-border-color;
|
||||
background: $blockquote-background;
|
||||
padding: $blockquote-padding;
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius($blockquote-border-radius);
|
||||
border: 1px solid var(--box-border);
|
||||
background: #ccc;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,19 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
.crumbs-1 {
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
font-size: $breadcrumb-font-size;
|
||||
font-size: 1rem;
|
||||
|
||||
li {
|
||||
background: $breadcrumb-inactive-background;
|
||||
border: $breadcrumb-border solid $breadcrumb-border-color;
|
||||
padding: $breadcrumb-padding;
|
||||
background: #fff;
|
||||
border: 1px solid var(--box-border);
|
||||
padding: 10px 10px 10px 20px;
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
text-shadow: -1px -1px 1px #ffffff;
|
||||
cursor: pointer;
|
||||
|
||||
@include box-shadow-out(#ffffff);
|
||||
|
||||
&:first-child {
|
||||
@include border-left-radius($breadcrumb-border-radius);
|
||||
}
|
||||
|
||||
// todo: maybe replace .last with :last-child
|
||||
&:not(.last):after, &:before {
|
||||
content:" ";
|
||||
|
|
@ -29,7 +22,7 @@
|
|||
height: 0;
|
||||
border-top: 18px solid transparent;
|
||||
border-bottom: 17px solid transparent;
|
||||
border-left: 14px solid $content-background-color;
|
||||
border-left: 14px solid var(--box-border);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -18px;
|
||||
|
|
@ -41,8 +34,8 @@
|
|||
}
|
||||
|
||||
&:before {
|
||||
border-left-color: $breadcrumb-border-color;
|
||||
margin-left: $breadcrumb-border;
|
||||
border-left-color: var(--box-border);
|
||||
margin-left: 1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -53,7 +46,6 @@
|
|||
|
||||
.last {
|
||||
padding-right: 20px;
|
||||
@include border-right-radius($breadcrumb-border-radius);
|
||||
|
||||
&:before {
|
||||
border: none;
|
||||
|
|
@ -65,6 +57,6 @@
|
|||
}
|
||||
|
||||
.active, li:hover {
|
||||
background: $breadcrumb-active-background;
|
||||
background: var(--button-colored-background-hover);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
97
button.scss
97
button.scss
|
|
@ -1,98 +1,25 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button, input[type="submit"], input[type="button"], a.button {
|
||||
border: $button-border solid $button-border-color;
|
||||
cursor: pointer;
|
||||
text-shadow: 1px 1px 1px #ffffff;
|
||||
min-width: $button-min-width;
|
||||
height: $button-height;
|
||||
font-size: $button-font-size;
|
||||
background: $button-background;
|
||||
@include box-shadow-out(#ffffff);
|
||||
min-width: 70px;
|
||||
height: 2rem;
|
||||
|
||||
&:hover, :active {
|
||||
text-shadow: -1px -1px 1px #ffffff;
|
||||
background: $button-active-background;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin color-button($color1, $color2, $fallback, $shadow) {
|
||||
color: #ffffff;
|
||||
text-shadow: 1px 1px 1px #696969;
|
||||
@include gradient-top-bottom($color1, 0, $color2, 100, $fallback);
|
||||
@include box-shadow-out($shadow);
|
||||
|
||||
&:hover, :active {
|
||||
text-shadow: -1px -1px 1px #696969;
|
||||
@include gradient-top-bottom($color2, 0, $color1, 100, $fallback);
|
||||
}
|
||||
}
|
||||
|
||||
button.red {
|
||||
@include color-button(#f17068, #d16059, #d9645b, #ff8d7c);
|
||||
}
|
||||
|
||||
button.green {
|
||||
@include color-button(#9df1ad, #77d17c, #90d99d, #c8ffb6);
|
||||
}
|
||||
|
||||
button.blue {
|
||||
@include color-button(#beddf1, #7ba9d1, #97afd9, #cbf3ff);
|
||||
}
|
||||
|
||||
ul.btns {
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
|
||||
li {
|
||||
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;
|
||||
|
||||
@include box-shadow-out(#ffffff);
|
||||
|
||||
&:last-child {
|
||||
border-right: $button-border solid $button-border-color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-left-color: $button-border-color;
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: $button-crumb-padding;
|
||||
}
|
||||
|
||||
.active {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.active, li:hover {
|
||||
background: $button-crumb-active-background;
|
||||
}
|
||||
}
|
||||
|
||||
button.simple {
|
||||
background: $button-background;
|
||||
border: $button-border solid $button-border-color;
|
||||
text-shadow: -1px -1px 1px #ffffff;
|
||||
padding: 5px;
|
||||
min-width: 40px;
|
||||
background: var(--button-colored-background);
|
||||
color: var(--text-on-background-color-2);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 0;
|
||||
height: 32px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
background: $button-background;
|
||||
background: var(--button-colored-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
canvas {
|
||||
background: $canvas-background;
|
||||
border: $canvas-border solid $canvas-border-color;
|
||||
background: #fff;
|
||||
border: 1px solid var(--box-border);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "_mixins", "color";
|
||||
|
||||
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, nav, section, iframe, label {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -23,7 +21,7 @@ ul {
|
|||
}
|
||||
|
||||
input, select, textarea, .textarea {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
appearance: none;
|
||||
box-shadow: none;
|
||||
|
||||
|
|
|
|||
46
color.css
46
color.css
|
|
@ -1,46 +0,0 @@
|
|||
.ok {
|
||||
color: #5cff56; }
|
||||
|
||||
.warning {
|
||||
color: #ff4b41; }
|
||||
|
||||
.favorite {
|
||||
color: #d16059; }
|
||||
|
||||
.green {
|
||||
background: #42bd41; }
|
||||
|
||||
.red {
|
||||
background: #d01715; }
|
||||
|
||||
.blue {
|
||||
background: #5778fd; }
|
||||
|
||||
.orange {
|
||||
background: #FBA026; }
|
||||
|
||||
.lightblue {
|
||||
background: #03a9f5; }
|
||||
|
||||
.yellow {
|
||||
background: #ffeb3c; }
|
||||
|
||||
.purple {
|
||||
background: #673bb7; }
|
||||
|
||||
.pink {
|
||||
background: #ffa6e3; }
|
||||
|
||||
.grey {
|
||||
background: #dcdcdc; }
|
||||
|
||||
.darkred {
|
||||
background: #B8312F; }
|
||||
|
||||
.darkgreen {
|
||||
background: #009788; }
|
||||
|
||||
.darkblue {
|
||||
background: #3f51b5; }
|
||||
|
||||
/*# sourceMappingURL=color.css.map */
|
||||
15
color.scss
15
color.scss
|
|
@ -1,15 +0,0 @@
|
|||
@each $tuple in
|
||||
'ok' #5cff56, 'warning' #ff4b41, 'favorite' #d16059 {
|
||||
.#{nth($tuple, 1)} {
|
||||
color: #{nth($tuple, 2)};
|
||||
}
|
||||
}
|
||||
|
||||
@each $tuple in
|
||||
'green' #42bd41, 'red' #d01715, 'blue' #5778fd,
|
||||
'orange' #FBA026, 'lightblue' #03a9f5, 'yellow' #ffeb3c, 'purple' #673bb7, 'pink' #ffa6e3, 'grey' #dcdcdc,
|
||||
'darkred' #B8312F, 'darkgreen' #009788, 'darkblue' #3f51b5 {
|
||||
.#{nth($tuple, 1)} {
|
||||
background: #{nth($tuple, 2)};
|
||||
}
|
||||
}
|
||||
107
default.scss
107
default.scss
|
|
@ -1,24 +1,16 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
body {
|
||||
background: $background-color;
|
||||
font-family: Open Sans, sans-serif;
|
||||
font-size: $font-size;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: $pre-background;
|
||||
@include border-radius($pre-border-radius);
|
||||
border: $pre-border solid $pre-border-color;
|
||||
padding: $pre-padding;
|
||||
background: #cfcfcf;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 1rem;
|
||||
overflow-x: scroll;
|
||||
counter-reset: line;
|
||||
width: 100%;
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
|
|
@ -43,3 +35,92 @@ iframe {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.clean {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.clean:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.rp {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ap {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.lf {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.rf {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.op {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.rT {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.lT {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cT {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.f-w {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.f-h {
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.vT {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.vB {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.vM {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.n-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.p,
|
||||
.max, .min, .close, .cancel, .filter, .ok, .search, .abort, .sort {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vC {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vh {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.x-overflow {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
form {
|
||||
li {
|
||||
margin: 5px 0 5px 0;
|
||||
|
|
@ -15,9 +13,8 @@ form {
|
|||
}
|
||||
|
||||
label {
|
||||
font-size: $form-label-size;
|
||||
font-size: 1rem;
|
||||
color: #878787;
|
||||
text-shadow: -1px -1px 1px #ffffff;
|
||||
}
|
||||
|
||||
i+i {
|
||||
|
|
@ -29,7 +26,7 @@ form {
|
|||
}
|
||||
|
||||
.list {
|
||||
font-size: $form-label-size;
|
||||
font-size: 1rem;
|
||||
|
||||
td {
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
12
grid.scss
12
grid.scss
|
|
@ -45,8 +45,7 @@
|
|||
-ms-flex: 0 0 auto;
|
||||
-webkit-box-flex: 0;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.3rem;
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.col-xs {
|
||||
|
|
@ -259,8 +258,7 @@
|
|||
-ms-flex: 0 0 auto;
|
||||
-webkit-box-flex: 0;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.3rem;
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.col-sm {
|
||||
|
|
@ -474,8 +472,7 @@
|
|||
-ms-flex: 0 0 auto;
|
||||
-webkit-box-flex: 0;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.3rem;
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.col-md {
|
||||
|
|
@ -689,8 +686,7 @@
|
|||
-ms-flex: 0 0 auto;
|
||||
-webkit-box-flex: 0;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.3rem;
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.col-lg {
|
||||
|
|
|
|||
15
icon.scss
15
icon.scss
|
|
@ -1,7 +1,7 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
.infoIcon {
|
||||
width: $icon-font-size;
|
||||
width: var(--badge-size);
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
|
|
@ -13,14 +13,15 @@
|
|||
position: absolute;
|
||||
right: -.55rem;
|
||||
top: -.45rem;
|
||||
width: $icon-font-size;
|
||||
height: $icon-font-size;
|
||||
line-height: $icon-font-size;
|
||||
width: .9rem;
|
||||
height: var(--badge-size);
|
||||
line-height: var(--badge-size);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
padding: .15rem;
|
||||
|
||||
color: $icon-font-color;
|
||||
background: rgba(209, 96, 89, 1);
|
||||
color: var(--badge-color);
|
||||
background: var(--badge-background);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
22
image.scss
22
image.scss
|
|
@ -1,29 +1,25 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
img {
|
||||
&.frame-1 {
|
||||
padding: $img-padding;
|
||||
background: $img-background;
|
||||
border: $img-border solid $img-border-color;
|
||||
@include box-shadow-out(#ffffff);
|
||||
@include border-radius($img-border-radius);
|
||||
padding: 1rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--box-border);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.frame-2 {
|
||||
border: $img-border solid $img-border-color;
|
||||
background: $img-background;
|
||||
border: 1px solid var(--box-border);
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.frame-3 {
|
||||
padding: $img-padding;
|
||||
background: $img-background;
|
||||
border: $img-border solid $img-border-color;
|
||||
@include box-shadow-out(#ffffff);
|
||||
@include border-radius($img-border-radius);
|
||||
padding: 1rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--box-border);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
122
input.scss
122
input.scss
|
|
@ -1,7 +1,7 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
input, select, textarea, .textarea {
|
||||
border: $input-border solid $input-border-color;
|
||||
border: 1px solid var(--input-border);
|
||||
}
|
||||
|
||||
progress {
|
||||
|
|
@ -21,21 +21,20 @@ input[type="email"],
|
|||
input[type="date"],
|
||||
input[type="number"],
|
||||
input[type="datetime-local"] {
|
||||
@include box-sizing(border-box);
|
||||
color: $input-color;
|
||||
background: $input-background;
|
||||
box-sizing: border-box;
|
||||
color: var(--input-color);
|
||||
background: var(--input-background);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
min-width: 70px;
|
||||
max-width: 100%;
|
||||
padding: 7px;
|
||||
font-size: $input-font-size;
|
||||
border: $input-border solid $input-border-color;
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--input-border);
|
||||
transition: background 0.3s, border 0.3s;
|
||||
box-shadow: inset 1px 1px 4px -2px #c5c5c5;
|
||||
|
||||
&:focus, .active {
|
||||
border-color: $default-highlighter;
|
||||
border-color: var(--input-background-active);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
|
@ -43,6 +42,68 @@ input[type="datetime-local"] {
|
|||
}
|
||||
}
|
||||
|
||||
.inputWrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.textWrapper+input[type=submit], .textWrapper+input[type=button], .textWrapper+button {
|
||||
background: var(--button-colored-background);
|
||||
color: var(--text-on-background-color-2);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 0;
|
||||
height: auto;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
background: var(--button-colored-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.textWrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.frontIcon, .endIcon {
|
||||
color: var(--input-icon-color);
|
||||
font-size: 1.1rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding: .6rem .6rem .6rem .4rem;
|
||||
}
|
||||
|
||||
.frontIcon {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.endIcon {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
input[type=text]:active, input[type=text]:focus,
|
||||
input[type=password]:active, input[type=password]:focus {
|
||||
border: 1px solid var(--input-border-active);
|
||||
}
|
||||
|
||||
input[type=text]:active~.frontIcon, input[type=text]:focus~.frontIcon,
|
||||
input[type=password]:active~.frontIcon, input[type=password]:focus~.frontIcon,
|
||||
input[type=text]:active~.endIcon, input[type=text]:focus~.endIcon,
|
||||
input[type=password]:active~.endIcon, input[type=password]:focus~.endIcon {
|
||||
color: var(--input-icon-color-active);
|
||||
}
|
||||
|
||||
input[type=text]~.endIcon, input[type=text]~.endIcon,
|
||||
input[type=password]~.endIcon, input[type=password]~.endIcon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input ~ .dropdown {
|
||||
position: absolute;
|
||||
display: none;
|
||||
|
|
@ -63,16 +124,16 @@ option {
|
|||
}
|
||||
|
||||
input[type="file"] {
|
||||
border: solid $input-font-size $input-background;
|
||||
border: 1px solid var(--input-border-active);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
color: $input-color;
|
||||
color: var(--input-color);
|
||||
padding: 10px;
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
color: var(--input-icon-color);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
|
@ -82,14 +143,14 @@ input::placeholder, textarea {
|
|||
|
||||
input:invalid {
|
||||
transition: all 0.5s;
|
||||
border-color: $input-invalid-border-color;
|
||||
border-color: #f00;
|
||||
}
|
||||
|
||||
textarea, .textarea {
|
||||
overflow: auto;
|
||||
resize: both;
|
||||
min-height: 100px;
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
span.checkbox, span.radio {
|
||||
|
|
@ -126,15 +187,15 @@ input[type="range"] {
|
|||
flex-wrap: nowrap;
|
||||
|
||||
button {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
background: $input-background;
|
||||
background: var(--input-border-active);
|
||||
height: 2rem;
|
||||
font-size: $input-font-size;
|
||||
font-size: 1rem;
|
||||
min-width: 40px;
|
||||
border-left: solid $input-border $input-border-color;
|
||||
border-top: solid $input-border $input-border-color;
|
||||
border-bottom: solid $input-border $input-border-color;
|
||||
border-left: solid 1px var(--input-border);
|
||||
border-top: solid 1px var(--input-border);
|
||||
border-bottom: solid 1px var(--input-border);
|
||||
border-right: none;
|
||||
padding: 0;
|
||||
|
||||
|
|
@ -144,7 +205,7 @@ input[type="range"] {
|
|||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
background: $input-background;
|
||||
background: var(--input-border-active);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -154,8 +215,8 @@ input[type="range"] {
|
|||
}
|
||||
|
||||
input {
|
||||
@include box-sizing(border-box);
|
||||
font-size: $input-font-size;
|
||||
box-sizing: border-box;
|
||||
font-size: 1rem;
|
||||
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
|
@ -177,16 +238,3 @@ select.plain {
|
|||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tag-input {
|
||||
input {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 3px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,7 @@
|
|||
@import "_mixins", "color";
|
||||
|
||||
.ipt-wrap {
|
||||
display: table;
|
||||
vertical-align: top;
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
|
||||
.ipt-first {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
ul.boxed {
|
||||
background: $list-background;
|
||||
padding: $list-padding;
|
||||
@include border-radius($list-border-radius);
|
||||
border: $list-border solid $list-border-color;
|
||||
background: #fff;
|
||||
padding: 5px;
|
||||
border: 1px solid var(--box-border);
|
||||
|
||||
li {
|
||||
margin: 5px 0 5px 0;
|
||||
|
|
|
|||
32
main.css
32
main.css
|
|
@ -1,32 +0,0 @@
|
|||
/* Global */
|
||||
/* Content Container */
|
||||
/* Content box */
|
||||
/* Navigation */
|
||||
/* Colors */
|
||||
/* Accordion */
|
||||
/* Log */
|
||||
/* Blockquote */
|
||||
/* Breadcrumbs */
|
||||
/* Input */
|
||||
/* Button */
|
||||
/* Canvas */
|
||||
/* Article */
|
||||
/* Form */
|
||||
/* Icon */
|
||||
/* Img */
|
||||
/* list */
|
||||
/* pagination */
|
||||
/* pre */
|
||||
/* tag */
|
||||
main {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: 0;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background: #fff;
|
||||
transition: all 0.2s; }
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
14
main.scss
14
main.scss
|
|
@ -1,14 +0,0 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: 0;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
background: $background-color;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
123
nav.scss
123
nav.scss
|
|
@ -1,17 +1,17 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
#nav-side {
|
||||
user-select: none;
|
||||
width: 175px;
|
||||
position: fixed;
|
||||
top: 79px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
|
||||
body > nav {
|
||||
width: 250px;
|
||||
overflow-y: auto;
|
||||
font-size: 0.8em;
|
||||
background: #3b3b3b;
|
||||
background: linear-gradient(135deg, var(--nav-category-background-highlight), var(--nav-category-background));
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
#nav-side {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
width: 20px;
|
||||
|
|
@ -37,6 +37,11 @@
|
|||
}
|
||||
|
||||
input + ul {
|
||||
.min, .max {
|
||||
margin-left: 1rem;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.max {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -52,46 +57,33 @@
|
|||
|
||||
label {
|
||||
display: block;
|
||||
padding: 7px 0 7px 7px;
|
||||
padding: .5rem 1rem .5rem 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> li {
|
||||
//border-bottom: 1px solid #252525;
|
||||
color: #fff;
|
||||
display: block;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 7px 0 7px 7px;
|
||||
padding: .5rem 1rem .5rem 1rem;
|
||||
|
||||
&:hover {
|
||||
color: #252525;
|
||||
background: $default-highlighter;
|
||||
background: var(--nav-sub-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
border-top: 1px solid #505050;
|
||||
color: #fff;
|
||||
|
||||
&:not(:first-child) {
|
||||
background: #444;
|
||||
background: linear-gradient(to right, var(--nav-sub-background-highlight), var(--nav-sub-background));
|
||||
}
|
||||
|
||||
border-bottom: 1px solid #252525;
|
||||
|
||||
&:hover, &.active {
|
||||
color: #252525;
|
||||
background: $default-highlighter;
|
||||
border-top: 1px solid rgb(255, 192, 110);
|
||||
background: var(--nav-category-background-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li:last-child li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.max, .min {
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -99,57 +91,25 @@
|
|||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track
|
||||
{
|
||||
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
{
|
||||
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-trigger {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
|
||||
&:checked ~ main {
|
||||
width: calc(100% - 175px);
|
||||
left: 175px;
|
||||
&:checked + nav {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
label[for="nav-trigger"] {
|
||||
font-size: 2.0em;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-top {
|
||||
user-select: none;
|
||||
margin-top: 5px;
|
||||
margin-top: 1rem;
|
||||
display: block;
|
||||
background: #fff;
|
||||
border: 1px solid $content-border-color;
|
||||
border: 1px solid var(--box-border);
|
||||
|
||||
> li {
|
||||
@include box-shadow-top(#fff);
|
||||
|
||||
&:first-child {
|
||||
@include box-shadow-out(#fff);
|
||||
}
|
||||
|
||||
> a {
|
||||
display: inline-block;
|
||||
padding: 10px 10px;
|
||||
|
|
@ -163,14 +123,8 @@ label[for="nav-trigger"] {
|
|||
cursor: pointer;
|
||||
|
||||
&:hover, &.active {
|
||||
@include box-shadow-top(#FFC06E);
|
||||
|
||||
&:first-child {
|
||||
@include box-shadow-out(#FFC06E);
|
||||
}
|
||||
|
||||
background: $default-highlighter;
|
||||
color: #252525;
|
||||
background: var(--nav-content-hover);
|
||||
color: var(--text-on-background-color-2);
|
||||
|
||||
> ul {
|
||||
display: block;
|
||||
|
|
@ -189,9 +143,6 @@ label[for="nav-trigger"] {
|
|||
display: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
border-left: 1px solid $content-border-color;
|
||||
border-bottom: 1px solid $content-border-color;
|
||||
border-right: 1px solid $content-border-color;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
|
|
@ -200,25 +151,25 @@ label[for="nav-trigger"] {
|
|||
|
||||
&:hover {
|
||||
color: #252525;
|
||||
background: $default-highlighter;
|
||||
background: var(--nav-content-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.nav-trigger:checked ~ main {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
@media only screen and (max-width: 800px) {
|
||||
body > .nav-trigger:not(:checked) + nav {
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
.nav-trigger:not(:checked) ~ main {
|
||||
width: 0;
|
||||
padding-right: 0;
|
||||
body > .nav-trigger:checked + nav {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-side {
|
||||
@media only screen and (max-width: 500px) {
|
||||
body > .nav-trigger:checked + nav {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
.pagination {
|
||||
li {
|
||||
|
|
@ -6,15 +6,13 @@
|
|||
}
|
||||
|
||||
a {
|
||||
@include border-radius(3px);
|
||||
@include box-shadow-out(#ffffff);
|
||||
background: $content-background-color;
|
||||
border-radius: 3px;
|
||||
background: #ccc;
|
||||
padding: 5px 10px 5px 10px;
|
||||
}
|
||||
|
||||
.active, a:hover, a:active {
|
||||
color: $pagination-active-color;
|
||||
background: $pagination-active-background;
|
||||
@include box-shadow-out(#e8e8e8);
|
||||
color: #000;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
.meter {
|
||||
height: 15px; /* Can be anything */
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
> span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
@include border-radius(3px);
|
||||
border-radius: 3px;
|
||||
background-color: rgb(43,194,83);
|
||||
background-image: linear-gradient(
|
||||
to left top,
|
||||
|
|
|
|||
28
section.scss
28
section.scss
|
|
@ -1,14 +1,12 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
.box {
|
||||
@include box-sizing(border-box);
|
||||
//display: inline-block;
|
||||
margin-top: 0.3rem;
|
||||
box-sizing: border-box;
|
||||
margin-top: 1rem;
|
||||
overflow-x: auto;
|
||||
|
||||
.inner {
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow-out(#ffffff);
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -18,18 +16,8 @@
|
|||
}
|
||||
|
||||
section.box {
|
||||
@include box-shadow-bottom(#f1f1f1);
|
||||
border: $content-box-border solid $content-box-border-color;
|
||||
background: $content-box-background-color;
|
||||
|
||||
@each $tuple in
|
||||
'green' #42bd41, 'red' #d01715, 'blue' #5778fd,
|
||||
'orange' #FBA026, 'lightblue' #03a9f5, 'yellow' #ffeb3c, 'purple' #673bb7, 'pink' #ffa6e3, 'grey' #dcdcdc,
|
||||
'darkred' #B8312F, 'darkgreen' #009788, 'darkblue' #3f51b5 {
|
||||
&.#{nth($tuple, 1)} {
|
||||
border-top: 3px solid #{nth($tuple, 2)};
|
||||
}
|
||||
}
|
||||
border: 1px solid var(--box-border);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
section {
|
||||
|
|
@ -38,15 +26,13 @@ section {
|
|||
margin: 10px 10px 0 10px;
|
||||
padding-bottom: 5px;
|
||||
font-size: 1.1em;
|
||||
text-shadow: 1px 1px 1px #ffffff;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
}
|
||||
|
||||
> h2 {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 5px;
|
||||
text-shadow: 1px 1px 1px #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1463
styles.css
1463
styles.css
File diff suppressed because it is too large
Load Diff
|
|
@ -1,3 +1,3 @@
|
|||
@import "_vars", "clean", "_mixins", "default", "color", "size", "transformation", "alignment", "visibility", "animate", "grid";
|
||||
@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 "clean", "default", "size", "transformation", "alignment", "visibility", "animate", "grid";
|
||||
@import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag";
|
||||
@import "media";
|
||||
|
|
|
|||
45
tab.scss
45
tab.scss
|
|
@ -1,13 +1,21 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
.tabview {
|
||||
.tab-links {
|
||||
color: #000;
|
||||
padding: 0.3rem 0 0 0;
|
||||
|
||||
label {
|
||||
text-shadow: 1px 1px 1px #fff;
|
||||
font-size: 0.9em;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--button-colored-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.active label:hover {
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--button-colored-background-hover);
|
||||
}
|
||||
|
||||
.active a {
|
||||
|
|
@ -37,7 +45,7 @@
|
|||
.tab-1 {
|
||||
.tab-links {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid $content-border-color;
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
|
||||
label {
|
||||
padding: 5px 10px 1px 10px;
|
||||
|
|
@ -46,14 +54,14 @@
|
|||
}
|
||||
|
||||
.active, .active label {
|
||||
background: $content-box-background-color;
|
||||
border-bottom: 1px solid $content-box-background-color;
|
||||
background: var(--button-colored-background);
|
||||
border-bottom: 1px solid var(--button-colored-background);
|
||||
}
|
||||
|
||||
.active label {
|
||||
border-top: 1px solid $content-border-color;
|
||||
border-left: 1px solid $content-border-color;
|
||||
border-right: 1px solid $content-border-color;
|
||||
border-top: 1px solid var(--box-border);
|
||||
border-left: 1px solid var(--box-border);
|
||||
border-right: 1px solid var(--box-border);
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -62,11 +70,11 @@
|
|||
}
|
||||
|
||||
.tab-content {
|
||||
@include box-sizing(border-box);
|
||||
background: $content-box-background-color;
|
||||
border-left: 1px solid $content-border-color;
|
||||
border-right: 1px solid $content-border-color;
|
||||
border-bottom: 1px solid $content-border-color;
|
||||
box-sizing: border-box;
|
||||
background: var(--button-colored-background);
|
||||
border-left: 1px solid var(--box-border);
|
||||
border-right: 1px solid var(--box-border);
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -88,13 +96,13 @@
|
|||
}
|
||||
|
||||
.active label {
|
||||
border-bottom: 1px solid $content-border-color;
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
width: 100%;
|
||||
border-top: 1px solid $content-border-color;
|
||||
border-top: 1px solid var(--box-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -111,8 +119,9 @@
|
|||
}
|
||||
|
||||
.active a, .active label {
|
||||
border: 1px solid $content-border-color;
|
||||
@include gradient-top-bottom(#fff, 0, $content-background-color, 100, #fff);
|
||||
color: var(--text-on-background-color-2);
|
||||
border: 1px solid var(--box-border);
|
||||
background: var(--button-colored-background)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
89
table.scss
89
table.scss
|
|
@ -1,4 +1,4 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
table.fixed {
|
||||
table-layout: fixed;
|
||||
|
|
@ -19,42 +19,31 @@ table .sort-asc, table .sort-desc, table .filter {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table {
|
||||
background: none;
|
||||
caption {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
thead {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@each $tuple in
|
||||
'green' #42bd41, 'red' #d01715, 'blue' #5778fd,
|
||||
'orange' #FBA026, 'lightblue' #03a9f5, 'yellow' #ffeb3c, 'purple' #673bb7, 'pink' #ffa6e3, 'grey' #dcdcdc,
|
||||
'darkred' #B8312F, 'darkgreen' #009788, 'darkblue' #3f51b5 {
|
||||
&.#{nth($tuple, 1)} {
|
||||
caption, thead {
|
||||
background: #{nth($tuple, 2)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.table {
|
||||
@include box-sizing(border-box);
|
||||
table.default {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-size: 0.9em;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
caption {
|
||||
background: #fff;
|
||||
border-right: 1px solid $content-border-color;
|
||||
border-left: 1px solid $content-border-color;
|
||||
border-top: 1px solid $content-border-color;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
background: var(--table-caption-background);
|
||||
padding: .5rem;
|
||||
|
||||
padding: 5px;
|
||||
border-right: 1px solid var(--box-border);
|
||||
border-left: 1px solid var(--box-border);
|
||||
border-top: 1px solid var(--box-border);
|
||||
|
||||
text-align: left;
|
||||
|
||||
i {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
td {
|
||||
|
|
@ -64,48 +53,48 @@ table.table {
|
|||
|
||||
tbody {
|
||||
td:first-child {
|
||||
border-left: 1px solid $content-border-color;
|
||||
border-left: 1px solid var(--box-border);
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
border-right: 1px solid $content-border-color;
|
||||
}
|
||||
|
||||
td {
|
||||
border-top: 1px solid $content-border-color;
|
||||
@include box-shadow-top(#ffffff);
|
||||
border-right: 1px solid var(--box-border);
|
||||
}
|
||||
|
||||
tr {
|
||||
height: 2rem;
|
||||
height: 3rem;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background: #f8f8f8;
|
||||
background: var(--table-row-background);
|
||||
}
|
||||
|
||||
&:nth-of-type(2n+1) {
|
||||
background: #fff;
|
||||
background: var(--table-row-background-alt);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f0f0f0;
|
||||
background: var(--table-row-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: 1px solid $content-border-color;
|
||||
tr td {
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #fff;
|
||||
height: 3rem;
|
||||
background: var(--table-head-background);
|
||||
|
||||
td:first-child {
|
||||
border-left: 1px solid $content-border-color;
|
||||
border-left: 1px solid var(--box-border);
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
border-right: 1px solid $content-border-color;
|
||||
border-right: 1px solid var(--box-border);
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -164,21 +153,21 @@ table.list {
|
|||
margin-bottom: .625em;
|
||||
|
||||
td:last-child {
|
||||
border-bottom: 1px solid $content-border-color;
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
}
|
||||
|
||||
&:last-child td {
|
||||
border-bottom: none;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid $content-border-color;
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border-left: 1px solid $content-border-color;
|
||||
border-right: 1px solid $content-border-color;
|
||||
border-left: 1px solid var(--box-border);
|
||||
border-right: 1px solid var(--box-border);
|
||||
display: block;
|
||||
font-size: .8rem;
|
||||
text-align: right;
|
||||
|
|
|
|||
9
tag.scss
9
tag.scss
|
|
@ -1,10 +1,11 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
span.tag {
|
||||
cursor: pointer;
|
||||
@include border-radius(4px);
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px 4px 6px;
|
||||
font-size: $tag-font-size;
|
||||
color: $tag-color;
|
||||
font-size: .8rem;
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--button-colored-background);
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
|
||||
<div id="input1-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table darkred">
|
||||
<table id="a1" class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId2" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId2}">
|
||||
<div id="input2-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table darkred">
|
||||
<table id="a1" class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table darkred">
|
||||
<table class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="input4-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table darkred">
|
||||
<table id="a1" class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="table darkred">
|
||||
<table class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
|
||||
<div id="input3-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table darkred">
|
||||
<table id="a1" class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div id="bar-b">
|
||||
<span class="vC" id="ham-trigger">
|
||||
<span id="ham-trigger">
|
||||
<label for="nav-trigger"><i class="fa fa-bars"></i></label>
|
||||
</span>
|
||||
<span class="vC" id="logo" itemscope itemtype="http://schema.org/Organization">
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<table id="tRemovable" class="table darkred" data-ui-element="tr" data-tag="form">
|
||||
<table id="tRemovable" class="default" data-ui-element="tr" data-tag="form">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
|
||||
.tooltip > i {
|
||||
font-size: 0.85rem;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user