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

Merge branch 'develop' of https://github.com/Orange-Management/cssOMS into develop

Browse Source
This commit is contained in:
Dennis Eichhorn 2017-07-13 17:16:27 +02:00
commit 62909bc843
13 changed files with 426 additions and 509 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
accordion.scss
View File

@ -3,13 +3,25 @@
.ac-container{ .ac-container{
margin: 10px auto 30px auto; margin: 10px auto 30px auto;
text-align: left; text-align: left;
> input {
display: none;
&:checked + label {
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
color: #000;
+ section {
display: inherit;
}
} }
.ac-container > input { + label + section {
display: none; display: none;
} }
}
.ac-container > label { label {
display: block; display: block;
padding: 5px 20px; padding: 5px 20px;
position: relative; position: relative;
@ -21,18 +33,13 @@
border: 1px solid $content-border-color; border: 1px solid $content-border-color;
@include border-radius(3px); @include border-radius(3px);
@include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color); @include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color);
}
.ac-container > label:hover { &:hover {
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff); @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 { > section {
background: $content-background-color; background: $content-background-color;
overflow: hidden; overflow: hidden;
height: auto; height: auto;
@ -42,12 +49,4 @@
border-right: 1px solid $content-border-color; border-right: 1px solid $content-border-color;
padding: 10px; padding: 10px;
} }
.ac-container > input + label + section {
display: none;
}
.ac-container > input:checked + label + section {
display: inherit;
} }

30
alert.scss
View File

@ -7,26 +7,14 @@ div.alert {
} }
} }
.alertbox.ok, .alert.ok { @each $tuple in
background: #aaffad; 'ok' #aaffad #81e27d #459442,
border: 2px solid #81e27d; 'warning' #f8ffa8 #d6d949 #94972f,
color: #459442; 'error' #ff7d79 #ee5649 #a5302a,
'info' #b6d2ff #85b0ee #4865a5 {
.alertbox.#{nth($tuple, 1)}, .alert.#{nth($tuple, 1)} {
background: #{nth($tuple, 2)};
border: 2px solid #{nth($tuple, 3)};
color: #{nth($tuple, 4)};
} }
.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;
} }

40
breadcrumb.scss
View File

@ -4,9 +4,8 @@
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
font-size: 12px; font-size: 12px;
}
.crumbs-1 li { li {
background: $content-background-color; background: $content-background-color;
border: 1px solid $content-border-color; border: 1px solid $content-border-color;
padding: 10px 10px 10px 20px; padding: 10px 10px 10px 20px;
@ -21,14 +20,8 @@
&:first-child { &:first-child {
@include border-left-radius(3px); @include border-left-radius(3px);
} }
}
.crumbs-1 .last { &:not(.last):after, &:before {
padding-right: 20px;
@include border-right-radius(3px);
}
.crumbs-1 li:not(.last):after, .crumbs-1 li:before {
content:" "; content:" ";
display: block; display: block;
width: 0; width: 0;
@ -42,28 +35,35 @@
left: 100%; left: 100%;
} }
.crumbs-1 .last:before { &:not(.last):after {
border: none;
}
.crumbs-1 li:not(.last):after {
z-index: 2; z-index: 2;
} }
.crumbs-1 li:before { &:before {
border-left-color: $content-border-color; border-left-color: $content-border-color;
margin-left: 1px; margin-left: 1px;
z-index: 1; z-index: 1;
} }
.crumbs-1 .active, .crumbs-1 li:hover { &.active:not(.last):after, &:hover:not(.last):after {
background: #ffffff; border-left: 14px solid #ffffff;
}
} }
.crumbs-1 .active { .last {
padding-right: 20px;
@include border-right-radius(3px);
&:before {
border: none;
}
}
.active {
cursor: default; cursor: default;
} }
.crumbs-1 li.active:not(.last):after, .crumbs-1 li:hover:not(.last):after { .active, li:hover {
border-left: 14px solid #ffffff; background: #ffffff;
}
} }

20
button.scss
View File

