Трушков Валерий

index.css

@@ -0,0 +1,179 @@
+input[name='style-switcher']:checked ~ .products .products-item
+{
+    display: block;
+    width: 95%;
+}
+
+input[name='style-switcher']:checked ~ .products .products-item-image,
+input[name='style-switcher']:checked ~ .products .products-item-info,
+input[name='style-switcher']:checked ~ .products .products-item-description,
+.products-item
+{
+    display: inline-block;
+}
+
+input[name='style-switcher']:checked ~ .products .title,
+input[name='style-switcher']:checked ~ .products .products-item-description,
+input[name='style-switcher']:checked ~ .products .products-item-info
+{
+    top: 6%;
+    position: absolute;
+    width: 30%;
+}
+
+input[name='style-switcher']:checked ~ .products .products-item-image
+{
+    width: 20%;
+}
+
+input[name='style-switcher']:checked ~ .products .title
+{
+    left: 22.5%;
+}
+
+input[name='style-switcher']:checked ~ .products .products-item-info
+{
+    left: 22.5%;
+    top: 20%;
+}
+
+input[name='style-switcher']:checked ~ .products .products-item-description
+{
+    left: 55%;
+}
+
+.m-y-1
+{
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.products
+{
+    font-size: 0;
+}
+
+.products-item
+{
+    font-size: 16px;
+    margin: 1%;
+    width: 28.5%;
+    border: 1px solid transparent;
+    padding: 1%;
+    position: relative;
+}
+
+.products-item:hover
+{
+    border-color: #000;
+}
+
+.products-item-image
+{
+    width: 100%;
+    height: auto;
+}
+
+.products-item .title
+{
+    font-size: 21px;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.products-item-info .categories
+{
+    padding: 0;
+    color: #555;
+}
+
+.products-item-info .categories li
+{
+    list-style: none;
+    display: inline-block;
+}
+
+.products-item-info .categories li + li:before
+{
+    content: '-';
+    margin-right: 3px;
+}
+
+.products-item-info .price
+{
+    clear: both;
+}
+
+.products-item-info .price .current-price
+{
+    color: #d60004;
+    font-size: 21px;
+}
+
+.products-item-info .price .old-price
+{
+    color: #555;
+    text-decoration: line-through;
+    margin-left: 5px;
+}
+
+.rank
+{
+    float: left;
+    display: block;
+    direction: rtl;
+}
+
+.rank input
+{
+    display: none;
+}
+
+.rank label
+{
+    color: #ddd;
+}
+
+.rank label:before
+{
+    content: '★';
+    float: right;
+    overflow: hidden;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.rank input:checked ~ label
+{
+    color: #ff8f1f;
+}
+
+.rank label:hover,
+.rank label:hover ~ label
+{
+    color: #ffdcbd;
+}
+
+.rank input:checked + label:hover,
+.rank input:checked + label:hover ~ label,
+.rank input:checked ~ label:hover,
+.rank input:checked ~ label:hover ~ label,
+.rank label:hover ~ input:checked ~ label
+{
+    color: #ffc08a;
+}
+
+a:hover
+{
+    color: #f00;
+}
+
+@media only screen and (min-width: 768px)
+{
+    .products-item
+    {
+        width: 20.5%;
+    }
+}