Skip to content

Commit

Permalink
chore: improved styling [ci visua]
Browse files Browse the repository at this point in the history
  • Loading branch information
@IB002
IB002 committed Jul 26, 2023
1 parent 5d2fef4 commit 4cb31f8
Show file tree
Hide file tree
Showing 7 changed files with 357 additions and 352 deletions.
16 changes: 11 additions & 5 deletions packages/styles/stories/Font-awesome/font-awesome-button.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,19 @@
<button aria-label="Add to cart" class="fd-button fd-button--menu fd-button--transparent">
<i class="fa-solid fa-building-flag"></i>
</button>
<div class="fddocs-button-container" style="margin-top:1rem">
<div class="fddocs-button-container" style="margin-top: 1rem">
<div class="fd-segmented-button" role="group" aria-label="Group label">
<button aria-label="Survey" class="fd-button" aria-pressed="false"><i class="fa-solid fa-print"></i></button>
<button aria-label="Chart" class="fd-button fd-button--toggled" aria-pressed="true"><i class="fa-solid fa-plus"></i></button>
<button aria-label="Pool" class="fd-button" aria-pressed="false"><i class="fa-solid fa-list"></i></button>
<button aria-label="Survey" class="fd-button" aria-pressed="false">
<i class="fa-solid fa-print"></i>
</button>
<button aria-label="Chart" class="fd-button fd-button--toggled" aria-pressed="true">
<i class="fa-solid fa-plus"></i>
</button>
<button aria-label="Pool" class="fd-button" aria-pressed="false">
<i class="fa-solid fa-list"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
76 changes: 37 additions & 39 deletions packages/styles/stories/Font-awesome/font-awesome-card.example.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,45 @@
<div class="is-cozy">

<div dir="ltr">
<div style="display:flex; justify-content:space-around; flex-wrap: wrap">
<div style="width: 300px; height: 100%; margin: 1rem;">
<div class="fd-card" role="region" aria-label="List Card Example 1">
<div class="fd-card__header fd-card__header--non-interactive">
<div class="fd-card__header-text">
<div class="fd-card__title-area">
<div class="fd-card__title">Today's Activities</div>
<div style="display: flex; justify-content: space-around; flex-wrap: wrap">
<div style="width: 300px; height: 100%; margin: 1rem">
<div class="fd-card" role="region" aria-label="List Card Example 1">
<div class="fd-card__header fd-card__header--non-interactive">
<div class="fd-card__header-text">
<div class="fd-card__title-area">
<div class="fd-card__title">Today's Activities</div>
</div>
</div>
</div>
</div>
<div class="fd-card__content" role="group" aria-label="Card Content">
<ul class="fd-list fd-list--no-border" role="list">
<li role="listitem" tabindex="0" class="fd-list__item">
<i class="fa-solid fa-burger" style="margin-right: 0.5rem;"></i>
<span class="fd-list__title">Breakfast</span>
</li>
<li role="listitem" tabindex="0" class="fd-list__item">
<i class="fa-solid fa-hippo" style="margin-right: 0.5rem;"></i>
<span class="fd-list__title">Visit the Zoo</span>
</li>
<li role="listitem" tabindex="0" class="fd-list__item">
<i class="fa-solid fa-utensils" style="margin-right: .9rem;"></i>
<span class="fd-list__title">Lunch</span>
</li>
<li role="listitem" tabindex="0" class="fd-list__item">
<i class="fa-solid fa-people-group" style="margin-right: 0.5rem;"></i>
<span class="fd-list__title">Visit Friends</span>
</li>
<li role="listitem" tabindex="0" class="fd-list__item">
<i class="fa-solid fa-apple-whole" style="margin-right: 0.75rem;"></i>
<span class="fd-list__title">Dinner</span>
</li>
<li role="listitem" tabindex="0" class="fd-list__item">
<i class="fa-solid fa-bed" style="margin-right: 0.5rem;"></i>
<span class="fd-list__title">Sleep</span>
</li>
</ul>
<div class="fd-card__content" role="group" aria-label="Card Content">
<ul class="fd-list fd-list--no-border" role="list">
<li role="listitem" tabindex="0" class="fd-list__item">
<i class="fa-solid fa-burger" style="margin-right: 0.5rem"></i>
<span class="fd-list__title">Breakfast</span>
</li>
<li role="listitem" tabindex="0" class="fd-list__item">
<i class="fa-solid fa-hippo" style="margin-right: 0.5rem"></i>
<span class="fd-list__title">Visit the Zoo</span>
</li>
<li role="listitem" tabindex="0" class="fd-list__item">
<i class="fa-solid fa-utensils" style="margin-right: 0.9rem"></i>
<span class="fd-list__title">Lunch</span>
</li>
<li role="listitem" tabindex="0" class="fd-list__item">
<i class="fa-solid fa-people-group" style="margin-right: 0.5rem"></i>
<span class="fd-list__title">Visit Friends</span>
</li>
<li role="listitem" tabindex="0" class="fd-list__item">
<i class="fa-solid fa-apple-whole" style="margin-right: 0.75rem"></i>
<span class="fd-list__title">Dinner</span>
</li>
<li role="listitem" tabindex="0" class="fd-list__item">
<i class="fa-solid fa-bed" style="margin-right: 0.5rem"></i>
<span class="fd-list__title">Sleep</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
111 changes: 55 additions & 56 deletions packages/styles/stories/Font-awesome/font-awesome-popover.example.html
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,62 @@
<div class="is-cozy">

<div dir="ltr">
<div class="fd-popover" style="margin-bottom: 300px">
<div class="fd-popover__control">
<button
class="fd-button"
aria-controls="popoverF1"
aria-expanded="true"
aria-haspopup="true"
onclick="onPopoverClick('popoverF1');"
role="button">
<i class="fa-solid fa-gas-pump"></i>
<div class="fd-popover__control">
<button
class="fd-button"
aria-controls="popoverF1"
aria-expanded="true"
aria-haspopup="true"
onclick="onPopoverClick('popoverF1');"
role="button"
>
<i class="fa-solid fa-gas-pump"></i>
</button>
</div>
<div class="fd-popover__body" aria-hidden="false" id="popoverF1">
<div class="fd-popover__wrapper" style="max-height: 250px;">
<nav class="fd-menu" aria-label="big navigation menu">
<ul class="fd-menu__list fd-menu__list--no-shadow">
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-car-side" style="margin-right:0.5rem"></i>
<span class="fd-menu__title">Option 1</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-truck-pickup" style="margin-right:0.5rem"></i>
<span class="fd-menu__title">Option 2</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-truck-moving" style="margin-right:0.5rem"></i>
<span class="fd-menu__title">Option 3</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-caravan" style="margin-right:0.5rem"></i>
<span class="fd-menu__title">Option 4</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-motorcycle" style="margin-right:0.5rem"></i>
<span class="fd-menu__title">Option 5</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-bicycle" style="margin-right:0.5rem"></i>
<span class="fd-menu__title">Option 6</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="fd-popover__body" aria-hidden="false" id="popoverF1">
<div class="fd-popover__wrapper" style="max-height: 250px">
<nav class="fd-menu" aria-label="big navigation menu">
<ul class="fd-menu__list fd-menu__list--no-shadow">
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-car-side" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Option 1</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-truck-pickup" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Option 2</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-truck-moving" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Option 3</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-caravan" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Option 4</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-motorcycle" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Option 5</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-bicycle" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Option 6</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
Loading

0 comments on commit 4cb31f8

Please sign in to comment.