github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/modules/progress.less (about)

     1  /*!
     2   * # Semantic UI - Progress Bar
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributorss
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  
    13  /*******************************
    14              Theme
    15  *******************************/
    16  
    17  @type    : 'module';
    18  @element : 'progress';
    19  
    20  @import (multiple) '../../theme.config';
    21  
    22  /*******************************
    23              Progress
    24  *******************************/
    25  
    26  .ui.progress {
    27    position: relative;
    28    display: block;
    29    max-width: 100%;
    30    border: @border;
    31    margin: @margin;
    32    box-shadow: @boxShadow;
    33    background: @background;
    34    padding: @padding;
    35    border-radius: @borderRadius;
    36  }
    37  
    38  .ui.progress:first-child {
    39    margin: @firstMargin;
    40  }
    41  .ui.progress:last-child {
    42    margin: @lastMargin;
    43  }
    44  
    45  /* Indicating */
    46  .ui.indicating.progress .bar[style*="width: 1"],
    47  .ui.indicating.progress .bar[style*="width: 2"] {
    48    background-color: @indicatingFirstColor;
    49  }
    50  .ui.indicating.progress .bar[style*="width: 3"] {
    51    background-color: @indicatingSecondColor;
    52  }
    53  .ui.indicating.progress .bar[style*="width: 4"],
    54  .ui.indicating.progress .bar[style*="width: 5"] {
    55    background-color: @indicatingThirdColor;
    56  }
    57  .ui.indicating.progress .bar[style*="width: 6"] {
    58    background-color: @indicatingFourthColor;
    59  }
    60  .ui.indicating.progress .bar[style*="width: 7"],
    61  .ui.indicating.progress .bar[style*="width: 8"] {
    62    background-color: @indicatingFifthColor;
    63  }
    64  .ui.indicating.progress .bar[style*="width: 9"],
    65  .ui.indicating.progress .bar[style*="width: 100"] {
    66    background-color: @indicatingSixthColor;
    67  }
    68  
    69  /* Indicating Label */
    70  .ui.indicating.progress[data-percent^="1"] .label,
    71  .ui.indicating.progress[data-percent^="2"] .label {
    72    color: @indicatingFirstColor;
    73  }
    74  .ui.indicating.progress[data-percent^="3"] .label {
    75    color: @indicatingSecondColor;
    76  }
    77  .ui.indicating.progress[data-percent^="4"] .label,
    78  .ui.indicating.progress[data-percent^="5"] .label {
    79    color: @indicatingThirdColor;
    80  }
    81  .ui.indicating.progress[data-percent^="6"] .label {
    82    color: @indicatingFourthColor;
    83  }
    84  .ui.indicating.progress[data-percent^="7"] .label,
    85  .ui.indicating.progress[data-percent^="8"] .label {
    86    color: @indicatingFifthColor;
    87  }
    88  .ui.indicating.progress[data-percent^="9"] .label,
    89  .ui.indicating.progress[data-percent^="100"] .label {
    90    color: @indicatingSixthColor;
    91  }
    92  
    93  /* Single Digits */
    94  .ui.indicating.progress .bar[style^="width: 1%"],
    95  .ui.indicating.progress .bar[style^="width: 2%"],
    96  .ui.indicating.progress .bar[style^="width: 3%"],
    97  .ui.indicating.progress .bar[style^="width: 4%"],
    98  .ui.indicating.progress .bar[style^="width: 5%"],
    99  .ui.indicating.progress .bar[style^="width: 6%"],
   100  .ui.indicating.progress .bar[style^="width: 7%"],
   101  .ui.indicating.progress .bar[style^="width: 8%"],
   102  .ui.indicating.progress .bar[style^="width: 9%"] {
   103    background-color: @indicatingFirstColor;
   104  }
   105  .ui.indicating.progress[data-percent="1"] .label,
   106  .ui.indicating.progress[data-percent="2"] .label,
   107  .ui.indicating.progress[data-percent="3"] .label,
   108  .ui.indicating.progress[data-percent="4"] .label,
   109  .ui.indicating.progress[data-percent="5"] .label,
   110  .ui.indicating.progress[data-percent="6"] .label,
   111  .ui.indicating.progress[data-percent="7"] .label,
   112  .ui.indicating.progress[data-percent="8"] .label,
   113  .ui.indicating.progress[data-percent="9"] .label {
   114    color: @indicatingFirstColor;
   115  }
   116  
   117  /* Indicating Success */
   118  .ui.indicating.progress.success .label {
   119    color: @successHeaderColor;
   120  }
   121  
   122  /*******************************
   123              Content
   124  *******************************/
   125  
   126  /* Activity Bar */
   127  .ui.progress .bar {
   128    display: block;
   129    line-height: 1;
   130    position: @barPosition;
   131    width: @barInitialWidth;
   132    min-width: @barMinWidth;
   133    background: @barBackground;
   134    border-radius: @barBorderRadius;
   135    transition: @barTransition;
   136  }
   137  
   138  /* Percent Complete */
   139  .ui.progress .bar > .progress {
   140    white-space: nowrap;
   141    position: @progressPosition;
   142    width: @progressWidth;
   143    font-size: @progressSize;
   144    top: @progressTop;
   145    right: @progressRight;
   146    left: @progressLeft;
   147    bottom: @progressBottom;
   148    color: @progressColor;
   149    text-shadow: @progressTextShadow;
   150    margin-top: @progressOffset;
   151    font-weight: @progressFontWeight;
   152    text-align: @progressTextAlign;
   153  }
   154  
   155  /* Label */
   156  .ui.progress > .label {
   157    position: absolute;
   158    width: @labelWidth;
   159    font-size: @labelSize;
   160    top: @labelTop;
   161    right: @labelRight;
   162    left: @labelLeft;
   163    bottom: @labelBottom;
   164    color: @labelColor;
   165    font-weight: @labelFontWeight;
   166    text-shadow: @labelTextShadow;
   167    margin-top: @labelOffset;
   168    text-align: @labelTextAlign;
   169    transition: @labelTransition;
   170  }
   171  
   172  
   173  /*******************************
   174               States
   175  *******************************/
   176  
   177  
   178  /*--------------
   179       Success
   180  ---------------*/
   181  
   182  .ui.progress.success .bar {
   183    background-color: @successColor !important;
   184  }
   185  .ui.progress.success .bar,
   186  .ui.progress.success .bar::after {
   187    animation: none !important;
   188  }
   189  .ui.progress.success > .label {
   190    color: @successHeaderColor;
   191  }
   192  
   193  /*--------------
   194       Warning
   195  ---------------*/
   196  
   197  .ui.progress.warning .bar {
   198    background-color: @warningColor !important;
   199  }
   200  .ui.progress.warning .bar,
   201  .ui.progress.warning .bar::after {
   202    animation: none !important;
   203  }
   204  .ui.progress.warning > .label {
   205    color: @warningHeaderColor;
   206  }
   207  
   208  /*--------------
   209       Error
   210  ---------------*/
   211  
   212  .ui.progress.error .bar {
   213    background-color: @errorColor !important;
   214  }
   215  .ui.progress.error .bar,
   216  .ui.progress.error .bar::after {
   217    animation: none !important;
   218  }
   219  .ui.progress.error > .label {
   220    color: @errorHeaderColor;
   221  }
   222  
   223  /*--------------
   224       Active
   225  ---------------*/
   226  
   227  .ui.active.progress .bar {
   228    position: relative;
   229    min-width: @activeMinWidth;
   230  }
   231  .ui.active.progress .bar::after {
   232    content: '';
   233    opacity: 0;
   234  
   235    position: absolute;
   236    top: 0px;
   237    left: 0px;
   238    right: 0px;
   239    bottom: 0px;
   240    background: @activePulseColor;
   241  
   242    border-radius: @barBorderRadius;
   243  
   244    animation: progress-active @activePulseDuration @defaultEasing infinite;
   245  }
   246  @keyframes progress-active {
   247    0% {
   248      opacity: @activePulseMaxOpacity;
   249      width: 0;
   250    }
   251    90% {
   252    }
   253    100% {
   254      opacity: 0;
   255      width: 100%;
   256    }
   257  }
   258  
   259  /*--------------
   260      Disabled
   261  ---------------*/
   262  
   263  .ui.disabled.progress {
   264    opacity: 0.35;
   265  }
   266  .ui.disabled.progress .bar,
   267  .ui.disabled.progress .bar::after {
   268    animation: none !important;
   269  }
   270  
   271  
   272  /*******************************
   273             Variations
   274  *******************************/
   275  
   276  
   277  /*--------------
   278      Inverted
   279  ---------------*/
   280  
   281  .ui.inverted.progress {
   282    background: @invertedBackground;
   283    border: @invertedBorder;
   284  }
   285  .ui.inverted.progress .bar {
   286    background: @invertedBarBackground;
   287  }
   288  .ui.inverted.progress .bar > .progress {
   289    color: @invertedProgressColor;
   290  }
   291  .ui.inverted.progress > .label {
   292    color: @invertedLabelColor;
   293  }
   294  .ui.inverted.progress.success > .label {
   295    color: @successColor;
   296  }
   297  .ui.inverted.progress.warning > .label {
   298    color: @warningColor;
   299  }
   300  .ui.inverted.progress.error > .label {
   301    color: @errorColor;
   302  }
   303  
   304  /*--------------
   305      Attached
   306  ---------------*/
   307  
   308  /* bottom attached */
   309  .ui.progress.attached {
   310    background: @attachedBackground;
   311    position: relative;
   312    border: none;
   313    margin: 0em;
   314  }
   315  .ui.progress.attached,
   316  .ui.progress.attached .bar {
   317    display: block;
   318    height: @attachedHeight;
   319    padding: 0px;
   320    overflow: hidden;
   321    border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;
   322  }
   323  .ui.progress.attached .bar {
   324    border-radius: 0em;
   325  }
   326  
   327  /* top attached */
   328  .ui.progress.top.attached,
   329  .ui.progress.top.attached .bar {
   330    top: 0px;
   331    border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
   332  }
   333  .ui.progress.top.attached .bar {
   334    border-radius: 0em;
   335  }
   336  
   337  /* Coupling */
   338  .ui.segment > .ui.attached.progress,
   339  .ui.card > .ui.attached.progress {
   340    position: absolute;
   341    top: auto;
   342    left: 0;
   343    bottom: 100%;
   344    width: 100%;
   345  }
   346  .ui.segment > .ui.bottom.attached.progress,
   347  .ui.card > .ui.bottom.attached.progress {
   348    top: 100%;
   349    bottom: auto;
   350  }
   351  
   352  /*--------------
   353       Colors
   354  ---------------*/
   355  
   356  .ui.black.progress .bar {
   357    background-color: @black;
   358  }
   359  .ui.blue.progress .bar {
   360    background-color: @blue;
   361  }
   362  .ui.green.progress .bar {
   363    background-color: @green;
   364  }
   365  .ui.orange.progress .bar {
   366    background-color: @orange;
   367  }
   368  .ui.pink.progress .bar {
   369    background-color: @pink;
   370  }
   371  .ui.purple.progress .bar {
   372    background-color: @purple;
   373  }
   374  .ui.red.progress .bar {
   375    background-color: @red;
   376  }
   377  .ui.teal.progress .bar {
   378    background-color: @teal;
   379  }
   380  .ui.yellow.progress .bar {
   381    background-color: @yellow;
   382  }
   383  
   384  .ui.black.inverted.progress .bar {
   385    background-color: @lightBlack;
   386  }
   387  .ui.blue.inverted.progress .bar {
   388    background-color: @lightBlue;
   389  }
   390  .ui.green.inverted.progress .bar {
   391    background-color: @lightGreen;
   392  }
   393  .ui.orange.inverted.progress .bar {
   394    background-color: @lightOrange;
   395  }
   396  .ui.pink.inverted.progress .bar {
   397    background-color: @lightPink;
   398  }
   399  .ui.purple.inverted.progress .bar {
   400    background-color: @lightPurple;
   401  }
   402  .ui.red.inverted.progress .bar {
   403    background-color: @lightRed;
   404  }
   405  .ui.teal.inverted.progress .bar {
   406    background-color: @lightTeal;
   407  }
   408  .ui.yellow.inverted.progress .bar {
   409    background-color: @lightYellow;
   410  }
   411  
   412  /*--------------
   413       Sizes
   414  ---------------*/
   415  
   416  .ui.tiny.progress {
   417    font-size: @tiny;
   418  }
   419  .ui.tiny.progress .bar {
   420    height: @tinyBarHeight;
   421  }
   422  
   423  .ui.small.progress {
   424    font-size: @small;
   425  }
   426  .ui.small.progress .bar {
   427    height: @smallBarHeight;
   428  }
   429  
   430  .ui.progress {
   431    font-size: @medium;
   432  }
   433  .ui.progress .bar {
   434    height: @barHeight;
   435  }
   436  
   437  .ui.large.progress {
   438    font-size: @large;
   439  }
   440  .ui.large.progress .bar {
   441    height: @largeBarHeight;
   442  }
   443  
   444  .ui.big.progress {
   445    font-size: @big;
   446  }
   447  .ui.big.progress .bar {
   448    height: @bigBarHeight;
   449  }
   450  
   451  .loadUIOverrides();