blue-twilight/public/semantic-ui/components/shape.css
2017-03-22 09:25:22 +00:00

158 lines
3.6 KiB
CSS
Vendored

/*!
* # Semantic UI 2.2.9 - Shape
* http://github.com/semantic-org/semantic-ui/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Shape
*******************************/
.ui.shape {
position: relative;
vertical-align: top;
display: inline-block;
-webkit-perspective: 2000px;
perspective: 2000px;
-webkit-transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}
.ui.shape .sides {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ui.shape .side {
opacity: 1;
width: 100%;
margin: 0em !important;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ui.shape .side {
display: none;
}
.ui.shape .side * {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
/*******************************
Types
*******************************/
.ui.cube.shape .side {
min-width: 15em;
height: 15em;
padding: 2em;
background-color: #E6E6E6;
color: rgba(0, 0, 0, 0.87);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
}
.ui.cube.shape .side > .content {
width: 100%;
height: 100%;
display: table;
text-align: center;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.ui.cube.shape .side > .content > div {
display: table-cell;
vertical-align: middle;
font-size: 2em;
}
/*******************************
Variations
*******************************/
.ui.text.shape.animating .sides {
position: static;
}
.ui.text.shape .side {
white-space: nowrap;
}
.ui.text.shape .side > * {
white-space: normal;
}
/*******************************
States
*******************************/
/*--------------
Loading
---------------*/
.ui.loading.shape {
position: absolute;
top: -9999px;
left: -9999px;
}
/*--------------
Animating
---------------*/
.ui.shape .animating.side {
position: absolute;
top: 0px;
left: 0px;
display: block;
z-index: 100;
}
.ui.shape .hidden.side {
opacity: 0.6;
}
/*--------------
CSS
---------------*/
.ui.shape.animating .sides {
position: absolute;
}
.ui.shape.animating .sides {
-webkit-transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}
.ui.shape.animating .side {
-webkit-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
}
/*--------------
Active
---------------*/
.ui.shape .active.side {
display: block;
}
/*******************************
Theme Overrides
*******************************/
/*******************************
User Overrides
*******************************/