You are here

Home » API reference » Length Indicator 8

length-indicator.css in Length Indicator 8 

.length-indicator__indicator {
  background: #ddd;
  width: 100%;
  height: 10px;
  opacity: 0.2;
}

.length-indicator__indicator--bad {
  background: red;
}
.length-indicator__indicator--ok {
  background: orange;
}
.length-indicator__indicator--good {
  background: green;
}

.length-indicator {
  display: flex;
  position: relative;
}

.length-indicator__indicator.is-active {
  opacity: 1;
}

.length-indicator__cursor {
  position: absolute;
  left: 0;
  top: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid black;
  margin-left: -4px;
  margin-right: -4px;
}

File

css/length-indicator.css
View source 
  1. .length-indicator__indicator {

  2.   background: #ddd;

  3.   width: 100%;

  4.   height: 10px;

  5.   opacity: 0.2;

  6. }

  7. 

  8. .length-indicator__indicator--bad {

  9.   background: red;

  10. }

  11. .length-indicator__indicator--ok {

  12.   background: orange;

  13. }

  14. .length-indicator__indicator--good {

  15.   background: green;

  16. }

  17. 

  18. .length-indicator {

  19.   display: flex;

  20.   position: relative;

  21. }

  22. 

  23. .length-indicator__indicator.is-active {

  24.   opacity: 1;

  25. }

  26. 

  27. .length-indicator__cursor {

  28.   position: absolute;

  29.   left: 0;

  30.   top: 10px;

  31.   width: 0;

  32.   height: 0;

  33.   border-left: 5px solid transparent;

  34.   border-right: 5px solid transparent;

  35.   border-bottom: 8px solid black;

  36.   margin-left: -4px;

  37.   margin-right: -4px;

  38. }