×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: CSS
Posted by: Wantoi OestKnut
Added: Aug 20, 2014 12:42 PM
Views: 76
Styled Prestashop order step process (5-step). Full-width responsive
  1.  
  2. ul#order_step{
  3.      background-color:white
  4. }
  5.  
  6. ul.step{
  7.      list-style-type:none;
  8.      margin-bottom:30px;
  9.      width:100%;
  10.      float:left
  11. }
  12.  
  13. ul.step li{
  14.      float:left;
  15.      height:52px;
  16.      width:19%;
  17.      margin-right:1%;
  18.      text-align:center;
  19.      text-transform:uppercase;
  20.      line-height:52px;
  21.      text-align:center;
  22.      border-bottom:3px solid #ccc;
  23.      border-top:3px solid #ccc
  24. }
  25.  
  26. ul.step li#step_end{
  27.      background-image:none;
  28.      margin:0;
  29.      width:20%
  30. }
  31.  
  32. ul.step li span{
  33.      color:#666
  34. }
  35.  
  36. ul.step li.step_current span{}
  37.  
  38. ul.step li a{}
  39.  
  40. ul.step li a:hover{}
  41.  
  42. ul.step li a,ul.step li.step_current span,ul.step li.step_current_end span{}
  43.  
  44. ul.step li.step_current{
  45.      font-weight:bold;
  46.      border-bottom:3px solid #3EC2DF;
  47.      border-top:3px solid #3EC2DF
  48. }
  49.  
  50. ul.step li.step_current_end{
  51.      background-color:#f47b7b;
  52.      border-bottom:3px solid #f47b7b;
  53.      border-top:3px solid #f47b7b
  54. }
  55.  
  56. ul.step li.step_current_end span{
  57.      color:#fff
  58. }
  59.  
  60. ul.step li.step_todo span{}
  61.  
  62. ul.step li.step_done{
  63.      border-top:3px solid #3EC2DF;
  64.      border-bottom:3px solid #3EC2DF
  65. }