mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-02-12 07:48:40 +00:00
Merge branch 'develop' of https://github.com/Orange-Management/cssOMS into develop
This commit is contained in:
commit
62909bc843
|
|
@ -3,51 +3,50 @@
|
||||||
.ac-container{
|
.ac-container{
|
||||||
margin: 10px auto 30px auto;
|
margin: 10px auto 30px auto;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
|
||||||
|
|
||||||
.ac-container > input {
|
> input {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
|
||||||
|
|
||||||
.ac-container > label {
|
&:checked + label {
|
||||||
display: block;
|
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
|
||||||
padding: 5px 20px;
|
color: #000;
|
||||||
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 {
|
+ section {
|
||||||
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
|
display: inherit;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.ac-container > input:checked + label {
|
+ label + section {
|
||||||
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
|
display: none;
|
||||||
color: #000;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ac-container > section {
|
label {
|
||||||
background: $content-background-color;
|
display: block;
|
||||||
overflow: hidden;
|
padding: 5px 20px;
|
||||||
height: auto;
|
position: relative;
|
||||||
position: relative;
|
z-index: 20;
|
||||||
z-index: 10;
|
margin-top: -1px;
|
||||||
border-left: 1px solid $content-border-color;
|
cursor: pointer;
|
||||||
border-right: 1px solid $content-border-color;
|
color: #777;
|
||||||
padding: 10px;
|
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 > input + label + section {
|
&:hover {
|
||||||
display: none;
|
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> section {
|
||||||
.ac-container > input:checked + label + section {
|
background: $content-background-color;
|
||||||
display: inherit;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
32
alert.scss
32
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;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
116
breadcrumb.scss
116
breadcrumb.scss
|
|
@ -4,66 +4,66 @@
|
||||||
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;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
text-shadow: -1px -1px 1px #ffffff;
|
text-shadow: -1px -1px 1px #ffffff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@include box-shadow-out(#ffffff);
|
@include box-shadow-out(#ffffff);
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@include border-left-radius(3px);
|
@include border-left-radius(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.last):after, &: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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.last):after {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
border-left-color: $content-border-color;
|
||||||
|
margin-left: 1px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active:not(.last):after, &: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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
54
button.scss
54
button.scss
|
|
@ -48,40 +48,40 @@ 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;
|
||||||
border-bottom: 1px solid $content-border-color;
|
border-bottom: 1px solid $content-border-color;
|
||||||
float: left;
|
float: left;
|
||||||
text-shadow: -1px -1px 1px #ffffff;
|
text-shadow: -1px -1px 1px #ffffff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@include box-shadow-out(#ffffff);
|
@include box-shadow-out(#ffffff);
|
||||||
|
|
||||||
&: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 {
|
||||||
|
|
|
||||||
65
color.scss
65
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;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
80
form.scss
80
form.scss
|
|
@ -1,48 +1,48 @@
|
||||||
@import "_mixins", "_vars";
|
@import "_mixins", "_vars";
|
||||||
|
|
||||||
form li {
|
form {
|
||||||
margin: 5px 0 5px 0;
|
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 {
|
td {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding: 3px 5px 3px 5px;
|
padding-bottom: 5px;
|
||||||
|
|
||||||
|
textarea+i {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #878787;
|
||||||
|
text-shadow: -1px -1px 1px #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
i+i {
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout td+td {
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
font-size: 0.9em;
|
||||||
|
|
||||||
|
td {
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 3px 5px 3px 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
129
image.scss
129
image.scss
|
|
@ -1,24 +1,26 @@
|
||||||
@import "_mixins", "_vars";
|
@import "_mixins", "_vars";
|
||||||
|
|
||||||
img.frame-1 {
|
img {
|
||||||
padding: 5px;
|
&.frame-1 {
|
||||||
background: $content-background-color;
|
padding: 5px;
|
||||||
border: 1px solid $content-border-color;
|
background: $content-background-color;
|
||||||
@include box-shadow-out(#ffffff);
|
border: 1px solid $content-border-color;
|
||||||
@include border-radius(3px);
|
@include box-shadow-out(#ffffff);
|
||||||
}
|
@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 {
|
||||||
|
|
@ -33,16 +35,22 @@ 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 {
|
|
||||||
position: relative;
|
figure {
|
||||||
width: 500%;
|
position: relative;
|
||||||
margin: 0;
|
width: 500%;
|
||||||
left: 0;
|
margin: 0;
|
||||||
text-align: left;
|
left: 0;
|
||||||
font-size: 0;
|
text-align: left;
|
||||||
animation: 30s slidy infinite;
|
font-size: 0;
|
||||||
|
animation: 30s slidy infinite;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 20%; float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-2 {
|
.slider-2 {
|
||||||
|
|
@ -50,45 +58,44 @@ 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;
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
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;
|
||||||
}
|
|
||||||
|
|
||||||
.slider-2 label {
|
&:checked+label {
|
||||||
display: inline-block;
|
border-color: #666;
|
||||||
margin-top: calc(50% + 15px);
|
opacity: 1;
|
||||||
margin-left: 15px;
|
|
||||||
border: 3px solid #999;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-2 label img{
|
+img {
|
||||||
display: block;
|
opacity: 1;
|
||||||
}
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
~ img {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.slider-2 input:checked+label {
|
label {
|
||||||
border-color: #666;
|
display: inline-block;
|
||||||
opacity: 1;
|
margin-top: calc(50% + 15px);
|
||||||
}
|
margin-left: 15px;
|
||||||
|
border: 3px solid #999;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.6;
|
||||||
|
|
||||||
.slider-2 input ~ img {
|
img{
|
||||||
opacity: 0;
|
display: block;
|
||||||
transform: scale(1.1);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-2 input:checked+label+img {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
34
list.scss
34
list.scss
|
|
@ -17,17 +17,17 @@ 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 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -42,14 +42,14 @@ 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 {
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -4,19 +4,19 @@
|
||||||
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);
|
||||||
background-color: rgb(43,194,83);
|
background-color: rgb(43,194,83);
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(
|
||||||
to left top,
|
to left top,
|
||||||
color-stop(0, rgb(43,194,83)),
|
color-stop(0, rgb(43,194,83)),
|
||||||
color-stop(1, rgb(84,240,84)));
|
color-stop(1, rgb(84,240,84)));
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.meter > span:after, .animate > span > span {
|
.meter > span:after, .animate > span > span {
|
||||||
|
|
@ -94,15 +94,15 @@
|
||||||
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 {
|
||||||
|
|
@ -188,17 +188,17 @@
|
||||||
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;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 60px;
|
line-height: 60px;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
85
section.scss
85
section.scss
|
|
@ -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,27 +20,46 @@ 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;
|
||||||
}
|
|
||||||
|
|
||||||
.box .inner {
|
section.box.orange {
|
||||||
@include box-sizing(border-box);
|
border-top: 3px solid #FBA026;
|
||||||
@include box-shadow-out(#ffffff);
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section header {
|
&.red {
|
||||||
> h1 {
|
border-top: 3px solid #B8312F;
|
||||||
margin: 10px 10px 0 10px;
|
}
|
||||||
padding-bottom: 5px;
|
|
||||||
font-size: 1.1em;
|
&.green {
|
||||||
text-shadow: 1px 1px 1px #ffffff;
|
border-top: 3px solid #41A85F;
|
||||||
border-bottom: 1px solid #e1e1e1;
|
}
|
||||||
|
|
||||||
|
&.blue {
|
||||||
|
border-top: 3px solid #2C82C9;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.purple {
|
||||||
|
border-top: 3px solid #553982;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.darkblue {
|
||||||
|
border-top: 3px solid #2969B0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
section > h2 {
|
section {
|
||||||
@include box-sizing(border-box);
|
header {
|
||||||
font-size: 1.2em;
|
> h1 {
|
||||||
margin-bottom: 5px;
|
margin: 10px 10px 0 10px;
|
||||||
text-shadow: 1px 1px 1px #ffffff;
|
padding-bottom: 5px;
|
||||||
|
font-size: 1.1em;
|
||||||
|
text-shadow: 1px 1px 1px #ffffff;
|
||||||
|
border-bottom: 1px solid #e1e1e1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> h2 {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-shadow: 1px 1px 1px #ffffff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
73
table.scss
73
table.scss
|
|
@ -1,70 +1,43 @@
|
||||||
@import "_mixins", "_vars";
|
@import "_mixins", "_vars";
|
||||||
|
|
||||||
.table.red {
|
.table {
|
||||||
background: none;
|
background: none;
|
||||||
|
|
||||||
caption {
|
caption {
|
||||||
background: #B8312F;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
background: #B8312F;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table.orange {
|
|
||||||
background: none;
|
|
||||||
|
|
||||||
caption {
|
|
||||||
background: #FBA026;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
&.red {
|
||||||
background: #FBA026;
|
caption, thead {
|
||||||
color: #fff;
|
background: #B8312F;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.table.green {
|
|
||||||
background: none;
|
|
||||||
|
|
||||||
caption {
|
|
||||||
background: #41A85F;
|
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
&.orange {
|
||||||
background: #41A85F;
|
caption, thead {
|
||||||
color: #fff;
|
background: #FBA026;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.table.blue {
|
|
||||||
background: none;
|
|
||||||
|
|
||||||
caption {
|
|
||||||
background: #2C82C9;
|
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
&.green {
|
||||||
background: #2C82C9;
|
caption, thead {
|
||||||
color: #fff;
|
background: #41A85F;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.table.white {
|
|
||||||
background: none;
|
|
||||||
|
|
||||||
caption {
|
|
||||||
background: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
&.blue {
|
||||||
background: #fff;
|
caption, thead {
|
||||||
|
background: #2C82C9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.white {
|
||||||
|
caption, thead {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,8 @@ p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
p+p {
|
+p {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
68
tooltip.scss
68
tooltip.scss
|
|
@ -4,42 +4,42 @@
|
||||||
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;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
line-height: 1.0em;
|
line-height: 1.0em;
|
||||||
background: #000000;
|
background: #000000;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
left: -50%;
|
left: -50%;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
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;
|
||||||
border-right: 10px solid transparent;
|
border-right: 10px solid transparent;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user