-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(page): remove global .main styles from example
- Loading branch information
Showing
3 changed files
with
86 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,78 @@ | ||
| --- | ||
| title: Example with multiple playgrounds | ||
| --- | ||
| <div> | ||
| <section class="component-section"> | ||
| <h1 class="component-title">USER CARD</h1> | ||
| <p class="component-description"> | ||
| User card is a component for displaying user's info. | ||
| Can be in rectangle/rounded styles with multiple | ||
| colors supported. | ||
| </p> | ||
| </section> | ||
|
|
||
| <div class="component-section"> | ||
| <h1 class="component-title">USER CARD</h1> | ||
| <p class="component-description"> | ||
| User card is a component for displaying user's info. | ||
| Can be in rectangle/rounded styles with multiple | ||
| colors supported. | ||
| </p> | ||
| </div> | ||
| <uip-root> | ||
| <uip-header> | ||
| <uip-snippets></uip-snippets> | ||
| <uip-options></uip-options> | ||
| </uip-header> | ||
| <script type="text/html" uip-snippet label="Rectangle user card"> | ||
| <div class="user-card user-block aqua-user">Alexander</div> | ||
| </script> | ||
| <script type="text/html" uip-snippet label="Circle user card" wrap-items> | ||
| <div class="user-card user-circle aqua-user">Alexander</div> | ||
| </script> | ||
| <uip-preview></uip-preview> | ||
| <uip-settings target=".user-card"> | ||
| <uip-select-setting label="User color" attribute="class" mode="append"> | ||
| <option value="red-user">Red</option> | ||
| <option value="aqua-user">Aqua</option> | ||
| <option value="green-user">Green</option> | ||
| </uip-select-setting> | ||
| </uip-settings> | ||
| <uip-editor></uip-editor> | ||
| </uip-root> | ||
|
|
||
| <uip-root> | ||
| <uip-header> | ||
| <uip-snippets></uip-snippets> | ||
| <uip-options></uip-options> | ||
| </uip-header> | ||
| <script type="text/html" uip-snippet label="Rectangle user card"> | ||
| <div class="user-card user-block aqua-user">Alexander</div> | ||
| </script> | ||
| <script type="text/html" uip-snippet label="Circle user card" wrap-items> | ||
| <div class="user-card user-circle aqua-user">Alexander</div> | ||
| </script> | ||
| <uip-preview></uip-preview> | ||
| <uip-settings target=".user-card"> | ||
| <uip-select-setting label="User color" attribute="class" mode="append"> | ||
| <option value="red-user">Red</option> | ||
| <option value="aqua-user">Aqua</option> | ||
| <option value="green-user">Green</option> | ||
| </uip-select-setting> | ||
| </uip-settings> | ||
| <uip-editor></uip-editor> | ||
| </uip-root> | ||
| <section class="component-section"> | ||
| <h1 class="component-title">USER LIST</h1> | ||
| <p class="component-description"> | ||
| User list is a component for displaying multiple users' info. | ||
| Can manually wrap list items on new lines. | ||
| </p> | ||
| </section> | ||
|
|
||
| <div class="component-section"> | ||
| <h1 class="component-title">USER LIST</h1> | ||
| <p class="component-description"> | ||
| User list is a component for displaying multiple users' info. | ||
| Can manually wrap list items on new lines. | ||
| </p> | ||
| <uip-root> | ||
| <uip-header> | ||
| <uip-snippets></uip-snippets> | ||
| <uip-options></uip-options> | ||
| </uip-header> | ||
| <script type="text/html" uip-snippet label="Users aqua list"> | ||
| <div class="user-list"> | ||
| <div class="user-card aqua-user">Alexander</div> | ||
| <div class="user-card user-circle aqua-user">Alexey</div> | ||
| <div class="user-card aqua-user">Marina</div> | ||
| </div> | ||
| </script> | ||
| <script type="text/html" uip-snippet label="Long red users list containing seven items" wrap-items> | ||
| <div class="user-list"> | ||
| <div class="user-card red-user">Anton</div> | ||
| <div class="user-card red-user">Dmitri</div> | ||
| <div class="user-card red-user">Alexandra</div> | ||
| <div class="user-card red-user">Artem</div> | ||
| <div class="user-card red-user">Marina</div> | ||
| <div class="user-card red-user">Alexander</div> | ||
| <div class="user-card red-user">Alexander</div> | ||
| </div> | ||
| </script> | ||
| <uip-preview></uip-preview> | ||
| <uip-settings target=".user-list"> | ||
| <uip-select-setting label="User color" target=".user-card" attribute="class" mode="append"> | ||
| <option value="red-user">Red</option> | ||
| <option value="aqua-user">Aqua</option> | ||
| <option value="green-user">Green</option> | ||
| </uip-select-setting> | ||
| <uip-bool-setting label="Wrap items" attribute="wrap-items"></uip-bool-setting> | ||
| </uip-settings> | ||
| <uip-editor></uip-editor> | ||
| </uip-root> | ||
| </div> | ||
|
|
||
| <uip-root> | ||
| <uip-header> | ||
| <uip-snippets></uip-snippets> | ||
| <uip-options></uip-options> | ||
| </uip-header> | ||
| <script type="text/html" uip-snippet label="Users aqua list"> | ||
| <div class="user-list"> | ||
| <div class="user-card aqua-user">Alexander</div> | ||
| <div class="user-card user-circle aqua-user">Alexey</div> | ||
| <div class="user-card aqua-user">Marina</div> | ||
| </div> | ||
| </script> | ||
| <script type="text/html" uip-snippet label="Long red users list containing seven items" wrap-items> | ||
| <div class="user-list"> | ||
| <div class="user-card red-user">Anton</div> | ||
| <div class="user-card red-user">Dmitri</div> | ||
| <div class="user-card red-user">Alexandra</div> | ||
| <div class="user-card red-user">Artem</div> | ||
| <div class="user-card red-user">Marina</div> | ||
| <div class="user-card red-user">Alexander</div> | ||
| <div class="user-card red-user">Alexander</div> | ||
| </div> | ||
| </script> | ||
| <uip-preview></uip-preview> | ||
| <uip-settings target=".user-list"> | ||
| <uip-select-setting label="User color" target=".user-card" attribute="class" mode="append"> | ||
| <option value="red-user">Red</option> | ||
| <option value="aqua-user">Aqua</option> | ||
| <option value="green-user">Green</option> | ||
| </uip-select-setting> | ||
| <uip-bool-setting label="Wrap items" attribute="wrap-items"></uip-bool-setting> | ||
| </uip-settings> | ||
| <uip-editor></uip-editor> | ||
| </uip-root> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,8 @@ | ||
| .main { | ||
| display: block; | ||
| } | ||
|
|
||
| .component-section { | ||
| margin: 2rem 0; | ||
| font-family: sans-serif; | ||
|
|
||
| .component-title { | ||
| margin-bottom: 1rem; | ||
| } | ||
| } | ||
| } |