github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/shape.css (about) 1 /*! 2 * # Semantic UI x.x - Shape 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributors 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Shape 15 *******************************/ 16 17 .ui.shape { 18 position: relative; 19 display: inline-block; 20 -webkit-perspective: 2000px; 21 perspective: 2000px; 22 } 23 .ui.shape .sides { 24 -webkit-transform-style: preserve-3d; 25 transform-style: preserve-3d; 26 } 27 .ui.shape .side { 28 opacity: 1; 29 width: 100%; 30 margin: 0em !important; 31 -webkit-backface-visibility: hidden; 32 backface-visibility: hidden; 33 } 34 .ui.shape .side { 35 display: none; 36 } 37 .ui.shape .side > * { 38 -webkit-backface-visibility: visible !important; 39 backface-visibility: visible !important; 40 } 41 42 43 /******************************* 44 Types 45 *******************************/ 46 47 .ui.cube.shape .side { 48 min-width: 15em; 49 height: 15em; 50 padding: 2em; 51 background-color: #e6e6e6; 52 color: rgba(0, 0, 0, 0.8); 53 box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); 54 } 55 .ui.cube.shape .side > .content { 56 width: 100%; 57 height: 100%; 58 display: table; 59 text-align: center; 60 -webkit-user-select: text; 61 -moz-user-select: text; 62 -ms-user-select: text; 63 user-select: text; 64 } 65 .ui.cube.shape .side > .content > div { 66 display: table-cell; 67 vertical-align: middle; 68 font-size: 2em; 69 } 70 71 72 /******************************* 73 Variations 74 *******************************/ 75 76 .ui.text.shape.animating .sides { 77 position: static; 78 } 79 .ui.text.shape .side { 80 white-space: nowrap; 81 } 82 .ui.text.shape .side > * { 83 white-space: normal; 84 } 85 86 87 /******************************* 88 States 89 *******************************/ 90 91 92 /*-------------- 93 Loading 94 ---------------*/ 95 96 .ui.loading.shape { 97 position: absolute; 98 top: -9999px; 99 left: -9999px; 100 } 101 102 /*-------------- 103 Animating 104 ---------------*/ 105 106 .ui.shape .animating.side { 107 position: absolute; 108 top: 0px; 109 left: 0px; 110 z-index: 100; 111 } 112 .ui.shape .hidden.side { 113 opacity: 0.4; 114 } 115 116 /*-------------- 117 CSS 118 ---------------*/ 119 120 .ui.shape.animating { 121 -webkit-transition: all 0.6s ease-in-out; 122 transition: all 0.6s ease-in-out; 123 } 124 .ui.shape.animating .sides { 125 position: absolute; 126 } 127 .ui.shape.animating .sides { 128 -webkit-transition: all 0.6s ease-in-out; 129 transition: all 0.6s ease-in-out; 130 } 131 .ui.shape.animating .side { 132 -webkit-transition: opacity 0.6s ease-in-out; 133 transition: opacity 0.6s ease-in-out; 134 } 135 136 /*-------------- 137 Active 138 ---------------*/ 139 140 .ui.shape .active.side { 141 display: block; 142 } 143 144 145 /******************************* 146 Theme Overrides 147 *******************************/ 148 149 150 151 /******************************* 152 User Overrides 153 *******************************/ 154