github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/divider.css (about) 1 /*! 2 * # Semantic UI x.x - Divider 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 Divider 15 *******************************/ 16 17 .ui.divider { 18 margin: 1rem 0rem; 19 line-height: 1; 20 height: 0em; 21 font-weight: bold; 22 text-transform: uppercase; 23 letter-spacing: 0.05em; 24 color: rgba(0, 0, 0, 0.85); 25 -webkit-user-select: none; 26 -moz-user-select: none; 27 -ms-user-select: none; 28 user-select: none; 29 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 30 } 31 32 /*-------------- 33 Basic 34 ---------------*/ 35 36 .ui.divider:not(.vertical):not(.horizontal) { 37 border-top: 1px solid rgba(0, 0, 0, 0.1); 38 border-bottom: 1px solid rgba(255, 255, 255, 0.2); 39 } 40 41 /*-------------- 42 Coupling 43 ---------------*/ 44 45 .ui.grid > .ui.divider { 46 font-size: 1rem; 47 } 48 49 /*-------------- 50 Horizontal 51 ---------------*/ 52 53 .ui.horizontal.divider { 54 position: relative; 55 height: auto; 56 margin: ''; 57 overflow: hidden; 58 line-height: 1; 59 text-align: center; 60 } 61 .ui.horizontal.divider:before, 62 .ui.horizontal.divider:after { 63 position: absolute; 64 content: ''; 65 z-index: 3; 66 width: 50%; 67 top: 50%; 68 height: 0px; 69 border-top: 1px solid rgba(0, 0, 0, 0.1); 70 border-bottom: 1px solid rgba(255, 255, 255, 0.2); 71 } 72 .ui.horizontal.divider:before { 73 margin-left: -webkit-calc(-50% - 1em ); 74 margin-left: calc(-50% - 1em ); 75 } 76 .ui.horizontal.divider:after { 77 margin-left: 1em; 78 } 79 80 /*-------------- 81 Vertical 82 ---------------*/ 83 84 .ui.vertical.divider { 85 position: absolute; 86 z-index: 2; 87 top: 50%; 88 left: 50%; 89 margin: 0rem; 90 padding: 0em; 91 width: auto; 92 height: 50%; 93 line-height: 0em; 94 text-align: center; 95 -webkit-transform: translateX(-50%); 96 -ms-transform: translateX(-50%); 97 transform: translateX(-50%); 98 } 99 .ui.vertical.divider:before, 100 .ui.vertical.divider:after { 101 position: absolute; 102 left: 50%; 103 content: ''; 104 z-index: 3; 105 border-left: 1px solid rgba(0, 0, 0, 0.1); 106 border-right: 1px solid rgba(255, 255, 255, 0.2); 107 width: 0%; 108 height: -webkit-calc(100% - 1rem ); 109 height: calc(100% - 1rem ); 110 } 111 .ui.vertical.divider:before { 112 top: -100%; 113 } 114 .ui.vertical.divider:after { 115 top: auto; 116 bottom: 0px; 117 } 118 119 /* Inside grid */ 120 @media only screen and (max-width: 767px) { 121 .ui.stackable.grid .ui.vertical.divider, 122 .ui.grid .stackable.row .ui.vertical.divider { 123 position: relative; 124 margin: 1rem 0rem; 125 left: 50%; 126 height: auto; 127 overflow: hidden; 128 line-height: 1; 129 text-align: center; 130 } 131 .ui.stackable.grid .ui.vertical.divider:before, 132 .ui.grid .stackable.row .ui.vertical.divider:before, 133 .ui.stackable.grid .ui.vertical.divider:after, 134 .ui.grid .stackable.row .ui.vertical.divider:after { 135 position: absolute; 136 left: auto; 137 content: ''; 138 z-index: 3; 139 width: 50%; 140 top: 50%; 141 height: 0px; 142 border-top: 1px solid rgba(0, 0, 0, 0.1); 143 border-bottom: 1px solid rgba(255, 255, 255, 0.2); 144 } 145 .ui.stackable.grid .ui.vertical.divider:before, 146 .ui.grid .stackable.row .ui.vertical.divider:before { 147 margin-left: -51%; 148 } 149 .ui.stackable.grid .ui.vertical.divider:after, 150 .ui.grid .stackable.row .ui.vertical.divider:after { 151 margin-left: 1em; 152 } 153 } 154 155 /*-------------- 156 Icon 157 ---------------*/ 158 159 .ui.divider > .icon { 160 margin: 0rem; 161 font-size: 1rem; 162 height: 1em; 163 vertical-align: middle; 164 } 165 166 167 /******************************* 168 Variations 169 *******************************/ 170 171 172 /*-------------- 173 Hidden 174 ---------------*/ 175 176 .ui.hidden.divider { 177 border-color: transparent !important; 178 } 179 180 /*-------------- 181 Inverted 182 ---------------*/ 183 184 .ui.divider.inverted, 185 .ui.vertical.inverted.divider, 186 .ui.horizontal.inverted.divider { 187 color: #ffffff; 188 } 189 .ui.divider.inverted, 190 .ui.divider.inverted:after, 191 .ui.divider.inverted:before { 192 border-top-color: rgba(0, 0, 0, 0.15) !important; 193 border-bottom-color: rgba(255, 255, 255, 0.15) !important; 194 border-left-color: rgba(0, 0, 0, 0.15) !important; 195 border-right-color: rgba(255, 255, 255, 0.15) !important; 196 } 197 198 /*-------------- 199 Fitted 200 ---------------*/ 201 202 .ui.fitted.divider { 203 margin: 0em; 204 } 205 206 /*-------------- 207 Clearing 208 ---------------*/ 209 210 .ui.clearing.divider { 211 clear: both; 212 } 213 214 /*-------------- 215 Section 216 ---------------*/ 217 218 .ui.section.divider { 219 margin-top: 2rem; 220 margin-bottom: 2rem; 221 } 222 223 /*-------------- 224 Sizes 225 ---------------*/ 226 227 .ui.divider { 228 font-size: 1rem; 229 } 230 231 232 /******************************* 233 Theme Overrides 234 *******************************/ 235 236 237 238 /******************************* 239 Site Overrides 240 *******************************/ 241