Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

Commit

Permalink
Add bigger icon sizes
Browse files Browse the repository at this point in the history 
Added "xlarge" with 96px.
Added "xxlarge" with 192px.
Adjusted indent in OcIcon.
Changed icon size presentation to use a tabular layout.
  • Loading branch information
Vincent Petry committed Feb 6, 2020
1 parent ca75752 commit b25a1ea
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 61 deletions.
121 changes: 60 additions & 61 deletions src/elements/OcIcon.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export default {
type: String,
default: "small",
validator: value => {
return value.match(/(small|medium|large)/)
return value.match(/(small|medium|large|xlarge|xxlarge)/)
},
},
/**
Expand Down Expand Up @@ -122,68 +122,67 @@ export default {
<docs>
```jsx
<section>
<h3 class="uk-heading-divider">
Default icons
</h3>
<oc-icon name="close" aria-label="Close"/>
<oc-icon name="delete" aria-label="Delete"/>
<oc-icon name="info" aria-label="Information"/>
<oc-icon name="account_circle" aria-label="My Account"/>
<h3 class="uk-heading-divider">
Default icons
</h3>
<oc-icon name="close" aria-label="Close"/>
<oc-icon name="delete" aria-label="Delete"/>
<oc-icon name="info" aria-label="Information"/>
<oc-icon name="account_circle" aria-label="My Account"/>

<h3 class="uk-heading-divider">
Icon color variations
</h3>
<div class="uk-grid-collapse uk-child-width-auto">
<oc-table middle divider>
<oc-table-row>
<oc-table-cell shrink type="head">Variation</oc-table-cell>
<oc-table-cell expand type="head" class="">Icons</oc-table-cell>
</oc-table-row>
<oc-table-row>
<oc-table-cell shrink>inverted</oc-table-cell>
<oc-table-cell expand class="uk-background-primary">
<oc-icon variation="inverted" name="close"/>
<oc-icon variation="inverted" name="delete"/>
<oc-icon variation="inverted" name="info"/>
<oc-icon variation="inverted" name="account_circle"/>
</oc-table-cell>
</oc-table-row>
<oc-table-row v-for="variation in ['danger', 'success', 'warning', 'file-type', 'system', 'active', 'passive']">
<oc-table-cell shrink>{{variation}}</oc-table-cell>
<oc-table-cell expand>
<oc-icon :variation="variation" name="close"/>
<oc-icon :variation="variation" name="delete"/>
<oc-icon :variation="variation" name="info"/>
<oc-icon :variation="variation" name="account_circle"/>
</oc-table-cell>
</oc-table-row>
</oc-table>
</div>
<h3 class="uk-heading-divider">
Icon color variations
</h3>
<div class="uk-grid-collapse uk-child-width-auto">
<oc-table middle divider>
<oc-table-row>
<oc-table-cell shrink type="head">Variation</oc-table-cell>
<oc-table-cell expand type="head" class="">Icons</oc-table-cell>
</oc-table-row>
<oc-table-row>
<oc-table-cell shrink>inverted</oc-table-cell>
<oc-table-cell expand class="uk-background-primary">
<oc-icon variation="inverted" name="close"/>
<oc-icon variation="inverted" name="delete"/>
<oc-icon variation="inverted" name="info"/>
<oc-icon variation="inverted" name="account_circle"/>
</oc-table-cell>
</oc-table-row>
<oc-table-row v-for="variation in ['danger', 'success', 'warning', 'file-type', 'system', 'active', 'passive']" :key="variation">
<oc-table-cell shrink>{{variation}}</oc-table-cell>
<oc-table-cell expand>
<oc-icon :variation="variation" name="close"/>
<oc-icon :variation="variation" name="delete"/>
<oc-icon :variation="variation" name="info"/>
<oc-icon :variation="variation" name="account_circle"/>
</oc-table-cell>
</oc-table-row>
</oc-table>
</div>

<h3 class="uk-heading-divider">
Small, medium and large icons
</h3>
<div class="uk-margin">
<oc-icon size="small" name="close"/>
<oc-icon size="small" name="delete"/>
<oc-icon size="small" name="info"/>
<oc-icon size="small" name="account_circle"/>
</div>
<div class="uk-margin">
<oc-icon size="medium" name="close"/>
<oc-icon size="medium" name="delete"/>
<oc-icon size="medium" name="info"/>
<oc-icon size="medium" name="account_circle"/>
</div>
<div class="uk-margin">
<oc-icon size="large" name="close"/>
<oc-icon size="large" name="delete"/>
<oc-icon size="large" name="info"/>
<oc-icon size="large" name="account_circle"/>
</div>
<h3 class="uk-heading-divider">
Icons loaded via URL
</h3>
<h3 class="uk-heading-divider">
Icon sizes
</h3>
<div class="uk-grid-collapse uk-child-width-auto uk-overflow-hidden">
<oc-table middle divider>
<oc-table-row>
<oc-table-cell shrink type="head">Size</oc-table-cell>
<oc-table-cell expand type="head" class="">Icons</oc-table-cell>
</oc-table-row>
<oc-table-row v-for="size in ['small', 'medium', 'large', 'xlarge', 'xxlarge']" :key="size">
<oc-table-cell shrink>{{size}}</oc-table-cell>
<oc-table-cell expand class="uk-text-nowrap">
<oc-icon :size="size" name="close"/>
<oc-icon :size="size" name="delete"/>
<oc-icon :size="size" name="info"/>
<oc-icon :size="size" name="account_circle"/>
</oc-table-cell>
</oc-table-row>
</oc-table>
</div>
<h3 class="uk-heading-divider">
Icons loaded via URL
</h3>
<div class="uk-margin">
<oc-icon size="medium" url="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg"/>
<oc-icon size="large" url="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg"/>
Expand Down
17 changes: 17 additions & 0 deletions src/styles/theme/oc-icon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,23 @@ $oc-icon-size: 24px;
}
}

&-xlarge {
&,
> svg {
width: $oc-icon-size * 4;
height: $oc-icon-size * 4;
}
}

&-xxlarge {
&,
> svg {
width: $oc-icon-size * 8;
height: $oc-icon-size * 8;
}
}


// Variations

&-active > svg {
Expand Down

0 comments on commit b25a1ea

Please sign in to comment.