Как увеличить размер квадратных / круглых блоков в прогресс-баре?Увеличение ширины, высота не работает

Question

Я попытался обновить радиус границы, чтобы сделать квадрат из круга, но размер очень маленький.Я хочу увеличить размер каждого квадрата.Изменения ширины и высоты не имеют никакого значения.

Если кто-то может помочь сделать его пригодным для использования или предоставить аналогичный код в больших прямоугольниках.Дайте мне знать, если потребуется дополнительная информация.

  @-webkit-keyframes myanimation {
          from {
            left: 0%;
          }
          to {
            left: 100%;
          }
        }
        h1 {
          text-align: center;
          font-family: 'PT Sans Caption', sans-serif;
          font-weight: 400;
          font-size: 20px;
          padding: 20px 0;
          color: #777;
        }

        .checkout-wrap {
          color: #444;
          font-family: 'PT Sans Caption', sans-serif;
          margin: 40px auto;
          max-width: 1200px;
          position: relative;
        }

        ul.checkout-bar li {
          color: #ccc;
          display: block;
          font-size: 16px;
          font-weight: 600;
          padding: 14px 20px 14px 80px;
          position: relative;
        }
        ul.checkout-bar li:before {
          -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
          box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
          background: #ddd;
          border: 2px solid #FFF;
          border-radius: 20%;
          color: #fff;
          font-size: 16px;
          font-weight: 700;
          left: 20px;
          line-height: 37px;
          height: 35px;
          position: absolute;
          text-align: center;
          text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
          top: 4px;
          width: 35px;
          z-index: 999;
        }
        ul.checkout-bar li.active {
          color: #8bc53f;
          font-weight: bold;
        }
        ul.checkout-bar li.active:before {
          background: #8bc53f;
          z-index: 99999;
        }
        ul.checkout-bar li.visited {
          background: #ECECEC;
          color: #57aed1;
          z-index: 99999;
        }
        ul.checkout-bar li.visited:before {
          background: #57aed1;
          z-index: 99999;
        }
        ul.checkout-bar li:nth-child(1):before {
          content: "1";
        }
        ul.checkout-bar li:nth-child(2):before {
          content: "2";
        }
        ul.checkout-bar li:nth-child(3):before {
          content: "3";
        }
        ul.checkout-bar li:nth-child(4):before {
          content: "4";
        }
        ul.checkout-bar li:nth-child(5):before {
          content: "5";
        }
        ul.checkout-bar li:nth-child(6):before {
          content: "6";
        }
        ul.checkout-bar a {
          color: #57aed1;
          font-size: 16px;
          font-weight: 600;
          text-decoration: none;
        }

        @media all and (min-width: 800px) {
          .checkout-bar li.active:after {
            -webkit-animation: myanimation 3s 0;
            background-size: 35px 35px;
            background-color: #8bc53f;
            background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
            background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
            -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
            box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
            content: "";
            height: 15px;
            width: 100%;
            left: 50%;
            position: absolute;
            top: -50px;
            z-index: 0;
          }

          .checkout-wrap {
            margin: 80px auto;
          }

          ul.checkout-bar {
            -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
            box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
            background-size: 35px 35px;
            background-color: #EcEcEc;
            background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
            background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
            border-radius: 15px;
            height: 15px;
            margin: 0 auto;
            padding: 0;
            position: absolute;
            width: 100%;
          }
          ul.checkout-bar:before {
            background-size: 35px 35px;
            background-color: #57aed1;
            background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
            background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
            -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
            box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
            border-radius: 15px;
            content: " ";
            height: 15px;
            left: 0;
            position: absolute;
            width: 10%;
          }
          ul.checkout-bar li {
            display: inline-block;
            margin: 50px 0 0;
            padding: 0;
            text-align: center;
            width: 19%;
          }
          ul.checkout-bar li:before {
            height: 45px;
            left: 40%;
            line-height: 45px;
            position: absolute;
            top: -65px;
            width: 45px;
            z-index: 99;
          }
          ul.checkout-bar li.visited {
            background: none;
          }
          ul.checkout-bar li.visited:after {
            background-size: 35px 35px;
            background-color: #57aed1;
            background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
            background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
            -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
            box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
            content: "";
            height: 15px;
            left: 50%;
            position: absolute;
            top: -50px;
            width: 100%;
            z-index: 99;
          }
        }

 <head>
            <meta charset="UTF-8"/>
            <title>Responsive Checkout Progress Bar</title>
  
          </head>

          <body>

            <link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'/>

        <h1>Responsive Checkout Progress Bar</h1>

        <div class="checkout-wrap">
          <ul class="checkout-bar">

            <li class="visited first"><a href="#">Possible candidate</a></li>  
            <li class="previous visited">Forwarded to manager</li>
            <li class="active">Phone screen</li>
            <li class="next">Interview</li>
            <li class="">Complete</li>
            <li class="">Cancelled</li>
          </ul>
        </div>    
          </body>

Answer 1

Давайте посмотрим на правила, вы найдете следующее правило:

ul.checkout-bar li:before {
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    background: #ddd;
    border: 2px solid #FFF;
    border-radius: 20%;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    left: 20px;
    line-height: 37px;
    height: 35px;
    position: absolute;
    text-align: center;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
    top: 4px;
    width: 35px;
    z-index: 999;
}

