From 8033f2571f8647d13b42014a8fdc41194869dbd6 Mon Sep 17 00:00:00 2001 From: davegandy Date: Wed, 12 Jun 2013 10:47:27 -0400 Subject: [PATCH] ported core.scss from scratch --- scss/_core.scss | 177 +++++++++++-------- scss/_variables.scss | 2 +- src/assets/font-awesome/scss/_core.scss | 177 +++++++++++-------- src/assets/font-awesome/scss/_variables.scss | 2 +- 4 files changed, 210 insertions(+), 148 deletions(-) diff --git a/scss/_core.scss b/scss/_core.scss index db14b2cc8..8199965a3 100644 --- a/scss/_core.scss +++ b/scss/_core.scss @@ -1,99 +1,130 @@ -/* BOOTSTRAP SPECIFIC CLASSES +/* FONT AWESOME CORE * -------------------------- */ -/* Bootstrap 2.0 sprites.less reset */ [class^="icon-"], [class*=" icon-"] { - 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; + @include icon-FontAwesome(); } -/* more sprites.less reset */ -.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; +[class^="icon-"]:before, +[class*=" icon-"]:before { + text-decoration: inherit; + display: inline-block; + cursor: default; + speak: none; } -/* keeps Bootstrap styles with and without icons the same */ -.btn, .nav { +/* 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-"] { - //display: inline + display: inline; + } +} + +/* increased font size for icon-large */ +[class^="icon-"], +[class*=" icon-"] { + &.icon-fixed-width { + display: inline-block; + width: 16/14em; + text-align: right; + padding-right: 4/14em; &.icon-large { - line-height: 0.9em; - } - &.icon-spin { - display: inline-block; + width: 20/14em; } } } -.nav-tabs, .nav-pills { - [class^="icon-"], - [class*=" icon-"] { - &, &.icon-large { - line-height: 0.9em; - } +.icons-ul { + margin-left: $icons-li-width; + list-style-type: none; + + > li { position: relative; } + + .icon-li { + position: absolute; + left: -$icons-li-width; + width: $icons-li-width; + text-align: center; + line-height: inherit; } } -.btn { - [class^="icon-"], - [class*=" icon-"] { - &.pull-left, &.pull-right { - &.icon-2x { - margin-top: 0.18em; - } - } - &.icon-spin.icon-large { - line-height: 0.8em; - } +// allows usage of the hide class directly on font awesome icons +[class^="icon-"], +[class*=" icon-"] { + &.hide { + display: none; } } -.btn.btn-small { - [class^="icon-"], - [class*=" icon-"] { - &.pull-left, &.pull-right { - &.icon-2x { - margin-top: 0.25em; - } - } +.icon-muted { color: $iconMuted; } +.icon-light { color: $iconLight; } +.icon-dark { color: $iconDark; } + +// Icon Borders +// ------------------------- + +.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 { - [class^="icon-"], - [class*=" icon-"] { - margin-top: 0; - &.pull-left, &.pull-right { - &.icon-2x { - margin-top: 0.05em; - } - } - &.pull-left.icon-2x { - margin-right: 0.2em; - } - &.pull-right.icon-2x { - margin-left: 0.2em; - } +.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-"] { + &.pull-left { + margin-right: .3em; + } + &.pull-right { + margin-left: .3em; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index cae57d4bc..5534e5abc 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -6,7 +6,7 @@ $borderColor: #eeeeee !default; $iconMuted: #eeeeee !default; $iconLight: white !default; $iconDark: #333333 !default; -$icons-li-width: 30/14em; +$icons-li-width: 30em/14em; $glass: "\f000"; diff --git a/src/assets/font-awesome/scss/_core.scss b/src/assets/font-awesome/scss/_core.scss index db14b2cc8..8199965a3 100644 --- a/src/assets/font-awesome/scss/_core.scss +++ b/src/assets/font-awesome/scss/_core.scss @@ -1,99 +1,130 @@ -/* BOOTSTRAP SPECIFIC CLASSES +/* FONT AWESOME CORE * -------------------------- */ -/* Bootstrap 2.0 sprites.less reset */ [class^="icon-"], [class*=" icon-"] { - 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; + @include icon-FontAwesome(); } -/* more sprites.less reset */ -.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; +[class^="icon-"]:before, +[class*=" icon-"]:before { + text-decoration: inherit; + display: inline-block; + cursor: default; + speak: none; } -/* keeps Bootstrap styles with and without icons the same */ -.btn, .nav { +/* 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-"] { - //display: inline + display: inline; + } +} + +/* increased font size for icon-large */ +[class^="icon-"], +[class*=" icon-"] { + &.icon-fixed-width { + display: inline-block; + width: 16/14em; + text-align: right; + padding-right: 4/14em; &.icon-large { - line-height: 0.9em; - } - &.icon-spin { - display: inline-block; + width: 20/14em; } } } -.nav-tabs, .nav-pills { - [class^="icon-"], - [class*=" icon-"] { - &, &.icon-large { - line-height: 0.9em; - } +.icons-ul { + margin-left: $icons-li-width; + list-style-type: none; + + > li { position: relative; } + + .icon-li { + position: absolute; + left: -$icons-li-width; + width: $icons-li-width; + text-align: center; + line-height: inherit; } } -.btn { - [class^="icon-"], - [class*=" icon-"] { - &.pull-left, &.pull-right { - &.icon-2x { - margin-top: 0.18em; - } - } - &.icon-spin.icon-large { - line-height: 0.8em; - } +// allows usage of the hide class directly on font awesome icons +[class^="icon-"], +[class*=" icon-"] { + &.hide { + display: none; } } -.btn.btn-small { - [class^="icon-"], - [class*=" icon-"] { - &.pull-left, &.pull-right { - &.icon-2x { - margin-top: 0.25em; - } - } +.icon-muted { color: $iconMuted; } +.icon-light { color: $iconLight; } +.icon-dark { color: $iconDark; } + +// Icon Borders +// ------------------------- + +.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 { - [class^="icon-"], - [class*=" icon-"] { - margin-top: 0; - &.pull-left, &.pull-right { - &.icon-2x { - margin-top: 0.05em; - } - } - &.pull-left.icon-2x { - margin-right: 0.2em; - } - &.pull-right.icon-2x { - margin-left: 0.2em; - } +.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-"] { + &.pull-left { + margin-right: .3em; + } + &.pull-right { + margin-left: .3em; } } diff --git a/src/assets/font-awesome/scss/_variables.scss b/src/assets/font-awesome/scss/_variables.scss index 6f97ad1ea..d6153aebc 100644 --- a/src/assets/font-awesome/scss/_variables.scss +++ b/src/assets/font-awesome/scss/_variables.scss @@ -8,7 +8,7 @@ $borderColor: #eeeeee !default; $iconMuted: #eeeeee !default; $iconLight: white !default; $iconDark: #333333 !default; -$icons-li-width: 30/14em; +$icons-li-width: 30em/14em; {% for icon in icons %} ${{ icon.id }}: "\{{ icon.unicode }}";