Project

.prettierrc

@@ -1,11 +1,11 @@
 {
   "printWidth": 80,
-  "tabWidth": 2,
+  "tabWidth": 4,
   "useTabs": false,
   "semi": true,
   "singleQuote": true,
   "quoteProps": "as-needed",
-  "trailingComma": "all",
+  "trailingComma": "es5",
   "bracketSpacing": true,
   "endOfLine": "auto"
 }

03-lection1/01-button/button.css

@@ -1,77 +1,83 @@
 /* Стилизация кнопки */
 
-.button
-{
-    padding: 0;
-    box-sizing: border-box;
-    box-shadow: none;
-    outline: none;
-    border: none;
-    background: none;
-    width: 189px;
-    height: 48px;
-    cursor: pointer;
-    border-radius: 8px;
-    transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
-    font-family: Roboto;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 19px;
-    text-align: center;
-    text-transform: none;
-    text-indent: 0px;
-    text-shadow: none;
-
+.button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex: 0 1 auto;
+  flex-basis: 189px;
+  padding: 0 15px;
+  /*box-sizing: border-box;*/
+  box-shadow: none;
+  outline: none;
+  border: none;
+  background: none;
+  max-width: 189px;
+  height: 48px;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+  text-align: right;
+  text-transform: none;
+  text-indent: 0px;
+  text-shadow: none;
 }
