github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/progress.css (about)

     1  /*!
     2   * # Semantic UI x.x - 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              Progress
    15  *******************************/
    16  
    17  .ui.progress {
    18    position: relative;
    19    display: block;
    20    max-width: 100%;
    21    border: 1px solid rgba(39, 41, 43, 0.15);
    22    margin: 1em 0em 2.5em;
    23    box-shadow: none;
    24    background: rgba(0, 0, 0, 0.03);
    25    padding: 0.2857em;
    26    border-radius: 0.2857rem;
    27  }
    28  .ui.progress:first-child {
    29    margin: 0em 0em 2.5em;
    30  }
    31  .ui.progress:last-child {
    32    margin: 0em 0em 1.5em;
    33  }
    34  
    35  /* Indicating */
    36  .ui.indicating.progress .bar[style*="width: 1"],
    37  .ui.indicating.progress .bar[style*="width: 2"] {
    38    background-color: #d95c5c;
    39  }
    40  .ui.indicating.progress .bar[style*="width: 3"] {
    41    background-color: #d9a65c;
    42  }
    43  .ui.indicating.progress .bar[style*="width: 4"],
    44  .ui.indicating.progress .bar[style*="width: 5"] {
    45    background-color: #e6bb48;
    46  }
    47  .ui.indicating.progress .bar[style*="width: 6"] {
    48    background-color: #ddc928;
    49  }
    50  .ui.indicating.progress .bar[style*="width: 7"],
    51  .ui.indicating.progress .bar[style*="width: 8"] {
    52    background-color: #b4d95c;
    53  }
    54  .ui.indicating.progress .bar[style*="width: 9"],
    55  .ui.indicating.progress .bar[style*="width: 100"] {
    56    background-color: #66da81;
    57  }
    58  
    59  /* Indicating Label */
    60  .ui.indicating.progress[data-percent^="1"] .label,
    61  .ui.indicating.progress[data-percent^="2"] .label {
    62    color: #d95c5c;
    63  }
    64  .ui.indicating.progress[data-percent^="3"] .label {
    65    color: #d9a65c;
    66  }
    67  .ui.indicating.progress[data-percent^="4"] .label,
    68  .ui.indicating.progress[data-percent^="5"] .label {
    69    color: #e6bb48;
    70  }
    71  .ui.indicating.progress[data-percent^="6"] .label {
    72    color: #ddc928;
    73  }
    74  .ui.indicating.progress[data-percent^="7"] .label,
    75  .ui.indicating.progress[data-percent^="8"] .label {
    76    color: #b4d95c;
    77  }
    78  .ui.indicating.progress[data-percent^="9"] .label,
    79  .ui.indicating.progress[data-percent^="100"] .label {
    80    color: #66da81;
    81  }
    82  
    83  /* Single Digits */
    84  .ui.indicating.progress .bar[style^="width: 1%"],
    85  .ui.indicating.progress .bar[style^="width: 2%"],
    86  .ui.indicating.progress .bar[style^="width: 3%"],
    87  .ui.indicating.progress .bar[style^="width: 4%"],
    88  .ui.indicating.progress .bar[style^="width: 5%"],
    89  .ui.indicating.progress .bar[style^="width: 6%"],
    90  .ui.indicating.progress .bar[style^="width: 7%"],
    91  .ui.indicating.progress .bar[style^="width: 8%"],
    92  .ui.indicating.progress .bar[style^="width: 9%"] {
    93    background-color: #d95c5c;
    94  }
    95  .ui.indicating.progress[data-percent="1"] .label,
    96  .ui.indicating.progress[data-percent="2"] .label,
    97  .ui.indicating.progress[data-percent="3"] .label,
    98  .ui.indicating.progress[data-percent="4"] .label,
    99  .ui.indicating.progress[data-percent="5"] .label,
   100  .ui.indicating.progress[data-percent="6"] .label,
   101  .ui.indicating.progress[data-percent="7"] .label,
   102  .ui.indicating.progress[data-percent="8"] .label,
   103  .ui.indicating.progress[data-percent="9"] .label {
   104    color: #d95c5c;
   105  }
   106  
   107  /* Indicating Success */
   108  .ui.indicating.progress.success .label {
   109    color: #356e36;
   110  }
   111  
   112  
   113  /*******************************
   114              Content
   115  *******************************/
   116  
   117  
   118  /* Activity Bar */
   119  .ui.progress .bar {
   120    display: block;
   121    line-height: 1;
   122    position: relative;
   123    width: 0%;
   124    min-width: 2em;
   125    background: #888888;
   126    border-radius: 0.2857rem;
   127    -webkit-transition: width 0.3s ease, background-color 0.3s ease;
   128            transition: width 0.3s ease, background-color 0.3s ease;
   129  }
   130  
   131  /* Percent Complete */
   132  .ui.progress .bar > .progress {
   133    white-space: nowrap;
   134    position: absolute;
   135    width: auto;
   136    font-size: 0.9em;
   137    top: 50%;
   138    right: 0.5em;
   139    left: auto;
   140    bottom: auto;
   141    color: rgba(255, 255, 255, 0.8);
   142    text-shadow: none;
   143    margin-top: -0.5em;
   144    font-weight: bold;
   145    text-align: left;
   146  }
   147  
   148  /* Label */
   149  .ui.progress > .label {
   150    position: absolute;
   151    width: 100%;
   152    font-size: 1em;
   153    top: 100%;
   154    right: auto;
   155    left: 0%;
   156    bottom: auto;
   157    color: rgba(0, 0, 0, 0.8);
   158    font-weight: bold;
   159    text-shadow: none;
   160    margin-top: 0.2em;
   161    text-align: center;
   162    -webkit-transition: color 0.4s ease;
   163            transition: color 0.4s ease;
   164  }
   165  
   166  
   167  /*******************************
   168               States
   169  *******************************/
   170  
   171  
   172  /*--------------
   173       Success
   174  ---------------*/
   175  
   176  .ui.progress.success .bar {
   177    background-color: #5bbd72 !important;
   178  }
   179  .ui.progress.success .bar,
   180  .ui.progress.success .bar::after {
   181    -webkit-animation: none !important;
   182            animation: none !important;
   183  }
   184  .ui.progress.success > .label {
   185    color: #356e36;
   186  }
   187  
   188  /*--------------
   189       Warning
   190  ---------------*/
   191  
   192  .ui.progress.warning .bar {
   193    background-color: #f2c037 !important;
   194  }
   195  .ui.progress.warning .bar,
   196  .ui.progress.warning .bar::after {
   197    -webkit-animation: none !important;
   198            animation: none !important;
   199  }
   200  .ui.progress.warning > .label {
   201    color: #825c01;
   202  }
   203  
   204  /*--------------
   205       Error
   206  ---------------*/
   207  
   208  .ui.progress.error .bar {
   209    background-color: #d95c5c !important;
   210  }
   211  .ui.progress.error .bar,
   212  .ui.progress.error .bar::after {
   213    -webkit-animation: none !important;
   214            animation: none !important;
   215  }
   216  .ui.progress.error > .label {
   217    color: #912d2b;
   218  }
   219  
   220  /*--------------
   221       Active
   222  ---------------*/
   223  
   224  .ui.active.progress .bar {
   225    position: relative;
   226    min-width: 2em;
   227  }
   228  .ui.active.progress .bar::after {
   229    content: '';
   230    opacity: 0;
   231    position: absolute;
   232    top: 0px;
   233    left: 0px;
   234    right: 0px;
   235    bottom: 0px;
   236    background: #ffffff;
   237    border-radius: 0.2857rem;
   238    -webkit-animation: progress-active 2s ease infinite;
   239            animation: progress-active 2s ease infinite;
   240  }
   241  @-webkit-keyframes progress-active {
   242    0% {
   243      opacity: 0.3;
   244      width: 0;
   245    }
   246    100% {
   247      opacity: 0;
   248      width: 100%;
   249    }
   250  }
   251  @keyframes progress-active {
   252    0% {
   253      opacity: 0.3;
   254      width: 0;
   255    }
   256    100% {
   257      opacity: 0;
   258      width: 100%;
   259    }
   260  }
   261  
   262  /*--------------
   263      Disabled
   264  ---------------*/
   265  
   266  .ui.disabled.progress {
   267    opacity: 0.35;
   268  }
   269  .ui.disabled.progress .bar,
   270  .ui.disabled.progress .bar::after {
   271    -webkit-animation: none !important;
   272            animation: none !important;
   273  }
   274  
   275  
   276  /*******************************
   277             Variations
   278  *******************************/
   279  
   280  
   281  /*--------------
   282      Inverted
   283  ---------------*/
   284  
   285  .ui.inverted.progress {
   286    background: rgba(255, 255, 255, 0.05);
   287    border: none;
   288  }
   289  .ui.inverted.progress .bar {
   290    background: #888888;
   291  }
   292  .ui.inverted.progress .bar > .progress {
   293    color: #fafafa;
   294  }
   295  .ui.inverted.progress > .label {
   296    color: #ffffff;
   297  }
   298  .ui.inverted.progress.success > .label {
   299    color: #5bbd72;
   300  }
   301  .ui.inverted.progress.warning > .label {
   302    color: #f2c037;
   303  }
   304  .ui.inverted.progress.error > .label {
   305    color: #d95c5c;
   306  }
   307  
   308  /*--------------
   309      Attached
   310  ---------------*/
   311  
   312  
   313  /* bottom attached */
   314  .ui.progress.attached {
   315    background: transparent;
   316    position: relative;
   317    border: none;
   318    margin: 0em;
   319  }
   320  .ui.progress.attached,
   321  .ui.progress.attached .bar {
   322    display: block;
   323    height: 0.2rem;
   324    padding: 0px;
   325    overflow: hidden;
   326    border-radius: 0em 0em 0.2857rem 0.2857rem;
   327  }
   328  .ui.progress.attached .bar {
   329    border-radius: 0em;
   330  }
   331  
   332  /* top attached */
   333  .ui.progress.top.attached,
   334  .ui.progress.top.attached .bar {
   335    top: 0px;
   336    border-radius: 0.2857rem 0.2857rem 0em 0em;
   337  }
   338  .ui.progress.top.attached .bar {
   339    border-radius: 0em;
   340  }
   341  
   342  /* Coupling */
   343  .ui.segment > .ui.attached.progress,
   344  .ui.card > .ui.attached.progress {
   345    position: absolute;
   346    top: auto;
   347    left: 0;
   348    bottom: 100%;
   349    width: 100%;
   350  }
   351  .ui.segment > .ui.bottom.attached.progress,
   352  .ui.card > .ui.bottom.attached.progress {
   353    top: 100%;
   354    bottom: auto;
   355  }
   356  
   357  /*--------------
   358       Colors
   359  ---------------*/
   360  
   361  .ui.black.progress .bar {
   362    background-color: #1b1c1d;
   363  }
   364  .ui.blue.progress .bar {
   365    background-color: #006e93;
   366  }
   367  .ui.green.progress .bar {
   368    background-color: #5bbd72;
   369  }
   370  .ui.orange.progress .bar {
   371    background-color: #e07b53;
   372  }
   373  .ui.pink.progress .bar {
   374    background-color: #d9499a;
   375  }
   376  .ui.purple.progress .bar {
   377    background-color: #564f8a;
   378  }
   379  .ui.red.progress .bar {
   380    background-color: #d95c5c;
   381  }
   382  .ui.teal.progress .bar {
   383    background-color: #00b5ad;
   384  }
   385  .ui.yellow.progress .bar {
   386    background-color: #f2c61f;
   387  }
   388  .ui.black.inverted.progress .bar {
   389    background-color: #333333;
   390  }
   391  .ui.blue.inverted.progress .bar {
   392    background-color: #0097c9;
   393  }
   394  .ui.green.inverted.progress .bar {
   395    background-color: #2ecc40;
   396  }
   397  .ui.orange.inverted.progress .bar {
   398    background-color: #ff851b;
   399  }
   400  .ui.pink.inverted.progress .bar {
   401    background-color: #ff8edf;
   402  }
   403  .ui.purple.inverted.progress .bar {
   404    background-color: #cdc6ff;
   405  }
   406  .ui.red.inverted.progress .bar {
   407    background-color: #ff695e;
   408  }
   409  .ui.teal.inverted.progress .bar {
   410    background-color: #6dffff;
   411  }
   412  .ui.yellow.inverted.progress .bar {
   413    background-color: #ffe21f;
   414  }
   415  
   416  /*--------------
   417       Sizes
   418  ---------------*/
   419  
   420  .ui.tiny.progress {
   421    font-size: 0.85714286rem;
   422  }
   423  .ui.tiny.progress .bar {
   424    height: 0.5em;
   425  }
   426  .ui.small.progress {
   427    font-size: 0.92857143rem;
   428  }
   429  .ui.small.progress .bar {
   430    height: 1em;
   431  }
   432  .ui.progress {
   433    font-size: 1rem;
   434  }
   435  .ui.progress .bar {
   436    height: 1.75em;
   437  }
   438  .ui.large.progress {
   439    font-size: 1.14285714rem;
   440  }
   441  .ui.large.progress .bar {
   442    height: 2.5em;
   443  }
   444  .ui.big.progress {
   445    font-size: 1.28571429rem;
   446  }
   447  .ui.big.progress .bar {
   448    height: 3.5em;
   449  }
   450  
   451  
   452  /*******************************
   453              Progress
   454  *******************************/
   455  
   456  
   457  
   458  /*******************************
   459           Site Overrides
   460  *******************************/
   461