first commit
This commit is contained in:
@@ -0,0 +1,286 @@
|
||||
.options {
|
||||
-webkit-transform: scale(0.7);
|
||||
-moz-transform: scale(0.7);
|
||||
-ms-transform: scale(0.7);
|
||||
transform: scale(0.7);
|
||||
-webkit-backface-visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 300ms;
|
||||
-moz-transition: all 300ms;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.playground.opened {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.opened .options {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pg-cal {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pg-val {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 95px;
|
||||
margin-right: 13px;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
color: #5f5f5f;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.pg-val:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pg-val:hover,
|
||||
.pg-val.active {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.pg-val i {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground {
|
||||
/* display: none;
|
||||
visibility: hidden; */
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 500px;
|
||||
height: auto;
|
||||
z-index: 9999;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-moz-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.playground > .options {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.playground > .options:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
background-color: #f5f5f5;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.playground h6 {
|
||||
font-size: 11px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.pg-toggle {
|
||||
/* display: none;
|
||||
visibility: hidden;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 0;
|
||||
z-index: 9999;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid #8d8d8d;
|
||||
border-right: 0;
|
||||
border-radius: 4px 0 0 4px;
|
||||
-moz-border-radius: 4px 0 0 4px;
|
||||
-webkit-border-radius: 4px 0 0 4px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
-webkit-transform: translateX(0) translateY(-50%);
|
||||
-moz-transform: translateX(0) translateY(-50%);
|
||||
-ms-transform: translateX(0) translateY(-50%);
|
||||
transform: translateX(0) translateY(-50%)*/
|
||||
}
|
||||
|
||||
.playground .pg-close {
|
||||
position: absolute;
|
||||
padding: 15px;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.playground select {
|
||||
width: 100%;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
outline: none !important;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.playground .options-container {
|
||||
width: 50%;
|
||||
float: left;
|
||||
padding: 3px 15px;
|
||||
}
|
||||
|
||||
.playground small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.playground .cs_color {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 95px;
|
||||
margin-right: 13px;
|
||||
margin-bottom: 5px;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.cs_color > div:first-child {
|
||||
width: 30%;
|
||||
height: 12px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.cs_color > div:nth-child(2) {
|
||||
width: 70%;
|
||||
height: 12px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.cs_color > div:nth-child(3) {
|
||||
width: 30%;
|
||||
height: 71px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.cs_color > div:nth-child(4) {
|
||||
width: 70%;
|
||||
height: 71px;
|
||||
background-color: #f1f4f9;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.playground .cs_color.active,
|
||||
.playground .cs_color:hover,
|
||||
.pg-val:hover,
|
||||
.pg-val.active {
|
||||
border: 1px solid #a55ee7;
|
||||
}
|
||||
|
||||
.playground .cs_1 div:first-child {
|
||||
background: #147bd0;
|
||||
}
|
||||
|
||||
.playground .cs_1 div:nth-child(2) {
|
||||
background: #1582dc;
|
||||
}
|
||||
|
||||
.playground .cs_1 div:nth-child(3) {
|
||||
background: #2e353d;
|
||||
}
|
||||
|
||||
.playground .cs_2 div:first-child {
|
||||
background: #14a5d3;
|
||||
}
|
||||
|
||||
.playground .cs_2 div:nth-child(2) {
|
||||
background: #15acdc;
|
||||
}
|
||||
|
||||
.playground .cs_2 div:nth-child(3) {
|
||||
background: #4f576b;
|
||||
}
|
||||
|
||||
.playground .cs_3 div:first-child {
|
||||
background: #353d46;
|
||||
}
|
||||
|
||||
.playground .cs_3 div:nth-child(2) {
|
||||
background: #353d46;
|
||||
}
|
||||
|
||||
.playground .cs_3 div:nth-child(3) {
|
||||
background: #353d46;
|
||||
}
|
||||
|
||||
.playground .cs_4 div:first-child {
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
border: 1px solid #eee;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.playground .cs_4 div:nth-child(2) {
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
border: 1px solid #eee;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.playground .cs_4 div:nth-child(3) {
|
||||
background: #39424c;
|
||||
}
|
||||
|
||||
.playground .cs_5 div:first-child {
|
||||
background: #2dbe60;
|
||||
}
|
||||
|
||||
.playground .cs_5 div:nth-child(2) {
|
||||
background: #2dbe60;
|
||||
}
|
||||
|
||||
.playground .cs_5 div:nth-child(3) {
|
||||
background: #f1f4f9;
|
||||
}
|
||||
|
||||
.playground .cs_5 div:nth-child(4) {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.pg-footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.layout-toggleMenu__item {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
margin-left: 5px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.layout-toggleMenu__item.is-active {
|
||||
border-color: #a55ee7;
|
||||
}
|
||||
Reference in New Issue
Block a user