_progress-bars.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. /*****************
  2. * Progress bars *
  3. *****************/
  4. progressbar {
  5. // sizing
  6. &.horizontal {
  7. trough,
  8. progress { min-height: 6px; }
  9. }
  10. &.vertical {
  11. trough,
  12. progress { min-width: 6px; }
  13. }
  14. &.horizontal progress { margin: 0; } // the progress node is positioned after the trough border
  15. &.vertical progress { margin: 0; } // this moves it over it.
  16. // FIXME: insensitive state missing and some other state should be set probably
  17. font-size: smaller;
  18. color: transparentize($fg_color, 0.6);
  19. &:backdrop {
  20. box-shadow: none;
  21. transition: $backdrop_transition;
  22. }
  23. trough { @extend %scale_trough; }
  24. &:backdrop trough { @extend %scale_trough:backdrop; } // looks like states are not passed to the trough component here
  25. progress {
  26. @extend %scale_highlight;
  27. }
  28. &:backdrop progress { @extend %scale_highlight:backdrop; } // states not passed here as well
  29. &.osd { // progressbar.osd used for epiphany page loading progress
  30. min-width: 3px;
  31. min-height: 3px;
  32. background-color: transparent;
  33. trough {
  34. border-style: none;
  35. border-radius: 0;
  36. background-color: transparent;
  37. box-shadow: none;
  38. }
  39. progress {
  40. border-style: none;
  41. border-radius: 0;
  42. }
  43. }
  44. }