diff --git a/.prettierrc b/.prettierrc
index 63b17e3..012b680 100644
--- a/.prettierrc
+++ b/.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"
}
\ No newline at end of file
diff --git a/03-lection1/01-button/button.css b/03-lection1/01-button/button.css
index 0e0f4b8..b354e68 100644
--- a/03-lection1/01-button/button.css
+++ b/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;
-}
\ No newline at end of file
+ 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;
+}
diff --git a/03-lection1/02-accordion/accordion.css b/03-lection1/02-accordion/accordion.css
index b36a7f1..e2bb79d 100644
--- a/03-lection1/02-accordion/accordion.css
+++ b/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);
}
\ No newline at end of file
diff --git a/03-lection1/02-accordion/index.html b/03-lection1/02-accordion/index.html
index f646837..2faf3de 100644
--- a/03-lection1/02-accordion/index.html
+++ b/03-lection1/02-accordion/index.html
@@ -7,23 +7,30 @@
-
- Accordion item 1
-
-
- 1. Обратите внимание, что `summary` по-умолчанию имеет `display: inline`. Поменяйте, если это необходимо.
-
- 2. За стрелочку в `summary` отвечает псевдоэлемент `::-webkit-details-marker`. Так как пока что не изучали, как прибивать элементы к краям контейнера, то скрываем нативную так, а свою сделаем позже:
-
-
-
-
- Accordion item 2
-
-
- В директории компонента лежат стили, картинки, которые использует только он, возможно, что-то еще, специфичное именно для него.
-
-
+
+
+
+ Accordion item 1
+
+
+
+
+
+ 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.
+
+
+
+
+ Accordion item 2
+
+
+
+
+ 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.
+
+
+