You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
371 lines
7.7 KiB
371 lines
7.7 KiB
/*
|
|
Square Shape
|
|
*/
|
|
.square-shape {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: #666EE8; }
|
|
|
|
/*
|
|
Rectangle Shape
|
|
*/
|
|
.rectangle-shape {
|
|
width: 200px;
|
|
height: 100px;
|
|
background: #666EE8; }
|
|
|
|
/*
|
|
Circle Shape
|
|
*/
|
|
.circle-shape {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: #666EE8;
|
|
border-radius: 50px; }
|
|
|
|
/*
|
|
Oval Shape
|
|
*/
|
|
.oval-shape {
|
|
width: 200px;
|
|
height: 100px;
|
|
background: #666EE8;
|
|
border-radius: 100px / 50px; }
|
|
|
|
/*
|
|
Triangle Up
|
|
*/
|
|
.triangle-up-shape {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-right: 50px solid transparent;
|
|
border-left: 50px solid transparent;
|
|
border-bottom: 100px solid #666EE8; }
|
|
|
|
/*
|
|
Triangle Down
|
|
*/
|
|
.triangle-down-shape {
|
|
width: 0;
|
|
height: 0;
|
|
border-right: 50px solid transparent;
|
|
border-left: 50px solid transparent;
|
|
border-top: 100px solid #666EE8; }
|
|
|
|
/*
|
|
Triangle Left
|
|
*/
|
|
.triangle-left-shape {
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 50px solid transparent;
|
|
border-left: 100px solid #666EE8;
|
|
border-bottom: 50px solid transparent; }
|
|
|
|
/*
|
|
Triangle Right
|
|
*/
|
|
.triangle-right-shape {
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 50px solid transparent;
|
|
border-right: 100px solid #666EE8;
|
|
border-bottom: 50px solid transparent; }
|
|
|
|
/*
|
|
Triangle Top Left
|
|
*/
|
|
.triangle-topleft-shape {
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 100px solid #666EE8;
|
|
border-left: 100px solid transparent; }
|
|
|
|
/*
|
|
Triangle Top Right
|
|
*/
|
|
.triangle-topright-shape {
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 100px solid #666EE8;
|
|
border-right: 100px solid transparent; }
|
|
|
|
/*
|
|
Triangle Bottom Left
|
|
*/
|
|
.triangle-bottomleft-shape {
|
|
width: 0;
|
|
height: 0;
|
|
border-bottom: 100px solid #666EE8;
|
|
border-left: 100px solid transparent; }
|
|
|
|
/*
|
|
Triangle Bottom Right
|
|
*/
|
|
.triangle-bottomright-shape {
|
|
width: 0;
|
|
height: 0;
|
|
border-bottom: 100px solid #666EE8;
|
|
border-right: 100px solid transparent; }
|
|
|
|
/*
|
|
Star Shape
|
|
*/
|
|
.star-shape {
|
|
margin: 50px 0;
|
|
position: relative;
|
|
display: block;
|
|
color: #666EE8;
|
|
width: 0px;
|
|
height: 0px;
|
|
border-left: 100px solid transparent;
|
|
border-bottom: 70px solid #666EE8;
|
|
border-right: 100px solid transparent;
|
|
-webkit-transform: rotate(-35deg);
|
|
-moz-transform: rotate(-35deg);
|
|
-ms-transform: rotate(-35deg);
|
|
-o-transform: rotate(-35deg);
|
|
transform: rotate(-35deg); }
|
|
.star-shape:before {
|
|
border-bottom: 80px solid #666EE8;
|
|
border-right: 30px solid transparent;
|
|
border-left: 30px solid transparent;
|
|
position: absolute;
|
|
height: 0;
|
|
width: 0;
|
|
top: -45px;
|
|
right: -65px;
|
|
display: block;
|
|
content: '';
|
|
-webkit-transform: rotate(35deg);
|
|
-moz-transform: rotate(35deg);
|
|
-ms-transform: rotate(35deg);
|
|
-o-transform: rotate(35deg);
|
|
transform: rotate(35deg); }
|
|
.star-shape:after {
|
|
position: absolute;
|
|
display: block;
|
|
color: #666EE8;
|
|
top: 3px;
|
|
right: -105px;
|
|
width: 0px;
|
|
height: 0px;
|
|
border-left: 100px solid transparent;
|
|
border-bottom: 70px solid #666EE8;
|
|
border-right: 100px solid transparent;
|
|
-webkit-transform: rotate(70deg);
|
|
-moz-transform: rotate(70deg);
|
|
-ms-transform: rotate(70deg);
|
|
-o-transform: rotate(70deg);
|
|
transform: rotate(70deg);
|
|
content: ''; }
|
|
|
|
/*
|
|
Pentagon
|
|
*/
|
|
.pentagon-shape {
|
|
position: relative;
|
|
width: 54px;
|
|
border-width: 50px 18px 0;
|
|
border-style: solid;
|
|
border-color: #666EE8 transparent; }
|
|
.pentagon-shape:before {
|
|
content: "";
|
|
position: absolute;
|
|
height: 0;
|
|
width: 0;
|
|
top: -85px;
|
|
right: -18px;
|
|
border-width: 0 45px 35px;
|
|
border-style: solid;
|
|
border-color: transparent transparent #666EE8; }
|
|
|
|
/*
|
|
Hexagon
|
|
*/
|
|
.hexagon-shape {
|
|
width: 100px;
|
|
height: 55px;
|
|
background: #666EE8;
|
|
position: relative; }
|
|
.hexagon-shape:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -25px;
|
|
right: 0;
|
|
width: 0;
|
|
height: 0;
|
|
border-right: 50px solid transparent;
|
|
border-left: 50px solid transparent;
|
|
border-bottom: 25px solid #666EE8; }
|
|
.hexagon-shape:after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -25px;
|
|
right: 0;
|
|
width: 0;
|
|
height: 0;
|
|
border-right: 50px solid transparent;
|
|
border-left: 50px solid transparent;
|
|
border-top: 25px solid #666EE8; }
|
|
|
|
/*
|
|
Octagon
|
|
*/
|
|
.octagon-shape {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: #666EE8;
|
|
position: relative; }
|
|
.octagon-shape:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
border-bottom: 29px solid #666EE8;
|
|
border-right: 29px solid #eee;
|
|
border-left: 29px solid #eee;
|
|
width: 42px;
|
|
height: 0; }
|
|
.octagon-shape:after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
border-top: 29px solid #666EE8;
|
|
border-right: 29px solid #eee;
|
|
border-left: 29px solid #eee;
|
|
width: 42px;
|
|
height: 0; }
|
|
|
|
/*
|
|
Heart Shape
|
|
*/
|
|
.heart-shape {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 90px; }
|
|
.heart-shape:before {
|
|
position: absolute;
|
|
content: "";
|
|
right: 50px;
|
|
top: 0;
|
|
width: 50px;
|
|
height: 80px;
|
|
background: #666EE8;
|
|
border-radius: 50px 50px 0 0;
|
|
-webkit-transform: rotate(45deg);
|
|
-moz-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
-o-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
-webkit-transform-origin: 100% 100%;
|
|
-moz-transform-origin: 100% 100%;
|
|
-ms-transform-origin: 100% 100%;
|
|
-o-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%; }
|
|
.heart-shape:after {
|
|
position: absolute;
|
|
content: "";
|
|
right: 50px;
|
|
top: 0;
|
|
width: 50px;
|
|
height: 80px;
|
|
background: #666EE8;
|
|
border-radius: 50px 50px 0 0;
|
|
-webkit-transform: rotate(45deg);
|
|
-moz-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
-o-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
-webkit-transform-origin: 100% 100%;
|
|
-moz-transform-origin: 100% 100%;
|
|
-ms-transform-origin: 100% 100%;
|
|
-o-transform-origin: 100% 100%;
|
|
transform-origin: 100% 100%;
|
|
right: 0;
|
|
-webkit-transform: rotate(-45deg);
|
|
-moz-transform: rotate(-45deg);
|
|
-ms-transform: rotate(-45deg);
|
|
-o-transform: rotate(-45deg);
|
|
transform: rotate(-45deg);
|
|
-webkit-transform-origin: 0% 100%;
|
|
-moz-transform-origin: 0% 100%;
|
|
-ms-transform-origin: 0% 100%;
|
|
-o-transform-origin: 0% 100%;
|
|
transform-origin: 0% 100%; }
|
|
|
|
/*
|
|
Diamond
|
|
*/
|
|
.cut-diamond-shape {
|
|
border-style: solid;
|
|
border-color: transparent transparent #666EE8 transparent;
|
|
border-width: 0 25px 25px 25px;
|
|
height: 0;
|
|
width: 50px;
|
|
position: relative;
|
|
margin: 20px 0 50px 0; }
|
|
.cut-diamond-shape:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 25px;
|
|
right: -25px;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-color: #666EE8 transparent transparent transparent;
|
|
border-width: 70px 50px 0 50px; }
|
|
|
|
/*
|
|
Diamond Square
|
|
*/
|
|
.diamond-shape {
|
|
width: 0;
|
|
height: 0;
|
|
border: 50px solid transparent;
|
|
border-bottom-color: #666EE8;
|
|
position: relative;
|
|
top: -50px; }
|
|
.diamond-shape:after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -50px;
|
|
top: 50px;
|
|
width: 0;
|
|
height: 0;
|
|
border: 50px solid transparent;
|
|
border-top-color: #666EE8; }
|
|
|
|
/*
|
|
Egg Shape
|
|
*/
|
|
.egg-shape {
|
|
display: block;
|
|
width: 126px;
|
|
height: 180px;
|
|
background-color: #666EE8;
|
|
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
|
|
|
|
.app-shape {
|
|
position: relative;
|
|
color: #FFF;
|
|
vertical-align: middle;
|
|
margin: auto;
|
|
z-index: 10; }
|
|
.app-shape span {
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 50%;
|
|
margin-top: -10px;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 11; }
|
|
|
|
.heart-shape span {
|
|
margin-top: -20px; }
|
|
|
|
@media (min-width: 768px) {
|
|
.jqueryui-ele-container .app-shape {
|
|
display: inline-block; } }
|