@ -48,9 +48,8 @@ ul.btns {
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
font-size: 12px; font-size: 12px;
}
ul.btns li { li {
background: $content-background-color; background: $content-background-color;
border-left: 1px solid $content-border-color; border-left: 1px solid $content-border-color;
border-top: 1px solid $content-border-color; border-top: 1px solid $content-border-color;
@ -64,24 +63,25 @@ ul.btns li {
&:last-child { &:last-child {
border-right: 1px solid $content-border-color; border-right: 1px solid $content-border-color;
} }
&:before {
border-left-color: $content-border-color;
margin-left: 1px;
}
} }
ul.btns a { a {
display: block; display: block;
padding: 10px; padding: 10px;
} }
ul.btns li:before { .active {
border-left-color: $content-border-color; cursor: default;
margin-left: 1px;
} }
ul.btns .active, ul.btns li:hover { .active, li:hover {
background: #ffffff; background: #ffffff;
} }
ul.btns .active {
cursor: default;
} }
button.simple { button.simple {

63
color.scss
View File

@ -1,59 +1,8 @@
.ok { @each $tuple in
color: #5cff56; 'ok' #5cff56, 'warning' #ff4b41, 'favorite' #d16059, 'green' #61BD6D, 'red' #D14841, 'blue' #2C82C9,
'orange' #FBA026, 'lightblue' #54ACD2, 'yellow' #FAC51C, 'purple' #553982, 'pink' #ffa6e3, 'grey' #dcdcdc,
'darkred' #B8312F, 'darkgreen' #41A85F, 'darkblue' #2969B0 {
.#{nth($tuple, 1)} {
background: #{nth($tuple, 2)};
} }
.warning {
color: #ff4b41;
}
.favorite {
color: #d16059;
}
.green {
background: #61BD6D;
}
.red {
background: #D14841;
}
.blue {
background: #2C82C9;
}
.orange {
background: #FBA026;
}
.lightblue {
background: #54ACD2;
}
.yellow {
background: #FAC51C;
}
.purple {
background: #553982;
}
.pink {
background: #ffa6e3;
}
.grey {
background: #dcdcdc;
}
.darkred {
background: #B8312F;
}
.darkgreen {
background: #41A85F;
}
.darkblue {
background: #2969B0;
} }

22
form.scss
View File

