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