github.com/pbberlin/go-pwa@v0.0.0-20220328105622-7c26e0ca1ab8/app-bucket/css/progress-bar-2.css (about)

     1  /* 	progress bar
     2  	  https://fribly.com/2015/01/01/scalable-responsive-progress-bar/
     3  */
     4  
     5  .progress *:after, .progress *:before {
     6    box-sizing: border-box;
     7  }
     8  
     9  
    10  ol.progress {
    11  
    12    position: relative;
    13    width: 100%;
    14    width: calc(100% - 4rem);
    15  
    16    margin:  0 auto;
    17    padding: 0;
    18    padding: 0.4em 0;
    19  
    20    display:         flex;
    21    flex-direction:  row;
    22    flex-wrap:       nowrap;
    23    justify-content: center;         /* main  axis - horizontally */
    24    justify-content: space-between;
    25    align-items:     center;         /* cross axis - vertically */
    26    align-items:     baseline;
    27    align-items:     flex-start;     /* 'top' */
    28    align-items:     stretch;
    29  
    30    color: var(--clr-pri);
    31  
    32  
    33  
    34    /* border: inherit; */
    35  
    36  }
    37  
    38  .progress > li {
    39  
    40    z-index: 13;
    41    position: relative;
    42  
    43    margin: 0;
    44    padding: 0.8 0.2em;
    45  
    46    flex: 1;
    47    flex-shrink: 1;
    48    flex-grow:   1;
    49    flex-basis:  auto; /* based on content width */
    50    flex-basis:  0%;   /* equal, wider if necessary  */
    51  
    52    list-style:  none;
    53    font-size:   0.8rem;
    54    /* line-height: 3.05em; */ /* => progress-bar-label */
    55    text-align:  left;
    56  
    57    background-color:   rgba(var(--clr-pri), 0.23);
    58  
    59    /* background-color: linear-gradient(direction, color-stop1, color-stop2, ...); */
    60    /* alpha value is ignored */
    61    background-image: linear-gradient(to right,  var(--clr-sec),      var(--clr-sec),      var(--clr-sec),      var(--clr-zew4-md));
    62    background-image: linear-gradient(to right,  var(--clr-sec-drk1), var(--clr-sec-drk1), var(--clr-sec-drk1), var(--clr-zew4-md));
    63    background-image: linear-gradient(to right,  var(--clr-sec-lgt2), var(--clr-sec-lgt2), var(--clr-sec) );
    64    
    65  
    66    /* border:  2px solid  rgba(255, 165, 0, 0.43); */
    67    white-space: nowrap;
    68    /* clip-path: polygon(0 0, 87% 0, 96% 50%, 87% 100%, 0% 100%); */
    69    clip-path: polygon(0 0, calc(100% - 1em) 0, calc(100% - 0.5em) 50%, calc(100% - 1em) 100%, 0% 100%);
    70    /* transform: rotate(180deg); */
    71  
    72    
    73  
    74  }
    75  
    76  .progress-bar-label {
    77  
    78    z-index: 14;
    79    position: relative;
    80    display:  inline-block;
    81    left: 0.5em;
    82    margin-right: 2em;
    83  
    84    line-height: 95%;
    85    line-height: 120%;
    86  
    87    vertical-align: top;
    88  }
    89  
    90  .progress > li:before,
    91  .progress > li:after {
    92    line-height: 1.95em;
    93    text-align: center;
    94    font-size:  1.0rem;
    95  }
    96  
    97  
    98  /* round bullet with inscribed page number */
    99  .progress > li:before {
   100  
   101    z-index: 12;
   102    position: relative;
   103    display: inline-block;
   104    left: 0.2em;
   105  
   106    width:  2em;
   107    height: 2em;
   108  
   109    margin: 0 auto;
   110    margin-left: 0;
   111    margin-bottom: 0.25em;
   112    border-radius: 100%;
   113  
   114    background-color: var(--clr-sec-drk1);
   115  
   116    content: attr(data-step);
   117  
   118  }
   119  
   120  /* stripe between bullets */
   121  .progress > li:after {
   122  }
   123  
   124  /* suppress last stripe */
   125  .progress > li:last-child:after {
   126    /* display: none; */
   127  }
   128  
   129  /* no arrow on last child */
   130  .progress > li:last-child {
   131    /* flex-grow:   0.1; */
   132    clip-path: polygon(0 0, 87% 0, 87% 50%, 87% 100%, 0% 100%);
   133    clip-path: polygon(0 0, calc(100% - 0.1em) 0, calc(100% - 0.05em) 50%, calc(100% - 0.1em) 100%, 0% 100%);
   134  }
   135  
   136  
   137  /* completed pages */
   138  .progress > li.is-complete {
   139    color: #989898;
   140  }
   141  .progress > li.is-complete:before,
   142  .progress > li.is-complete:after
   143  {
   144    /* color: #FFF; */
   145    /* background: #989898; */
   146    opacity: 0.6;
   147  }
   148  
   149  
   150  /* active page */
   151  .progress > li.is-active {
   152    color: #0069B4;
   153    color: #555;
   154  }
   155  .progress > li.is-active:before {
   156    color: #FFF;
   157    background: #0069B4;
   158    background: #888;
   159  }
   160  
   161  /* Needed for IE8 */
   162  .progress__last:after {
   163    display: none !important;
   164  }
   165  
   166