mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-01-11 11:18:39 +00:00
Init
This commit is contained in:
parent
ee6027ad00
commit
a147a1f08c
54
accordion.scss
Normal file
54
accordion.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
.ac-container{
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px auto 30px auto;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ac-container > input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ac-container > label {
|
||||||
|
display: block;
|
||||||
|
padding: 5px 20px;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ac-container > label:hover {
|
||||||
|
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ac-container > input:checked + label {
|
||||||
|
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ac-container > section {
|
||||||
|
background: $content-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ac-container > input + label + section {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.ac-container > input:checked + label + section {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
32
alert.scss
Normal file
32
alert.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
div.alert {
|
||||||
|
padding: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alertbox.ok, .alert.ok {
|
||||||
|
background: #aaffad;
|
||||||
|
border: 2px solid #81e27d;
|
||||||
|
color: #459442;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alertbox.warning, .alert.warning {
|
||||||
|
background: #f8ffa8;
|
||||||
|
border: 2px solid #d6d949;
|
||||||
|
color: #94972f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alertbox.error, .alert.error{
|
||||||
|
background: #ff7d79;
|
||||||
|
border: 2px solid #ee5649;
|
||||||
|
color: #a5302a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alertbox.info, .alert.info{
|
||||||
|
background: #b6d2ff;
|
||||||
|
border: 2px solid #85b0ee;
|
||||||
|
color: #4865a5;
|
||||||
|
}
|
||||||
20
alignment.scss
Normal file
20
alignment.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
.center {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centerText {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightText {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatLeft {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatRight {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
0
badge.scss
Normal file
0
badge.scss
Normal file
9
blockquote.scss
Normal file
9
blockquote.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border: 1px solid $content-borderlight-color;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 10px;
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
@include border-radius(3px);
|
||||||
|
}
|
||||||
69
breadcrumb.scss
Normal file
69
breadcrumb.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
.crumbs-1 {
|
||||||
|
list-style: none;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crumbs-1 li {
|
||||||
|
background: $content-background-color;
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
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(3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.crumbs-1 .last {
|
||||||
|
padding-right: 20px;
|
||||||
|
@include border-right-radius(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.crumbs-1 li:not(.last):after, .crumbs-1 li:before {
|
||||||
|
content:" ";
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 18px solid transparent;
|
||||||
|
border-bottom: 17px solid transparent;
|
||||||
|
border-left: 14px solid $content-background-color;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -18px;
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crumbs-1 .last:before {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crumbs-1 li:not(.last):after {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crumbs-1 li:before {
|
||||||
|
border-left-color: $content-border-color;
|
||||||
|
margin-left: 1px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crumbs-1 .active, .crumbs-1 li:hover {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crumbs-1 .active {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crumbs-1 li.active:not(.last):after, .crumbs-1 li:hover:not(.last):after {
|
||||||
|
border-left: 14px solid #ffffff;
|
||||||
|
}
|
||||||
103
button.scss
Normal file
103
button.scss
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input[type="submit"], input[type="button"] {
|
||||||
|
@include border-radius(3px);
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 6px;
|
||||||
|
text-shadow: 1px 1px 1px #ffffff;
|
||||||
|
min-width: 70px;
|
||||||
|
@include gradient-top-bottom(#f1f1f1, 0, #d1d1d1, 100, #d9d9d9);
|
||||||
|
@include box-shadow-out(#ffffff);
|
||||||
|
|
||||||
|
&:hover, :active {
|
||||||
|
text-shadow: -1px -1px 1px #ffffff;
|
||||||
|
@include gradient-top-bottom(#d6d6d6, 0, #ededed, 100, #d9d9d9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.btns 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;
|
||||||
|
float: left;
|
||||||
|
text-shadow: -1px -1px 1px #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@include box-shadow-out(#ffffff);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
@include border-left-radius(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
@include border-right-radius(3px);
|
||||||
|
border-right: 1px solid $content-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.btns a {
|
||||||
|
display: block;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.btns li:before {
|
||||||
|
border-left-color: $content-border-color;
|
||||||
|
margin-left: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.btns .active, ul.btns li:hover {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.btns .active {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.simple {
|
||||||
|
@include border-radius(3px);
|
||||||
|
background: $content-background-color;
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
text-shadow: -1px -1px 1px #ffffff;
|
||||||
|
padding: 5px;
|
||||||
|
min-width: 40px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
12
chart/chart.scss
Normal file
12
chart/chart.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
.axis path,
|
||||||
|
.axis line {
|
||||||
|
fill: none;
|
||||||
|
stroke: #000;
|
||||||
|
shape-rendering: crispEdges;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
fill: none;
|
||||||
|
stroke: steelblue;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
}
|
||||||
1
chart/chart_area.scss
Normal file
1
chart/chart_area.scss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
1
chart/chart_bar.scss
Normal file
1
chart/chart_bar.scss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
1
chart/chart_line.scss
Normal file
1
chart/chart_line.scss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
1
chart/chart_map.scss
Normal file
1
chart/chart_map.scss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
1
chart/chart_pie.scss
Normal file
1
chart/chart_pie.scss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
1
chart/chart_radar.scss
Normal file
1
chart/chart_radar.scss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
49
clean.scss
Normal file
49
clean.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, img, button {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select, textarea, .textarea {
|
||||||
|
box-sizing: border-box;
|
||||||
|
appearance: none;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox] {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input[type=submit], input[type=button] {
|
||||||
|
&::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
61
color.scss
Normal file
61
color.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
$content-border-color: #b7b7b7;
|
||||||
|
$content-borderlight-color: #dddddd;
|
||||||
|
$background-color: #e7ebf3;
|
||||||
|
$content-background-color: #f5f5ff;
|
||||||
|
|
||||||
|
.ok {
|
||||||
|
color: #5cff56;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
color: #ff4b41;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
background: #c0ffb4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
background: #ff7c70;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
background: #c1c8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange {
|
||||||
|
background: #ffbf7c;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.lightblue {
|
||||||
|
background: #b5ffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow {
|
||||||
|
background: #fffe97;
|
||||||
|
}
|
||||||
|
|
||||||
|
.purple {
|
||||||
|
background: #bfa5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pink {
|
||||||
|
background: #ffa6e3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey {
|
||||||
|
background: #dcdcdc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.darkred {
|
||||||
|
background: #d16059;
|
||||||
|
}
|
||||||
|
|
||||||
|
.darkgreen {
|
||||||
|
background: #77d17c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.darkblue {
|
||||||
|
background: #7ba9d1;
|
||||||
|
}
|
||||||
18
default.scss
Normal file
18
default.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: $background-color;
|
||||||
|
font-family: Open Sans, sans-serif;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background: #fff;
|
||||||
|
@include border-radius(3px);
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
48
form.scss
Normal file
48
form.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
form li {
|
||||||
|
margin: 5px 0 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
form td {
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form td textarea+i {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
form label {
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #878787;
|
||||||
|
text-shadow: -1px -1px 1px #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
form i+i {
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form .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;
|
||||||
|
}
|
||||||
|
|
||||||
|
form .layout {
|
||||||
|
td+td {
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
form .list {
|
||||||
|
font-size: 0.9em;
|
||||||
|
|
||||||
|
td {
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 3px 5px 3px 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
24
icon.scss
Normal file
24
icon.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
.infoIcon {
|
||||||
|
width: 24px;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: .35em;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: -.75em;
|
||||||
|
top: -.75em;
|
||||||
|
width: 2.3em;
|
||||||
|
height: 2.2em;
|
||||||
|
line-height: 2.5em;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(209, 96, 89, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
94
image.scss
Normal file
94
image.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
img.frame-1 {
|
||||||
|
padding: 5px;
|
||||||
|
background: $content-background-color;
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
@include box-shadow-out(#ffffff);
|
||||||
|
@include border-radius(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
img.frame-2 {
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
background: $content-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.frame-3 {
|
||||||
|
padding: 5px;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
@include box-shadow-out(#ffffff);
|
||||||
|
@include border-radius(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slidy {
|
||||||
|
0% { left: 0%; }
|
||||||
|
20% { left: 0%; }
|
||||||
|
25% { left: -100%; }
|
||||||
|
45% { left: -100%; }
|
||||||
|
50% { left: -200%; }
|
||||||
|
70% { left: -200%; }
|
||||||
|
75% { left: -300%; }
|
||||||
|
95% { left: -300%; }
|
||||||
|
100% { left: -400%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
div.slider-1 { overflow: hidden; }
|
||||||
|
div.slider-1 figure img { width: 20%; float: left; }
|
||||||
|
div.slider-1 figure {
|
||||||
|
position: relative;
|
||||||
|
width: 500%;
|
||||||
|
margin: 0;
|
||||||
|
left: 0;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0;
|
||||||
|
animation: 30s slidy infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-2 {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
padding-top: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-2 > img {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0;
|
||||||
|
transition: all 0.5s;
|
||||||
|
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-2 input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-2 label {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: calc(50% + 15px);
|
||||||
|
margin-left: 15px;
|
||||||
|
border: 3px solid #999;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-2 label img{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.slider-2 input:checked+label {
|
||||||
|
border-color: #666;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-2 input ~ img {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-2 input:checked+label+img {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
7
input.css.map
Normal file
7
input.css.map
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "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",
|
||||||
|
"sources": ["color.scss","input.scss","mixin.scss"],
|
||||||
|
"names": [],
|
||||||
|
"file": "input.css"
|
||||||
|
}
|
||||||
139
input.scss
Normal file
139
input.scss
Normal file
|
|
@ -0,0 +1,139 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
input, select, textarea, .textarea {
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
progress {
|
||||||
|
height: 20px;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea,
|
||||||
|
textarea,
|
||||||
|
select,
|
||||||
|
input[type="password"],
|
||||||
|
input[type="text"],
|
||||||
|
input[type="datetime"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="date"],
|
||||||
|
input[type="number"],
|
||||||
|
input[type="datetime-local"] {
|
||||||
|
@include border-radius(2px);
|
||||||
|
color: #454545;
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 70px;
|
||||||
|
font-size: 1.0em;
|
||||||
|
height: 2em;
|
||||||
|
line-height: 2em;
|
||||||
|
padding: 0 10px 0 10px;
|
||||||
|
border: solid 1px #dcdcdc;
|
||||||
|
transition: background 0.3s, border 0.3s;
|
||||||
|
box-shadow: inset 1px 1px 4px -2px #c5c5c5;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="file"] {
|
||||||
|
border: solid 1px #dcdcdc;
|
||||||
|
width: 100%;
|
||||||
|
color: #454545;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[placeholder], textarea {
|
||||||
|
font-family: 'FontAwesome', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:invalid {
|
||||||
|
transition: all 0.5s;
|
||||||
|
border: 1px solid #b85450;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
height: 2em;
|
||||||
|
line-height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea {
|
||||||
|
overflow: auto;
|
||||||
|
resize: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea, .textarea {
|
||||||
|
min-height: 100px;
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
}
|
||||||
|
|
||||||
|
span.check input[type="checkbox"], span.radio input[type="radio"] {
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
bottom: 1px;
|
||||||
|
margin-right: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 150px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="password"]:focus,
|
||||||
|
input[type="text"]:focus {
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 120px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
button {
|
||||||
|
@include border-left-radius(2px);
|
||||||
|
@include border-right-radius(0px);
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
display: inline-block;
|
||||||
|
background: #fff;
|
||||||
|
height: 2em;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 2em;
|
||||||
|
padding: 0;
|
||||||
|
min-width: 40px;
|
||||||
|
border-left: solid 1px #dcdcdc;
|
||||||
|
border-top: solid 1px #dcdcdc;
|
||||||
|
border-bottom: solid 1px #dcdcdc;
|
||||||
|
border-right: none;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
@include border-left-radius(0px);
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
font-size: 1em;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
113
layout.scss
Normal file
113
layout.scss
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
@import "color";
|
||||||
|
|
||||||
|
#nav-side {
|
||||||
|
width: 175px;
|
||||||
|
position: fixed;
|
||||||
|
top: 75px;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
font-size: 0.8em;
|
||||||
|
|
||||||
|
background: #2F2F2F;
|
||||||
|
|
||||||
|
input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input + ul {
|
||||||
|
.max {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
> li:nth-child(n+2) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + ul {
|
||||||
|
.max {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
> li:nth-child(n+2) {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> li {
|
||||||
|
li {
|
||||||
|
border-top: 1px solid #3f3f3f;
|
||||||
|
border-bottom: 1px solid #1a1a1a;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding: 5px 0 5px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: 5px 0 5px 5px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #3F3F3F;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li:last-child li:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.max, .min {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
bottom: 100%;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
padding-right: 5px;
|
||||||
|
|
||||||
|
background: $background-color;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-trigger {
|
||||||
|
position: absolute;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
label[for="nav-trigger"] {
|
||||||
|
font-size: 2.0em;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-trigger:checked ~ main {
|
||||||
|
width: calc(100% - 175px);
|
||||||
|
left: 175px;
|
||||||
|
box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
12
link.scss
Normal file
12
link.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
article a {
|
||||||
|
color: #8ea4ff;
|
||||||
|
border-bottom: 1px dotted #8ea4ff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.unseen {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
32
list.scss
Normal file
32
list.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
ul.default li {
|
||||||
|
margin: 5px 0 5px 0;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin: 0 0 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin: 5px 0 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.boxed {
|
||||||
|
background: #fff;
|
||||||
|
padding: 5px;
|
||||||
|
@include border-radius(3px);
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.boxed li {
|
||||||
|
margin: 5px 0 5px 0;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
0
media.scss
Normal file
0
media.scss
Normal file
105
mixin.scss
Normal file
105
mixin.scss
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
@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);
|
||||||
|
}
|
||||||
68
nav.scss
Normal file
68
nav.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
.nav-top {
|
||||||
|
margin: 5px 0 0 5px;
|
||||||
|
display: block;
|
||||||
|
background: $content-background-color;
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
|
||||||
|
@include border-radius(3px);
|
||||||
|
@include box-shadow-top(#ffffff);
|
||||||
|
|
||||||
|
> li {
|
||||||
|
@include box-shadow-top(#ffffff);
|
||||||
|
text-shadow: 1px 1px 1px #ffffff;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
@include box-shadow-out(#ffffff);
|
||||||
|
@include border-left-radius(3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-top li {
|
||||||
|
background: $content-background-color;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: -4px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-top > li > a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-top li:hover {
|
||||||
|
background: #555;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 -1px 0 #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-top li > ul {
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 36px;
|
||||||
|
left: 0;
|
||||||
|
width: 150px;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
-moz-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
display: none;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-top li > ul li {
|
||||||
|
background: #555;
|
||||||
|
display: block;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 -1px 0 #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-top li > ul li:hover { background: #666; }
|
||||||
|
.nav-top li:hover > ul {
|
||||||
|
display: block;
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
20
pagination.scss
Normal file
20
pagination.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
li {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
@include border-radius(3px);
|
||||||
|
@include box-shadow-out(#ffffff);
|
||||||
|
background: $content-background-color;
|
||||||
|
padding: 5px 10px 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active, a:hover, a:active {
|
||||||
|
color: #ffffff;
|
||||||
|
background: #353535;
|
||||||
|
@include box-shadow-out(#e8e8e8);
|
||||||
|
}
|
||||||
|
}
|
||||||
0
popup.scss
Normal file
0
popup.scss
Normal file
97
progress.scss
Normal file
97
progress.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
.meter {
|
||||||
|
height: 20px; /* Can be anything */
|
||||||
|
position: relative;
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meter > span {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
@include border-radius(3px);
|
||||||
|
background-color: rgb(43,194,83);
|
||||||
|
background-image: -webkit-gradient(
|
||||||
|
linear,
|
||||||
|
left bottom,
|
||||||
|
left top,
|
||||||
|
color-stop(0, rgb(43,194,83)),
|
||||||
|
color-stop(1, rgb(84,240,84))
|
||||||
|
);
|
||||||
|
background-image: -moz-linear-gradient(
|
||||||
|
center bottom,
|
||||||
|
rgb(43,194,83) 37%,
|
||||||
|
rgb(84,240,84) 69%
|
||||||
|
);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.meter > span:after, .animate > span > span {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0; bottom: 0; right: 0;
|
||||||
|
background-image:
|
||||||
|
-webkit-gradient(linear, 0 0, 100% 100%,
|
||||||
|
color-stop(.25, rgba(255, 255, 255, .2)),
|
||||||
|
color-stop(.25, transparent), color-stop(.5, transparent),
|
||||||
|
color-stop(.5, rgba(255, 255, 255, .2)),
|
||||||
|
color-stop(.75, rgba(255, 255, 255, .2)),
|
||||||
|
color-stop(.75, transparent), to(transparent)
|
||||||
|
);
|
||||||
|
background-image:
|
||||||
|
-moz-linear-gradient(
|
||||||
|
-45deg,
|
||||||
|
rgba(255, 255, 255, .2) 25%,
|
||||||
|
transparent 25%,
|
||||||
|
transparent 50%,
|
||||||
|
rgba(255, 255, 255, .2) 50%,
|
||||||
|
rgba(255, 255, 255, .2) 75%,
|
||||||
|
transparent 75%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
z-index: 1;
|
||||||
|
-webkit-background-size: 50px 50px;
|
||||||
|
-moz-background-size: 50px 50px;
|
||||||
|
-webkit-animation: move 4s linear infinite;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate > span:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes move {
|
||||||
|
0% {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 50px 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange > span {
|
||||||
|
background-color: #f1a165;
|
||||||
|
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
|
||||||
|
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
|
||||||
|
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue > span {
|
||||||
|
background-color: #96c2f1;
|
||||||
|
background-image: -moz-linear-gradient(top, #96c2f1, #4394f3);
|
||||||
|
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #96c2f1),color-stop(1, #4394f3));
|
||||||
|
background-image: -webkit-linear-gradient(#96c2f1, #4394f3);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.red > span {
|
||||||
|
background-color: #f0a3a3;
|
||||||
|
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
|
||||||
|
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
|
||||||
|
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nostripes > span > span, .nostripes > span:after {
|
||||||
|
-webkit-animation: none;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
32
section.scss
Normal file
32
section.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
section.box {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
margin: 5px 0 0 5px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .inner {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
@include border-radius(3px);
|
||||||
|
@include box-shadow-out(#ffffff);
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
background: $content-background-color;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section h1 {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
@include box-shadow-bottom(#f1f1f1);
|
||||||
|
font-size: 1.3em;
|
||||||
|
border-bottom: 1px solid $content-border-color;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-shadow: 1px 1px 1px #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
section h2 {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-shadow: 1px 1px 1px #ffffff;
|
||||||
|
}
|
||||||
68
size.scss
Normal file
68
size.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
.w-100 {
|
||||||
|
min-width: 215px;
|
||||||
|
width: 100%;
|
||||||
|
width: calc(100% - 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-50 {
|
||||||
|
min-width: 215px;
|
||||||
|
width: 49%;
|
||||||
|
width: calc(50% - 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-33 {
|
||||||
|
min-width: 215px;
|
||||||
|
width: 32%;
|
||||||
|
width: calc(33.33% - 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-25 {
|
||||||
|
min-width: 215px;
|
||||||
|
width: 25%;
|
||||||
|
width: calc(25% - 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-75 {
|
||||||
|
min-width: 215px;
|
||||||
|
width: 75%;
|
||||||
|
width: calc(75% - 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-66 {
|
||||||
|
min-width: 215px;
|
||||||
|
width: 66%;
|
||||||
|
width: calc(66.66% - 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wd-100 {
|
||||||
|
width: 100%;
|
||||||
|
width: calc(100% - 105px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-100 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-50 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-33 {
|
||||||
|
width: 33.33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-25 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-75 {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wf-66 {
|
||||||
|
width: 66.66%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
240
spinner.scss
Normal file
240
spinner.scss
Normal file
|
|
@ -0,0 +1,240 @@
|
||||||
|
.spinner-1 {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: #333;
|
||||||
|
|
||||||
|
margin: 50px auto;
|
||||||
|
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
|
||||||
|
animation: sk-rotateplane 1.2s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes sk-rotateplane {
|
||||||
|
0% { -webkit-transform: perspective(120px) }
|
||||||
|
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
|
||||||
|
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sk-rotateplane {
|
||||||
|
0% {
|
||||||
|
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||||
|
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
|
||||||
|
} 50% {
|
||||||
|
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||||
|
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
|
||||||
|
} 100% {
|
||||||
|
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||||
|
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --------------
|
||||||
|
|
||||||
|
.spinner-2 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-2 > div {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background-color: #333;
|
||||||
|
|
||||||
|
border-radius: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||||
|
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-2 .bounce1 {
|
||||||
|
-webkit-animation-delay: -0.32s;
|
||||||
|
animation-delay: -0.32s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-2 .bounce2 {
|
||||||
|
-webkit-animation-delay: -0.16s;
|
||||||
|
animation-delay: -0.16s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes sk-bouncedelay {
|
||||||
|
0%, 80%, 100% { -webkit-transform: scale(0) }
|
||||||
|
40% { -webkit-transform: scale(1.0) }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sk-bouncedelay {
|
||||||
|
0%, 80%, 100% {
|
||||||
|
-webkit-transform: scale(0);
|
||||||
|
transform: scale(0);
|
||||||
|
} 40% {
|
||||||
|
-webkit-transform: scale(1.0);
|
||||||
|
transform: scale(1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ------------
|
||||||
|
|
||||||
|
.spinner-3 {
|
||||||
|
margin: 50px auto;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-3 .sk-circle {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-3 .sk-circle:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 15%;
|
||||||
|
height: 15%;
|
||||||
|
background-color: #333;
|
||||||
|
border-radius: 100%;
|
||||||
|
-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
|
||||||
|
animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle2 {
|
||||||
|
-webkit-transform: rotate(30deg);
|
||||||
|
-ms-transform: rotate(30deg);
|
||||||
|
transform: rotate(30deg);
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle3 {
|
||||||
|
-webkit-transform: rotate(60deg);
|
||||||
|
-ms-transform: rotate(60deg);
|
||||||
|
transform: rotate(60deg);
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle4 {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
-ms-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle5 {
|
||||||
|
-webkit-transform: rotate(120deg);
|
||||||
|
-ms-transform: rotate(120deg);
|
||||||
|
transform: rotate(120deg);
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle6 {
|
||||||
|
-webkit-transform: rotate(150deg);
|
||||||
|
-ms-transform: rotate(150deg);
|
||||||
|
transform: rotate(150deg);
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle7 {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
-ms-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle8 {
|
||||||
|
-webkit-transform: rotate(210deg);
|
||||||
|
-ms-transform: rotate(210deg);
|
||||||
|
transform: rotate(210deg);
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle9 {
|
||||||
|
-webkit-transform: rotate(240deg);
|
||||||
|
-ms-transform: rotate(240deg);
|
||||||
|
transform: rotate(240deg);
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle10 {
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
-ms-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle11 {
|
||||||
|
-webkit-transform: rotate(300deg);
|
||||||
|
-ms-transform: rotate(300deg);
|
||||||
|
transform: rotate(300deg);
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle12 {
|
||||||
|
-webkit-transform: rotate(330deg);
|
||||||
|
-ms-transform: rotate(330deg);
|
||||||
|
transform: rotate(330deg);
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle2:before {
|
||||||
|
-webkit-animation-delay: -1.1s;
|
||||||
|
animation-delay: -1.1s;
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle3:before {
|
||||||
|
-webkit-animation-delay: -1s;
|
||||||
|
animation-delay: -1s;
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle4:before {
|
||||||
|
-webkit-animation-delay: -0.9s;
|
||||||
|
animation-delay: -0.9s;
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle5:before {
|
||||||
|
-webkit-animation-delay: -0.8s;
|
||||||
|
animation-delay: -0.8s;
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle6:before {
|
||||||
|
-webkit-animation-delay: -0.7s;
|
||||||
|
animation-delay: -0.7s;
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle7:before {
|
||||||
|
-webkit-animation-delay: -0.6s;
|
||||||
|
animation-delay: -0.6s;
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle8:before {
|
||||||
|
-webkit-animation-delay: -0.5s;
|
||||||
|
animation-delay: -0.5s;
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle9:before {
|
||||||
|
-webkit-animation-delay: -0.4s;
|
||||||
|
animation-delay: -0.4s;
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle10:before {
|
||||||
|
-webkit-animation-delay: -0.3s;
|
||||||
|
animation-delay: -0.3s;
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle11:before {
|
||||||
|
-webkit-animation-delay: -0.2s;
|
||||||
|
animation-delay: -0.2s;
|
||||||
|
}
|
||||||
|
.spinner-3 .sk-circle12:before {
|
||||||
|
-webkit-animation-delay: -0.1s;
|
||||||
|
animation-delay: -0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes sk-circleFadeDelay {
|
||||||
|
0%, 39%, 100% { opacity: 0; }
|
||||||
|
40% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sk-circleFadeDelay {
|
||||||
|
0%, 39%, 100% { opacity: 0; }
|
||||||
|
40% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// -------------
|
||||||
|
|
||||||
|
.spinner-4 {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 50px auto;
|
||||||
|
background-color: #333;
|
||||||
|
|
||||||
|
border-radius: 100%;
|
||||||
|
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
|
||||||
|
animation: sk-scaleout 1.0s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes sk-scaleout {
|
||||||
|
0% { -webkit-transform: scale(0) }
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale(1.0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sk-scaleout {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale(0);
|
||||||
|
transform: scale(0);
|
||||||
|
} 100% {
|
||||||
|
-webkit-transform: scale(1.0);
|
||||||
|
transform: scale(1.0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
2381
styles.css
Normal file
2381
styles.css
Normal file
File diff suppressed because it is too large
Load Diff
7
styles.css.map
Normal file
7
styles.css.map
Normal file
File diff suppressed because one or more lines are too long
3
styles.scss
Normal file
3
styles.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@import "clean", "mixin", "default", "color", "size", "transformation", "alignment";
|
||||||
|
@import "layout", "text", "tooltip", "spinner", "form", "icon", "image", "input", "accordion", "alert", "badge", "blockquote", "breadcrumb", "button", "link", "list", "nav", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag";
|
||||||
|
@import "media";
|
||||||
103
tab.scss
Normal file
103
tab.scss
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
.tabular {
|
||||||
|
.tab-links {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
padding: 5px 0 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-links label {
|
||||||
|
@include box-shadow-out(#ffffff);
|
||||||
|
@include border-top-radius(3px);
|
||||||
|
border-top: 1px solid $content-border-color;
|
||||||
|
border-left: 1px solid $content-border-color;
|
||||||
|
border-right: 1px solid $content-border-color;
|
||||||
|
@include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color);
|
||||||
|
padding: 5px 10px 5px 10px;
|
||||||
|
text-shadow: 1px 1px 1px #ffffff;
|
||||||
|
font-size: 0.9em;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-links .active a, .tab-links label:hover {
|
||||||
|
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-links .active a {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-links li {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 5px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
@include border-bottomleft-radius(3px);
|
||||||
|
@include border-bottomright-radius(3px);
|
||||||
|
@include border-topright-radius(3px);
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
background: $content-background-color;
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
> input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input + div {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + div {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabular-2 {
|
||||||
|
.tab-links {
|
||||||
|
padding: 5px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-links label {
|
||||||
|
@include box-shadow-out(#ffffff);
|
||||||
|
@include border-radius(3px);
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
@include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color);
|
||||||
|
padding: 5px 10px 5px 10px;
|
||||||
|
text-shadow: 1px 1px 1px #ffffff;
|
||||||
|
font-size: 0.9em;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-links .active a, .tab-links label:hover {
|
||||||
|
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-links .active a {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-links li {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 5px 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
> input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input + div {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + div {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
113
table.scss
Normal file
113
table.scss
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
table.table {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.9em;
|
||||||
|
|
||||||
|
caption {
|
||||||
|
@include box-shadow-top(#ffffff);
|
||||||
|
@include border-top-radius(3px);
|
||||||
|
background: $content-background-color;
|
||||||
|
border-right: 1px solid $content-border-color;
|
||||||
|
border-left: 1px solid $content-border-color;
|
||||||
|
border-top: 1px solid $content-border-color;
|
||||||
|
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 5px 10px 5px 10px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
td:first-child {
|
||||||
|
border-left: 1px solid $content-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:last-child {
|
||||||
|
border-right: 1px solid $content-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-top: 1px solid $content-border-color;
|
||||||
|
@include box-shadow-top(#ffffff);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr {
|
||||||
|
&:nth-of-type(2n) {
|
||||||
|
background: #f9f9ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(2n+1) {
|
||||||
|
background: #f9fdff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $content-background-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:last-child td {
|
||||||
|
border-bottom: 1px solid $content-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:last-child td:first-child {
|
||||||
|
@include border-bottomleft-radius(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:last-child td:last-child {
|
||||||
|
@include border-bottomright-radius(3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background: $content-background-color;
|
||||||
|
|
||||||
|
td:first-child {
|
||||||
|
border-left: 1px solid $content-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:last-child {
|
||||||
|
border-right: 1px solid $content-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
text-align: center;
|
||||||
|
color: #d8d8d8;
|
||||||
|
}
|
||||||
|
|
||||||
|
tfoot {
|
||||||
|
label {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
width: auto;
|
||||||
|
float: right;
|
||||||
|
margin: 0;
|
||||||
|
min-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.list {
|
||||||
|
th {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 2px 5px 2px 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
64
tag.scss
Normal file
64
tag.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
text-shadow: 1px 1px 1px #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid $content-border-color;
|
||||||
|
@include border-radius(3px);
|
||||||
|
padding: 5px 10px 5px 10px;
|
||||||
|
font-size: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.green {
|
||||||
|
@include box-shadow-out(#ecffea);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.red {
|
||||||
|
@include box-shadow-out(#fdb7b4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.blue {
|
||||||
|
@include box-shadow-out(#dce3fd);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.orange {
|
||||||
|
@include box-shadow-out(#fddfb1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.lightblue {
|
||||||
|
@include box-shadow-out(#e1fdfa);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.yellow {
|
||||||
|
@include box-shadow-out(#fdfdcf);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.purple {
|
||||||
|
@include box-shadow-out(#d8c8fd);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.pink {
|
||||||
|
@include box-shadow-out(#fdd3f0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.grey {
|
||||||
|
@include box-shadow-out(#f5f5f5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.darkred {
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 1px 1px 0px #000;
|
||||||
|
@include box-shadow-out(#f17068);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.darkgreen {
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 1px 1px 0px #000;
|
||||||
|
@include box-shadow-out(#9df1ad);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.darkblue {
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 1px 1px 0px #000;
|
||||||
|
@include box-shadow-out(#beddf1);
|
||||||
|
}
|
||||||
13
text.scss
Normal file
13
text.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
p {
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
line-height: 1.4em;
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p+p {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
45
tooltip.scss
Normal file
45
tooltip.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
@import "mixin", "color";
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip > i {
|
||||||
|
@include border-radius(3px);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.7em;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1.0em;
|
||||||
|
background: #000000;
|
||||||
|
position: absolute;
|
||||||
|
padding: 5px;
|
||||||
|
bottom: 100%;
|
||||||
|
left: -50%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip > i:before, .tooltip > i:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
border-left: 10px solid transparent;
|
||||||
|
border-right: 10px solid transparent;
|
||||||
|
top: 100%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip > i:after{
|
||||||
|
border-top: 10px solid #000000;
|
||||||
|
margin-top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip:hover > i {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
0
transformation.scss
Normal file
0
transformation.scss
Normal file
Loading…
Reference in New Issue
Block a user