Skip to content

Commit

Permalink
fix(styles): update theming-preview markup with the latest fundamenta…
Browse files Browse the repository at this point in the history 
…l-styles
  • Loading branch information
@droshev
droshev committed Jul 7, 2023
1 parent 7922197 commit a0f17b8
Show file tree
Hide file tree
Showing 13 changed files with 888 additions and 610 deletions.
288 changes: 149 additions & 139 deletions packages/theming-preview/src/button.html
View file

Large diffs are not rendered by default.

223 changes: 151 additions & 72 deletions packages/theming-preview/src/calendar.html
View file

Large diffs are not rendered by default.

52 changes: 26 additions & 26 deletions packages/theming-preview/src/form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,19 @@ <h4 class="fd-panel__title">Read-Only Form</h4>
<div class="fd-panel__content fd-theming__flex" style="width: 1000px;">
<div class="fd-container fd-form-layout-grid-container">
<div class="fd-row">
<div class="fd-col fd-col--4">
<label class="fd-form-label" for="input-13-compact">Name: </label>
<div class="fd-col fd-col-md--4">
<label class="fd-form-label" for="input-13-name">Name: </label>
</div>
<span>John Smith</span>
</div>
<div class="fd-row">
<div class="fd-col fd-col--4">
<label class="fd-form-label" for="input-13b-compact">Street/no: </label>
<div class="fd-col fd-col-md--4">
<label class="fd-form-label" for="input-13b-street">Street/no: </label>
</div>
<span>123 Front St.</span>
</div>
<div class="fd-row" role="group" aria-labelledby="groupLabel-compact">
<div class="fd-col fd-col--4">
<div class="fd-col fd-col-md--4">
<label class="fd-form-label" id="groupLabel-compact">ZIP Code/City: </label>
</div>
<span>12345 Montreal</span>
Expand All @@ -54,40 +54,40 @@ <h4 class="fd-panel__title">Editable Form</h4>
</div>
<div class="fd-panel__content fd-theming__flex" style="width: 1000px;">
<div class="fd-container fd-form-layout-grid-container">
<div class="fd-row">
<div class="fd-col fd-col--4">
<label class="fd-form-label" for="input-13-compact">Name: </label>
<div class="fd-row fd-form-item">
<div class="fd-col fd-col-md--4">
<label class="fd-form-label" for="input-13-name">Name: </label>
</div>
<div class="fd-col fd-col--7">
<input class="fd-input fd-input--compact" type="text" id="input-13-compact" placeholder="Name">
<div class="fd-col fd-col-md--7">
<input class="fd-input" type="text" id="input-13-name" placeholder="Name">
</div>
</div>
<div class="fd-row">
<div class="fd-col fd-col--4">
<label class="fd-form-label" for="input-13b-compact">Street/no: </label>
<div class="fd-row fd-form-item">
<div class="fd-col fd-col-md--4">
<label class="fd-form-label fd-form-label--required" for="input-13b-street">Street/no: </label>
</div>
<div class="fd-col fd-col--7">
<div class="fd-col fd-col-md--7">
<div class="fd-row">
<div class="fd-col fd-col--6">
<input class="fd-input fd-input--compact" type="text" id="input1-of-2-compact" aria-label="input1-of-2-compact" placeholder="Street Address">
<div class="fd-col fd-col-md--6">
<input class="fd-input" type="text" id="input1-of-2-street-address" aria-label="input1-of-2-street-address" placeholder="Street Address">
</div>
<div class="fd-col fd-col--6">
<input class="fd-input fd-input--compact" type="text" id="input2-of-2-compact" aria-label="input2-of-2-compact" placeholder="Street Number">
<div class="fd-col fd-col-md--6">
<input class="fd-input" type="text" id="input2-of-2-street-number" aria-label="input2-of-2-street-number" placeholder="Street Number">
</div>
</div>
</div>
</div>
<div class="fd-row" role="group" aria-labelledby="groupLabel-compact">
<div class="fd-col fd-col--4">
<label class="fd-form-label" id="groupLabel-compact">ZIP Code/City: </label>
<div class="fd-row fd-form-item" role="group" aria-labelledby="groupLabel">
<div class="fd-col fd-col-md--4">
<label class="fd-form-label fd-form-label--required" id="groupLabel-city">ZIP Code/City: </label>
</div>
<div class="fd-col fd-col--7">
<div class="fd-col fd-col-md--7">
<div class="fd-row">
<div class="fd-col fd-col--6">
<input class="fd-input fd-input--compact" type="text" id="input1-of-2-compact" aria-label="input1-of-2-compact" placeholder="Zip Code">
<div class="fd-col fd-col-md--6">
<input class="fd-input" type="text" id="input1-of-2-zip" aria-label="input1-of-2-zip" placeholder="Zip Code">
</div>
<div class="fd-col fd-col--6">
<input class="fd-input fd-input--compact" type="text" id="input2-of-2-compact" aria-label="input2-of-2-compact" placeholder="City">
<div class="fd-col fd-col-md--6">
<input class="fd-input" type="text" id="input2-of-2-city" aria-label="input2-of-2-city" placeholder="City">
</div>
</div>
</div>
Expand Down
30 changes: 15 additions & 15 deletions packages/theming-preview/src/header-footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,31 +28,31 @@ <h4 class="fd-panel__title">Header and Footer</h4>
<div class="fd-bar fd-bar--header" style="position: absolute; top: 50px; left: 0; width: 100%;">
<div class="fd-bar__left">
<div class="fd-bar__element">
<button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">
<button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">
<i class="sap-icon--navigation-left-arrow"></i>
</button>
</div>
<div class="fd-bar__element">
<button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">
<button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">
<i class="sap-icon--home"></i>
</button>
</div>
<div class="fd-bar__element">
<button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">
<button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">
<i class="sap-icon--account"></i>
</button>
</div>
</div>
<div class="fd-bar__middle">
<div class="fd-bar__element">
<div class="fd-segmented-button" role="group" aria-label="Group label">
<button aria-label="button" class="fd-button fd-button--compact" aria-pressed="true">
<button aria-label="button" class="fd-button fd-button--cozy" aria-pressed="true">
<i class="sap-icon--email"></i>
</button>
<button aria-label="button" class="fd-button fd-button--compact">
<button aria-label="button" class="fd-button fd-button--cozy" aria-pressed="true">
<i class="sap-icon--iphone"></i>
</button>
<button aria-label="button" class="fd-button fd-button--compact">
<button aria-label="button" class="fd-button fd-button--cozy" aria-pressed="false">
<i class="sap-icon--notification-2"></i>
</button>
</div>
Expand All @@ -67,7 +67,7 @@ <h4 class="fd-panel__title">Header and Footer</h4>
</div>
</div>
<div class="fd-bar__element">
<button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">
<button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">
<i class="sap-icon--grid"></i>
</button>
</div>
Expand Down Expand Up @@ -95,28 +95,28 @@ <h5 class="fd-title fd-title--h4">Title</h5>
<span>Text</span>
</div>
<div class="fd-bar__element">
<button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">Default</button>
<button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy">Default</button>
</div>
<div class="fd-bar__element">
<button aria-label="button" class="fd-button fd-button--transparent fd-button--compact" disabled>Default</button>
<button aria-label="button" class="fd-button fd-button--transparent fd-button--cozy" disabled>Default</button>
</div>
<div class="fd-bar__element">
<button class="fd-button fd-button--emphasized fd-button--compact">Emphasized</button>
<button class="fd-button fd-button--emphasized fd-button--cozy">Emphasized</button>
</div>
<div class="fd-bar__element">
<button class="fd-button fd-button--emphasized fd-button--compact" disabled>Emphasized</button>
<button class="fd-button fd-button--emphasized fd-button--cozy" disabled>Emphasized</button>
</div>
<div class="fd-bar__element">
<button class="fd-button fd-button--positive fd-button--compact">Accept</button>
<button class="fd-button fd-button--positive fd-button--cozy">Accept</button>
</div>
<div class="fd-bar__element">
<button class="fd-button fd-button--positive fd-button--compact" disabled>Accept</button>
<button class="fd-button fd-button--positive fd-button--cozy" disabled>Accept</button>
</div>
<div class="fd-bar__element">
<button class="fd-button fd-button--negative fd-button--compact">Reject</button>
<button class="fd-button fd-button--negative fd-button--cozy">Reject</button>
</div>
<div class="fd-bar__element">
<button class="fd-button fd-button--negative fd-button--compact" disabled>Reject</button>
<button class="fd-button fd-button--negative fd-button--cozy" disabled>Reject</button>
</div>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions packages/theming-preview/src/icon.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,15 +74,15 @@ <h4 class="fd-panel__title">Button with Icon</h4>
</button>
&nbsp; &nbsp;
<div class="fd-segmented-button" role="group" aria-label="Group label">
<button aria-label="Survey" class="fd-button"><i class="sap-icon--survey"></i></button>
<button aria-label="Survey" class="fd-button" aria-pressed="false"><i class="sap-icon--survey"></i></button>
<button aria-label="Chart" class="fd-button is-selected" aria-pressed="true"><i class="sap-icon--pie-chart"></i></button>
<button aria-label="Pool" class="fd-button"><i class="sap-icon--pool"></i></button>
<button aria-label="Pool" class="fd-button" aria-pressed="false"><i class="sap-icon--pool"></i></button>
</div>
&nbsp; &nbsp;
<div class="fd-segmented-button" role="group" aria-label="Group label">
<button aria-label="Survey" class="fd-button" disabled><i class="sap-icon--survey"></i></button>
<button aria-label="Survey" class="fd-button" disabled aria-pressed="false"><i class="sap-icon--survey"></i></button>
<button aria-label="Chart" class="fd-button is-selected" aria-pressed="true" disabled><i class="sap-icon--pie-chart"></i></button>
<button aria-label="Pool" class="fd-button" disabled><i class="sap-icon--pool"></i></button>
<button aria-label="Pool" class="fd-button" disabled aria-pressed="false"><i class="sap-icon--pool"></i></button>
</div>
</div>
</div>
Expand Down Expand Up @@ -132,7 +132,7 @@ <h4 class="fd-panel__title">Rating Indicator</h4>
<span class="fd-rating-indicator__dynamic-text">(2 of 5)</span>
</div>
<br>
<div class="fd-rating-indicator is-display-mode">
<div class="fd-rating-indicator fd-rating-indicator--display-mode">
<div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)">
<input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-display-mode-1" name="rating-display-mode" value="1" disabled>
<label class="fd-rating-indicator__label" for="rating-display-mode-1"></label>
Expand Down
Loading

0 comments on commit a0f17b8

Please sign in to comment.