Если вы измените ширину и высоту предыдущего правила, ничего не произойдет, если оно отображается в браузере, потому что у вас естьдругое правило для того же селектора внутри медиазапроса, которое должно применяться на экранах шириной более 800 пикселей:

@media all and (min-width: 800px) {
    ...
    ul.checkout-bar li:before { 
        height: 45px; 
        left: 40%; 
        line-height: 45px; 
        position: absolute; 
        top: -65px;   
        width: 45px; 
        z-index: 99; 
    }
    ...
}

Последнее правило переопределяет первое правило, потому что оно находится внутри медиазапроса, и вывероятно, отображение файла в браузере, размер которого превышает 800 пикселей.Если вы измените высоту и ширину второго правила, вы увидите изменения.Если файл отображается на устройстве с шириной менее 800 пикселей, то первое правило, которое вступит в силу, - это

. Я предлагаю вам узнать о медиазапросах и узнать оиспользуя Developer Tools для отладки кода.

Answer 2

На маленьком экране вам нужно настроить свойства вашего @media all and (min-width: 800px) { ... ul.checkout-bar li:before ... } класса, а на большом экране вам нужно настроить ul.checkout-bar li:before,

свойств, которые вам нужно настроить: : height, width, line-height, top

   @-webkit-keyframes myanimation {
      from {
         left: 0%;
      }
      to {
         left: 100%;
      }
   }

   h1 {
      text-align: center;
      font-family: 'PT Sans Caption', sans-serif;
      font-weight: 400;
      font-size: 20px;
      padding: 20px 0;
      color: #777;
   }

   .checkout-wrap {
      color: #444;
      font-family: 'PT Sans Caption', sans-serif;
      margin: 40px auto;
      max-width: 1200px;
      position: relative;
   }

   ul.checkout-bar li {
      color: #ccc;
      display: block;
      font-size: 16px;
      font-weight: 600;
      padding: 14px 20px 14px 80px;
      position: relative;
      margin-top: 26px;
   }

   ul.checkout-bar li:before {
            -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
      box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
      background: #ddd;
      border: 2px solid #FFF;
      border-radius: 20%;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      left: 0px;
      line-height: 70px;
      height: 70px;
      position: absolute;
      text-align: center;
      text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
      top: -80px;
      width: 70px;
      z-index: 999;
   }

   ul.checkout-bar li.active {
      color: #8bc53f;
      font-weight: bold;
   }

   ul.checkout-bar li.active:before {
      background: #8bc53f;
      z-index: 99999;
   }

   ul.checkout-bar li.visited {
      background: #ECECEC;
      color: #57aed1;
      z-index: 99999;
   }

   ul.checkout-bar li.visited:before {
      background: #57aed1;
      z-index: 99999;
   }

   ul.checkout-bar li:nth-child(1):before {
      content: "1";
   }

   ul.checkout-bar li:nth-child(2):before {
      content: "2";
   }

   ul.checkout-bar li:nth-child(3):before {
      content: "3";
   }

   ul.checkout-bar li:nth-child(4):before {
      content: "4";
   }

   ul.checkout-bar li:nth-child(5):before {
      content: "5";
   }

   ul.checkout-bar li:nth-child(6):before {
      content: "6";
   }

   ul.checkout-bar a {
      color: #57aed1;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
   }

   @media all and (min-width: 800px) {
      .checkout-bar li.active:after {
         -webkit-animation: myanimation 3s 0;
         background-size: 35px 35px;
         background-color: #8bc53f;
         background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
         background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
         -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
         box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
         content: "";
         height: 15px;
         width: 100%;
         left: 50%;
         position: absolute;
         top: -50px;
         z-index: 0;
      }
      .checkout-wrap {
         margin: 80px auto;
      }
      ul.checkout-bar {
         -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
         box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
         background-size: 35px 35px;
         background-color: #EcEcEc;
         background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
         background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
         border-radius: 15px;
         height: 15px;
         margin: 0 auto;
         padding: 0;
         position: absolute;
         width: 100%;
      }
      ul.checkout-bar:before {
         background-size: 35px 35px;
         background-color: #57aed1;
         background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
         background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
         -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
         box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
         border-radius: 15px;
         content: " ";
         height: 15px;
         left: 0;
         position: absolute;
         width: 10%;
      }
      ul.checkout-bar li {
         display: inline-block;
         margin: 50px 0 0;
         padding: 0;
         text-align: center;
         width: 19%;
      }
      ul.checkout-bar li:before {
         height: 70px;
          left: 40%;
          line-height: 70px;
          position: absolute;
          top: -80px;
          width: 70px;
          z-index: 99;
      }
      ul.checkout-bar li.visited {
         background: none;
      }
      ul.checkout-bar li.visited:after {
         background-size: 35px 35px;
         background-color: #57aed1;
         background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
         background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
         -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
         box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
         content: "";
         height: 15px;
         left: 50%;
         position: absolute;
         top: -50px;
         width: 100%;
         z-index: 99;
      }
   }

   <link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'/>
   <h1>Responsive Checkout Progress Bar</h1>
   <div class="checkout-wrap">
      <ul class="checkout-bar">
         <li class="visited first"><a href="#">Possible candidate</a></li>
         <li class="previous visited">Forwarded to manager</li>
         <li class="active">Phone screen</li>
         <li class="next">Interview</li>
         <li class="">Complete</li>
         <li class="">Cancelled</li>
      </ul>
   </div>