Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-02-18 02:18:41 +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{
margin: 10px auto 30px auto;
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;
}
}
.ac-container > label {
label {
display: block;
padding: 5px 20px;
position: relative;
@ -21,18 +33,13 @@
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 {
&: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 {
> section {
background: $content-background-color;
overflow: hidden;
height: auto;
@ -42,12 +49,4 @@
border-right: 1px solid $content-border-color;
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 {
background: #aaffad;
border: 2px solid #81e27d;
color: #459442;
@each $tuple in
'ok' #aaffad #81e27d #459442,
'warning' #f8ffa8 #d6d949 #94972f,
'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;
overflow: hidden;
font-size: 12px;
}
.crumbs-1 li {
li {
background: $content-background-color;
border: 1px solid $content-border-color;
padding: 10px 10px 10px 20px;
@ -21,14 +20,8 @@
&: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 {
&:not(.last):after, &:before {
content:" ";
display: block;
width: 0;
@ -42,28 +35,35 @@
left: 100%;
}
.crumbs-1 .last:before {
border: none;
}
.crumbs-1 li:not(.last):after {
&:not(.last):after {
z-index: 2;
}
.crumbs-1 li:before {
&:before {
border-left-color: $content-border-color;
margin-left: 1px;
z-index: 1;
}
.crumbs-1 .active, .crumbs-1 li:hover {
background: #ffffff;
&.active:not(.last):after, &:hover:not(.last):after {
border-left: 14px solid #ffffff;
}
}
.crumbs-1 .active {
.last {
padding-right: 20px;
@include border-right-radius(3px);
&:before {
border: none;
}
}
.active {
cursor: default;
}
.crumbs-1 li.active:not(.last):after, .crumbs-1 li:hover:not(.last):after {
border-left: 14px solid #ffffff;
.active, li:hover {
background: #ffffff;
}
}

20
button.scss
View File

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

63
color.scss
View File

@ -1,59 +1,8 @@
.ok {
color: #5cff56;
@each $tuple in
'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";
form li {
form {
li {
margin: 5px 0 5px 0;
}
form td {
td {
white-space: nowrap;
padding-bottom: 5px;
}
form td textarea+i {
textarea+i {
vertical-align: top;
}
}
form label {
label {
font-size: 0.9em;
color: #878787;
text-shadow: -1px -1px 1px #ffffff;
}
form i+i {
i+i {
margin-left: 3px;
}
form .inputPrefix {
.inputPrefix {
border-left: 1px solid $content-border-color;
border-top: 1px solid $content-border-color;
border-bottom: 1px solid $content-border-color;
@ -32,13 +33,11 @@ form .inputPrefix {
background: #bebebe;
}
form .layout {
td+td {
.layout td+td {
padding-left: 5px;
}
}
form .list {
.list {
font-size: 0.9em;
td {
@ -46,3 +45,4 @@ form .list {
padding: 3px 5px 3px 5px;
}
}
}

59
image.scss
View File

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

14
list.scss
View File

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

14
progress.scss
View File

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

61
section.scss
View File

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

63
table.scss
View File

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

4
text.scss
View File

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

10
tooltip.scss
View File

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