mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-01-22 07:18:41 +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{
|
||||
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;
|
||||
|
||||
> input {
|
||||
display: none;
|
||||
|
||||
&: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;
|
||||
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);
|
||||
|
||||
&:hover {
|
||||
@include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
|
||||
}
|
||||
}
|
||||
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
32
alert.scss
32
alert.scss
|
|
@ -7,26 +7,14 @@ div.alert {
|
|||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
@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)};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
116
breadcrumb.scss
116
breadcrumb.scss
|
|
@ -4,66 +4,66 @@
|
|||
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;
|
||||
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);
|
||||
@include box-shadow-out(#ffffff);
|
||||
|
||||
&:first-child {
|
||||
@include border-left-radius(3px);
|
||||
&:first-child {
|
||||
@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;
|
||||
}
|
||||
|
|
|
|||
62
button.scss
62
button.scss
|
|
@ -48,40 +48,40 @@ ul.btns {
|
|||
list-style: none;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
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);
|
||||
|
||||
@include box-shadow-out(#ffffff);
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid $content-border-color;
|
||||
&:last-child {
|
||||
border-right: 1px solid $content-border-color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-left-color: $content-border-color;
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.active {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.active, li:hover {
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
|
|
|
|||
65
color.scss
65
color.scss
|
|
@ -1,59 +1,8 @@
|
|||
.ok {
|
||||
color: #5cff56;
|
||||
}
|
||||
|
||||
.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;
|
||||
@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)};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
82
form.scss
82
form.scss
|
|
@ -1,48 +1,48 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
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 {
|
||||
li {
|
||||
margin: 5px 0 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
form .list {
|
||||
font-size: 0.9em;
|
||||
|
||||
|
||||
td {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
143
image.scss
143
image.scss
|
|
@ -1,24 +1,26 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
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-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;
|
||||
}
|
||||
&.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);
|
||||
&.frame-3 {
|
||||
padding: 5px;
|
||||
background: #ffffff;
|
||||
border: 1px solid $content-border-color;
|
||||
@include box-shadow-out(#ffffff);
|
||||
@include border-radius(3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slidy {
|
||||
|
|
@ -33,16 +35,22 @@ img.frame-3 {
|
|||
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;
|
||||
div.slider-1 {
|
||||
overflow: hidden;
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
width: 500%;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
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 {
|
||||
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);
|
||||
|
||||
> 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);
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&: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;
|
||||
|
||||
img{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
40
list.scss
40
list.scss
|
|
@ -17,17 +17,17 @@ ul.boxed {
|
|||
padding: 5px;
|
||||
@include border-radius(3px);
|
||||
border: 1px solid $content-border-color;
|
||||
}
|
||||
|
||||
ul.boxed li {
|
||||
margin: 5px 0 5px 0;
|
||||
li {
|
||||
margin: 5px 0 5px 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -42,14 +42,14 @@ ul.h-list li {
|
|||
padding: 0;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.bullet-list td:first-child {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.bullet-list span {
|
||||
margin-right: 5px;
|
||||
|
||||
td:first-child {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.bullet {
|
||||
|
|
@ -58,8 +58,8 @@ ul.h-list li {
|
|||
border-radius: 30px;
|
||||
background: #ccc;
|
||||
display: inline-block;
|
||||
|
||||
&.active {
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.bullet.active {
|
||||
background: #000;
|
||||
}
|
||||
|
|
@ -4,19 +4,19 @@
|
|||
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: linear-gradient(
|
||||
to left top,
|
||||
color-stop(0, rgb(43,194,83)),
|
||||
color-stop(1, rgb(84,240,84)));
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
@include border-radius(3px);
|
||||
background-color: rgb(43,194,83);
|
||||
background-image: linear-gradient(
|
||||
to left top,
|
||||
color-stop(0, rgb(43,194,83)),
|
||||
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 {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
li {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline p {
|
||||
margin: 0 0 15px;
|
||||
p {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
|
|
@ -188,17 +188,17 @@
|
|||
height: 70px;
|
||||
border-radius: 50%;
|
||||
background-color: tomato;
|
||||
}
|
||||
|
||||
.progress-radial .overlay {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
font-size: 9px;
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
85
section.scss
85
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,27 +20,46 @@ section.box {
|
|||
@include box-shadow-bottom(#f1f1f1);
|
||||
border: 1px solid $content-border-color;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
section.box.orange {
|
||||
border-top: 3px solid #FBA026;
|
||||
|
||||
.box .inner {
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow-out(#ffffff);
|
||||
padding: 10px;
|
||||
}
|
||||
&.red {
|
||||
border-top: 3px solid #B8312F;
|
||||
}
|
||||
|
||||
section header {
|
||||
> h1 {
|
||||
margin: 10px 10px 0 10px;
|
||||
padding-bottom: 5px;
|
||||
font-size: 1.1em;
|
||||
text-shadow: 1px 1px 1px #ffffff;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
&.green {
|
||||
border-top: 3px solid #41A85F;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
border-top: 3px solid #2C82C9;
|
||||
}
|
||||
|
||||
&.purple {
|
||||
border-top: 3px solid #553982;
|
||||
}
|
||||
|
||||
&.darkblue {
|
||||
border-top: 3px solid #2969B0;
|
||||
}
|
||||
}
|
||||
|
||||
section > h2 {
|
||||
@include box-sizing(border-box);
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 5px;
|
||||
text-shadow: 1px 1px 1px #ffffff;
|
||||
section {
|
||||
header {
|
||||
> h1 {
|
||||
margin: 10px 10px 0 10px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
75
table.scss
75
table.scss
|
|
@ -1,70 +1,43 @@
|
|||
@import "_mixins", "_vars";
|
||||
|
||||
.table.red {
|
||||
.table {
|
||||
background: none;
|
||||
|
||||
caption {
|
||||
background: #B8312F;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #B8312F;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.table.orange {
|
||||
background: none;
|
||||
|
||||
caption {
|
||||
background: #FBA026;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #FBA026;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.table.green {
|
||||
background: none;
|
||||
|
||||
caption {
|
||||
background: #41A85F;
|
||||
color: #fff;
|
||||
&.red {
|
||||
caption, thead {
|
||||
background: #B8312F;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #41A85F;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.table.blue {
|
||||
background: none;
|
||||
|
||||
caption {
|
||||
background: #2C82C9;
|
||||
color: #fff;
|
||||
&.orange {
|
||||
caption, thead {
|
||||
background: #FBA026;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #2C82C9;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.table.white {
|
||||
background: none;
|
||||
|
||||
caption {
|
||||
background: #fff;
|
||||
&.green {
|
||||
caption, thead {
|
||||
background: #41A85F;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #fff;
|
||||
&.blue {
|
||||
caption, thead {
|
||||
background: #2C82C9;
|
||||
}
|
||||
}
|
||||
|
||||
&.white {
|
||||
caption, thead {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -221,4 +194,4 @@ table.list {
|
|||
|
||||
.nobreak {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ p {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p+p {
|
||||
margin-top: 5px;
|
||||
+p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
70
tooltip.scss
70
tooltip.scss
|
|
@ -4,42 +4,42 @@
|
|||
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;
|
||||
}
|
||||
> 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;
|
||||
}
|
||||
> i:before, > i:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
> i:after{
|
||||
border-top: 10px solid #000000;
|
||||
margin-top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tooltip > i:after{
|
||||
border-top: 10px solid #000000;
|
||||
margin-top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tooltip:hover > i {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
&:hover > i {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user