-.button_primary
-{
-    color: var(--white);
-    background-color: var(--primary);
+.button_primary {
+  color: var(--white);
+  background-color: var(--primary);
 }
-.button_primary:hover 
-{
-    background-color: var(--primary-darken);
+.button_primary:hover {
+  background-color: var(--primary-darken);
 }
 
-.button_primary:disabled
-{
-    opacity: 0.5;
-    cursor: default;
-    pointer-events: none;
+.button_primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
 }
 
-.button_secondary
-{
-    color: var(--white);
-    background-color: var(--secondary);
+.button_secondary {
+  color: var(--white);
+  background-color: var(--secondary);
 }
-.button_secondary:hover 
-{
-    background-color: var(--secondary-darken);
+.button_secondary:hover {
+  background-color: var(--secondary-darken);
 }
 
-.button_secondary:disabled 
-{
-    opacity: 0.5;
-    cursor: default;
-    pointer-events: none;
+.button_secondary:disabled {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
 }
 
-.button_alternate
-{
-    color: var(--black);
-    border: 1px solid var(--grey-3);
-
+.button_alternate {
+  color: var(--black);
+  border: 1px solid var(--grey-3);
 }
-.button_alternate:hover 
-{
-    border: 1px solid var(--black);
+
+.button_alternate:hover {
+  border: 1px solid var(--black);
 }
 
-.button_alternate:disabled 
+.button_alternate:disabled {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
+}
+
+.buttons 
 {
-    opacity: 0.5;
-    cursor: default;
-    pointer-events: none;
-}
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: repeat(3 60px);
+  justify-content: center;
+  align-content: center;
+  gap: 10px 5px;
+  box-sizing: border-box;
+  margin: 0px;
+}

03-lection1/02-accordion/accordion.css

@@ -1,20 +1,24 @@
 /* Стилизация аккордеона */
-
-.accordion::-webkit-details-marker {
-    display: none;
+.accordion{
+    display:flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
 }
-
-.accordion {
-    display: block;
+.accordion__summary {
+    display:flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+
 }
 
-
  .accordion__item {
+        display:block;
         border: 1px solid var(--grey-3);
         border-radius: 8px;
         box-sizing: border-box;
         padding: 32px;
-        width: 730px;
+        max-width: 730px;
 
         font-family: Inter;
         font-style: normal;
@@ -27,4 +31,15 @@
 
     .accordion__item:last-child {
         margin-bottom: 0;
+    }
+
+
+    .accordion__item[open] > .accordion__summary > .accordion__icon {
+        transform: rotate(-180deg);
+    }
+    .accordion__icon {
+        fill: none;
+        width: 20px;
+        height: 10px;
+        color: var(--black);
     }

03-lection1/02-accordion/index.html

@@ -7,23 +7,30 @@
         <link rel="stylesheet" href="./accordion.css">
     </head>
     <body>
-        <details class="accordion__item"  open>
-            <summary class=accordion>
-                Accordion item 1
-            </summary>
-            <p>
-                1. Обратите внимание, что `summary` по-умолчанию имеет `display: inline`. Поменяйте, если это необходимо.
-
-                2. За стрелочку в `summary` отвечает псевдоэлемент `::-webkit-details-marker`. Так как пока что не изучали, как прибивать элементы к краям контейнера, то скрываем нативную так, а свою сделаем позже:
-            </p>
-        </details>
-        <details class="accordion__item">
-            <summary class=accordion>
-                Accordion item 2
-            </summary>
-            <p>
-                В директории компонента лежат стили, картинки, которые использует только он, возможно, что-то еще, специфичное именно для него.
-            </p>
-        </details>
+        <div class="accordion">
+            <details class="accordion__item"  open>
+                <summary class="accordion__summary">
+                    Accordion item 1
+                    <svg class="accordion__icon" >
+                        <use xlink:href="../../assets/images/sprite.svg#acordion__"></use>
+                    </svg>
+                </summary>
+
+                <p>
+                    Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
+                </p>
+            </details>
+            <details class="accordion__item">
+                <summary class="accordion__summary">
+                    Accordion item 2
+                    <svg class="accordion__icon" >
+                        <use xlink:href="../../assets/images/sprite.svg#acordion__"></use>
+                    </svg>
+                </summary>
+                <p>
+                    Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
+                </p>
+            </details>
+        </div>
     </body>
 </html>

04-lection2/01-histogram/histogram.css

@@ -37,6 +37,8 @@
     width: 100%;
     overflow:hidden;
     align-items: flex-end;
+    animation: ani 0.6s ease-out;
+    transform-origin:bottom;
 }
 .histogram__column {
     flex: 1 1 auto;
@@ -47,4 +49,19 @@
 }
 .histogram__column:first-child {
    margin: 0;
+}
+
+@keyframes ani {
+    0% {
+        transform: scaleY(0);
+
+    }
+    50% {
+        transform: scaleY(0);
+
+    }
+    100% {
+        transform: scaleY(1);
+
+    }
 }

04-lection2/02-skeleton/skeleton.css

@@ -5,6 +5,8 @@
     margin:0px;
     border: 1px solid var(--grey-3);
     border-radius: 8px;
+    width: 100%;
+    overflow: hidden;
 }
 .skeleton__column {
     display: flex; 
@@ -31,26 +33,52 @@
     height:20px;
     margin:5px;
     background: linear-gradient(to right, var(--grey-2) 0%, var(--grey-5) 33.33%, var(--grey-6)52.08%, var(--grey-7) 73.96%, var(--grey-2) 100% );
+    background-size: 200%;
+    animation-name: go;
+    animation-iteration-count: infinite;
+    animation-duration: 1.5s;
 }
+
 .skeleton__rectangle-mid {
     flex: 0 1 20px;
     max-width:calc(100% * 0.5);
     height:20px;
     margin:5px;
     background: linear-gradient(to right, var(--grey-2) 0%, var(--grey-5) 33.33%, var(--grey-6)52.08%, var(--grey-7) 73.96%, var(--grey-2) 100% );
+    background-size: 200%;
+    animation-name: go;
+    animation-iteration-count: infinite;
+    animation-duration: 1.5s;
 }
 .skeleton__rectangle-big {
     flex: 0 1 20px;
     max-width: 100%;
     margin:5px;
     background: linear-gradient(to right, var(--grey-2) 0%, var(--grey-5) 33.33%, var(--grey-6)52.08%, var(--grey-7) 73.96%, var(--grey-2) 100% );
+    background-size: 200%;
+    animation-name: go;
+    animation-iteration-count: infinite;
+    animation-duration: 1.5s;
 }
 .skeleton__circle {
     flex: 0 0 auto;
     flex-basis: 64px;
     height: 64px;
     border-radius: 32px;
-    background: var(--grey-2);
+    background: linear-gradient(to right, var(--grey-2) 0%, var(--grey-5) 33.33%, var(--grey-6)52.08%, var(--grey-7) 73.96%, var(--grey-2) 100% );
     margin:5px;
+    background-size: 200%;
+    animation-name: go;
+    animation-iteration-count: infinite;
+    animation-duration: 1.5s;
+  }
+
+  @keyframes go {
+      0%{
+        background-position:100%;
+      }
+      100% {
+        background-position: -100%;
+      }
   }
 

05-lection3/01-tooltip/index.html

@@ -16,12 +16,16 @@
         </style>
     </head>
     <body>
+
         <div class="tooltip">
-
-            <div class="tooltip__trigger">
-                <img width="22" height="22" src="../../assets/images/qwe.png">
-            </div>
-            <div class="tooltip__help">Helper Text</div>
+
+                <div class="tooltip__trigger">
+                    <svg class="tooltip__icon" >
+                        <use xlink:href="../../assets/images/sprite.svg#qwestion"></use>
+                    </svg>
+
+                <div class="tooltip__help">Helper Text</div>
+                </div>
         </div>
 
     </body>