Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added arrow icon in accordeon #18

Merged
merged 3 commits into from
Dec 19, 2024
Merged

Added arrow icon in accordeon #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a68d409
Added arrow icon in accordeon
JulieSagan Dec 17, 2024
241bdf6
Added x icon in modal
JulieSagan Dec 18, 2024
6259473
Added (?) icon in tooltip
JulieSagan Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 7 additions & 12 deletions 05-lection3/01-tooltip/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,26 @@
<link rel="stylesheet" href="../../assets/css/main.css">
<link rel="stylesheet" href="./tooltip.css">
<title>Tooltip</title>

<script src="https://unpkg.com/feather-icons"></script>
</head>

<body style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<div class="container">
<div class="tooltip">
<div class="tooltip__trigger">
<svg class="tooltip__icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z"
fill="#212429" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.2582 8.02428C11.7927 7.94443 11.314 8.03191 10.9068 8.27123C10.4996 8.51054 10.1902 8.88625 10.0335 9.3318C9.85018 9.85279 9.27926 10.1266 8.75827 9.9433C8.23728 9.76002 7.96351 9.18911 8.14678 8.66812C8.46025 7.77701 9.07898 7.02559 9.89339 6.54696C10.7078 6.06833 11.6653 5.89337 12.5964 6.05307C13.5274 6.21277 14.3719 6.69682 14.9802 7.41949C15.5884 8.14201 15.9214 9.05644 15.9201 10.0009C15.9197 11.5312 14.7851 12.5419 13.9748 13.082C13.5392 13.3724 13.1107 13.586 12.795 13.7263C12.6358 13.7971 12.5016 13.8508 12.405 13.8876C12.3566 13.906 12.3174 13.9203 12.2888 13.9305L12.2541 13.9426L12.243 13.9464L12.2391 13.9477L12.2376 13.9482C12.2373 13.9483 12.2363 13.9486 11.9201 13L12.2363 13.9486C11.7124 14.1233 11.1461 13.8401 10.9714 13.3162C10.7969 12.7926 11.0796 12.2267 11.6028 12.0516L11.6016 12.0521C11.6017 12.052 11.6018 12.052 11.6028 12.0516L11.6188 12.046C11.6342 12.0406 11.6594 12.0314 11.693 12.0186C11.7605 11.9929 11.8607 11.9529 11.9827 11.8986C12.2296 11.7889 12.551 11.6275 12.8654 11.4179C13.555 10.9582 13.9201 10.4691 13.9201 9.99996L13.9201 9.99847C13.9208 9.52615 13.7543 9.06883 13.4502 8.70749C13.146 8.34615 12.7238 8.10413 12.2582 8.02428Z"
fill="#212429" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 15C12.5523 15 13 15.4477 13 16V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V16C11 15.4477 11.4477 15 12 15Z"
fill="#212429" />
</svg>
<i data-feather="help-circle" class="tooltip__icon"></i>
</div>

<div class="tooltip__bubble">
<span>Helper text</span>
</div>
</div>
</div>

<script>
feather.replace();
</script>
</body>

</html>
3 changes: 3 additions & 0 deletions 05-lection3/01-tooltip/tooltip.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
.tooltip__icon {
width: 24px;
height: 24px;
stroke: var(--grey-4);
fill: none;
stroke-width: 2px;
}

.tooltip__bubble {
Expand Down
16 changes: 7 additions & 9 deletions 05-lection3/02-modal/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
<link rel="stylesheet" href="./modal.css">
<link rel="stylesheet" href="../../components/01-button/button.css">
<title>Modal</title>

<script src="https://unpkg.com/feather-icons"></script>
</head>

<body>
Expand All @@ -15,15 +17,8 @@

<div id="modal" class="modal">
<div class="modal__content">
<svg id="modal-close" class="modal__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.4714 3.52861C12.7318 3.78896 12.7318 4.21107 12.4714 4.47141L4.47141 12.4714C4.21107 12.7318 3.78896 12.7318 3.52861 12.4714C3.26826 12.2111 3.26826 11.789 3.52861 11.5286L11.5286 3.52861C11.789 3.26826 12.2111 3.26826 12.4714 3.52861Z"
fill="#495057" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.52861 3.52861C3.78896 3.26826 4.21107 3.26826 4.47141 3.52861L12.4714 11.5286C12.7318 11.789 12.7318 12.2111 12.4714 12.4714C12.2111 12.7318 11.789 12.7318 11.5286 12.4714L3.52861 4.47141C3.26826 4.21107 3.26826 3.78896 3.52861 3.52861Z"
fill="#495057" />
</svg>
<i data-feather="x" id="modal-close" class="modal__icon"></i>

<h2 class="modal__title">Modal title</h2>
<p class="modal__text">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.
Expand All @@ -34,6 +29,9 @@ <h2 class="modal__title">Modal title</h2>
</div>
</div>

<script>
feather.replace();
</script>
</body>
<script src="./index.js"></script>

Expand Down
19 changes: 18 additions & 1 deletion components/accordion/accordion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
.accordion {
display: flex;
flex-direction: column;
font-family: 'Inter', sans-serif;
font-size: 16px;
font-style: normal;
Expand All @@ -11,7 +13,6 @@
border: 1px solid var(--grey-3);
padding: 24px 32px;
border-radius: 8px;
cursor: pointer;
}

.accordion__item:last-child {
Expand All @@ -20,6 +21,18 @@

.accordion__summary {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}

.accordion__icon {
width: 24px;
height: 24px;
stroke: var(--grey-4);
fill: none;
stroke-width: 2px;
}

.accordion__summary::-webkit-details-marker {
Expand All @@ -30,4 +43,8 @@
color: var(--grey-4);
padding-top: 16px;
padding-bottom: 8px;
}

.accordion__item[open] .accordion__icon {
transform: rotate(180deg);
}
17 changes: 14 additions & 3 deletions components/accordion/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,40 @@
<title>Accordeon</title>

<link rel="stylesheet" href="../../assets/css/main.css">

<script src="https://unpkg.com/feather-icons"></script>
</head>

<body>
<div class="container">
<div class="accordion">
<details class="accordion__item" open>
<summary class="accordion__summary">Why did the programmer quit his job?</summary>
<summary class="accordion__summary">Why did the programmer quit his job?
<i data-feather="chevron-down" class="accordion__icon"></i>
</summary>
<p class="accordion__text">Because he didn't get arrays (a raise)!</p>
</details>

<details class="accordion__item">
<summary class="accordion__summary">How do you comfort a JavaScript bug?</summary>
<summary class="accordion__summary">How do you comfort a JavaScript bug?
<i data-feather="chevron-down" class="accordion__icon"></i>
</summary>
<p class="accordion__text">You console it!</p>
</details>

<details class="accordion__item">
<summary class="accordion__summary">Why do programmers prefer dark mode?</summary>
<summary class="accordion__summary">Why do programmers prefer dark mode?
<i data-feather="chevron-down" class="accordion__icon"></i>
</summary>
<p class="accordion__text">Because light attracts bugs!</p>
</details>
</div>

</div>

<script>
feather.replace();
</script>
</body>

</html>
Loading