git.roojs.org Git - roojs1/blob - old-css-bootstrap/nav-progress-bar.css

   1
   2 .roo-navigation-bar-group,
   3 .roo-navigation-top-bar,
   4 .roo-navigation-bullets-bar,
   5 .roo-navigation-bottom-bar {
   6     width: 100%;
   7     float: left;
   8 }
   9
  10 .roo-navigation-bar-text > span {
  11     text-transform: uppercase;
  12     width: 90%;
  13     display: inline-block;
  14 }
  15
  16
  17 .roo-navigation-bar-text {
  18     float: left;
  19     line-height: 24px;
  20     height: 100%;
  21     min-height: 24px;
  22     text-align: center;
  23     position: relative;
  24 }
  25
  26 .roo-navigation-bar {
  27     counter-reset: step;
  28     text-align: center;
  29     padding: 0px;
  30     overflow: hidden;
  31     margin: 0px;
  32 }
  33
  34 .roo-navigation-bar .roo-navigation-bar-item {
  35     list-style-type: none;
  36     color: rgb(0,0,0);
  37     text-transform: uppercase;
  38     font-size: 14px;
  39     float: left;
  40     position: relative;
  41 }
  42
  43 .roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon:before {
  44     counter-increment: step;
  45     width: 25px;
  46     line-height: 25px;
  47     display: block;
  48     color: white;
  49     background: #337ab7;
  50     border-radius: 5px;
  51     font-weight: bold;
  52     cursor: pointer;
  53 }
  54
  55 .roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon.step-number:before {
  56     content: counter(step);
  57 }
  58
  59 .roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon:after {
  60     content: '';
  61     width: 100%;
  62     height: 5px;
  63     background: #337ab7;
  64     position: absolute;
  65     top: 10px;
  66     z-index: -1;
  67 }
  68
  69 .roo-navigation-bar .roo-navigation-bar-item:last-child > .roo-navigation-bar-item-icon:after {
  70     content: none;
  71 }
  72
  73 .roo-navigation-bar .roo-navigation-bar-item.active .roo-navigation-bar-item-icon:before {
  74     background: #aa0000;
  75     color: white;
  76 }
  77
  78 .roo-navigation-bar .roo-navigation-bar-item.disabled .roo-navigation-bar-item-icon:before {
  79     background: #999999;
  80     color: white;
  81     cursor: not-allowed;
  82 }
  83
  84 .roo-navigation-bar .roo-navigation-bar-item.active .roo-navigation-bar-item-icon:before {
  85     cursor: default;
  86 }
  87
  88 .roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon {
  89     font: normal normal normal 14px/1 FontAwesome;
  90     display: inline-block;
  91
  92 }
  93
  94 @media (min-width: 768px) {
  95     .roo-navigation-bar .roo-navigation-bar-item.xs-icon > .roo-navigation-bar-item-icon:before {
  96         content: counter(step);
  97     }
  98
  99 }
 100
 101 @media (min-width: 992px) {
 102     .roo-navigation-bar .roo-navigation-bar-item.xs-icon > .roo-navigation-bar-item-icon:before,
 103     .roo-navigation-bar .roo-navigation-bar-item.sm-icon > .roo-navigation-bar-item-icon:before {
 104         content: counter(step);
 105     }
 106 }
 107
 108 @media (min-width: 1200px) {
 109     .roo-navigation-bar .roo-navigation-bar-item.xs-icon > .roo-navigation-bar-item-icon:before,
 110     .roo-navigation-bar .roo-navigation-bar-item.sm-icon > .roo-navigation-bar-item-icon:before,
 111     .roo-navigation-bar .roo-navigation-bar-item.md-icon > .roo-navigation-bar-item-icon:before {
 112         content: counter(step);
 113     }
 114 }