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();