mirror of
https://github.com/ForkAwesome/Fork-Awesome.git
synced 2024-12-27 14:01:32 +08:00
ported core.scss from scratch
This commit is contained in:
davegandy
parent
1a656a835f
commit
8033f2571f
167
scss/_core.scss
167
scss/_core.scss
@ -1,99 +1,130 @@
|
|||||||
/* BOOTSTRAP SPECIFIC CLASSES
|
/* FONT AWESOME CORE
|
||||||
* -------------------------- */
|
* -------------------------- */
|
||||||
|
|
||||||
/* Bootstrap 2.0 sprites.less reset */
|
[class^="icon-"],
|
||||||
|
[class*=" icon-"] {
|
||||||
|
@include icon-FontAwesome();
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="icon-"]:before,
|
||||||
|
[class*=" icon-"]:before {
|
||||||
|
text-decoration: inherit;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: default;
|
||||||
|
speak: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* makes the font 33% larger relative to the icon container */
|
||||||
|
.icon-large:before {
|
||||||
|
vertical-align: -10%;
|
||||||
|
font-size: 4/3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* makes sure icons active on rollover in links */
|
||||||
|
a {
|
||||||
[class^="icon-"],
|
[class^="icon-"],
|
||||||
[class*=" icon-"] {
|
[class*=" icon-"] {
|
||||||
display: inline;
|
display: inline;
|
||||||
width: auto;
|
}
|
||||||
height: auto;
|
|
||||||
line-height: normal;
|
|
||||||
vertical-align: baseline;
|
|
||||||
background-image: none;
|
|
||||||
background-position: 0% 0%;
|
|
||||||
background-repeat: repeat;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* more sprites.less reset */
|
/* increased font size for icon-large */
|
||||||
.icon-white,
|
|
||||||
.nav-pills > .active > a > [class^="icon-"],
|
|
||||||
.nav-pills > .active > a > [class*=" icon-"],
|
|
||||||
.nav-list > .active > a > [class^="icon-"],
|
|
||||||
.nav-list > .active > a > [class*=" icon-"],
|
|
||||||
.navbar-inverse .nav > .active > a > [class^="icon-"],
|
|
||||||
.navbar-inverse .nav > .active > a > [class*=" icon-"],
|
|
||||||
.dropdown-menu > li > a:hover > [class^="icon-"],
|
|
||||||
.dropdown-menu > li > a:hover > [class*=" icon-"],
|
|
||||||
.dropdown-menu > .active > a > [class^="icon-"],
|
|
||||||
.dropdown-menu > .active > a > [class*=" icon-"],
|
|
||||||
.dropdown-submenu:hover > a > [class^="icon-"],
|
|
||||||
.dropdown-submenu:hover > a > [class*=" icon-"] {
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* keeps Bootstrap styles with and without icons the same */
|
|
||||||
.btn, .nav {
|
|
||||||
[class^="icon-"],
|
[class^="icon-"],
|
||||||
[class*=" icon-"] {
|
[class*=" icon-"] {
|
||||||
//display: inline
|
&.icon-fixed-width {
|
||||||
&.icon-large {
|
|
||||||
line-height: 0.9em;
|
|
||||||
}
|
|
||||||
&.icon-spin {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
width: 16/14em;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 4/14em;
|
||||||
|
&.icon-large {
|
||||||
|
width: 20/14em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-tabs, .nav-pills {
|
.icons-ul {
|
||||||
[class^="icon-"],
|
margin-left: $icons-li-width;
|
||||||
[class*=" icon-"] {
|
list-style-type: none;
|
||||||
&, &.icon-large {
|
|
||||||
line-height: 0.9em;
|
> li { position: relative; }
|
||||||
}
|
|
||||||
|
.icon-li {
|
||||||
|
position: absolute;
|
||||||
|
left: -$icons-li-width;
|
||||||
|
width: $icons-li-width;
|
||||||
|
text-align: center;
|
||||||
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
// allows usage of the hide class directly on font awesome icons
|
||||||
[class^="icon-"],
|
[class^="icon-"],
|
||||||
[class*=" icon-"] {
|
[class*=" icon-"] {
|
||||||
&.pull-left, &.pull-right {
|
&.hide {
|
||||||
&.icon-2x {
|
display: none;
|
||||||
margin-top: 0.18em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.icon-spin.icon-large {
|
|
||||||
line-height: 0.8em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.btn-small {
|
.icon-muted { color: $iconMuted; }
|
||||||
[class^="icon-"],
|
.icon-light { color: $iconLight; }
|
||||||
[class*=" icon-"] {
|
.icon-dark { color: $iconDark; }
|
||||||
&.pull-left, &.pull-right {
|
|
||||||
&.icon-2x {
|
// Icon Borders
|
||||||
margin-top: 0.25em;
|
// -------------------------
|
||||||
|
|
||||||
|
.icon-border {
|
||||||
|
border: solid 1px $borderColor;
|
||||||
|
padding: .2em .25em .15em;
|
||||||
|
@include border-radius(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon Sizes
|
||||||
|
// -------------------------
|
||||||
|
|
||||||
|
.icon-2x {
|
||||||
|
font-size: 2em;
|
||||||
|
&.icon-border {
|
||||||
|
border-width: 2px;
|
||||||
|
@include border-radius(4px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.icon-3x {
|
||||||
|
font-size: 3em;
|
||||||
|
&.icon-border {
|
||||||
|
border-width: 3px;
|
||||||
|
@include border-radius(5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon-4x {
|
||||||
|
font-size: 4em;
|
||||||
|
&.icon-border {
|
||||||
|
border-width: 4px;
|
||||||
|
@include border-radius(6px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.btn-large {
|
.icon-5x {
|
||||||
|
font-size: 5em;
|
||||||
|
&.icon-border {
|
||||||
|
border-width: 5px;
|
||||||
|
@include border-radius(7px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Floats & Margins
|
||||||
|
// -------------------------
|
||||||
|
|
||||||
|
// Quick floats
|
||||||
|
.pull-right { float: right; }
|
||||||
|
.pull-left { float: left; }
|
||||||
|
|
||||||
[class^="icon-"],
|
[class^="icon-"],
|
||||||
[class*=" icon-"] {
|
[class*=" icon-"] {
|
||||||
margin-top: 0;
|
&.pull-left {
|
||||||
&.pull-left, &.pull-right {
|
margin-right: .3em;
|
||||||
&.icon-2x {
|
}
|
||||||
margin-top: 0.05em;
|
&.pull-right {
|
||||||
}
|
margin-left: .3em;
|
||||||
}
|
|
||||||
&.pull-left.icon-2x {
|
|
||||||
margin-right: 0.2em;
|
|
||||||
}
|
|
||||||
&.pull-right.icon-2x {
|
|
||||||
margin-left: 0.2em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,7 +6,7 @@ $borderColor: #eeeeee !default;
|
|||||||
$iconMuted: #eeeeee !default;
|
$iconMuted: #eeeeee !default;
|
||||||
$iconLight: white !default;
|
$iconLight: white !default;
|
||||||
$iconDark: #333333 !default;
|
$iconDark: #333333 !default;
|
||||||
$icons-li-width: 30/14em;
|
$icons-li-width: 30em/14em;
|
||||||
|
|
||||||
|
|
||||||
$glass: "\f000";
|
$glass: "\f000";
|
||||||
|
|||||||
167
src/assets/font-awesome/scss/_core.scss
vendored
167
src/assets/font-awesome/scss/_core.scss
vendored
@ -1,99 +1,130 @@
|
|||||||
/* BOOTSTRAP SPECIFIC CLASSES
|
/* FONT AWESOME CORE
|
||||||
* -------------------------- */
|
* -------------------------- */
|
||||||
|
|
||||||
/* Bootstrap 2.0 sprites.less reset */
|
[class^="icon-"],
|
||||||
|
[class*=" icon-"] {
|
||||||
|
@include icon-FontAwesome();
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="icon-"]:before,
|
||||||
|
[class*=" icon-"]:before {
|
||||||
|
text-decoration: inherit;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: default;
|
||||||
|
speak: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* makes the font 33% larger relative to the icon container */
|
||||||
|
.icon-large:before {
|
||||||
|
vertical-align: -10%;
|
||||||
|
font-size: 4/3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* makes sure icons active on rollover in links */
|
||||||
|
a {
|
||||||
[class^="icon-"],
|
[class^="icon-"],
|
||||||
[class*=" icon-"] {
|
[class*=" icon-"] {
|
||||||
display: inline;
|
display: inline;
|
||||||
width: auto;
|
}
|
||||||
height: auto;
|
|
||||||
line-height: normal;
|
|
||||||
vertical-align: baseline;
|
|
||||||
background-image: none;
|
|
||||||
background-position: 0% 0%;
|
|
||||||
background-repeat: repeat;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* more sprites.less reset */
|
/* increased font size for icon-large */
|
||||||
.icon-white,
|
|
||||||
.nav-pills > .active > a > [class^="icon-"],
|
|
||||||
.nav-pills > .active > a > [class*=" icon-"],
|
|
||||||
.nav-list > .active > a > [class^="icon-"],
|
|
||||||
.nav-list > .active > a > [class*=" icon-"],
|
|
||||||
.navbar-inverse .nav > .active > a > [class^="icon-"],
|
|
||||||
.navbar-inverse .nav > .active > a > [class*=" icon-"],
|
|
||||||
.dropdown-menu > li > a:hover > [class^="icon-"],
|
|
||||||
.dropdown-menu > li > a:hover > [class*=" icon-"],
|
|
||||||
.dropdown-menu > .active > a > [class^="icon-"],
|
|
||||||
.dropdown-menu > .active > a > [class*=" icon-"],
|
|
||||||
.dropdown-submenu:hover > a > [class^="icon-"],
|
|
||||||
.dropdown-submenu:hover > a > [class*=" icon-"] {
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* keeps Bootstrap styles with and without icons the same */
|
|
||||||
.btn, .nav {
|
|
||||||
[class^="icon-"],
|
[class^="icon-"],
|
||||||
[class*=" icon-"] {
|
[class*=" icon-"] {
|
||||||
//display: inline
|
&.icon-fixed-width {
|
||||||
&.icon-large {
|
|
||||||
line-height: 0.9em;
|
|
||||||
}
|
|
||||||
&.icon-spin {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
width: 16/14em;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 4/14em;
|
||||||
|
&.icon-large {
|
||||||
|
width: 20/14em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-tabs, .nav-pills {
|
.icons-ul {
|
||||||
[class^="icon-"],
|
margin-left: $icons-li-width;
|
||||||
[class*=" icon-"] {
|
list-style-type: none;
|
||||||
&, &.icon-large {
|
|
||||||
line-height: 0.9em;
|
> li { position: relative; }
|
||||||
}
|
|
||||||
|
.icon-li {
|
||||||
|
position: absolute;
|
||||||
|
left: -$icons-li-width;
|
||||||
|
width: $icons-li-width;
|
||||||
|
text-align: center;
|
||||||
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
// allows usage of the hide class directly on font awesome icons
|
||||||
[class^="icon-"],
|
[class^="icon-"],
|
||||||
[class*=" icon-"] {
|
[class*=" icon-"] {
|
||||||
&.pull-left, &.pull-right {
|
&.hide {
|
||||||
&.icon-2x {
|
display: none;
|
||||||
margin-top: 0.18em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.icon-spin.icon-large {
|
|
||||||
line-height: 0.8em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.btn-small {
|
.icon-muted { color: $iconMuted; }
|
||||||
[class^="icon-"],
|
.icon-light { color: $iconLight; }
|
||||||
[class*=" icon-"] {
|
.icon-dark { color: $iconDark; }
|
||||||
&.pull-left, &.pull-right {
|
|
||||||
&.icon-2x {
|
// Icon Borders
|
||||||
margin-top: 0.25em;
|
// -------------------------
|
||||||
|
|
||||||
|
.icon-border {
|
||||||
|
border: solid 1px $borderColor;
|
||||||
|
padding: .2em .25em .15em;
|
||||||
|
@include border-radius(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon Sizes
|
||||||
|
// -------------------------
|
||||||
|
|
||||||
|
.icon-2x {
|
||||||
|
font-size: 2em;
|
||||||
|
&.icon-border {
|
||||||
|
border-width: 2px;
|
||||||
|
@include border-radius(4px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.icon-3x {
|
||||||
|
font-size: 3em;
|
||||||
|
&.icon-border {
|
||||||
|
border-width: 3px;
|
||||||
|
@include border-radius(5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon-4x {
|
||||||
|
font-size: 4em;
|
||||||
|
&.icon-border {
|
||||||
|
border-width: 4px;
|
||||||
|
@include border-radius(6px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.btn-large {
|
.icon-5x {
|
||||||
|
font-size: 5em;
|
||||||
|
&.icon-border {
|
||||||
|
border-width: 5px;
|
||||||
|
@include border-radius(7px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Floats & Margins
|
||||||
|
// -------------------------
|
||||||
|
|
||||||
|
// Quick floats
|
||||||
|
.pull-right { float: right; }
|
||||||
|
.pull-left { float: left; }
|
||||||
|
|
||||||
[class^="icon-"],
|
[class^="icon-"],
|
||||||
[class*=" icon-"] {
|
[class*=" icon-"] {
|
||||||
margin-top: 0;
|
&.pull-left {
|
||||||
&.pull-left, &.pull-right {
|
margin-right: .3em;
|
||||||
&.icon-2x {
|
}
|
||||||
margin-top: 0.05em;
|
&.pull-right {
|
||||||
}
|
margin-left: .3em;
|
||||||
}
|
|
||||||
&.pull-left.icon-2x {
|
|
||||||
margin-right: 0.2em;
|
|
||||||
}
|
|
||||||
&.pull-right.icon-2x {
|
|
||||||
margin-left: 0.2em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
2
src/assets/font-awesome/scss/_variables.scss
vendored
2
src/assets/font-awesome/scss/_variables.scss
vendored
@ -8,7 +8,7 @@ $borderColor: #eeeeee !default;
|
|||||||
$iconMuted: #eeeeee !default;
|
$iconMuted: #eeeeee !default;
|
||||||
$iconLight: white !default;
|
$iconLight: white !default;
|
||||||
$iconDark: #333333 !default;
|
$iconDark: #333333 !default;
|
||||||
$icons-li-width: 30/14em;
|
$icons-li-width: 30em/14em;
|
||||||
|
|
||||||
{% for icon in icons %}
|
{% for icon in icons %}
|
||||||
${{ icon.id }}: "\{{ icon.unicode }}";
|
${{ icon.id }}: "\{{ icon.unicode }}";
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user