TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add icon sizes - Refs #1434

This commit is contained in:
Samuel Georges 2015-09-16 06:03:57 +10:00
parent bf961a9a5a
commit 6db2018f28
4 changed files with 50 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
modules/system/assets/css/styles.css
View File

@ -1004,6 +1004,11 @@ button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-ap
[class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em}
[class^="oc-icon-"]:before,[class*=" oc-icon-"]:before{display:inline-block;margin-right:8px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;vertical-align:baseline}
[class^="oc-icon-"].empty:before,[class*=" oc-icon-"].empty:before{margin-right:0}
.icon-lg{font-size:1.33333333em;line-height:0.75em;vertical-align:-15%}
.icon-2x{font-size:2em}
.icon-3x{font-size:3em}
.icon-4x{font-size:4em}
.icon-5x{font-size:5em}
@font-face{font-family:'Open Sans';src:url('../../../backend/assets/font/OpenSans-Light.eot');src:url('../../../backend/assets/font/OpenSans-Light.eot?#iefix') format('embedded-opentype'),url('../../../backend/assets/font/OpenSans-Light.svg#open_sanslight') format('svg'),url('../../../backend/assets/font/OpenSans-Light.woff') format('woff'),url('../../../backend/assets/font/OpenSans-Light.ttf') format('truetype');font-style:normal;font-weight:300}
@font-face{font-family:'Open Sans';src:url('../../../backend/assets/font/OpenSans-Regular.eot');src:url('../../../backend/assets/font/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),url('../../../backend/assets/font/OpenSans-Regular.svg#open_sansregular') format('svg'),url('../../../backend/assets/font/OpenSans-Regular.woff') format('woff'),url('../../../backend/assets/font/OpenSans-Regular.ttf') format('truetype');font-style:normal;font-weight:400}
@font-face{font-family:'Open Sans';src:url('../../../backend/assets/font/OpenSans-Semibold.eot');src:url('../../../backend/assets/font/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),url('../../../backend/assets/font/OpenSans-Semibold.svg#open_sanssemibold') format('svg'),url('../../../backend/assets/font/OpenSans-Semibold.woff') format('woff'),url('../../../backend/assets/font/OpenSans-Semibold.ttf') format('truetype');font-style:normal;font-weight:600}

36
modules/system/assets/ui/docs/icon.md
View File

@ -18,25 +18,37 @@ You can also inject an icon to an existing element using the `oc-` prefix.
> **Note**: Icon classes are echoed via CSS :before.
### Icon sizes
To increase icon sizes relative to their container, use the `icon-lg` (33% increase), `icon-2x`, `icon-3x`, `icon-4x`, or `icon-5x` classes.
<i class="fa icon-camera-retro icon-5x"></i> icon-5x
<i class="fa icon-camera-retro icon-4x"></i> icon-4x
<i class="fa icon-camera-retro icon-3x"></i> icon-3x
<i class="fa icon-camera-retro icon-2x"></i> icon-2x
<i class="fa icon-camera-retro icon-lg"></i> icon-lg
> If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
### With buttons
<a class="btn btn-default" href="#">
<i class="icon-refresh"></i> Refresh
<a class="btn btn-default oc-icon-refresh" href="#">
Refresh
</a>
<a class="btn btn-success" href="#">
<i class="icon-shopping-cart icon-large"></i> Checkout
<a class="btn btn-success oc-icon-shopping" href="#">
Checkout
</a>
<a class="btn btn-primary" href="#">
<i class="icon-comment"></i> Comment
<a class="btn btn-primary oc-icon-comment" href="#">
Comment
</a>
<a class="btn btn-danger" href="#">
<i class="icon-trash icon-large"></i> Delete
<a class="btn btn-danger oc-icon-trash" href="#">
Delete
</a>
<a class="btn btn-default" href="#">
<i class="icon-cog"></i> Settings
<a class="btn btn-default oc-icon-cog" href="#">
Settings
</a>
<a class="btn btn-info" href="#">
<i class="icon-info"></i> More Info
<a class="btn btn-info oc-icon-info" href="#">
More Info
</a>
## Available icons

17
modules/system/assets/ui/less/icon.less
View File

@ -66,4 +66,19 @@
&.empty:before {
margin-right: 0;
}
}
}
//
// Icon Sizes
//
// Makes the font 33% larger relative to the icon container
.icon-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.icon-2x { font-size: 2em; }
.icon-3x { font-size: 3em; }
.icon-4x { font-size: 4em; }
.icon-5x { font-size: 5em; }

5
modules/system/assets/ui/storm.css
View File

@ -1127,6 +1127,11 @@ button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-ap
[class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em}
[class^="oc-icon-"]:before,[class*=" oc-icon-"]:before{display:inline-block;margin-right:8px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;vertical-align:baseline}
[class^="oc-icon-"].empty:before,[class*=" oc-icon-"].empty:before{margin-right:0}
.icon-lg{font-size:1.33333333em;line-height:0.75em;vertical-align:-15%}
.icon-2x{font-size:2em}
.icon-3x{font-size:3em}
.icon-4x{font-size:4em}
.icon-5x{font-size:5em}
.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}
.dropdown{position:relative}
.dropdown-toggle:focus{outline:0}