git.roojs.org Git - roojs1/blob - 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 }
  32
  33 .roo-navigation-bar .roo-navigation-bar-item {
  34     list-style-type: none;
  35     color: rgb(0,0,0);
  36     text-transform: uppercase;
  37     font-size: 14px;
  38     float: left;
  39     position: relative;
  40 }
  41
  42 .roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon:before {
  43     counter-increment: step;
  44     width: 25px;
  45     line-height: 25px;
  46     display: block;
  47     color: white;
  48     background: #337ab7;
  49     border-radius: 5px;
  50     font-weight: bold;
  51     cursor: pointer;
  52 }
  53
  54 .roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon.step-number:before {
  55     content: counter(step);
  56 }
  57
  58 .roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon:after {
  59     content: '';
  60     width: 100%;
  61     height: 5px;
  62     background: #337ab7;
  63     position: absolute;
  64     top: 10px;
  65     z-index: -1;
  66 }
  67
  68 .roo-navigation-bar .roo-navigation-bar-item:last-child > .roo-navigation-bar-item-icon:after {
  69     content: none;
  70 }
  71
  72 .roo-navigation-bar .roo-navigation-bar-item.disabled .roo-navigation-bar-item-icon:before {
  73     background: #999999;
  74     color: white;
  75     cursor: not-allowed;
  76 }
  77
  78 .roo-navigation-bar .roo-navigation-bar-item.active .roo-navigation-bar-item-icon:before {
  79     cursor: default;
  80 }
  81
  82 .roo-navigation-bar .roo-navigation-bar-item .roo-navigation-bar-item-icon {
  83     font: normal normal normal 14px/1 FontAwesome;
  84     display: inline-block;
  85
  86 }
  87
  88 @media (min-width: 768px) {
  89     .roo-navigation-bar .roo-navigation-bar-item.xs-icon > .roo-navigation-bar-item-icon:before {
  90         content: counter(step);
  91     }
  92
  93 }
  94
  95 @media (min-width: 992px) {
  96     .roo-navigation-bar .roo-navigation-bar-item.xs-icon > .roo-navigation-bar-item-icon:before,
  97     .roo-navigation-bar .roo-navigation-bar-item.sm-icon > .roo-navigation-bar-item-icon:before {
  98         content: counter(step);
  99     }
 100 }
 101
 102 @media (min-width: 1200px) {
 103     .roo-navigation-bar .roo-navigation-bar-item.xs-icon > .roo-navigation-bar-item-icon:before,
 104     .roo-navigation-bar .roo-navigation-bar-item.sm-icon > .roo-navigation-bar-item-icon:before,
 105     .roo-navigation-bar .roo-navigation-bar-item.md-icon > .roo-navigation-bar-item-icon:before {
 106         content: counter(step);
 107     }
 108 }