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

accordion.scss

@@ -3,13 +3,25 @@
 .ac-container{
     margin: 10px auto 30px auto;
     text-align: left;
-}
     
-.ac-container > input {
+    > input {
         display: none;
-}
         
-.ac-container > label {
+        &:checked + label {
+            @include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
+            color: #000;
+            
+            + section {
+                display: inherit;
+            }
+        }
+        
+        + label + section {
+            display: none;
+        }
+    }
+    
+    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 {
+    > section {
-    @include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
-    color: #000;
-}
-
-.ac-container > section {
         background: $content-background-color;
         overflow: hidden;
         height: auto;
@@ -41,13 +48,5 @@
         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;
 }

alert.scss

@@ -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)} {
-.alertbox.warning, .alert.warning {
+        background: #{nth($tuple, 2)};
-    background: #f8ffa8;
+        border: 2px solid #{nth($tuple, 3)};
-    border: 2px solid #d6d949;
+        color: #{nth($tuple, 4)};
-    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;
 }

breadcrumb.scss

@@ -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 {
+        &:not(.last):after, &:before {
-    padding-right: 20px;
-    @include border-right-radius(3px);
-}
-
-.crumbs-1 li:not(.last):after, .crumbs-1 li:before {
             content:" ";
             display: block;
             width: 0;
@@ -40,30 +33,37 @@
             top: 50%;
             margin-top: -18px;
             left: 100%;
-}
+        }
         
-.crumbs-1 .last:before {
+        &:not(.last):after {
-    border: none;
-}
-
-.crumbs-1 li: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 {
+        &.active:not(.last):after, &:hover:not(.last):after  {
-    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;
+        }
+    }
+    
+    .last {
+        padding-right: 20px;
+        @include border-right-radius(3px);
+        
+        &:before {
+            border: none;
+        }
+    }
+    
+    .active {
+        cursor: default;
+    }
+    
+    .active, li:hover {
+        background: #ffffff;
+    }
 }

button.scss

@@ -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;
         }
-}
         
-ul.btns a {
+        &:before {
-    display: block;
-    padding: 10px;
-}
-
-ul.btns li:before {
             border-left-color: $content-border-color;
             margin-left: 1px;
-}
+        }
+    }
     
-ul.btns .active, ul.btns li:hover {
+    a {
-    background: #ffffff;
+        display: block;
-}
+        padding: 10px;
+    }
     
-ul.btns .active {
+    .active {
         cursor: default;
+    }
+    
+    .active, li:hover {
+        background: #ffffff;
+    }
 }
 
 button.simple {

color.scss

@@ -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 {
-.warning {
+    .#{nth($tuple, 1)} {
-    color: #ff4b41;
+        background: #{nth($tuple, 2)};
-}
+    }
-
-.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;
 }

form.scss

@@ -1,48 +1,48 @@
 @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;
         line-height: 2em;
         height: 100%;
         background: #bebebe;
-}
+    }
     
-form .layout {
+    .layout td+td {
-    td+td {
         padding-left: 5px;
     }
-}
     
-form .list {
+    .list {
         font-size: 0.9em;
 
         td {
             white-space: nowrap;
             padding: 3px 5px 3px 5px;
         }
+    }
 }

image.scss

@@ -1,24 +1,26 @@
 @import "_mixins", "_vars";
 
-img.frame-1 {
+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 {
+    &.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 {
@@ -33,9 +35,10 @@ img.frame-3 {
     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;
         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,45 +58,44 @@ div.slider-1 figure {
     position: relative;
     padding-top: auto;
     text-align: center;
-}
     
-.slider-2 > img {
+    > 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 {
+    input {
         display: none;
-}
         
-.slider-2 label {
+        &:checked+label {
+            border-color: #666;
+            opacity: 1;
+            
+            +img {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+        
+         ~ 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);
 }

list.scss

@@ -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 {
@@ -29,6 +28,7 @@ ul.boxed li {
         &:last-child {
             margin-bottom: 0;
         }
+    }
 }
 
 ul.h-list li {
@@ -42,14 +42,14 @@ 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 {
@@ -58,8 +58,8 @@ ul.h-list li {
     border-radius: 30px;
     background: #ccc;
     display: inline-block;
-}
     
-.bullet.active {
+    &.active {
         background: #000;
+    }
 }

progress.scss

@@ -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);
@@ -17,6 +16,7 @@
                         color-stop(1, rgb(84,240,84)));
         position: relative;
         overflow: hidden;
+    }
 }
 
 .meter > span:after, .animate > span > span {
@@ -94,15 +94,15 @@
     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 {
@@ -188,9 +188,8 @@
     height: 70px;
     border-radius: 50%;
     background-color: tomato;
-}
     
-.progress-radial .overlay {
+    .overlay {
         position: absolute;
         width: 60px;
         height: 60px;
@@ -201,4 +200,5 @@
         text-align: center;
         line-height: 60px;
         font-size: 9px;
+    }
 }

section.scss

@@ -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;
+    }
+
+    &.green {
+        border-top: 3px solid #41A85F;
+    }
+
+    &.blue {
+        border-top: 3px solid #2C82C9;
+    }
+
+    &.purple {
+        border-top: 3px solid #553982;
+    }
+
+    &.darkblue {
+        border-top: 3px solid #2969B0;
+    }
 }
 
-.box .inner {
+section {
-    @include box-sizing(border-box);
+    header {
-    @include box-shadow-out(#ffffff);
-    padding: 10px;
-}
-
-section header {
         > h1 {
             margin: 10px 10px 0 10px;
             padding-bottom: 5px;
@@ -54,11 +54,12 @@ section header {
             text-shadow: 1px 1px 1px #ffffff;
             border-bottom: 1px solid #e1e1e1;
         }
-}
+    }
     
-section > h2 {
+    > h2 {
         @include box-sizing(border-box);
         font-size: 1.2em;
         margin-bottom: 5px;
         text-shadow: 1px 1px 1px #ffffff;
+    }
 }

table.scss

@@ -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 {
+    &.orange {
-        background: #B8312F;
+        caption, thead {
-        color: #fff;
-    }
-}
-
-.table.orange {
-    background: none;
-
-    caption {
             background: #FBA026;
-        color: #fff;
+        }
     }
     
-    thead {
+    &.green {
-        background: #FBA026;
+        caption, thead {
-        color: #fff;
-    }
-}
-
-.table.green {
-    background: none;
-    
-    caption {
             background: #41A85F;
-        color: #fff;
+        }
     }
     
-    thead {
+    &.blue {
-        background: #41A85F;
+        caption, thead {
-        color: #fff;
-    }
-}
-
-.table.blue {
-    background: none;
-
-    caption {
             background: #2C82C9;
-        color: #fff;
+        }
     }
     
-    thead {
+    &.white {
-        background: #2C82C9;
+        caption, thead {
-        color: #fff;
-    }
-}
-
-.table.white {
-    background: none;
-
-    caption {
             background: #fff;
         }
-    
-    thead {
-        background: #fff;
     }
 }
 

text.scss

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

tooltip.scss

@@ -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;
@@ -21,9 +20,9 @@
         visibility: hidden;
         opacity: 0;
         white-space: pre;
-}
+    }
 
-.tooltip > i:before, .tooltip > i:after {
+    > i:before,  > i:after {
         content: "";
         position: absolute;
         border-left: 10px solid transparent;
@@ -31,15 +30,16 @@
         top: 100%;
         left: 50%;
         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;
+    }
 }