mirror of
https://github.com/arsenetar/pelican-red.git
synced 2026-01-23 23:21:38 +00:00
Consolidate scss output, clean up and restructure sass directory.
Changes output to only one stylesheet, removes uneeded files, renames and trims font files, creates utility script to convert from fontello css file to sass
This commit is contained in:
47
static/sass/voltaicideas/components/_scrollbar.scss
Normal file
47
static/sass/voltaicideas/components/_scrollbar.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
//
|
||||
// RangerTBC Style Components
|
||||
//
|
||||
|
||||
// Scrollbar Component components/_scrollbar.scss
|
||||
// Version: 0.1
|
||||
// Created By: Andrew Senetar
|
||||
// Date: May, 22 2013
|
||||
// Used: Google+ Style as Starting Point
|
||||
|
||||
//// Variables
|
||||
|
||||
//// Mixins
|
||||
|
||||
// this was going to be more cool?
|
||||
@mixin scrollbar(){
|
||||
::-webkit-scrollbar{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
::-webkit-scrollbar-button,{
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
::-webkit-scrollbar-track{
|
||||
border: solid transparent;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #f5f5f5;
|
||||
@include box-shadow(inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07));
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
min-height: 30px;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
border: none;
|
||||
@include box-shadow(inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07));
|
||||
&:hover{
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//// Style
|
||||
|
||||
//scrollbar styling
|
||||
@include scrollbar();
|
||||
43
static/sass/voltaicideas/pelican-red/_iconList.scss
Normal file
43
static/sass/voltaicideas/pelican-red/_iconList.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
@include i-class('grooveshark','805');
|
||||
@include i-class('reddit','804');
|
||||
@include i-class('blogger','803');
|
||||
@include i-class('youtube','802');
|
||||
@include i-class('steam','801');
|
||||
@include i-class('tag','81a');
|
||||
@include i-class('vcard','817');
|
||||
@include i-class('language','806');
|
||||
@include i-class('dot-3','808');
|
||||
@include i-class('cc','826');
|
||||
@include i-class('cc-by','825');
|
||||
@include i-class('cc-nc','824');
|
||||
@include i-class('cc-nc-eu','823');
|
||||
@include i-class('cc-nc-jp','822');
|
||||
@include i-class('cc-sa','821');
|
||||
@include i-class('cc-nd','820');
|
||||
@include i-class('cc-pd','81f');
|
||||
@include i-class('cc-zero','81e');
|
||||
@include i-class('cc-share','81d');
|
||||
@include i-class('cc-remix','81c');
|
||||
@include i-class('github','80a');
|
||||
@include i-class('flickr','815');
|
||||
@include i-class('vimeo','80b');
|
||||
@include i-class('twitter','80e');
|
||||
@include i-class('facebook','80d');
|
||||
@include i-class('gplus','80c');
|
||||
@include i-class('pinterest','800');
|
||||
@include i-class('tumblr','809');
|
||||
@include i-class('linkedin','80f');
|
||||
@include i-class('dribbble','814');
|
||||
@include i-class('stumbleupon','816');
|
||||
@include i-class('lastfm','810');
|
||||
@include i-class('rdio','811');
|
||||
@include i-class('instagram','812');
|
||||
@include i-class('skype','813');
|
||||
@include i-class('picasa','818');
|
||||
@include i-class('soundcloud','819');
|
||||
@include i-class('newspaper','807');
|
||||
@include i-class('search','827');
|
||||
@include i-class('link','81b');
|
||||
|
||||
//Generated on Sat Jul 13 07:02:38 UTC 2013
|
||||
|
||||
60
static/sass/voltaicideas/pelican-red/_iconSettings.scss
Normal file
60
static/sass/voltaicideas/pelican-red/_iconSettings.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
//
|
||||
// Sass Icon Fonts
|
||||
//
|
||||
|
||||
// Settings File _iconSettings.scss
|
||||
// Version: 0.3
|
||||
// Created By: Andrew Senetar
|
||||
// Date: July, 13 2013
|
||||
// Used: Font Awesome Styles, Foundation Icon Fonts Scss as Starting; animation from Fontello
|
||||
|
||||
//// Compass imports used later in icons.scss
|
||||
|
||||
@import "compass/css3/font-face";
|
||||
@import "compass/css3/border-radius";
|
||||
@import "compass/css3/animation";
|
||||
@import "compass/css3/transform";
|
||||
|
||||
//// Font and class variables
|
||||
|
||||
$classPrefix: "icon-" !default; // icon class prefix [prefix-][name]
|
||||
$set: "fontello" !default; // font name
|
||||
|
||||
//// Color Variables (from Font Awesome)
|
||||
|
||||
$iconBorderColor: #eee !default;
|
||||
$iconMuted: #eee !default;
|
||||
$iconLight: #fff !default;
|
||||
$iconDark: #333 !default;
|
||||
|
||||
//// Mixin for creation of individual icon class
|
||||
//// Use: @include i-class([name],[code]); (assumes \exxx space since its imposible? to output
|
||||
//// \#{$pua} in Sass appearntly
|
||||
|
||||
@mixin i-class($name,$pua) {
|
||||
.#{$classPrefix}#{$name}:before {
|
||||
content: "\e#{$pua}";
|
||||
}
|
||||
}
|
||||
|
||||
//// Mixin for creation of individual icon class for Internet Explorer
|
||||
//// Use: @include i-class([name],[code]); (again exxx range)
|
||||
|
||||
@mixin ie-class($name,$pua) {
|
||||
.#{$classPrefix}#{$name} {
|
||||
*zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = "#{$pua}; ");
|
||||
}
|
||||
}
|
||||
|
||||
//// Mixin for @font-face
|
||||
//// Use @include face([$set]);
|
||||
|
||||
@mixin face($set) {
|
||||
@include font-face("#{$set}",
|
||||
font-files("#{$set}.woff",
|
||||
"#{$set}.ttf",
|
||||
"#{$set}.svg"),
|
||||
'#{$set}.eot',
|
||||
normal,
|
||||
normal);
|
||||
}
|
||||
134
static/sass/voltaicideas/pelican-red/_icons.scss
Normal file
134
static/sass/voltaicideas/pelican-red/_icons.scss
Normal file
@@ -0,0 +1,134 @@
|
||||
//
|
||||
// Sass Icon Fonts
|
||||
//
|
||||
|
||||
// Main File icons.scss
|
||||
// Version: 0.3
|
||||
// Created By: Andrew Senetar
|
||||
// Date: July, 13 2013
|
||||
// Used: Font Awesome Styles, Foundation Icon Fonts Scss as Starting; animation from Fontello
|
||||
|
||||
@import "voltaicideas/pelican-red/iconSettings";
|
||||
|
||||
@include face(#{$set}); //@font-face
|
||||
|
||||
//// global icon styles (from Foundation Icons + Font Awesome)
|
||||
|
||||
[class*="#{$classPrefix}"] {
|
||||
background-image: none;
|
||||
background-position: 0% 0%;
|
||||
background-repeat: repeat;
|
||||
display: inline;
|
||||
height: auto;
|
||||
width: auto;
|
||||
vertical-align: baseline;
|
||||
line-height: 1;
|
||||
margin-top: 0;
|
||||
speak: none;
|
||||
font-family: '#{$set}';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
text-decoration: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
[class*="#{$classPrefix}"]:before {
|
||||
text-decoration: inherit;
|
||||
display: inline-block;
|
||||
speak: none;
|
||||
}
|
||||
|
||||
//// Icon borders (from Font Awesome)
|
||||
|
||||
[class*="border #{$classPrefix}"] {
|
||||
border: solid 1px $iconBorderColor;
|
||||
padding: .2em .25em .15em;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
|
||||
//// Icon sizes (from Font Awesome)
|
||||
|
||||
[class*="large #{$classPrefix}"]:before {
|
||||
vertical-align: -10%;
|
||||
font-size: 1.333em;
|
||||
}
|
||||
|
||||
[class*="huge #{$classPrefix}"]:before {
|
||||
vertical-align: -17%;
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
[class*="2x #{$classPrefix}"] {
|
||||
font-size: 2em;
|
||||
& .border {
|
||||
border-width: 2px;
|
||||
@include border-radius(4px);
|
||||
}
|
||||
}
|
||||
|
||||
[class*="3x #{$classPrefix}"] {
|
||||
font-size: 3em;
|
||||
& .border {
|
||||
border-width: 3px;
|
||||
@include border-radius(5px);
|
||||
}
|
||||
}
|
||||
|
||||
[class*="4x #{$classPrefix}"] {
|
||||
font-size: 4em;
|
||||
& .border {
|
||||
border-width: 4px;
|
||||
@include border-radius(6px);
|
||||
}
|
||||
}
|
||||
|
||||
[class*="5x #{$classPrefix}"] {
|
||||
font-size: 5em;
|
||||
& .border {
|
||||
border-width: 5px;
|
||||
@include border-radius(7px);
|
||||
}
|
||||
}
|
||||
|
||||
//// Colors (from Font Awesome)
|
||||
|
||||
[class*="muted #{$classPrefix}"]{
|
||||
color: $iconMuted;
|
||||
}
|
||||
|
||||
[class*="light #{$classPrefix}"]{
|
||||
color: $iconLight;
|
||||
}
|
||||
|
||||
[class*="dark #{$classPrefix}"]{
|
||||
color: $iconDark;
|
||||
}
|
||||
|
||||
//// Fixes
|
||||
|
||||
//// makes sure icons active on rollover in links (from Font Awesome)
|
||||
|
||||
a [class*="#{$classPrefix}"]:before {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
//// Animation for Spinners (from Fontello)
|
||||
|
||||
@include keyframes(spin){
|
||||
0%{
|
||||
@include transform(rotate(0deg));
|
||||
}
|
||||
100%{
|
||||
@include transform(rotate(359deg));
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin{
|
||||
@include animation(spin 2s infinite linear);
|
||||
}
|
||||
|
||||
//// Actual Icons
|
||||
@import "voltaicideas/pelican-red/_iconList.scss"
|
||||
|
||||
Reference in New Issue
Block a user