@ -1,29 +1,30 @@
@import "_mixins", "_vars"; @import "_mixins", "_vars";
form li { form {
li {
margin: 5px 0 5px 0; margin: 5px 0 5px 0;
} }
form td { td {
white-space: nowrap; white-space: nowrap;
padding-bottom: 5px; padding-bottom: 5px;
}
form td textarea+i { textarea+i {
vertical-align: top; vertical-align: top;
} }
}
form label { label {
font-size: 0.9em; font-size: 0.9em;
color: #878787; color: #878787;
text-shadow: -1px -1px 1px #ffffff; text-shadow: -1px -1px 1px #ffffff;
} }
form i+i { i+i {
margin-left: 3px; margin-left: 3px;
} }
form .inputPrefix { .inputPrefix {
border-left: 1px solid $content-border-color; border-left: 1px solid $content-border-color;
border-top: 1px solid $content-border-color; border-top: 1px solid $content-border-color;
border-bottom: 1px solid $content-border-color; border-bottom: 1px solid $content-border-color;
@ -32,13 +33,11 @@ form .inputPrefix {
background: #bebebe; background: #bebebe;
} }
form .layout { .layout td+td {
td+td {
padding-left: 5px; padding-left: 5px;
} }
}
form .list { .list {
font-size: 0.9em; font-size: 0.9em;
td { td {
@ -46,3 +45,4 @@ form .list {
padding: 3px 5px 3px 5px; padding: 3px 5px 3px 5px;
} }
} }
}

59
image.scss
View File

@ -1,6 +1,7 @@
@import "_mixins", "_vars"; @import "_mixins", "_vars";
img.frame-1 { img {
&.frame-1 {
padding: 5px; padding: 5px;
background: $content-background-color; background: $content-background-color;
border: 1px solid $content-border-color; border: 1px solid $content-border-color;
@ -8,18 +9,19 @@ img.frame-1 {
@include border-radius(3px); @include border-radius(3px);
} }
img.frame-2 { &.frame-2 {
border: 1px solid $content-border-color; border: 1px solid $content-border-color;
background: $content-background-color; background: $content-background-color;
} }
img.frame-3 { &.frame-3 {
padding: 5px; padding: 5px;
background: #ffffff; background: #ffffff;
border: 1px solid $content-border-color; border: 1px solid $content-border-color;
@include box-shadow-out(#ffffff); @include box-shadow-out(#ffffff);
@include border-radius(3px); @include border-radius(3px);
} }
}
@keyframes slidy { @keyframes slidy {
0% { left: 0%; } 0% { left: 0%; }
@ -33,9 +35,10 @@ img.frame-3 {
100% { left: -400%; } 100% { left: -400%; }
} }
div.slider-1 { overflow: hidden; } div.slider-1 {
div.slider-1 figure img { width: 20%; float: left; } overflow: hidden;
div.slider-1 figure {
figure {
position: relative; position: relative;
width: 500%; width: 500%;
margin: 0; margin: 0;
@ -43,6 +46,11 @@ div.slider-1 figure {
text-align: left; text-align: left;
font-size: 0; font-size: 0;
animation: 30s slidy infinite; animation: 30s slidy infinite;
img {
width: 20%; float: left;
}
}
} }
.slider-2 { .slider-2 {
@ -50,9 +58,8 @@ div.slider-1 figure {
position: relative; position: relative;
padding-top: auto; padding-top: auto;
text-align: center; text-align: center;
}
.slider-2 > img { > img {
width: 100%; width: 100%;
position: absolute; position: absolute;
left: 0; top: 0; left: 0; top: 0;
@ -60,35 +67,35 @@ div.slider-1 figure {
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
} }
.slider-2 input { input {
display: none; display: none;
&:checked+label {
border-color: #666;
opacity: 1;
+img {
opacity: 1;
transform: scale(1);
}
} }
.slider-2 label { ~ img {
opacity: 0;
transform: scale(1.1);
}
}
label {
display: inline-block; display: inline-block;
margin-top: calc(50% + 15px); margin-top: calc(50% + 15px);
margin-left: 15px; margin-left: 15px;
border: 3px solid #999; border: 3px solid #999;
cursor: pointer; cursor: pointer;
opacity: 0.6; opacity: 0.6;
}
.slider-2 label img{ img{
display: block; 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);
} }

14
list.scss
View File

@ -17,9 +17,8 @@ ul.boxed {
padding: 5px; padding: 5px;
@include border-radius(3px); @include border-radius(3px);
border: 1px solid $content-border-color; border: 1px solid $content-border-color;
}
ul.boxed li { li {
margin: 5px 0 5px 0; margin: 5px 0 5px 0;
&:first-child { &:first-child {
@ -30,6 +29,7 @@ ul.boxed li {
margin-bottom: 0; margin-bottom: 0;
} }
} }
}
ul.h-list li { ul.h-list li {
display: inline-block; display: inline-block;
@ -42,15 +42,15 @@ ul.h-list li {
padding: 0; padding: 0;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse; border-collapse: collapse;
}
.bullet-list td:first-child { td:first-child {
padding-right: 20px; padding-right: 20px;
} }
.bullet-list span { span {
margin-right: 5px; margin-right: 5px;
} }
}
.bullet { .bullet {
width: 7px; width: 7px;
@ -58,8 +58,8 @@ ul.h-list li {
border-radius: 30px; border-radius: 30px;
background: #ccc; background: #ccc;
display: inline-block; display: inline-block;
}
.bullet.active { &.active {
background: #000; background: #000;
} }
}

14
progress.scss
View File

@ -4,9 +4,8 @@
height: 20px; /* Can be anything */ height: 20px; /* Can be anything */
position: relative; position: relative;
background: none !important; background: none !important;
}
.meter > span { > span {
display: block; display: block;
height: 100%; height: 100%;
@include border-radius(3px); @include border-radius(3px);
@ -18,6 +17,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
}
.meter > span:after, .animate > span > span { .meter > span:after, .animate > span > span {
content: ""; content: "";
@ -94,16 +94,16 @@
margin: 0 0 30px 120px; margin: 0 0 30px 120px;
padding-left: 30px; padding-left: 30px;
border-left: 3px solid #eaeaea; border-left: 3px solid #eaeaea;
}
.timeline li { li {
margin: 0; margin: 0;
position: relative; position: relative;
} }
.timeline p { p {
margin: 0 0 15px; margin: 0 0 15px;
} }
}
.timeline-date { .timeline-date {
margin-top: -18px; margin-top: -18px;
@ -188,9 +188,8 @@
height: 70px; height: 70px;
border-radius: 50%; border-radius: 50%;
background-color: tomato; background-color: tomato;
}
.progress-radial .overlay { .overlay {
position: absolute; position: absolute;
width: 60px; width: 60px;
height: 60px; height: 60px;
@ -202,3 +201,4 @@
line-height: 60px; line-height: 60px;
font-size: 9px; font-size: 9px;
} }
}

61
section.scss
View File

@ -1,33 +1,15 @@
@import "_mixins", "_vars"; @import "_mixins", "_vars";
section.box.orange {
border-top: 3px solid #FBA026;
}
section.box.red {
border-top: 3px solid #B8312F;
}
section.box.green {
border-top: 3px solid #41A85F;
}
section.box.blue {
border-top: 3px solid #2C82C9;
}
section.box.purple {
border-top: 3px solid #553982;
}
section.box.darkblue {
border-top: 3px solid #2969B0;
}
.box { .box {
@include box-sizing(border-box); @include box-sizing(border-box);
display: inline-block; display: inline-block;
margin-top: 0.3rem; margin-top: 0.3rem;
.inner {
@include box-sizing(border-box);
@include box-shadow-out(#ffffff);
padding: 10px;
}
} }
.box-container { .box-container {
@ -38,15 +20,33 @@ section.box {
@include box-shadow-bottom(#f1f1f1); @include box-shadow-bottom(#f1f1f1);
border: 1px solid $content-border-color; border: 1px solid $content-border-color;
background: #fff; background: #fff;
section.box.orange {
border-top: 3px solid #FBA026;
&.red {
border-top: 3px solid #B8312F;
} }
.box .inner { &.green {
@include box-sizing(border-box); border-top: 3px solid #41A85F;
@include box-shadow-out(#ffffff);
padding: 10px;
} }
section header { &.blue {
border-top: 3px solid #2C82C9;
}
&.purple {
border-top: 3px solid #553982;
}
&.darkblue {
border-top: 3px solid #2969B0;
}
}
section {
header {
> h1 { > h1 {
margin: 10px 10px 0 10px; margin: 10px 10px 0 10px;
padding-bottom: 5px; padding-bottom: 5px;
@ -56,9 +56,10 @@ section header {
} }
} }
section > h2 { > h2 {
@include box-sizing(border-box); @include box-sizing(border-box);
font-size: 1.2em; font-size: 1.2em;
margin-bottom: 5px; margin-bottom: 5px;
text-shadow: 1px 1px 1px #ffffff; text-shadow: 1px 1px 1px #ffffff;
} }
}

63
table.scss
View File

@ -1,70 +1,43 @@
@import "_mixins", "_vars"; @import "_mixins", "_vars";
.table.red { .table {
background: none; background: none;
caption { caption {
color: #fff;
}
thead {
color: #fff;
}
&.red {
caption, thead {
background: #B8312F; background: #B8312F;
color: #fff;
}
thead {
background: #B8312F;
color: #fff;
} }
} }
.table.orange { &.orange {
background: none; caption, thead {
caption {
background: #FBA026; background: #FBA026;
color: #fff;
}
thead {
background: #FBA026;
color: #fff;
} }
} }
.table.green { &.green {
background: none; caption, thead {
caption {
background: #41A85F; background: #41A85F;
color: #fff;
}
thead {
background: #41A85F;
color: #fff;
} }
} }
.table.blue { &.blue {
background: none; caption, thead {
caption {
background: #2C82C9; background: #2C82C9;
color: #fff;
}
thead {
background: #2C82C9;
color: #fff;
} }
} }
.table.white { &.white {
background: none; caption, thead {
caption {
background: #fff; background: #fff;
} }
thead {
background: #fff;
} }
} }

4
text.scss
View File

@ -6,8 +6,8 @@ p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
}
p+p { +p {
margin-top: 5px; margin-top: 5px;
} }
}

10
tooltip.scss
View File

@ -4,9 +4,8 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
}
.tooltip > i { > i {
@include border-radius(3px); @include border-radius(3px);
text-align: center; text-align: center;
font-size: 0.7em; font-size: 0.7em;
@ -23,7 +22,7 @@
white-space: pre; white-space: pre;
} }
.tooltip > i:before, .tooltip > i:after { > i:before, > i:after {
content: ""; content: "";
position: absolute; position: absolute;
border-left: 10px solid transparent; border-left: 10px solid transparent;
@ -33,13 +32,14 @@
margin-left: -10px; margin-left: -10px;
} }
.tooltip > i:after{ > i:after{
border-top: 10px solid #000000; border-top: 10px solid #000000;
margin-top: 0; margin-top: 0;
z-index: 1; z-index: 1;
} }
.tooltip:hover > i { &:hover > i {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
}