github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/elements/step.less (about) 1 /*! 2 * # Semantic UI - Step 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 Step 15 *******************************/ 16 17 /*-------------- 18 Load Theme 19 ---------------*/ 20 21 @type : 'element'; 22 @element : 'step'; 23 24 @import (multiple) '../../theme.config'; 25 26 /******************************* 27 Singular 28 *******************************/ 29 30 .ui.steps .step { 31 position: relative; 32 display: table-cell; 33 vertical-align: middle; 34 35 margin: @verticalMargin @horizontalMargin; 36 padding: @verticalPadding @horizontalPadding @verticalPadding @leftPadding; 37 background: @background; 38 color: @textColor; 39 box-shadow: @boxShadow; 40 border-radius: @borderRadius; 41 } 42 43 44 .ui.steps .step:after { 45 position: absolute; 46 z-index: 2; 47 content: ''; 48 top: @arrowTopOffset; 49 right: @arrowRightOffset; 50 border: medium none; 51 background-color: @arrowBackgroundColor; 52 width: @arrowSize; 53 height: @arrowSize; 54 border-bottom: 1px solid @arrowBorderColor; 55 border-right: 1px solid @arrowBorderColor; 56 transform: translateY(-50%) translateX(50%) rotate(-45deg); 57 } 58 59 .ui.steps .step, 60 .ui.steps .step:after { 61 transition: @transition; 62 } 63 64 /******************************* 65 Plural 66 *******************************/ 67 68 .ui.steps { 69 display: table; 70 table-layout: fixed; 71 background: @stepsBackground; 72 box-shadow: @stepsBoxShadow; 73 74 line-height: @lineHeight; 75 box-sizing: border-box; 76 border-radius: @stepsBorderRadius; 77 } 78 79 .ui.steps .step:first-child { 80 padding-left: @horizontalPadding; 81 border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius; 82 } 83 .ui.steps .step:last-child { 84 border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em; 85 } 86 .ui.steps .step:only-child { 87 -webkit-border-radius: @stepsBorderRadius; 88 -moz-border-radius: @stepsBorderRadius; 89 border-radius: @stepsBorderRadius; 90 } 91 92 .ui.steps .step:last-child { 93 margin-right: 0em; 94 } 95 .ui.steps .step:last-child:after { 96 display: none; 97 } 98 99 100 /******************************* 101 Content 102 *******************************/ 103 104 /* Title */ 105 .ui.steps .step .title { 106 font-family: @titleFontFamily; 107 font-size: @titleFontSize; 108 font-weight: @titleFontWeight; 109 } 110 111 /* Description */ 112 .ui.steps .step .description { 113 font-weight: @descriptionFontWeight; 114 font-size: @descriptionFontSize; 115 color: @descriptionColor; 116 } 117 .ui.steps .step .title ~ .description { 118 margin-top: @descriptionDistance; 119 } 120 121 /* Icon */ 122 .ui.steps .step > .icon, 123 .ui.steps .step > .icon ~ .content { 124 display: table-cell; 125 vertical-align: @iconVerticalAlign; 126 } 127 .ui.steps .step > .icon { 128 font-size: @iconSize; 129 margin: 0em; 130 padding-right: @iconDistance; 131 } 132 133 /* Link */ 134 .ui.steps .link.step, 135 .ui.steps a.step { 136 cursor: pointer; 137 } 138 139 /******************************* 140 Types 141 *******************************/ 142 143 /*-------------- 144 Ordered 145 ---------------*/ 146 147 .ui.ordered.steps { 148 counter-reset: ordered; 149 } 150 .ui.ordered.steps .step:before { 151 display: table-cell; 152 position: static; 153 text-align: center; 154 content: counters(ordered, "."); 155 vertical-align: @iconVerticalAlign; 156 padding-right: @iconDistance; 157 font-size: @iconSize; 158 counter-increment: ordered; 159 } 160 161 .ui.ordered.steps .step > * { 162 display: table-cell; 163 vertical-align: @iconVerticalAlign; 164 } 165 166 167 /*-------------- 168 Vertical 169 ---------------*/ 170 171 .ui.vertical.steps { 172 display: inline-block; 173 overflow: visible; 174 } 175 .ui.vertical.steps .step { 176 display: block; 177 border-radius: @borderRadius; 178 padding: @verticalPadding @horizontalPadding; 179 } 180 .ui.vertical.steps .step:first-child { 181 padding: @verticalPadding @horizontalPadding; 182 border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; 183 } 184 .ui.vertical.steps .step:last-child { 185 border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; 186 } 187 188 /* Arrow */ 189 .ui.vertical.steps .step:after { 190 display: none; 191 } 192 193 /* Active Arrow */ 194 .ui.vertical.steps .active.step:after { 195 display: block; 196 } 197 198 199 /*--------------- 200 Responsive 201 ----------------*/ 202 203 /* Mobile (Default) */ 204 @media only screen and (max-width: (@largestMobileScreen)) { 205 206 .ui.steps { 207 overflow: visible; 208 } 209 .ui.steps .step { 210 display: block; 211 border-radius: @borderRadius; 212 padding: @verticalPadding @horizontalPadding; 213 } 214 .ui.steps .step:first-child { 215 padding: @verticalPadding @horizontalPadding; 216 border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; 217 } 218 .ui.steps .step:last-child { 219 border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; 220 } 221 222 /* Arrow */ 223 .ui.steps .step:after { 224 display: none; 225 } 226 227 } 228 229 /******************************* 230 States 231 *******************************/ 232 233 /* Link Hover */ 234 .ui.steps .link.step:hover::after, 235 .ui.steps .link.step:hover, 236 .ui.steps a.step:hover::after, 237 .ui.steps a.step:hover { 238 background: @hoverBackground; 239 color: @hoverColor; 240 } 241 242 /* Link Down */ 243 .ui.steps .link.step:active::after, 244 .ui.steps .link.step:active, 245 .ui.steps a.step:active::after, 246 .ui.steps a.step:active { 247 background: @downBackground; 248 color: @downColor; 249 } 250 251 /* Active */ 252 .ui.steps .step.active { 253 cursor: auto; 254 background: @activeBackground; 255 } 256 .ui.steps .step.active:after { 257 background: @activeBackground; 258 } 259 .ui.steps .step.active .title { 260 color: @activeColor; 261 } 262 .ui.ordered.steps .step.active:before, 263 .ui.steps .active.step .icon { 264 color: @activeIconColor; 265 } 266 267 /* Active Hover */ 268 .ui.steps .link.active.step:hover::after, 269 .ui.steps .link.active.step:hover, 270 .ui.steps a.active.step:hover::after, 271 .ui.steps a.active.step:hover { 272 cursor: pointer; 273 background: @activeHoverBackground; 274 color: @activeHoverColor; 275 } 276 277 /* Completed */ 278 .ui.steps .step.completed > .icon:before, 279 .ui.ordered.steps .step.completed:before { 280 color: @completedColor; 281 } 282 283 /* Disabled */ 284 .ui.steps .disabled.step { 285 cursor: auto; 286 background: @disabledBackground; 287 pointer-events: none; 288 } 289 .ui.steps .disabled.step, 290 .ui.steps .disabled.step .title, 291 .ui.steps .disabled.step .description { 292 color: @disabledColor; 293 } 294 .ui.steps .disabled.step:after { 295 background: @disabledBackground; 296 } 297 298 299 /******************************* 300 Variations 301 *******************************/ 302 303 304 /*-------------- 305 Stackable 306 ---------------*/ 307 308 309 /* Tablet Or Below */ 310 @media only screen and (min-width: @computerBreakpoint) { 311 312 .ui[class*="tablet stackable"].steps { 313 overflow: visible; 314 } 315 .ui[class*="tablet stackable"].steps .step { 316 display: block; 317 border-radius: @borderRadius; 318 padding: @verticalPadding @horizontalPadding; 319 } 320 .ui[class*="tablet stackable"].steps .step:first-child { 321 padding: @verticalPadding @horizontalPadding; 322 border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; 323 } 324 .ui[class*="tablet stackable"].steps .step:last-child { 325 border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; 326 } 327 /* Arrow */ 328 .ui[class*="tablet stackable"].steps .step:after { 329 display: none; 330 } 331 332 } 333 334 335 /*-------------- 336 Fluid 337 ---------------*/ 338 339 /* Fluid */ 340 .ui.fluid.steps { 341 width: 100%; 342 } 343 344 /*-------------- 345 Attached 346 ---------------*/ 347 348 /* Top */ 349 .attached.ui.steps { 350 margin: @attachedTopMargin; 351 border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; 352 } 353 .attached.ui.steps .step:first-child { 354 border-radius: @stepsBorderRadius 0em 0em 0em; 355 } 356 .attached.ui.steps .step:last-child { 357 border-radius: 0em @stepsBorderRadius 0em 0em; 358 } 359 360 /* Bottom */ 361 .bottom.attached.ui.steps { 362 margin: @attachedBottomMargin; 363 border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; 364 } 365 .bottom.attached.ui.steps .step:first-child { 366 border-radius: 0em 0em 0em @stepsBorderRadius; 367 } 368 .bottom.attached.ui.steps .step:last-child { 369 border-radius: 0em 0em @stepsBorderRadius 0em; 370 } 371 372 /*------------------- 373 Evenly Divided 374 --------------------*/ 375 376 .ui.one.steps, 377 .ui.two.steps, 378 .ui.three.steps, 379 .ui.four.steps, 380 .ui.five.steps, 381 .ui.six.steps, 382 .ui.seven.steps, 383 .ui.eight.steps { 384 width: 100%; 385 } 386 .ui.one.steps > .step { 387 width: 100%; 388 } 389 .ui.two.steps > .step { 390 width: 50%; 391 } 392 .ui.three.steps > .step { 393 width: 33.333%; 394 } 395 .ui.four.steps > .step { 396 width: 25%; 397 } 398 .ui.five.steps > .step { 399 width: 20%; 400 } 401 .ui.six.steps > .step { 402 width: 16.666%; 403 } 404 .ui.seven.steps > .step { 405 width: 14.285%; 406 } 407 .ui.eight.steps > .step { 408 width: 12.500%; 409 } 410 411 /*------------------- 412 Sizes 413 --------------------*/ 414 415 416 .ui.small.step, 417 .ui.small.steps .step { 418 font-size: @small; 419 } 420 .ui.step, 421 .ui.steps .step { 422 font-size: @medium; 423 } 424 .ui.large.step, 425 .ui.large.steps .step { 426 font-size: @large; 427 } 428 429 .loadUIOverrides();