Compare commits

187 Commits

Author SHA1 Message Date
Gregory Ballantine d071bdeba6 Merge branch 'development' of Halftone/halftone into master 2016-12-29 13:47:04 -05:00
gballan1 c2382ecac1 Removed the second music player design in favor of the first design (after the IS 403 results) 2016-12-29 13:38:10 -05:00
gballan1 a37ae70622 Fixed music page #2 view 2016-12-06 17:30:55 -05:00
gballan1 b1c9fd959c Fixed album links 2016-12-06 17:11:42 -05:00
gballan1 687e5b8fe3 Fixed album links 2016-12-06 16:52:18 -05:00
gballan1 bc1fd8cbc6 Fixed album links 2016-12-06 16:49:32 -05:00
gballan1 2125e21849 Added store links to msuci player 2016-12-06 16:48:03 -05:00
gballan1 5ad45b4a4f Changed horizontal rule border color for entire site 2016-11-29 18:54:25 -05:00
gballan1 2ae3dcfc53 Changed horizontal rule border color for entire site 2016-11-29 18:54:04 -05:00
gballan1 cede776815 Changed horizontal rule border color for entire site 2016-11-29 18:52:08 -05:00
gballan1 b15f00db35 Changed horizontal rule border color for entire site 2016-11-29 18:17:53 -05:00
gballan1 ae4a1e81fa Untabified some sass files 2016-11-29 18:03:31 -05:00
gballan1 5dc1bcc792 Small css small to available songs list 2016-11-29 18:00:33 -05:00
gballan1 8e8a71d71a Fixed album descriptions 2016-11-29 17:42:40 -05:00
gballan1 16b5573897 Added truncated album description to album selection 2016-11-29 17:41:15 -05:00
root 67ddf0f11a Rollback last commit 2016-11-29 17:14:48 -05:00
gballan1 64167ae208 Added a 'Now playing' identifier to currently playing track 2016-11-29 17:06:18 -05:00
gballan1 a816144a8c Fixed track ended switch 2016-11-29 12:20:04 -05:00
gballan1 5e902234ef Added functionality to move on to next track in playlist when track ends 2016-11-29 12:18:25 -05:00
gballan1 e1fccae03f Music player track title padding 2016-11-29 12:12:59 -05:00
gballan1 2737a86d9e Added track title to music player 2016-11-29 12:10:41 -05:00
gballan1 6f879004fc Fix for album release info 2016-11-29 12:06:26 -05:00
gballan1 daeaed4ba9 Fix for album release info 2016-11-29 11:53:07 -05:00
gballan1 24b2cf76bc Added release date to selected album info 2016-11-29 11:51:17 -05:00
gballan1 d98362e55a Fixed release year formatting 2016-11-29 11:43:46 -05:00
gballan1 d2ac8ca371 Added release year to albums 2016-11-29 11:43:11 -05:00
gballan1 27436feba2 Music player design #2 tweaks 2016-11-29 11:40:06 -05:00
gballan1 38f3259110 Music player design #2 tweaks 2016-11-29 11:38:04 -05:00
gballan1 1901ac7320 Reorganized music player design #2 2016-11-29 11:34:38 -05:00
gballan1 ed8d98ba16 Small music player tweaks 2016-11-29 00:04:40 -05:00
gballan1 c96bb75241 Fixed album changing process 2016-11-29 00:02:29 -05:00
gballan1 387c1b9c87 Fixed album changing process 2016-11-29 00:01:42 -05:00
gballan1 11e0377b36 Fixed album changing process 2016-11-28 23:51:33 -05:00
gballan1 78eb16d137 Fixed album changing process 2016-11-28 23:47:11 -05:00
gballan1 64fec1af74 Fixed album song change over 2016-11-28 23:29:03 -05:00
gballan1 edccbdade1 Fixed album song change over 2016-11-28 23:28:04 -05:00
gballan1 6e93f4e71b Fixed album song change over 2016-11-28 23:27:10 -05:00
gballan1 bf76ca9571 Fixed album song change over 2016-11-28 23:25:56 -05:00
gballan1 734fbde6d9 Fixed album song change over 2016-11-28 23:25:25 -05:00
gballan1 df72cf3a58 Added song selection change when changing albums 2016-11-28 23:24:18 -05:00
gballan1 8b42f39aa1 Fixed changing album info 2016-11-28 21:32:02 -05:00
gballan1 b178bd5236 Fixed changing album info 2016-11-28 21:26:47 -05:00
gballan1 b6915c242d Added album info change stuff 2016-11-28 21:23:55 -05:00
gballan1 9aff68ca86 Brought music page design #2 up to par with #1 2016-11-28 20:47:36 -05:00
gballan1 a31a0c6549 Fixed album selection stuff 2016-11-28 20:39:13 -05:00
gballan1 575cd6211e Fixed album selection stuff 2016-11-28 20:38:46 -05:00
gballan1 bb7d66250b Fixed some of the album selection stuff 2016-11-28 20:26:19 -05:00
gballan1 d1a5a5385f Fixed some of the album selection stuff 2016-11-28 20:16:54 -05:00
gballan1 a6663db3e6 Fixed some of the album selection stuff 2016-11-28 20:13:09 -05:00
gballan1 faa0ed3464 Added album selection frontend stuff 2016-11-28 20:09:37 -05:00
Gregory Ballantine 363ed2923a Fixed url for function in 404.twig 2016-11-28 18:11:36 -05:00
Gregory Ballantine b46551625d Moved the main site pages into folders for better project structure 2016-11-28 18:10:55 -05:00
Gregory Ballantine 1c9a802a3c Updated the album info retrieval api 2016-11-28 18:08:54 -05:00
Gregory Ballantine 85e434dd83 Created custom 404 error handling 2016-11-28 18:08:26 -05:00
Gregory Ballantine f2ca6af5bc Added an api method to get album info by name 2016-11-28 17:06:04 -05:00
Gregory Ballantine 42de8819a8 Added album id to album selection 2016-11-28 16:58:49 -05:00
Gregory Ballantine 6a0ad62887 Added music player selection highlights 2016-11-28 16:51:29 -05:00
Gregory Ballantine 711ed2c6e7 Fixed music selection script 2016-11-28 16:36:14 -05:00
Gregory Ballantine 5c637f242d Fixed small error in music player track selection 2016-11-28 16:12:30 -05:00
Gregory Ballantine 192d0d024f Fixed small error in music player track selection 2016-11-28 16:11:42 -05:00
Gregory Ballantine 871bd3cd16 Added track selection to music player 2016-11-28 16:11:04 -05:00
Gregory Ballantine 3347ff8c77 Fixed album art sizing and fixed the self-titled album's art 2016-11-28 15:47:01 -05:00
Gregory Ballantine 5da23c2aad Added self-titled album to repo 2016-11-28 12:40:33 -05:00
gballan1 8b29e784f0 Music player tweaks 2016-11-28 11:44:44 -05:00
gballan1 eb22128385 Music player tweaks 2016-11-28 11:41:41 -05:00
gballan1 fdbda4354d Music player tweaks 2016-11-28 11:40:08 -05:00
gballan1 5bb7d16896 Fixed CDN media element player link 2016-11-28 11:20:25 -05:00
gballan1 04b7376cbd Started working on the music player 2016-11-28 11:17:28 -05:00
gballan1 89e51e2da7 Fixed music routes 2016-11-27 21:50:40 -05:00
gballan1 969c1a850a Added routes and views for both music player designs 2016-11-27 21:49:34 -05:00
Gregory Ballantine bef882bd08 Merge branch 'development' of Halftone/halftone into master 2016-11-18 13:09:29 -05:00
Gregory Ballantine 6af63f4bdb Navigation menu styles 2016-11-18 13:08:12 -05:00
Gregory Ballantine 7a00495b4e Navigation menu styles 2016-11-18 13:03:56 -05:00
Gregory Ballantine a96834728f Navigation menu styles 2016-11-18 13:03:00 -05:00
Gregory Ballantine acf99c5b57 Merge branch 'development' of Halftone/halftone into master 2016-11-18 12:54:09 -05:00
Gregory Ballantine acf52bb1ec Fixed music page template 2016-11-18 12:52:19 -05:00
Gregory Ballantine 27e3534b52 Fixed reading mode.php file for application mode 2016-11-18 12:51:42 -05:00
Gregory Ballantine 3eb6bc6340 Added music page back to beta site 2016-11-18 12:49:21 -05:00
Gregory Ballantine d251662c2e Merge branch 'master' of Halftone/halftone into development 2016-11-18 12:45:33 -05:00
Gregory Ballantine 4ecee91449 Merge branch 'ar1' of Halftone/halftone into master 2016-11-18 12:44:30 -05:00
Gregory Ballantine 0e8d9dcdc2 Mobile navigation styles 2016-11-18 12:41:46 -05:00
Gregory Ballantine 49db3be81a Moved the contact page header up 2016-11-18 12:36:33 -05:00
Gregory Ballantine 9d4b357439 Mobile navigation styles 2016-11-18 12:30:48 -05:00
Gregory Ballantine 8b6d34ebcf Mobile navigation styles 2016-11-18 12:30:05 -05:00
Gregory Ballantine 5d3487f45d Mobile navigation button styles 2016-11-18 12:24:40 -05:00
Gregory Ballantine 38e5ba328e Mobile navigation button styles 2016-11-18 12:24:05 -05:00
Gregory Ballantine 12d60ef5b5 Centering mobile navigation button 2016-11-18 12:15:22 -05:00
Gregory Ballantine 736aed8c0f Centering mobile navigation button 2016-11-18 12:13:33 -05:00
Gregory Ballantine 1d6ad2f16c Centering mobile navigation menu button 2016-11-18 11:48:28 -05:00
Gregory Ballantine 4961abb0a4 Centering mobile navigation menu button 2016-11-18 11:47:06 -05:00
Gregory Ballantine a44bf317bf Centering mobile navigation menu button 2016-11-18 11:46:06 -05:00
Gregory Ballantine 9354bbbbaf Added navbar menu button styles 2016-11-18 11:44:01 -05:00
Gregory Ballantine d1174988a8 Removed mode.php from git repository 2016-11-18 11:39:31 -05:00
Gregory Ballantine d097b80099 Removed navigation link background color 2016-11-18 11:30:12 -05:00
Gregory Ballantine ed1e8fa5b9 Removed navigation link background color 2016-11-18 11:21:10 -05:00
Gregory Ballantine c99fa310f7 Removed navigation link background color 2016-11-18 11:16:51 -05:00
Gregory Ballantine a3e2b7e5b1 Removed navigation link background color 2016-11-18 11:12:56 -05:00
Gregory Ballantine 036deef69f Added a hamburger menu for the navigation menu 2016-11-18 10:43:21 -05:00
Gregory Ballantine b36bd1d8dc Added Font Awesome icons and changed the Bootstrap and jQuery CDN links 2016-11-18 10:43:09 -05:00
Gregory Ballantine 72117915da Completely removed music page so that site actually works now 2016-11-18 10:30:04 -05:00
Gregory Ballantine 4a9d40004c Commented out the music page from the site for the album release 2016-11-18 10:26:57 -05:00
Gregory Ballantine 803e33fa6a Moved views from .php extension to .twig 2016-11-18 10:25:02 -05:00
Ascendings 03446c0cbd Reversed the order in which albums are loaded from the database 2016-04-21 00:37:09 -04:00
Ascendings 6338aa4554 Updated music view some more - added track listing and fixed the music player 2016-04-21 00:27:42 -04:00
Ascendings 967f716694 Fixed model namespaces 2016-04-21 00:00:28 -04:00
Ascendings 82c486e89a Updated music view 2016-04-20 23:57:19 -04:00
Ascendings 2a63d428e4 Fixed music player view 2016-04-20 23:49:25 -04:00
Ascendings f4efb0d031 Updated composer and vendor packages 2016-04-20 23:39:56 -04:00
Ascendings be38546837 Fixed start.php problems 2016-04-20 23:39:44 -04:00
Ascendings 02ff15a638 Added audio and video folders to .gitignore 2016-04-20 23:39:23 -04:00
Ascendings c71a548acf Removed audio files from being tracked through git 2016-04-20 23:36:43 -04:00
Ascendings f74eeaafc9 Changed permissions on logo 2016-04-20 23:35:38 -04:00
Ascendings 7316c238d8 Changed file permissions on js files 2016-04-20 23:33:22 -04:00
Ascendings 0516da540c Added vendor/ to .gitignore 2016-04-20 23:32:25 -04:00
Ascendings 7bc768f7be Removed vendor packages from git 2016-04-20 23:30:02 -04:00
gballan1 25f3dc27f4 Updated music player view 2016-04-20 23:11:33 -04:00
gballan1 9cac8d8293 Renamed song paths to match database paths 2016-04-20 22:39:30 -04:00
gballan1 bd5fe6391a Added audio_file field to Song model 2016-04-20 22:39:03 -04:00
gballan1 91d1a9be40 Added album arts 2016-04-20 22:15:01 -04:00
gballan1 904b103f8c Added models for albums and songs 2016-04-20 21:53:00 -04:00
gballan1 cdd075f186 Changed views from .php extension to .twig 2016-04-20 21:06:02 -04:00
Ascendings d79535a09b Added javascript import line 2015-10-06 12:08:25 -04:00
Ascendings 790b09c845 Changed comment in music.sass 2015-10-06 12:08:07 -04:00
Ascendings 5c2606e5bd Added music and music player js files 2015-10-06 12:36:47 -04:00
Ascendings 6507e0e54c Removed music.coffee file and changed spaces to tabs in alert-box source 2015-10-06 12:36:26 -04:00
Ascendings ecd5dbef02 Fixed basic functionality to music player as a test 2015-10-06 12:03:26 -04:00
Ascendings f60b5a9908 Added basic functionality to music player as a test 2015-10-06 11:58:13 -04:00
Ascendings 6a777d3a00 Added coffeescript file for music functionality 2015-10-06 11:20:16 -04:00
Ascendings ebde3bd6e8 Newly compiled CSS 2015-10-06 11:10:41 -04:00
Ascendings cfb084d91b Added styles for the song lists and header 2015-10-06 11:10:17 -04:00
Ascendings fdde6abde3 Moved elements around for styling 2015-10-06 11:09:46 -04:00
Ascendings 987508c50a Fixed some music page styles 2015-10-02 10:28:28 -04:00
Ascendings 8ab6e96b35 More fine tweaks for the music page 2015-10-02 01:33:10 -04:00
Ascendings 68f46a3989 More fine tweaks for the music page 2015-10-02 01:30:45 -04:00
Ascendings 9363aedc63 Added some more styles for the music page 2015-10-02 01:29:32 -04:00
Ascendings 3d51d83995 Added some more styles for the music page 2015-10-02 01:28:32 -04:00
Ascendings 2cc5ecaf5d Added some more styles for the music page 2015-10-02 01:25:55 -04:00
Ascendings f47e2263c9 Removed anchor tags from playlists 2015-10-02 01:25:46 -04:00
Ascendings 0304c5655f Added some more styles for the music page 2015-10-02 01:23:01 -04:00
Ascendings c7d8a6aaf3 Removed anchors from playlists to select 2015-10-02 01:19:48 -04:00
Ascendings 5d2ffe29bd Added some more styles for the music page 2015-10-02 01:18:17 -04:00
Ascendings 0fb5fc1d69 Added anchor tags for playlists 2015-10-02 01:17:55 -04:00
Ascendings 65e47f84f5 Added default HTML5 audio controls 2015-10-02 01:12:06 -04:00
Ascendings 6a2c820809 Added styles for music page 2015-10-02 01:09:57 -04:00
Ascendings 41a51454b2 Added stuff for music player 2015-10-02 01:09:43 -04:00
Ascendings f9e38ab1ac Added music page structure 2015-10-02 00:25:57 -04:00
Ascendings aa12e1a88c Fixed syntax error 2015-09-29 17:10:16 -04:00
Ascendings 5fff528152 Merge branch 'master' of github.com:Ascendings/halftone 2015-09-29 14:55:58 -04:00
Ascendings aef770568d Added example config file 2015-09-29 14:55:31 -04:00
Ascendings a7488cde37 Newly compiled CSS 2015-09-29 14:29:09 -04:00
Ascendings c2085998e2 Removed max width for news blip 2015-09-29 14:28:49 -04:00
Ascendings 0bc17bac31 Newly compiled CSS 2015-09-29 12:01:23 -04:00
Ascendings aebd56bd7a Redid styles to match the new home page structure 2015-09-29 12:01:02 -04:00
Ascendings 97c846cc62 Removed xs column reset; restructured the featured news blip 2015-09-29 12:00:39 -04:00
Ascendings 4b01366a27 Added xs screen-size column reset to force wrapping 2015-09-29 11:15:20 -04:00
Ascendings f6285efc62 Updated Bootstrap CSS from 3.3.4 to 3.3.5 2015-09-29 11:13:43 -04:00
Ascendings 1a0054aa55 Added other sass partial for miscellaneous sass styles 2015-09-26 21:26:31 +00:00
Ascendings c4aa3aae52 Updated compiled CSS 2015-09-26 21:25:57 +00:00
Ascendings 86b95fea74 Removed 100% width style 2015-09-26 21:25:38 +00:00
Ascendings 6e623c1199 Added _other.sass to compilation 2015-09-26 21:25:13 +00:00
Ascendings 2a5666b4a5 Added music page styles for the page structure 2015-09-26 21:24:43 +00:00
Ascendings 6d823e512f Minor change to home page; added class to the donation card to make it fit the column 2015-09-26 21:23:57 +00:00
Ascendings 09a9c09f78 Changed color of hr in footer again 2015-09-05 00:52:29 -04:00
Ascendings 92a53e2231 Changed color of hr in footer 2015-09-05 00:52:05 -04:00
Ascendings f9fb388ada Removed some padding at the bottom of the background 2015-09-05 00:50:07 -04:00
Ascendings 35afaf6379 Re-did home page 2015-09-05 00:48:42 -04:00
Ascendings b230682748 Home page style changes 2015-09-05 00:48:02 -04:00
Ascendings 03b9c3f522 Changed the size of the kickstarter donations plea 2015-09-04 23:14:35 -04:00
Ascendings ab0952bfb6 Fixed home page main section id 2015-09-04 23:14:03 -04:00
Ascendings cebba0b40c Changed home page design to card-based 2015-09-04 23:12:54 -04:00
Ascendings 1bf6c46a8e Changed website logo to not suck 2015-09-04 23:11:31 -04:00
Ascendings eba06282cd Fixed header css 2015-09-04 23:07:41 -04:00
Ascendings 41e1b58de5 Header changes 2015-09-04 23:05:57 -04:00
Ascendings babcb1a187 Removed old views 2015-09-04 23:02:57 -04:00
Ascendings 851c209dd7 Fixed route error in index route 2015-08-30 14:32:04 -04:00
Ascendings a8c6be2035 added index route to routes file 2015-08-30 14:31:33 -04:00
Ascendings 75b5a93086 Added kickstart/donation card to home page 2015-08-30 14:31:22 -04:00
Ascendings aec57d2972 Made home route point to /home; index (/) redirects to home route 2015-08-30 14:30:18 -04:00
Ascendings edfc595918 Modified footer hr color in the middle column 2015-08-30 13:53:06 -04:00
Ascendings 280abaa80b Removed compiled assets in wrong places 2015-08-30 13:52:16 -04:00
Ascendings c425c861aa Added the project's files to the repo 2015-08-30 12:34:43 -04:00
Ascendings b66a773ed8 Added vendor/ directory for Composer's installed files 2015-08-30 12:33:20 -04:00
Ascendings 45df179c49 Added project's mode 2015-08-30 12:31:56 -04:00
Ascendings ecc94988f9 Added composer to project 2015-08-30 12:31:31 -04:00
Ascendings b0ebf0df74 Added .gitignore to project 2015-08-30 12:31:07 -04:00
Gregory Ballantine ebc2f18f71 Update README.md 2015-08-30 12:24:30 -04:00
Gregory Ballantine 47776f1158 Initial commit 2015-08-30 12:22:43 -04:00
159 changed files with 6145 additions and 8 deletions
Regular → Executable
+66 -6
View File
@@ -1,8 +1,68 @@
# ---> Composer
composer.phar
/vendor/
# Application configs #
####################
# these are just so that database credentials are not exposed
# over Github. You can follow config/example.php for how to use
# the configuration file.
app/config/production.php
app/config/development.php
# Commit your application's lock file https://getcomposer.org/doc/01-basic-usage.md#commit-your-composer-lock-file-to-version-control
# You may choose to ignore a library lock file http://getcomposer.org/doc/02-libraries.md#lock-file
# composer.lock
# Application mode #
####################
# webiste mode settings
mode.php
# Vendor packages #
###################
# we don't need to sync these everywhere
vendor/
# Audio and video files #
#########################
# we really shouldn't track these with git
public/audio/
public/video/
# Dot Files #
#############
# the gitignore bit is so that .gitignore is still committed if
# it isn't already
.*
!/.gitignore
# Compiled source #
###################
*.com
*.class
*.dll
*.exe
*.o
*.so
# Packages #
############
# it's better to unpack these files and commit the raw source
# git has its own built in compression methods
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip
# Logs and databases #
######################
*.log
*.sql
*.sqlite
# OS generated files #
######################
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
+7 -2
View File
@@ -1,3 +1,8 @@
# website
# Halftone
Halftone's website (https://halftoneband.com)
HalfTone website
Hey guys!
This is just the repository for Halftone's website - nothing special here.
This isn't intended to be like a DIY app that you run on your own. This is just here for our personal use to keep track of changes what-not (standard version control stuff).
+34
View File
@@ -0,0 +1,34 @@
<?php
namespace Fieldprotocol\Music;
use Illuminate\Database\Eloquent\Model as Eloquent;
class Album extends Eloquent {
protected $table = 'albums';
protected $fillable = [
'title',
'description',
'album_art',
'release_date',
];
public function songs() {
return $this->hasMany('Fieldprotocol\Music\Song');
}
public function links() {
return $this->hasMany('Fieldprotocol\Music\StoreLink', 'album_id');
}
public function releaseDate() {
return date('F j, Y', strtotime($this->release_date));
}
public function releaseYear() {
return date('Y', strtotime($this->release_date));
}
}
+22
View File
@@ -0,0 +1,22 @@
<?php
namespace Fieldprotocol\Music;
use Illuminate\Database\Eloquent\Model as Eloquent;
class Song extends Eloquent {
protected $table = 'songs';
protected $fillable = [
'title',
'album_id',
'track_order',
'audio_file',
];
public function album() {
return $this->belongsTo('Fieldprotocol\Music\Album');
}
}
+20
View File
@@ -0,0 +1,20 @@
<?php
namespace Fieldprotocol\Music;
use Illuminate\Database\Eloquent\Model as Eloquent;
class StoreLink extends Eloquent {
protected $table = 'store_links';
protected $fillable = [
'link_name',
'link_ref',
];
public function album() {
return $this->belongsTo('Fieldprotocol\Music\Album', 'album_id');
}
}
+57
View File
@@ -0,0 +1,57 @@
<?php
namespace Fieldprotocol\User;
use Illuminate\Database\Eloquent\Model as Eloquent;
class User extends Eloquent {
protected $table = 'users';
protected $fillable = [
'id',
'username',
'first_name',
'last_name',
'email',
'posts'
];
public function getFullName() {
if (!$this->first_name || !$this->last_name) {
return null;
}
return "{$this->first_name} {$this->last_name}";
}
public function getName() {
return $this->getFullName() ?: $this->username;
}
public function getAvatarUrl($options = []) {
$size = isset($options['size']) ? $options['size'] : 45;
return 'http://www.gravatar.com/avatar/' . md5($this->email) . '?s=' . $size . '&d=identicon';
}
/*public function permissions() {
return $this->hasOne('Fieldprotocol\User\UserPermission', 'user_id');
}
public function hasPermission($permission) {
return (bool) $this->permissions->{$permission};
}
public function isAdmin() {
return $this->hasPermission('is_admin');
}
public function isEditor() {
return $this->hasPermission('is_editor');
}
public function isAuthor() {
return $this->hasPermission('is_author');
}*/
}
+35
View File
@@ -0,0 +1,35 @@
<?php
return [
'app' => [
'url' => 'https://halftoneband.com',
'hash' => [
'algo' => PASSWORD_BCRYPT,
'cost' => 10,
],
],
'db' => [
'driver' => 'mysql',
'host' => 'db.example.com',
'name' => 'db_name',
'username' => 'db_user',
'password' => 'db_secret',
'charset' => 'utf8',
'collation' => 'utf8_unicode_ci',
'prefix' => '',
],
'auth' => [
'session' => 'user_id',
'remember' => 'user_r',
],
'twig' => [
'debug' => true,
],
'csrf' => [
'key' => 'csrf_token',
],
];
+18
View File
@@ -0,0 +1,18 @@
<?php
use Illuminate\Database\Capsule\Manager as Capsule;
$capsule = new Capsule;
$capsule->addConnection([
'driver' => $app->config->get('db.driver'),
'host' => $app->config->get('db.host'),
'database' => $app->config->get('db.name'),
'username' => $app->config->get('db.username'),
'password' => $app->config->get('db.password'),
'charset' => $app->config->get('db.charset'),
'collation' => $app->config->get('db.collation'),
'prefix' => $app->config->get('db.prefix'),
]);
$capsule->bootEloquent();
+31
View File
@@ -0,0 +1,31 @@
<?php
$authenticationCheck = function($required) use ($app) {
return function() use ($required, $app) {
if ((!$app->auth && $required) || ($app->auth && !$required)) {
if (!$app->auth && $required) {
$app->flash('global', 'Hey buddy, you need to sign in first!');
} else if ($app->auth && !$required) {
$app->flash('global', 'Woah there, why do you want to do that?');
}
$app->redirect($app->urlFor('home'));
}
};
};
$authenticated = function() use ($authenticationCheck) {
return $authenticationCheck(true);
};
$guest = function() use ($authenticationCheck) {
return $authenticationCheck(false);
};
$admin = function() use ($app) {
return function() use ($app) {
if (!$app->auth || !$app->auth->isAdmin()) {
$app->flash('global', 'You don\'t have permissions for that, man.');
$app->redirect($app->urlFor('home'));
}
};
};
Executable
+15
View File
@@ -0,0 +1,15 @@
<?php
// Main view routes
require 'routes/pages/index.php';
require 'routes/pages/about.php';
require 'routes/pages/contact.php';
require 'routes/pages/home.php';
require 'routes/pages/music.php';
require 'routes/pages/shows.php';
// API routes
require 'routes/apiv1/music.php';
// Errors
require 'routes/errors/404.php';
+38
View File
@@ -0,0 +1,38 @@
<?php
// retrieve album info
$app->get('/apiv1/music/album-info/:albumid', function($albumid) use($app) {
if (!ctype_digit($albumid)) {
echo 'Don\'t do that';
return;
}
$album = $app->album->where('id', $albumid)->first();
if ($album) {
echo json_encode($album);
} else {
$app->notFound();
}
})->name('apiv1.music.album-info');
// retrieve an album's songs
$app->get('/apiv1/music/album-songs/:albumid', function($albumid) use($app) {
if (!ctype_digit($albumid)) {
echo 'Don\'t do that';
return;
}
$album = $app->album->where('id', $albumid)->first();
if ($album) {
$json = ['songs' => $album->songs];
echo json_encode($json);
} else {
$app->notFound();
}
})->name('apiv1.music.album-songs');
+5
View File
@@ -0,0 +1,5 @@
<?php
$app->notFound(function() use ($app) {
$app->render('errors/404.twig');
});
+7
View File
@@ -0,0 +1,7 @@
<?php
$app->get('/about', function() use($app) {
$app->render('pages/about.twig');
})->name('about');
+7
View File
@@ -0,0 +1,7 @@
<?php
$app->get('/contact', function() use($app) {
$app->render('pages/contact.twig');
})->name('contact');
+7
View File
@@ -0,0 +1,7 @@
<?php
$app->get('/home', function() use($app) {
$app->render('pages/home.twig');
})->name('home');
+7
View File
@@ -0,0 +1,7 @@
<?php
$app->get('/', function() use($app) {
$app->response->redirect($app->urlFor('home'), '303');
})->name('index');
+16
View File
@@ -0,0 +1,16 @@
<?php
// music page
$app->get('/music', function() use($app) {
$albums = $app->album->all()->sortByDesc('release_date')->values()->all();
$songs = $albums[0]->songs;
$links = $albums[0]->links;
$app->render('pages/music.twig', [
'albums' => $albums,
'songs' => $songs,
'links' => $links,
]);
})->name('music');
+32
View File
@@ -0,0 +1,32 @@
<?php
$app->get('/shows', function() use($app) {
$shows = json_decode(file_get_contents('http://api.bandsintown.com/artists/HALFtone/events.json?api_version=2.0&app_id=shows_halftoneband.com'));
foreach ($shows as $show) {
$show->date = date('M dS', strtotime($show->datetime));
$show->day = date('D', strtotime($show->datetime));
$show->time = date('H:i', strtotime($show->datetime));
}
$app->render('pages/shows.twig', [
'shows' => $shows,
]);
})->name('shows');
$app->get('/shows/json', function() use($app) {
$shows = json_decode(file_get_contents('http://api.bandsintown.com/artists/HALFtone/events.json?api_version=2.0&app_id=shows_halftoneband.com'));
foreach ($shows as $show) {
$show->date = date('M dS', strtotime($show->datetime));
$show->day = date('D', strtotime($show->datetime));
$show->time = date('H:i', strtotime($show->datetime));
print_r($show);
echo '<br /><br />';
}
die();
})->name('shows.json');
Executable
+73
View File
@@ -0,0 +1,73 @@
<?php
// Slim deps
use Slim\Slim;
use Slim\Views\Twig;
use Slim\Views\TwigExtension;
// Config struff
use Noodlehaus\Config;
// Our dependencies
use Fieldprotocol\Music\Album;
use Fieldprotocol\Music\Song;
// Let's get this session started
session_cache_limiter(false);
session_start();
// For now, display some errors
ini_set('display_errors', 'On');
// The app's root directory
define('INC_ROOT', dirname(__DIR__));
// Autoload our stuff >:D
require INC_ROOT . '/vendor/autoload.php';
// Time to create our app
$app = new Slim([
'mode' => trim(file_get_contents(INC_ROOT . '/mode.php')),
'view' => new Twig(),
'templates.path' => INC_ROOT . '/app/views'
]);
// Run some crap before the middleware
//$app->add(new BeforeMiddleware);
//$app->add(new CSRFMiddleware);
$app->configureMode($app->config('mode'), function() use ($app) {
$app->config = Config::load(INC_ROOT . "/app/config/{$app->mode}.php");
});
// Database configs
require 'database.php';
// Filters
require 'filters.php';
// Routes configs
require 'routes.php';
//$app->auth = false;
// Album singleton
$app->container->set('album', function() {
return new Album;
});
// Song singleton
$app->container->set('song', function() {
return new Song;
});
// Slappin' some hoes with our views
$view = $app->view();
$view->parserOptions = [
'debug' => $app->config->get('twig.debug')
];
$view->setTemplatesDirectory('../app/views');
$view->parserExtensions = [
new TwigExtension()
];
// Run Slim
$app->run();
+13
View File
@@ -0,0 +1,13 @@
{% extends 'templates/default.twig' %}
{% block title %}404 Error{% endblock %}
{% block content %}
<!-- Error information section -->
<section id="error-section" class="row">
<div class="col-xs-12 card hover-box shadow-1">
<h4>404 Error</h4>
<p>The URL you were looking for doesn't exist. Perhaps you'd like to start over at the <a href="{{ urlFor('home') }}">home page</a>?</p>
</div>
</section>
{% endblock %}
+89
View File
@@ -0,0 +1,89 @@
{% extends 'templates/default.twig' %}
{% block title %}About Us{% endblock %}
{% block content %}
<header id="about-header" class="row shadow-1">
<div class="col-xs-12">
<img class="img-responsive" src="/img/about/halftone.jpg" alt="halftone">
</div>
<div class="about-band col-xs-12">
<h2>About the Band</h2><br/>
<p>
When one thinks of pioneers in rock music, Beethoven might not be the first name to roll off the tongue. However, as a 12 year old Wyatt Hamilton (Lead Vocals/Guitar) jammed out “Ode to Joy” in his middle school guitar class, he set the course for the inception of Halftone. Joining up with Andrew Hall (Bass/Vocals), Greg Ballantine (Drums/Vocals) and Zakk Vigneri (Guitar/Vocals), this alternative and punk rock influenced quartet has already made an impact in the Maryland music scene.
</p><br />
<p>
While the members of this Glen Burnie based band are influenced by some of the pioneers in punk and alternative music, they were not afraid to step out of their comfort zone to craft a their own sound, featuring thoughtful lyrics and an infectious energy. The band sets out to remain true to themselves, and this honesty has resulted in a uniquely personal connection with their ever-growing fanbase.
</p><br />
<p>
Halftone has already played to large crowds at venues such as Rams Head Live, Ottobar and Fish Head Cantina. They also participated in the 16th annual Anne Arundel County High School Battle of the Bands at Maryland Hall, and returned the following year to perform as the showcase act.
</p><br />
<p>
Their debut EP, “Opting Out”, was produced by Jerome Maffeo (Jimmies Chicken Shack) and singer/songwriter, Eric James (formerly of vs. The Earth) and is available now on iTunes. Their single “Elsewhere” has received radio airplay on WIYY (98 Rock, Baltimore).
</p><br />
<p>
“Its refreshing to find a young band that strikes such a perfect balance between showmanship and musicianship and that understands what it means to work hard to build a following”, remarks co-producer Eric James.
</p><br />
<p>
Poised for the future, the members of Halftone look forward to bringing their unapologetic energy to the masses.
</p>
</div>
</header>
<div id="about-content" class="row">
<section class="col-md-6 col-xs-12">
<div class="thumbnail shadow-1">
<img src="img/about/wyatt.jpg" alt="Wyatt Hamilton">
<div class="caption">
<h3>Wyatt Hamilton</h3>
<hr />
<h4>Lead vocals/Guitar</h4>
<p>World's "okay-est" guitarist... and we're using "okay" loosely.</p>
</div>
<a href="#"></a>
</div>
</section>
<section class="col-md-6 col-xs-12">
<div class="thumbnail shadow-1">
<img src="img/about/andrew.jpg" alt="Andrew Hall">
<div class="caption">
<h3>Andrew Hall</h3>
<hr />
<h4>Bass Guitar</h4>
<p>Ginger, enough said.</p>
</div>
<a href="#"></a>
</div>
</section>
<section class="col-md-6 col-xs-12">
<div class="thumbnail shadow-1">
<img src="img/about/greg.jpg" alt="Gregory Ballantine">
<div class="caption">
<h3>Gregory Ballantine</h3>
<hr />
<h4>Drums/Screaming</h4>
<p>If only wailing on things was this easy...</p>
</div>
<a href="#"></a>
</div>
</section>
<section class="col-md-6 col-xs-12">
<div class="thumbnail shadow-1">
<img src="img/about/zakk.jpg" alt="Zakk Vigneri">
<div class="caption">
<h3>Zakk Vigneri</h3>
<hr />
<h4>Lead guitar/Backing vocals</h4>
<p>The Amateur Hour champion!</p>
</div>
<a href="#"></a>
</div>
</section>
</div>
{% endblock %}
+18
View File
@@ -0,0 +1,18 @@
{% extends 'templates/default.twig' %}
{% block title %}Contact Us{% endblock %}
{% block content %}
<section id="contact-header" class="row">
<h1>Contact Us</h1>
</section>
<section id="contact-info" class="row">
<div class="card shadow-1 container">
<p>For booking, press, promotion, or just to say "what's up?", you can shoot us an email at:</p>
<h3><a href="mailto:halftonetheband@gmail.com">halftonetheband@gmail.com</a></h3>
<hr />
<p>We accept many types of inquiries, and we're always glad to work with anyone if it means putting on a great show!</p>
</div>
</section>
{% endblock %}
+21
View File
@@ -0,0 +1,21 @@
{% extends 'templates/default.twig' %}
{% block title %}Home{% endblock %}
{% block content %}
<!-- featured section -->
<section id="featured" class="row">
<!-- Featured news block -->
<div class="col-sm-6 col-xs-12">
<a href="https://itunes.apple.com/us/album/opting-out-ep/id884330910">
<img class="hover-box shadow-1" src="/img/banner/oo-banner.jpg" alt="Opting Out EP - Now available on iTunes!" />
</a>
</div>
<!-- Donation plea -->
<div class="col-sm-6 col-xs-12 card hover-box shadow-1">
<p>Since we are a local band, we do not exactly have lots of cash to throw at recording our stuff, taking ourselves to gigs, and whatever other expenses come up. We run off of the support from our fans, friends and family, and would greatly appreciate any help you guys can give us!</p>
<!--<p>You can support us <a href="">at kickstarter</a> today!</p>-->
</div>
</section>
{% endblock %}
+84
View File
@@ -0,0 +1,84 @@
{% extends 'templates/default.twig' %}
{% block javascripts %}
<script type="text/javascript" src="/js/music.js"></script>
{% endblock %}
{% block title %}Music{% endblock %}
{% block content %}
<header id="music-header" class="row">
<h1>Music</h1>
</header>
<!-- music player -->
<section class="row">
<!-- no javascript warning -->
<noscript class="card">Woah there, lassy! You will need to enable Javascript to use this page!</noscript>
<!-- left album stuff -->
<article class="col-sm-5 col-xs-12">
<div class="thumbnail shadow-1">
<img id="album-artwork" class="image-responsive album-art" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
<div class="caption">
<h3 id="album-title">{{ albums[0].title }}</h3>
<h5 id="album-release">Released on <span>{{ albums[0].releaseDate }}</span></h5>
{% if albums[0].description %}
<hr />
<p id="album-description">{{ albums[0].description }}</p>
{% endif %}
{% if links %}
<hr />
<ul style="padding-left:20px">
{% for link in links %}
<li>Buy on <a href="{{ link.link_ref }}">{{ link.link_name }}</a></li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</article>
<!-- right album stuff -->
<div class="col-sm-7 col-xs-12">
<article id="music-player-card" class="card">
<h4 id="track-title">{{ songs[0].title }}</h4>
<audio id="music-player" controls>
<source src="{{ songs[0].audio_file }}.ogg" type="audio/ogg" />
<source src="{{ songs[0].audio_file }}.mp3" type="audio/mpeg" />
</audio>
</article>
<article class="card">
<ul class="now-playing-list">
{% for song in songs %}
<li class="music-track {% if loop.index0 == 0 %}selected{% endif %}" data-trackid="{{ song.id }}" data-title="{{ song.title }}" data-album="{{ song.album_id }}" data-order="{{ song.track_order }}" data-path="{{ song.audio_file }}">
<span>{{ song.track_order }}. {{ song.title }}</span>
</li>
{% endfor %}
</ul>
</article>
</div>
</section>
<!-- available albums -->
<section class="row">
{% for album in albums %}
<!-- album details -->
<div class="music-album {% if loop.index0 == 0 %}selected{% endif %} col-sm-3 col-xs-6" data-albumid="{{ album.id }}">
<div class="thumbnail shadow-1">
<img class="album-art" src="{{ album.album_art }}" alt="{{ album.title }}">
<div class="caption">
<h5>{{ album.title }} ({{ album.releaseYear }})</h5>
{% if album.description %}
<hr />
<p id="album-description">{{ album.description|length > 50 ? album.description[:50] ~ '...' : album.description }}</p>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</section>
{% endblock %}
+55
View File
@@ -0,0 +1,55 @@
{% extends 'templates/default.twig' %}
{% block title %}Show Schedule{% endblock %}
{% block content %}
<header class="shows-header row">
<h3>Upcoming Tour Dates</h3>
</header>
<div class="table-responsive">
<table id="shows-table" class="table">
<tbody>
{% for show in shows %}
<tr>
<td>
<p>{{ show.date }}</p>
<p>{{ show.day }}</p>
</td>
<td>
<p>{{ show.time }}</p>
</td>
<td>
<p><a href="{{ show.facebook_rsvp_url }}" class="change-on-hover">{{ show.venue.name }}</a></p>
<p>
{% if shows.artists.length > 1 %}
w/
{% for artist in show.artists %}
{% if not artist.name == 'HALFtone' %}
<a href="" class="change-on-hover">{{ artist.name }}</a>
{% endif %}
{% endfor %}
{% else %}
{{ show.description[:60] }}
{% endif %}
</p>
</td>
<td>
<p><a href="https://bandsintown.com/cities/{{show.venue.city}}-{{ show.venue.region }}" class="change-on-hover">{{ show.venue.city }}, {{ show.venue.region }}</a></p>
</td>
<td>
{% if show.ticket_url %}
<p><a href="{{ show.ticket_url }}" class="change-on-hover">Tickets</a></p>
{% endif %}
</td>
<td>
<p><a href="{{ show.facebook_rsvp_url }}" class="change-on-hover">RSVP</a></p>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!--<script type="text/javascript" src="/js/bit.js"></script>-->
{% endblock %}
+30
View File
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>{% block title %}{% endblock %} | Halftone</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelementplayer.min.css">
<link rel="stylesheet" href="/css/main.css" media="screen,projection"/>
{% block stylesheets %}{% endblock %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelement-and-player.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
{% block javascripts %}{% endblock %}
</head>
<body>
<div id="wrapper">
<div class="container">
{% include 'templates/partials/header.twig' %}
{% block content %}{% endblock %}
</div>
</div>
{% include 'templates/partials/footer.twig' %}
</body>
</html>
+27
View File
@@ -0,0 +1,27 @@
<footer id="footer" class="row">
<div class="col-sm-3 column-info">
<p>FIND US ON</p>
<ul>
<li><a href="https://twitter.com/HalftoneBand">Twitter</a></li>
<li><a href="https://www.facebook.com/HalftoneBand">Facebook</a></li>
<li><a href="https://instagram.com/halftoneband/">Instagram</a></li>
<li><a href="https://plus.google.com/+HalftoneBand">Google+</a></li>
<li><a href="https://www.youtube.com/c/HalftoneBand">Youtube</a></li>
<li><a href="https://soundcloud.com/halftoneband">SoundCloud</a></li>
</ul>
</div>
<div class="col-sm-6 copyright">
<p>© 2015 Halftone</p>
<p>Glen Burnie Maryland's unapologetic, high energy rock band</p>
<hr />
<p>Brought to you by our lovely Greg Ballantine</p>
</div>
<div class="col-sm-3 column-info">
<p>ENDORSED BY</p>
<ul>
<li><a href="http://www.drstrings.com/">DR Strings</a></li>
</ul>
</div>
</footer>
+40
View File
@@ -0,0 +1,40 @@
<!-- header -->
<header id="header" class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8 col-xs-12">
<img class="band-logo" src="/img/logo-white.png" />
</div>
<div class="col-sm-2"></div>
</header>
<!-- nav bar -->
<nav id="nav" class="navbar" class="row">
<div class="container-fluid">
<div class="navbar-header">
<button id="navbar-collapse-button" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav_item">
<a href="{{ urlFor('home') }}">Home</a>
</li>
<li class="nav_item">
<a href="{{ urlFor('about') }}">About</a>
</li>
<li class="nav_item">
<a href="{{ urlFor('shows') }}">Shows</a>
</li>
<li class="nav_item">
<a href="{{ urlFor('music') }}">Music</a>
</li>
<li class="nav_item">
<a href="{{ urlFor('contact') }}">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
+9
View File
@@ -0,0 +1,9 @@
$ ->
$.get 'https://api.bandsintown.com/artists/Skrillex/events.json?', {
'api_version': '2.0'
'app_id': 'shows_halftoneband.com'
}, (data) ->
alert data
return
return
+2
View File
@@ -0,0 +1,2 @@
$(document).ready ->
console.log 'Hey there, lad!'
+16
View File
@@ -0,0 +1,16 @@
(($) ->
$.fn.alert = ->
@each ->
self = $(this)
self.on 'click', '.close-button', (e) ->
e.preventDefault()
self.addClass 'close'
return
self.on 'transitionEnd webkitTransitionEnd oTransitionEnd', ->
self.remove()
return
return
return
) jQuery
+20
View File
@@ -0,0 +1,20 @@
$ ->
awesomeInput = '.awesome-form .input-group input'
checkInput = (elem) ->
text_val = $(elem).val()
if text_val == ''
$(elem).removeClass 'has-value'
else
$(elem).addClass 'has-value'
return
$(awesomeInput).focusout ->
checkInput(@)
return
$(awesomeInput).on 'change', ->
checkInput(@)
return
return
+402
View File
@@ -0,0 +1,402 @@
// The following features have been deprecated and will be removed in the next MAJOR version release
@mixin inline-block {
display: inline-block;
@warn "The inline-block mixin is deprecated and will be removed in the next major version release";
}
@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
@if type-of($style) == string and type-of($base-color) == color {
@include buttonstyle($style, $base-color, $text-size, $padding);
}
@if type-of($style) == string and type-of($base-color) == number {
$padding: $text-size;
$text-size: $base-color;
$base-color: #4294f0;
@if $padding == inherit {
$padding: 7px 18px;
}
@include buttonstyle($style, $base-color, $text-size, $padding);
}
@if type-of($style) == color and type-of($base-color) == color {
$base-color: $style;
$style: simple;
@include buttonstyle($style, $base-color, $text-size, $padding);
}
@if type-of($style) == color and type-of($base-color) == number {
$padding: $text-size;
$text-size: $base-color;
$base-color: $style;
$style: simple;
@if $padding == inherit {
$padding: 7px 18px;
}
@include buttonstyle($style, $base-color, $text-size, $padding);
}
@if type-of($style) == number {
$padding: $base-color;
$text-size: $style;
$base-color: #4294f0;
$style: simple;
@if $padding == #4294f0 {
$padding: 7px 18px;
}
@include buttonstyle($style, $base-color, $text-size, $padding);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@warn "The button mixin is deprecated and will be removed in the next major version release";
}
// Selector Style Button
@mixin buttonstyle($type, $b-color, $t-size, $pad) {
// Grayscale button
@if $type == simple and $b-color == grayscale($b-color) {
@include simple($b-color, true, $t-size, $pad);
}
@if $type == shiny and $b-color == grayscale($b-color) {
@include shiny($b-color, true, $t-size, $pad);
}
@if $type == pill and $b-color == grayscale($b-color) {
@include pill($b-color, true, $t-size, $pad);
}
@if $type == flat and $b-color == grayscale($b-color) {
@include flat($b-color, true, $t-size, $pad);
}
// Colored button
@if $type == simple {
@include simple($b-color, false, $t-size, $pad);
}
@else if $type == shiny {
@include shiny($b-color, false, $t-size, $pad);
}
@else if $type == pill {
@include pill($b-color, false, $t-size, $pad);
}
@else if $type == flat {
@include flat($b-color, false, $t-size, $pad);
}
}
// Simple Button
@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$color: hsl(0, 0, 100%);
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
@if is-light($base-color) {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
@if $grayscale == true {
$border: grayscale($border);
$inset-shadow: grayscale($inset-shadow);
$stop-gradient: grayscale($stop-gradient);
$text-shadow: grayscale($text-shadow);
}
border: 1px solid $border;
border-radius: 3px;
box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color;
display: inline-block;
font-size: $textsize;
font-weight: bold;
@include linear-gradient ($base-color, $stop-gradient);
padding: $padding;
text-decoration: none;
text-shadow: 0 1px 0 $text-shadow;
background-clip: padding-box;
&:hover:not(:disabled) {
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
@if $grayscale == true {
$base-color-hover: grayscale($base-color-hover);
$inset-shadow-hover: grayscale($inset-shadow-hover);
$stop-gradient-hover: grayscale($stop-gradient-hover);
}
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
cursor: pointer;
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
}
&:active:not(:disabled),
&:focus:not(:disabled) {
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
@if $grayscale == true {
$border-active: grayscale($border-active);
$inset-shadow-active: grayscale($inset-shadow-active);
}
border: 1px solid $border-active;
box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
}
}
// Shiny Button
@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$color: hsl(0, 0, 100%);
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
@if is-light($base-color) {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
@if $grayscale == true {
$border: grayscale($border);
$border-bottom: grayscale($border-bottom);
$fourth-stop: grayscale($fourth-stop);
$inset-shadow: grayscale($inset-shadow);
$second-stop: grayscale($second-stop);
$text-shadow: grayscale($text-shadow);
$third-stop: grayscale($third-stop);
}
border: 1px solid $border;
border-bottom: 1px solid $border-bottom;
border-radius: 5px;
box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color;
display: inline-block;
font-size: $textsize;
font-weight: bold;
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
padding: $padding;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
&:hover:not(:disabled) {
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
@if $grayscale == true {
$first-stop-hover: grayscale($first-stop-hover);
$second-stop-hover: grayscale($second-stop-hover);
$third-stop-hover: grayscale($third-stop-hover);
$fourth-stop-hover: grayscale($fourth-stop-hover);
}
cursor: pointer;
@include linear-gradient(top, $first-stop-hover 0%,
$second-stop-hover 50%,
$third-stop-hover 50%,
$fourth-stop-hover 100%);
}
&:active:not(:disabled),
&:focus:not(:disabled) {
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
@if $grayscale == true {
$inset-shadow-active: grayscale($inset-shadow-active);
}
box-shadow: inset 0 0 20px 0 $inset-shadow-active;
}
}
// Pill Button
@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$color: hsl(0, 0, 100%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
@if is-light($base-color) {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
@if $grayscale == true {
$border-bottom: grayscale($border-bottom);
$border-sides: grayscale($border-sides);
$border-top: grayscale($border-top);
$inset-shadow: grayscale($inset-shadow);
$stop-gradient: grayscale($stop-gradient);
$text-shadow: grayscale($text-shadow);
}
border: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom;
border-radius: 16px;
box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color;
display: inline-block;
font-size: $textsize;
font-weight: normal;
line-height: 1;
@include linear-gradient ($base-color, $stop-gradient);
padding: $padding;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
background-clip: padding-box;
&:hover:not(:disabled) {
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
@if $grayscale == true {
$base-color-hover: grayscale($base-color-hover);
$border-bottom: grayscale($border-bottom);
$border-sides: grayscale($border-sides);
$border-top: grayscale($border-top);
$inset-shadow-hover: grayscale($inset-shadow-hover);
$stop-gradient-hover: grayscale($stop-gradient-hover);
$text-shadow-hover: grayscale($text-shadow-hover);
}
border: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom;
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
cursor: pointer;
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
text-shadow: 0 -1px 1px $text-shadow-hover;
background-clip: padding-box;
}
&:active:not(:disabled),
&:focus:not(:disabled) {
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
@if $grayscale == true {
$active-color: grayscale($active-color);
$border-active: grayscale($border-active);
$border-bottom-active: grayscale($border-bottom-active);
$inset-shadow-active: grayscale($inset-shadow-active);
$text-shadow-active: grayscale($text-shadow-active);
}
background: $active-color;
border: 1px solid $border-active;
border-bottom: 1px solid $border-bottom-active;
box-shadow: inset 0 0 6px 3px $inset-shadow-active;
text-shadow: 0 -1px 1px $text-shadow-active;
}
}
// Flat Button
@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$color: hsl(0, 0, 100%);
@if is-light($base-color) {
$color: hsl(0, 0, 20%);
}
background-color: $base-color;
border-radius: 3px;
border: none;
color: $color;
display: inline-block;
font-size: $textsize;
font-weight: bold;
padding: $padding;
text-decoration: none;
background-clip: padding-box;
&:hover:not(:disabled){
$base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
@if $grayscale == true {
$base-color-hover: grayscale($base-color-hover);
}
background-color: $base-color-hover;
cursor: pointer;
}
&:active:not(:disabled),
&:focus:not(:disabled) {
$base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
@if $grayscale == true {
$base-color-active: grayscale($base-color-active);
}
background-color: $base-color-active;
cursor: pointer;
}
}
// Flexible grid
@function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($width / $container-width);
@warn "The flex-grid function is deprecated and will be removed in the next major version release";
}
// Flexible gutter
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($gutter / $container-width);
@warn "The flex-gutter function is deprecated and will be removed in the next major version release";
}
@function grid-width($n) {
@return $n * $gw-column + ($n - 1) * $gw-gutter;
@warn "The grid-width function is deprecated and will be removed in the next major version release";
}
@function golden-ratio($value, $increment) {
@return modular-scale($increment, $value, $ratio: $golden);
@warn "The golden-ratio function is deprecated and will be removed in the next major version release. Please use the modular-scale function, instead.";
}
+86
View File
@@ -0,0 +1,86 @@
// Bourbon 4.1.1
// http://bourbon.io
// Copyright 2011-2015 thoughtbot, inc.
// MIT License
// Settings
@import "settings/prefixer";
@import "settings/px-to-em";
@import "settings/asset-pipeline";
// Custom Helpers
@import "helpers/convert-units";
@import "helpers/font-source-declaration";
@import "helpers/gradient-positions-parser";
@import "helpers/is-num";
@import "helpers/linear-angle-parser";
@import "helpers/linear-gradient-parser";
@import "helpers/linear-positions-parser";
@import "helpers/linear-side-corner-parser";
@import "helpers/radial-arg-parser";
@import "helpers/radial-positions-parser";
@import "helpers/radial-gradient-parser";
@import "helpers/render-gradients";
@import "helpers/shape-size-stripper";
@import "helpers/str-to-num";
// Custom Functions
@import "functions/assign";
@import "functions/color-lightness";
@import "functions/contains";
@import "functions/is-length";
@import "functions/is-size";
@import "functions/px-to-em";
@import "functions/px-to-rem";
@import "functions/strip-units";
@import "functions/tint-shade";
@import "functions/transition-property-name";
@import "functions/unpack";
@import "functions/modular-scale";
// CSS3 Mixins
@import "css3/animation";
@import "css3/appearance";
@import "css3/backface-visibility";
@import "css3/background";
@import "css3/background-image";
@import "css3/border-image";
@import "css3/border-radius";
@import "css3/box-sizing";
@import "css3/calc";
@import "css3/columns";
@import "css3/filter";
@import "css3/flex-box";
@import "css3/font-face";
@import "css3/font-feature-settings";
@import "css3/hidpi-media-query";
@import "css3/hyphens";
@import "css3/image-rendering";
@import "css3/keyframes";
@import "css3/linear-gradient";
@import "css3/perspective";
@import "css3/placeholder";
@import "css3/radial-gradient";
@import "css3/selection";
@import "css3/text-decoration";
@import "css3/transform";
@import "css3/transition";
@import "css3/user-select";
// Addons & other mixins
@import "addons/clearfix";
@import "addons/directional-values";
@import "addons/ellipsis";
@import "addons/font-family";
@import "addons/hide-text";
@import "addons/html5-input-types";
@import "addons/position";
@import "addons/prefixer";
@import "addons/retina-image";
@import "addons/size";
@import "addons/timing-functions";
@import "addons/triangle";
@import "addons/word-wrap";
// Soon to be deprecated Mixins
@import "bourbon-deprecated-upcoming";
+18
View File
@@ -0,0 +1,18 @@
// The clearfix mixin provides an easy way to contain floats
//
// Example usage:
// .wrapper {
// @include clearfix;
// }
@mixin clearfix {
&::after {
clear: both;
content: "";
display: table;
}
}
// Acknowledgements:
// Thierry Koblentz, cssmojo
// http://goo.gl/AQWvyH
+111
View File
@@ -0,0 +1,111 @@
// directional-property mixins are shorthands
// for writing properties like the following
//
// @include margin(null 0 10px);
// ------
// margin-right: 0;
// margin-bottom: 10px;
// margin-left: 0;
//
// - or -
//
// @include border-style(dotted null);
// ------
// border-top-style: dotted;
// border-bottom-style: dotted;
//
// ------
//
// Note: You can also use false instead of null
@function collapse-directionals($vals) {
$output: null;
$A: nth( $vals, 1 );
$B: if( length($vals) < 2, $A, nth($vals, 2));
$C: if( length($vals) < 3, $A, nth($vals, 3));
$D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) ));
@if $A == 0 { $A: 0 }
@if $B == 0 { $B: 0 }
@if $C == 0 { $C: 0 }
@if $D == 0 { $D: 0 }
@if $A == $B and $A == $C and $A == $D { $output: $A }
@else if $A == $C and $B == $D { $output: $A $B }
@else if $B == $D { $output: $A $B $C }
@else { $output: $A $B $C $D }
@return $output;
}
@function contains-falsy($list) {
@each $item in $list {
@if not $item {
@return true;
}
}
@return false;
}
@mixin directional-property($pre, $suf, $vals) {
// Property Names
$top: $pre + "-top" + if($suf, "-#{$suf}", "");
$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
$left: $pre + "-left" + if($suf, "-#{$suf}", "");
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
$all: $pre + if($suf, "-#{$suf}", "");
$vals: collapse-directionals($vals);
@if contains-falsy($vals) {
@if nth($vals, 1) { #{$top}: nth($vals, 1); }
@if length($vals) == 1 {
@if nth($vals, 1) { #{$right}: nth($vals, 1); }
} @else {
@if nth($vals, 2) { #{$right}: nth($vals, 2); }
}
// prop: top/bottom right/left
@if length($vals) == 2 {
@if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
// prop: top right/left bottom
} @else if length($vals) == 3 {
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
// prop: top right bottom left
} @else if length($vals) == 4 {
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
@if nth($vals, 4) { #{$left}: nth($vals, 4); }
}
// prop: top/right/bottom/left
} @else {
#{$all}: $vals;
}
}
@mixin margin($vals...) {
@include directional-property(margin, false, $vals...);
}
@mixin padding($vals...) {
@include directional-property(padding, false, $vals...);
}
@mixin border-style($vals...) {
@include directional-property(border, style, $vals...);
}
@mixin border-color($vals...) {
@include directional-property(border, color, $vals...);
}
@mixin border-width($vals...) {
@include directional-property(border, width, $vals...);
}
+8
View File
@@ -0,0 +1,8 @@
@mixin ellipsis($width: 100%) {
display: inline-block;
max-width: $width;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
+5
View File
@@ -0,0 +1,5 @@
$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;
$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
$lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
$monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
$verdana: "Verdana", "Geneva", sans-serif;
+12
View File
@@ -0,0 +1,12 @@
@mixin hide-text($height: 1em) {
height: $height;
line-height: 1.5;
overflow: hidden;
&::before {
content: "";
display: block;
width: 0;
height: 100%;
}
}
+90
View File
@@ -0,0 +1,90 @@
//************************************************************************//
// Generate a variable ($all-text-inputs) with a list of all html5
// input types that have a text-based input, excluding textarea.
// http://diveintohtml5.org/forms.html
//************************************************************************//
$inputs-list: 'input[type="email"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="url"]',
// Webkit & Gecko may change the display of these in the future
'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="month"]',
'input[type="time"]',
'input[type="week"]';
// Bare inputs
//************************************************************************//
$all-text-inputs: assign-inputs($inputs-list);
// Hover Pseudo-class
//************************************************************************//
$all-text-inputs-hover: assign-inputs($inputs-list, hover);
// Focus Pseudo-class
//************************************************************************//
$all-text-inputs-focus: assign-inputs($inputs-list, focus);
// Active Pseudo-class
//************************************************************************//
$all-text-inputs-active: assign-inputs($inputs-list, active);
// You must use interpolation on the variable:
// #{$all-text-inputs}
// #{$all-text-inputs-hover}
// #{$all-text-inputs-focus}
// #{$all-text-inputs-active}
// Example
//************************************************************************//
// #{$all-text-inputs}, textarea {
// border: 1px solid red;
// }
//************************************************************************//
// Generate a variable ($all-button-inputs) with a list of all html5
// input types that have a button-based input, excluding button.
//************************************************************************//
$inputs-button-list: 'input[type="button"]',
'input[type="reset"]',
'input[type="submit"]';
// Bare inputs
//************************************************************************//
$all-button-inputs: assign-inputs($inputs-button-list);
// Hover Pseudo-class
//************************************************************************//
$all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
// Focus Pseudo-class
//************************************************************************//
$all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
// Active Pseudo-class
//************************************************************************//
$all-button-inputs-active: assign-inputs($inputs-button-list, active);
// You must use interpolation on the variable:
// #{$all-button-inputs}
// #{$all-button-inputs-hover}
// #{$all-button-inputs-focus}
// #{$all-button-inputs-active}
// Example
//************************************************************************//
// #{$all-button-inputs}, button {
// border: 1px solid red;
// }
+26
View File
@@ -0,0 +1,26 @@
// Set element positioning in a single statement
@mixin position($position: relative, $coordinates: null null null null) {
@if type-of($position) == list {
$coordinates: $position;
$position: relative;
}
$coordinates: unpack($coordinates);
$offsets: (
top: nth($coordinates, 1),
right: nth($coordinates, 2),
bottom: nth($coordinates, 3),
left: nth($coordinates, 4)
);
position: $position;
@each $offset, $value in $offsets {
@if is-length($value) {
#{$offset}: $value;
}
}
}
+45
View File
@@ -0,0 +1,45 @@
//************************************************************************//
// Example: @include prefixer(border-radius, $radii, webkit ms spec);
//************************************************************************//
// Variables located in /settings/_prefixer.scss
@mixin prefixer ($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if $prefix == webkit {
@if $prefix-for-webkit {
-webkit-#{$property}: $value;
}
}
@else if $prefix == moz {
@if $prefix-for-mozilla {
-moz-#{$property}: $value;
}
}
@else if $prefix == ms {
@if $prefix-for-microsoft {
-ms-#{$property}: $value;
}
}
@else if $prefix == o {
@if $prefix-for-opera {
-o-#{$property}: $value;
}
}
@else if $prefix == spec {
@if $prefix-for-spec {
#{$property}: $value;
}
}
@else {
@warn "Unrecognized prefix: #{$prefix}";
}
}
}
@mixin disable-prefix-for-all() {
$prefix-for-webkit: false !global;
$prefix-for-mozilla: false !global;
$prefix-for-microsoft: false !global;
$prefix-for-opera: false !global;
$prefix-for-spec: false !global;
}
+31
View File
@@ -0,0 +1,31 @@
@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
@if $asset-pipeline {
background-image: image-url("#{$filename}.#{$extension}");
}
@else {
background-image: url("#{$filename}.#{$extension}");
}
@include hidpi {
@if $asset-pipeline {
@if $retina-filename {
background-image: image-url("#{$retina-filename}.#{$extension}");
}
@else {
background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
}
}
@else {
@if $retina-filename {
background-image: url("#{$retina-filename}.#{$extension}");
}
@else {
background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
}
}
background-size: $background-size;
}
}
+26
View File
@@ -0,0 +1,26 @@
// Set `width` and `height` in a single statement
@mixin size($value) {
$width: nth($value, 1);
$height: $width;
@if length($value) > 1 {
$height: nth($value, 2);
}
@if is-size($height) {
height: $height;
}
@else {
@warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
}
@if is-size($width) {
width: $width;
}
@else {
@warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
}
}
+32
View File
@@ -0,0 +1,32 @@
// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
// Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html
// EASE IN
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
// EASE OUT
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
// EASE IN OUT
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
+83
View File
@@ -0,0 +1,83 @@
@mixin triangle ($size, $color, $direction) {
height: 0;
width: 0;
$width: nth($size, 1);
$height: nth($size, length($size));
$foreground-color: nth($color, 1);
$background-color: if(length($color) == 2, nth($color, 2), transparent);
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
$width: $width / 2;
$height: if(length($size) > 1, $height, $height/2);
@if $direction == up {
border-left: $width solid $background-color;
border-right: $width solid $background-color;
border-bottom: $height solid $foreground-color;
} @else if $direction == right {
border-top: $width solid $background-color;
border-bottom: $width solid $background-color;
border-left: $height solid $foreground-color;
} @else if $direction == down {
border-left: $width solid $background-color;
border-right: $width solid $background-color;
border-top: $height solid $foreground-color;
} @else if $direction == left {
border-top: $width solid $background-color;
border-bottom: $width solid $background-color;
border-right: $height solid $foreground-color;
}
}
@else if ($direction == up-right) or ($direction == up-left) {
border-top: $height solid $foreground-color;
@if $direction == up-right {
border-left: $width solid $background-color;
} @else if $direction == up-left {
border-right: $width solid $background-color;
}
}
@else if ($direction == down-right) or ($direction == down-left) {
border-bottom: $height solid $foreground-color;
@if $direction == down-right {
border-left: $width solid $background-color;
} @else if $direction == down-left {
border-right: $width solid $background-color;
}
}
@else if ($direction == inset-up) {
border-width: $height $width;
border-style: solid;
border-color: $background-color $background-color $foreground-color;
}
@else if ($direction == inset-down) {
border-width: $height $width;
border-style: solid;
border-color: $foreground-color $background-color $background-color;
}
@else if ($direction == inset-right) {
border-width: $width $height;
border-style: solid;
border-color: $background-color $background-color $background-color $foreground-color;
}
@else if ($direction == inset-left) {
border-width: $width $height;
border-style: solid;
border-color: $background-color $foreground-color $background-color $background-color;
}
}
+10
View File
@@ -0,0 +1,10 @@
@mixin word-wrap($wrap: break-word) {
overflow-wrap: $wrap;
word-wrap: $wrap;
@if $wrap == break-word {
word-break: break-all;
} @else {
word-break: $wrap;
}
}
+52
View File
@@ -0,0 +1,52 @@
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
// Official animation shorthand property.
@mixin animation ($animations...) {
@include prefixer(animation, $animations, webkit moz spec);
}
// Individual Animation Properties
@mixin animation-name ($names...) {
@include prefixer(animation-name, $names, webkit moz spec);
}
@mixin animation-duration ($times...) {
@include prefixer(animation-duration, $times, webkit moz spec);
}
@mixin animation-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out
@include prefixer(animation-timing-function, $motions, webkit moz spec);
}
@mixin animation-iteration-count ($values...) {
// infinite | <number>
@include prefixer(animation-iteration-count, $values, webkit moz spec);
}
@mixin animation-direction ($directions...) {
// normal | alternate
@include prefixer(animation-direction, $directions, webkit moz spec);
}
@mixin animation-play-state ($states...) {
// running | paused
@include prefixer(animation-play-state, $states, webkit moz spec);
}
@mixin animation-delay ($times...) {
@include prefixer(animation-delay, $times, webkit moz spec);
}
@mixin animation-fill-mode ($modes...) {
// none | forwards | backwards | both
@include prefixer(animation-fill-mode, $modes, webkit moz spec);
}
+3
View File
@@ -0,0 +1,3 @@
@mixin appearance ($value) {
@include prefixer(appearance, $value, webkit moz ms o spec);
}
+6
View File
@@ -0,0 +1,6 @@
//************************************************************************//
// Backface-visibility mixin
//************************************************************************//
@mixin backface-visibility($visibility) {
@include prefixer(backface-visibility, $visibility, webkit spec);
}
+42
View File
@@ -0,0 +1,42 @@
//************************************************************************//
// Background-image property for adding multiple background images with
// gradients, or for stringing multiple gradients together.
//************************************************************************//
@mixin background-image($images...) {
$webkit-images: ();
$spec-images: ();
@each $image in $images {
$webkit-image: ();
$spec-image: ();
@if (type-of($image) == string) {
$url-str: str-slice($image, 0, 3);
$gradient-type: str-slice($image, 0, 6);
@if $url-str == "url" {
$webkit-image: $image;
$spec-image: $image;
}
@else if $gradient-type == "linear" {
$gradients: _linear-gradient-parser($image);
$webkit-image: map-get($gradients, webkit-image);
$spec-image: map-get($gradients, spec-image);
}
@else if $gradient-type == "radial" {
$gradients: _radial-gradient-parser($image);
$webkit-image: map-get($gradients, webkit-image);
$spec-image: map-get($gradients, spec-image);
}
}
$webkit-images: append($webkit-images, $webkit-image, comma);
$spec-images: append($spec-images, $spec-image, comma);
}
background-image: $webkit-images;
background-image: $spec-images;
}
+55
View File
@@ -0,0 +1,55 @@
//************************************************************************//
// Background property for adding multiple backgrounds using shorthand
// notation.
//************************************************************************//
@mixin background($backgrounds...) {
$webkit-backgrounds: ();
$spec-backgrounds: ();
@each $background in $backgrounds {
$webkit-background: ();
$spec-background: ();
$background-type: type-of($background);
@if $background-type == string or $background-type == list {
$background-str: if($background-type == list, nth($background, 1), $background);
$url-str: str-slice($background-str, 0, 3);
$gradient-type: str-slice($background-str, 0, 6);
@if $url-str == "url" {
$webkit-background: $background;
$spec-background: $background;
}
@else if $gradient-type == "linear" {
$gradients: _linear-gradient-parser("#{$background}");
$webkit-background: map-get($gradients, webkit-image);
$spec-background: map-get($gradients, spec-image);
}
@else if $gradient-type == "radial" {
$gradients: _radial-gradient-parser("#{$background}");
$webkit-background: map-get($gradients, webkit-image);
$spec-background: map-get($gradients, spec-image);
}
@else {
$webkit-background: $background;
$spec-background: $background;
}
}
@else {
$webkit-background: $background;
$spec-background: $background;
}
$webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
$spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
}
background: $webkit-backgrounds;
background: $spec-backgrounds;
}
+59
View File
@@ -0,0 +1,59 @@
@mixin border-image($borders...) {
$webkit-borders: ();
$spec-borders: ();
@each $border in $borders {
$webkit-border: ();
$spec-border: ();
$border-type: type-of($border);
@if $border-type == string or list {
$border-str: if($border-type == list, nth($border, 1), $border);
$url-str: str-slice($border-str, 0, 3);
$gradient-type: str-slice($border-str, 0, 6);
@if $url-str == "url" {
$webkit-border: $border;
$spec-border: $border;
}
@else if $gradient-type == "linear" {
$gradients: _linear-gradient-parser("#{$border}");
$webkit-border: map-get($gradients, webkit-image);
$spec-border: map-get($gradients, spec-image);
}
@else if $gradient-type == "radial" {
$gradients: _radial-gradient-parser("#{$border}");
$webkit-border: map-get($gradients, webkit-image);
$spec-border: map-get($gradients, spec-image);
}
@else {
$webkit-border: $border;
$spec-border: $border;
}
}
@else {
$webkit-border: $border;
$spec-border: $border;
}
$webkit-borders: append($webkit-borders, $webkit-border, comma);
$spec-borders: append($spec-borders, $spec-border, comma);
}
-webkit-border-image: $webkit-borders;
border-image: $spec-borders;
border-style: solid;
}
//Examples:
// @include border-image(url("image.png"));
// @include border-image(url("image.png") 20 stretch);
// @include border-image(linear-gradient(45deg, orange, yellow));
// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
+22
View File
@@ -0,0 +1,22 @@
// Border Radius (Shorthand)
// Provides a shorthand syntax to target and add border radii to both corners on one side of a box
@mixin border-top-radius($radii) {
border-top-left-radius: $radii;
border-top-right-radius: $radii;
}
@mixin border-right-radius($radii) {
border-bottom-right-radius: $radii;
border-top-right-radius: $radii;
}
@mixin border-bottom-radius($radii) {
border-bottom-left-radius: $radii;
border-bottom-right-radius: $radii;
}
@mixin border-left-radius($radii) {
border-bottom-left-radius: $radii;
border-top-left-radius: $radii;
}
+4
View File
@@ -0,0 +1,4 @@
@mixin box-sizing ($box) {
// content-box | border-box | inherit
@include prefixer(box-sizing, $box, webkit moz spec);
}
+4
View File
@@ -0,0 +1,4 @@
@mixin calc($property, $value) {
#{$property}: -webkit-calc(#{$value});
#{$property}: calc(#{$value});
}
+47
View File
@@ -0,0 +1,47 @@
@mixin columns($arg: auto) {
// <column-count> || <column-width>
@include prefixer(columns, $arg, webkit moz spec);
}
@mixin column-count($int: auto) {
// auto || integer
@include prefixer(column-count, $int, webkit moz spec);
}
@mixin column-gap($length: normal) {
// normal || length
@include prefixer(column-gap, $length, webkit moz spec);
}
@mixin column-fill($arg: auto) {
// auto || length
@include prefixer(column-fill, $arg, webkit moz spec);
}
@mixin column-rule($arg) {
// <border-width> || <border-style> || <color>
@include prefixer(column-rule, $arg, webkit moz spec);
}
@mixin column-rule-color($color) {
@include prefixer(column-rule-color, $color, webkit moz spec);
}
@mixin column-rule-style($style: none) {
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
@include prefixer(column-rule-style, $style, webkit moz spec);
}
@mixin column-rule-width ($width: none) {
@include prefixer(column-rule-width, $width, webkit moz spec);
}
@mixin column-span($arg: none) {
// none || all
@include prefixer(column-span, $arg, webkit moz spec);
}
@mixin column-width($length: auto) {
// auto || length
@include prefixer(column-width, $length, webkit moz spec);
}
+5
View File
@@ -0,0 +1,5 @@
@mixin filter($function: none) {
// <filter-function> [<filter-function]* | none
@include prefixer(filter, $function, webkit spec);
}
+320
View File
@@ -0,0 +1,320 @@
// CSS3 Flexible Box Model and property defaults
// Custom shorthand notation for flexbox
@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
@include display-box;
@include box-orient($orient);
@include box-pack($pack);
@include box-align($align);
}
@mixin display-box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox; // IE 10
display: box;
}
@mixin box-orient($orient: inline-axis) {
// horizontal|vertical|inline-axis|block-axis|inherit
@include prefixer(box-orient, $orient, webkit moz spec);
}
@mixin box-pack($pack: start) {
// start|end|center|justify
@include prefixer(box-pack, $pack, webkit moz spec);
-ms-flex-pack: $pack; // IE 10
}
@mixin box-align($align: stretch) {
// start|end|center|baseline|stretch
@include prefixer(box-align, $align, webkit moz spec);
-ms-flex-align: $align; // IE 10
}
@mixin box-direction($direction: normal) {
// normal|reverse|inherit
@include prefixer(box-direction, $direction, webkit moz spec);
-ms-flex-direction: $direction; // IE 10
}
@mixin box-lines($lines: single) {
// single|multiple
@include prefixer(box-lines, $lines, webkit moz spec);
}
@mixin box-ordinal-group($int: 1) {
@include prefixer(box-ordinal-group, $int, webkit moz spec);
-ms-flex-order: $int; // IE 10
}
@mixin box-flex($value: 0.0) {
@include prefixer(box-flex, $value, webkit moz spec);
-ms-flex: $value; // IE 10
}
@mixin box-flex-group($int: 1) {
@include prefixer(box-flex-group, $int, webkit moz spec);
}
// CSS3 Flexible Box Model and property defaults
// Unified attributes for 2009, 2011, and 2012 flavours.
// 2009 - display (box | inline-box)
// 2011 - display (flexbox | inline-flexbox)
// 2012 - display (flex | inline-flex)
@mixin display($value) {
// flex | inline-flex
@if $value == "flex" {
// 2009
display: -webkit-box;
display: -moz-box;
display: box;
// 2012
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox; // 2011 (IE 10)
display: flex;
}
@else if $value == "inline-flex" {
display: -webkit-inline-box;
display: -moz-inline-box;
display: inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
@else {
display: $value;
}
}
// 2009 - box-flex (integer)
// 2011 - flex (decimal | width decimal)
// 2012 - flex (integer integer width)
@mixin flex($value) {
// Grab flex-grow for older browsers.
$flex-grow: nth($value, 1);
// 2009
@include prefixer(box-flex, $flex-grow, webkit moz spec);
// 2011 (IE 10), 2012
@include prefixer(flex, $value, webkit moz ms spec);
}
// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
// - box-direction (normal | reverse)
// 2011 - flex-direction (row | row-reverse | column | column-reverse)
// 2012 - flex-direction (row | row-reverse | column | column-reverse)
@mixin flex-direction($value: row) {
// Alt values.
$value-2009: $value;
$value-2011: $value;
$direction: "normal";
@if $value == row {
$value-2009: horizontal;
}
@else if $value == "row-reverse" {
$value-2009: horizontal;
$direction: reverse;
}
@else if $value == column {
$value-2009: vertical;
}
@else if $value == "column-reverse" {
$value-2009: vertical;
$direction: reverse;
}
// 2009
@include prefixer(box-orient, $value-2009, webkit moz spec);
@if $direction == "reverse" {
@include prefixer(box-direction, $direction, webkit moz spec);
}
// 2012
@include prefixer(flex-direction, $value, webkit moz spec);
// 2011 (IE 10)
-ms-flex-direction: $value;
}
// 2009 - box-lines (single | multiple)
// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
@mixin flex-wrap($value: nowrap) {
// Alt values
$alt-value: $value;
@if $value == nowrap {
$alt-value: single;
}
@else if $value == wrap {
$alt-value: multiple;
}
@else if $value == "wrap-reverse" {
$alt-value: multiple;
}
@include prefixer(box-lines, $alt-value, webkit moz spec);
@include prefixer(flex-wrap, $value, webkit moz ms spec);
}
// 2009 - TODO: parse values into flex-direction/flex-wrap
// 2011 - TODO: parse values into flex-direction/flex-wrap
// 2012 - flex-flow (flex-direction || flex-wrap)
@mixin flex-flow($value) {
@include prefixer(flex-flow, $value, webkit moz spec);
}
// 2009 - box-ordinal-group (integer)
// 2011 - flex-order (integer)
// 2012 - order (integer)
@mixin order($int: 0) {
// 2009
@include prefixer(box-ordinal-group, $int, webkit moz spec);
// 2012
@include prefixer(order, $int, webkit moz spec);
// 2011 (IE 10)
-ms-flex-order: $int;
}
// 2012 - flex-grow (number)
@mixin flex-grow($number: 0) {
@include prefixer(flex-grow, $number, webkit moz spec);
-ms-flex-positive: $number;
}
// 2012 - flex-shrink (number)
@mixin flex-shrink($number: 1) {
@include prefixer(flex-shrink, $number, webkit moz spec);
-ms-flex-negative: $number;
}
// 2012 - flex-basis (number)
@mixin flex-basis($width: auto) {
@include prefixer(flex-basis, $width, webkit moz spec);
-ms-flex-preferred-size: $width;
}
// 2009 - box-pack (start | end | center | justify)
// 2011 - flex-pack (start | end | center | justify)
// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
@mixin justify-content($value: flex-start) {
// Alt values.
$alt-value: $value;
@if $value == "flex-start" {
$alt-value: start;
}
@else if $value == "flex-end" {
$alt-value: end;
}
@else if $value == "space-between" {
$alt-value: justify;
}
@else if $value == "space-around" {
$alt-value: distribute;
}
// 2009
@include prefixer(box-pack, $alt-value, webkit moz spec);
// 2012
@include prefixer(justify-content, $value, webkit moz ms o spec);
// 2011 (IE 10)
-ms-flex-pack: $alt-value;
}
// 2009 - box-align (start | end | center | baseline | stretch)
// 2011 - flex-align (start | end | center | baseline | stretch)
// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
@mixin align-items($value: stretch) {
$alt-value: $value;
@if $value == "flex-start" {
$alt-value: start;
}
@else if $value == "flex-end" {
$alt-value: end;
}
// 2009
@include prefixer(box-align, $alt-value, webkit moz spec);
// 2012
@include prefixer(align-items, $value, webkit moz ms o spec);
// 2011 (IE 10)
-ms-flex-align: $alt-value;
}
// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
@mixin align-self($value: auto) {
$value-2011: $value;
@if $value == "flex-start" {
$value-2011: start;
}
@else if $value == "flex-end" {
$value-2011: end;
}
// 2012
@include prefixer(align-self, $value, webkit moz spec);
// 2011 (IE 10)
-ms-flex-item-align: $value-2011;
}
// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
@mixin align-content($value: stretch) {
$value-2011: $value;
@if $value == "flex-start" {
$value-2011: start;
}
@else if $value == "flex-end" {
$value-2011: end;
}
@else if $value == "space-between" {
$value-2011: justify;
}
@else if $value == "space-around" {
$value-2011: distribute;
}
// 2012
@include prefixer(align-content, $value, webkit moz spec);
// 2011 (IE 10)
-ms-flex-line-pack: $value-2011;
}
+24
View File
@@ -0,0 +1,24 @@
@mixin font-face(
$font-family,
$file-path,
$weight: normal,
$style: normal,
$asset-pipeline: $asset-pipeline,
$file-formats: eot woff2 woff ttf svg) {
$font-url-prefix: font-url-prefixer($asset-pipeline);
@font-face {
font-family: $font-family;
font-style: $style;
font-weight: $weight;
src: font-source-declaration(
$font-family,
$file-path,
$asset-pipeline,
$file-formats,
$font-url-prefix
);
}
}
+10
View File
@@ -0,0 +1,10 @@
// Font feature settings mixin and property default.
// Examples: @include font-feature-settings("liga");
// @include font-feature-settings("lnum" false);
// @include font-feature-settings("pnum" 1, "kern" 0);
// @include font-feature-settings("ss01", "ss02");
@mixin font-feature-settings($settings...) {
@if length($settings) == 0 { $settings: none; }
@include prefixer(font-feature-settings, $settings, webkit moz ms spec);
}
+10
View File
@@ -0,0 +1,10 @@
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
@mixin hidpi($ratio: 1.3) {
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
only screen and (min--moz-device-pixel-ratio: $ratio),
only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
only screen and (min-resolution: round($ratio * 96dpi)),
only screen and (min-resolution: $ratio * 1dppx) {
@content;
}
}
+4
View File
@@ -0,0 +1,4 @@
@mixin hyphens($hyphenation: none) {
// none | manual | auto
@include prefixer(hyphens, $hyphenation, webkit moz ms spec);
}
+14
View File
@@ -0,0 +1,14 @@
@mixin image-rendering ($mode:auto) {
@if ($mode == crisp-edges) {
-ms-interpolation-mode: nearest-neighbor; // IE8+
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
@else {
image-rendering: $mode;
}
}
+35
View File
@@ -0,0 +1,35 @@
// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
@mixin keyframes($name) {
$original-prefix-for-webkit: $prefix-for-webkit;
$original-prefix-for-mozilla: $prefix-for-mozilla;
$original-prefix-for-microsoft: $prefix-for-microsoft;
$original-prefix-for-opera: $prefix-for-opera;
$original-prefix-for-spec: $prefix-for-spec;
@if $original-prefix-for-webkit {
@include disable-prefix-for-all();
$prefix-for-webkit: true !global;
@-webkit-keyframes #{$name} {
@content;
}
}
@if $original-prefix-for-mozilla {
@include disable-prefix-for-all();
$prefix-for-mozilla: true !global;
@-moz-keyframes #{$name} {
@content;
}
}
$prefix-for-webkit: $original-prefix-for-webkit !global;
$prefix-for-mozilla: $original-prefix-for-mozilla !global;
$prefix-for-microsoft: $original-prefix-for-microsoft !global;
$prefix-for-opera: $original-prefix-for-opera !global;
$prefix-for-spec: $original-prefix-for-spec !global;
@if $original-prefix-for-spec {
@keyframes #{$name} {
@content;
}
}
}
+38
View File
@@ -0,0 +1,38 @@
@mixin linear-gradient($pos, $G1, $G2: null,
$G3: null, $G4: null,
$G5: null, $G6: null,
$G7: null, $G8: null,
$G9: null, $G10: null,
$fallback: null) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
$pos-spec: null;
$pos-degree: null;
// If $pos is missing from mixin, reassign vars and add default position
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
$pos: null;
}
@if $pos {
$positions: _linear-positions-parser($pos);
$pos-degree: nth($positions, 1);
$pos-spec: nth($positions, 2);
}
$full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
// Set $G1 as the default fallback color
$fallback-color: nth($G1, 1);
// If $fallback is a color use that color as the fallback color
@if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback;
}
background-color: $fallback-color;
background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
}
+8
View File
@@ -0,0 +1,8 @@
@mixin perspective($depth: none) {
// none | <length>
@include prefixer(perspective, $depth, webkit moz spec);
}
@mixin perspective-origin($value: 50% 50%) {
@include prefixer(perspective-origin, $value, webkit moz spec);
}
+8
View File
@@ -0,0 +1,8 @@
@mixin placeholder {
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
@each $placeholder in $placeholders {
&:#{$placeholder}-placeholder {
@content;
}
}
}
+39
View File
@@ -0,0 +1,39 @@
// Requires Sass 3.1+
@mixin radial-gradient($G1, $G2,
$G3: null, $G4: null,
$G5: null, $G6: null,
$G7: null, $G8: null,
$G9: null, $G10: null,
$pos: null,
$shape-size: null,
$fallback: null) {
$data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
$G1: nth($data, 1);
$G2: nth($data, 2);
$pos: nth($data, 3);
$shape-size: nth($data, 4);
$full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
// Strip deprecated cover/contain for spec
$shape-size-spec: _shape-size-stripper($shape-size);
// Set $G1 as the default fallback color
$first-color: nth($full, 1);
$fallback-color: nth($first-color, 1);
@if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback;
}
// Add Commas and spaces
$shape-size: if($shape-size, '#{$shape-size}, ', null);
$pos: if($pos, '#{$pos}, ', null);
$pos-spec: if($pos, 'at #{$pos}', null);
$shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
background-color: $fallback-color;
background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
}
+14
View File
@@ -0,0 +1,14 @@
@mixin selection {
$before-colons: "";
@if & {
$before-colons: "&"
}
#{$before-colons}::selection {
@content;
}
#{$before-colons}::-moz-selection {
@content;
}
}
+19
View File
@@ -0,0 +1,19 @@
@mixin text-decoration($value) {
// <text-decoration-line> || <text-decoration-style> || <text-decoration-color>
@include prefixer(text-decoration, $value, moz);
}
@mixin text-decoration-line($line: none) {
// none || underline || overline || line-through
@include prefixer(text-decoration-line, $line, moz);
}
@mixin text-decoration-style($style: solid) {
// solid || double || dotted || dashed || wavy
@include prefixer(text-decoration-style, $style, moz webkit);
}
@mixin text-decoration-color($color: currentColor) {
// currentColor || <color>
@include prefixer(text-decoration-color, $color, moz);
}
+15
View File
@@ -0,0 +1,15 @@
@mixin transform($property: none) {
// none | <transform-function>
@include prefixer(transform, $property, webkit moz ms o spec);
}
@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right | length | %
// y-axis - top | center | bottom | length | %
// z-axis - length
@include prefixer(transform-origin, $axes, webkit moz ms o spec);
}
@mixin transform-style ($style: flat) {
@include prefixer(transform-style, $style, webkit moz ms o spec);
}
+77
View File
@@ -0,0 +1,77 @@
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
// Example: @include transition (all 2s ease-in-out);
// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
// @include transition-property (transform, opacity);
@mixin transition ($properties...) {
// Fix for vendor-prefix transform property
$needs-prefixes: false;
$webkit: ();
$moz: ();
$spec: ();
// Create lists for vendor-prefixed transform
@each $list in $properties {
@if nth($list, 1) == "transform" {
$needs-prefixes: true;
$list1: -webkit-transform;
$list2: -moz-transform;
$list3: ();
@each $var in $list {
$list3: join($list3, $var);
@if $var != "transform" {
$list1: join($list1, $var);
$list2: join($list2, $var);
}
}
$webkit: append($webkit, $list1);
$moz: append($moz, $list2);
$spec: append($spec, $list3);
}
// Create lists for non-prefixed transition properties
@else {
$webkit: append($webkit, $list, comma);
$moz: append($moz, $list, comma);
$spec: append($spec, $list, comma);
}
}
@if $needs-prefixes {
-webkit-transition: $webkit;
-moz-transition: $moz;
transition: $spec;
}
@else {
@if length($properties) >= 1 {
@include prefixer(transition, $properties, webkit moz spec);
}
@else {
$properties: all 0.15s ease-out 0s;
@include prefixer(transition, $properties, webkit moz spec);
}
}
}
@mixin transition-property ($properties...) {
-webkit-transition-property: transition-property-names($properties, 'webkit');
-moz-transition-property: transition-property-names($properties, 'moz');
transition-property: transition-property-names($properties, false);
}
@mixin transition-duration ($times...) {
@include prefixer(transition-duration, $times, webkit moz spec);
}
@mixin transition-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
@include prefixer(transition-timing-function, $motions, webkit moz spec);
}
@mixin transition-delay ($times...) {
@include prefixer(transition-delay, $times, webkit moz spec);
}
+3
View File
@@ -0,0 +1,3 @@
@mixin user-select($arg: none) {
@include prefixer(user-select, $arg, webkit moz ms spec);
}
+11
View File
@@ -0,0 +1,11 @@
@function assign-inputs($inputs, $pseudo: null) {
$list : ();
@each $input in $inputs {
$input: unquote($input);
$input: if($pseudo, $input + ":" + $pseudo, $input);
$list: append($list, $input, comma);
}
@return $list;
}
+13
View File
@@ -0,0 +1,13 @@
// Programatically determines whether a color is light or dark
// Returns a boolean
// More details here http://robots.thoughtbot.com/closer-look-color-lightness
@function is-light($hex-color) {
$-local-red: red(rgba($hex-color, 1.0));
$-local-green: green(rgba($hex-color, 1.0));
$-local-blue: blue(rgba($hex-color, 1.0));
$-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
@return $-local-lightness > .6;
}
+12
View File
@@ -0,0 +1,12 @@
// Test a Sass list to see if it contains a defined value
// Allows for checking if a list contains several values at once
@function contains($list, $values...) {
@each $value in $values {
@if type-of(index($list, $value)) != "number" {
@return false;
}
}
@return true;
}
+7
View File
@@ -0,0 +1,7 @@
// Check for a valid length
@function is-length($value) {
@return type-of($value) != "null" and (str-slice($value + "", 1, 4) == 'calc'
or index(auto inherit initial 0, $value)
or (type-of($value) == "number" and not(unitless($value))));
}
+6
View File
@@ -0,0 +1,6 @@
// Check for a valid size
@function is-size($value) {
@return is-length($value)
or contains("fill" "fit-content" "min-content" "max-content", $value);
}
+69
View File
@@ -0,0 +1,69 @@
// Scaling Variables
$golden: 1.618;
$minor-second: 1.067;
$major-second: 1.125;
$minor-third: 1.2;
$major-third: 1.25;
$perfect-fourth: 1.333;
$augmented-fourth: 1.414;
$perfect-fifth: 1.5;
$minor-sixth: 1.6;
$major-sixth: 1.667;
$minor-seventh: 1.778;
$major-seventh: 1.875;
$octave: 2;
$major-tenth: 2.5;
$major-eleventh: 2.667;
$major-twelfth: 3;
$double-octave: 4;
$modular-scale-ratio: $perfect-fourth !default;
$modular-scale-base: em($em-base) !default;
@function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) {
$v1: nth($value, 1);
$v2: nth($value, length($value));
$value: $v1;
// scale $v2 to just above $v1
@while $v2 > $v1 {
$v2: ($v2 / $ratio); // will be off-by-1
}
@while $v2 < $v1 {
$v2: ($v2 * $ratio); // will fix off-by-1
}
// check AFTER scaling $v2 to prevent double-counting corner-case
$double-stranded: $v2 > $v1;
@if $increment > 0 {
@for $i from 1 through $increment {
@if $double-stranded and ($v1 * $ratio) > $v2 {
$value: $v2;
$v2: ($v2 * $ratio);
} @else {
$v1: ($v1 * $ratio);
$value: $v1;
}
}
}
@if $increment < 0 {
// adjust $v2 to just below $v1
@if $double-stranded {
$v2: ($v2 / $ratio);
}
@for $i from $increment through -1 {
@if $double-stranded and ($v1 / $ratio) < $v2 {
$value: $v2;
$v2: ($v2 / $ratio);
} @else {
$v1: ($v1 / $ratio);
$value: $v1;
}
}
}
@return $value;
}
+13
View File
@@ -0,0 +1,13 @@
// Convert pixels to ems
// eg. for a relational value of 12px write em(12) when the parent is 16px
// if the parent is another value say 24px write em(12, 24)
@function em($pxval, $base: $em-base) {
@if not unitless($pxval) {
$pxval: strip-units($pxval);
}
@if not unitless($base) {
$base: strip-units($base);
}
@return ($pxval / $base) * 1em;
}
+15
View File
@@ -0,0 +1,15 @@
// Convert pixels to rems
// eg. for a relational value of 12px write rem(12)
// Assumes $em-base is the font-size of <html>
@function rem($pxval) {
@if not unitless($pxval) {
$pxval: strip-units($pxval);
}
$base: $em-base;
@if not unitless($base) {
$base: strip-units($base);
}
@return ($pxval / $base) * 1rem;
}
+5
View File
@@ -0,0 +1,5 @@
// Srtips the units from a value. e.g. 12px -> 12
@function strip-units($val) {
@return ($val / ($val * 0 + 1));
}
+9
View File
@@ -0,0 +1,9 @@
// Add percentage of white to a color
@function tint($color, $percent){
@return mix(white, $color, $percent);
}
// Add percentage of black to a color
@function shade($color, $percent){
@return mix(black, $color, $percent);
}
+22
View File
@@ -0,0 +1,22 @@
// Return vendor-prefixed property names if appropriate
// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
//************************************************************************//
@function transition-property-names($props, $vendor: false) {
$new-props: ();
@each $prop in $props {
$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
}
@return $new-props;
}
@function transition-property-name($prop, $vendor: false) {
// put other properties that need to be prefixed here aswell
@if $vendor and $prop == transform {
@return unquote('-'+$vendor+'-'+$prop);
}
@else {
@return $prop;
}
}
+17
View File
@@ -0,0 +1,17 @@
// Convert shorthand to the 4-value syntax
@function unpack($shorthand) {
@if length($shorthand) == 1 {
@return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
}
@else if length($shorthand) == 2 {
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
}
@else if length($shorthand) == 3 {
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
}
@else {
@return $shorthand;
}
}
+15
View File
@@ -0,0 +1,15 @@
//************************************************************************//
// Helper function for str-to-num fn.
// Source: http://sassmeister.com/gist/9647408
//************************************************************************//
@function _convert-units($number, $unit) {
$strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn';
$units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn;
$index: index($strings, $unit);
@if not $index {
@warn "Unknown unit `#{$unit}`.";
@return false;
}
@return $number * nth($units, $index);
}
+43
View File
@@ -0,0 +1,43 @@
// Used for creating the source string for fonts using @font-face
// Reference: http://goo.gl/Ru1bKP
@function font-url-prefixer($asset-pipeline) {
@if $asset-pipeline == true {
@return font-url;
} @else {
@return url;
}
}
@function font-source-declaration(
$font-family,
$file-path,
$asset-pipeline,
$file-formats,
$font-url) {
$src: null;
$formats-map: (
eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"),
woff2: "#{$file-path}.woff2" format("woff2"),
woff: "#{$file-path}.woff" format("woff"),
ttf: "#{$file-path}.ttf" format("truetype"),
svg: "#{$file-path}.svg##{$font-family}" format("svg")
);
@each $key, $values in $formats-map {
@if contains($file-formats, $key) {
$file-path: nth($values, 1);
$font-format: nth($values, 2);
@if $asset-pipeline == true {
$src: append($src, font-url($file-path) $font-format, comma);
} @else {
$src: append($src, url($file-path) $font-format, comma);
}
}
}
@return $src;
}
+13
View File
@@ -0,0 +1,13 @@
@function _gradient-positions-parser($gradient-type, $gradient-positions) {
@if $gradient-positions
and ($gradient-type == linear)
and (type-of($gradient-positions) != color) {
$gradient-positions: _linear-positions-parser($gradient-positions);
}
@else if $gradient-positions
and ($gradient-type == radial)
and (type-of($gradient-positions) != color) {
$gradient-positions: _radial-positions-parser($gradient-positions);
}
@return $gradient-positions;
}
+5
View File
@@ -0,0 +1,5 @@
// Check for a valid number
@function _is-num($value) {
@return contains('0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9, $value);
}
+25
View File
@@ -0,0 +1,25 @@
// Private function for linear-gradient-parser
@function _linear-angle-parser($image, $first-val, $prefix, $suffix) {
$offset: null;
$unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val));
$unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val));
@if ($unit-long == "grad") or
($unit-long == "turn") {
$offset: if($unit-long == "grad", -100grad * 3, -0.75turn);
}
@else if ($unit-short == "deg") or
($unit-short == "rad") {
$offset: if($unit-short == "deg", -90 * 3, 1.6rad);
}
@if $offset {
$num: _str-to-num($first-val);
@return (
webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix,
spec-image: $image
);
}
}
+41
View File
@@ -0,0 +1,41 @@
@function _linear-gradient-parser($image) {
$image: unquote($image);
$gradients: ();
$start: str-index($image, "(");
$end: str-index($image, ",");
$first-val: str-slice($image, $start + 1, $end - 1);
$prefix: str-slice($image, 0, $start);
$suffix: str-slice($image, $end, str-length($image));
$has-multiple-vals: str-index($first-val, " ");
$has-single-position: unquote(_position-flipper($first-val) + "");
$has-angle: _is-num(str-slice($first-val, 0, 0));
@if $has-multiple-vals {
$gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals);
}
@else if $has-single-position != "" {
$pos: unquote($has-single-position + "");
$gradients: (
webkit-image: -webkit- + $image,
spec-image: $prefix + "to " + $pos + $suffix
);
}
@else if $has-angle {
// Rotate degree for webkit
$gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix);
}
@else {
$gradients: (
webkit-image: -webkit- + $image,
spec-image: $image
);
}
@return $gradients;
}
+61
View File
@@ -0,0 +1,61 @@
@function _linear-positions-parser($pos) {
$type: type-of(nth($pos, 1));
$spec: null;
$degree: null;
$side: null;
$corner: null;
$length: length($pos);
// Parse Side and corner positions
@if ($length > 1) {
@if nth($pos, 1) == "to" { // Newer syntax
$side: nth($pos, 2);
@if $length == 2 { // eg. to top
// Swap for backwards compatability
$degree: _position-flipper(nth($pos, 2));
}
@else if $length == 3 { // eg. to top left
$corner: nth($pos, 3);
}
}
@else if $length == 2 { // Older syntax ("top left")
$side: _position-flipper(nth($pos, 1));
$corner: _position-flipper(nth($pos, 2));
}
@if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
@else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
@else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
@else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
$spec: to $side $corner;
}
@else if $length == 1 {
// Swap for backwards compatability
@if $type == string {
$degree: $pos;
$spec: to _position-flipper($pos);
}
@else {
$degree: -270 - $pos; //rotate the gradient opposite from spec
$spec: $pos;
}
}
$degree: unquote($degree + ",");
$spec: unquote($spec + ",");
@return $degree $spec;
}
@function _position-flipper($pos) {
@return if($pos == left, right, null)
if($pos == right, left, null)
if($pos == top, bottom, null)
if($pos == bottom, top, null);
}
+31
View File
@@ -0,0 +1,31 @@
// Private function for linear-gradient-parser
@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) {
$val-1: str-slice($first-val, 0, $has-multiple-vals - 1 );
$val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val));
$val-3: null;
$has-val-3: str-index($val-2, " ");
@if $has-val-3 {
$val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2));
$val-2: str-slice($val-2, 0, $has-val-3 - 1);
}
$pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3);
$pos: unquote($pos + "");
// Use old spec for webkit
@if $val-1 == "to" {
@return (
webkit-image: -webkit- + $prefix + $pos + $suffix,
spec-image: $image
);
}
// Bring the code up to spec
@else {
@return (
webkit-image: -webkit- + $image,
spec-image: $prefix + "to " + $pos + $suffix
);
}
}
+69
View File
@@ -0,0 +1,69 @@
@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
@each $value in $G1, $G2 {
$first-val: nth($value, 1);
$pos-type: type-of($first-val);
$spec-at-index: null;
// Determine if spec was passed to mixin
@if type-of($value) == list {
$spec-at-index: if(index($value, at), index($value, at), false);
}
@if $spec-at-index {
@if $spec-at-index > 1 {
@for $i from 1 through ($spec-at-index - 1) {
$shape-size: $shape-size nth($value, $i);
}
@for $i from ($spec-at-index + 1) through length($value) {
$pos: $pos nth($value, $i);
}
}
@else if $spec-at-index == 1 {
@for $i from ($spec-at-index + 1) through length($value) {
$pos: $pos nth($value, $i);
}
}
$G1: null;
}
// If not spec calculate correct values
@else {
@if ($pos-type != color) or ($first-val != "transparent") {
@if ($pos-type == number)
or ($first-val == "center")
or ($first-val == "top")
or ($first-val == "right")
or ($first-val == "bottom")
or ($first-val == "left") {
$pos: $value;
@if $pos == $G1 {
$G1: null;
}
}
@else if
($first-val == "ellipse")
or ($first-val == "circle")
or ($first-val == "closest-side")
or ($first-val == "closest-corner")
or ($first-val == "farthest-side")
or ($first-val == "farthest-corner")
or ($first-val == "contain")
or ($first-val == "cover") {
$shape-size: $value;
@if $value == $G1 {
$G1: null;
}
@else if $value == $G2 {
$G2: null;
}
}
}
}
}
@return $G1, $G2, $pos, $shape-size;
}
+50
View File
@@ -0,0 +1,50 @@
@function _radial-gradient-parser($image) {
$image: unquote($image);
$gradients: ();
$start: str-index($image, "(");
$end: str-index($image, ",");
$first-val: str-slice($image, $start + 1, $end - 1);
$prefix: str-slice($image, 0, $start);
$suffix: str-slice($image, $end, str-length($image));
$is-spec-syntax: str-index($first-val, "at");
@if $is-spec-syntax and $is-spec-syntax > 1 {
$keyword: str-slice($first-val, 1, $is-spec-syntax - 2);
$pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
$pos: append($pos, $keyword, comma);
$gradients: (
webkit-image: -webkit- + $prefix + $pos + $suffix,
spec-image: $image
)
}
@else if $is-spec-syntax == 1 {
$pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
$gradients: (
webkit-image: -webkit- + $prefix + $pos + $suffix,
spec-image: $image
)
}
@else if str-index($image, "cover") or str-index($image, "contain") {
@warn "Radial-gradient needs to be updated to conform to latest spec.";
$gradients: (
webkit-image: null,
spec-image: $image
)
}
@else {
$gradients: (
webkit-image: -webkit- + $image,
spec-image: $image
)
}
@return $gradients;
}
+18
View File
@@ -0,0 +1,18 @@
@function _radial-positions-parser($gradient-pos) {
$shape-size: nth($gradient-pos, 1);
$pos: nth($gradient-pos, 2);
$shape-size-spec: _shape-size-stripper($shape-size);
$pre-spec: unquote(if($pos, "#{$pos}, ", null))
unquote(if($shape-size, "#{$shape-size},", null));
$pos-spec: if($pos, "at #{$pos}", null);
$spec: "#{$shape-size-spec} #{$pos-spec}";
// Add comma
@if ($spec != ' ') {
$spec: "#{$spec},"
}
@return $pre-spec $spec;
}
+26
View File
@@ -0,0 +1,26 @@
// User for linear and radial gradients within background-image or border-image properties
@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
$pre-spec: null;
$spec: null;
$vendor-gradients: null;
@if $gradient-type == linear {
@if $gradient-positions {
$pre-spec: nth($gradient-positions, 1);
$spec: nth($gradient-positions, 2);
}
}
@else if $gradient-type == radial {
$pre-spec: nth($gradient-positions, 1);
$spec: nth($gradient-positions, 2);
}
@if $vendor {
$vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
}
@else if $vendor == false {
$vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
$vendor-gradients: unquote($vendor-gradients);
}
@return $vendor-gradients;
}
+10
View File
@@ -0,0 +1,10 @@
@function _shape-size-stripper($shape-size) {
$shape-size-spec: null;
@each $value in $shape-size {
@if ($value == "cover") or ($value == "contain") {
$value: null;
}
$shape-size-spec: "#{$shape-size-spec} #{$value}";
}
@return $shape-size-spec;
}
+50
View File
@@ -0,0 +1,50 @@
//************************************************************************//
// Helper function for linear/radial-gradient-parsers.
// Source: http://sassmeister.com/gist/9647408
//************************************************************************//
@function _str-to-num($string) {
// Matrices
$strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
$numbers: 0 1 2 3 4 5 6 7 8 9;
// Result
$result: 0;
$divider: 0;
$minus: false;
// Looping through all characters
@for $i from 1 through str-length($string) {
$character: str-slice($string, $i, $i);
$index: index($strings, $character);
@if $character == '-' {
$minus: true;
}
@else if $character == '.' {
$divider: 1;
}
@else {
@if not $index {
$result: if($minus, $result * -1, $result);
@return _convert-units($result, str-slice($string, $i));
}
$number: nth($numbers, $index);
@if $divider == 0 {
$result: $result * 10;
}
@else {
// Move the decimal dot to the left
$divider: $divider * 10;
$number: $number / $divider;
}
$result: $result + $number;
}
}
@return if($minus, $result * -1, $result);
}

Some files were not shown because too many files have changed in this diff Show More