fl 0.3.0

data/app/assets/stylesheets/application.sass.erb

@@ -0,0 +1,46 @@
+////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////
+//     ___              _ _           _   _               //
+//    / _ \            | (_)         | | (_)              //
+//   / /_\ \_ __  _ __ | |_  ___ __ _| |_ _  ___  _ __    //
+//   |  _  | '_ \| '_ \| | |/ __/ _` | __| |/ _ \| '_ \   //
+//   | | | | |_) | |_) | | | (_| (_| | |_| | (_) | | | |  //
+//   \_| |_/ .__/| .__/|_|_|\___\__,_|\__|_|\___/|_| |_|  //
+//         | |   | |                                      //
+//         |_|   |_|                                      //
+//                                                        //
+////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////
+
+// Icons
+<%
+  gem_name = 'font-awesome-rails'
+  gdep = Gem::Dependency.new(gem_name)
+%>
+
+////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////
+
+// Defaults
+<%= FL::AssetHelper.sass File.join(File.dirname(__FILE__), "_defaults.yml"), true %>
+
+////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////
+
+// Main
+@import variables
+@import functions
+
+// Libraries
+@import animate-css
+@import <%= gdep.matching_specs.max_by(&:version) ? "font-awesome" : "ionicons" %>
+
+////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////
+
+// Styling
+@import styles/**/*
+@import <%= File.join Rails.root, "app", "assets", "stylesheets", "styles", "**", "*" %>
+
+////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////

data/app/assets/stylesheets/styles/reset.sass

@@ -0,0 +1,139 @@
+//////////////////////////////////////////////////////
+//////////////////////////////////////////////////////
+
+//
+// Global Reset of all HTML Elements
+// Source - https://gist.github.com/joshuapowell/1680540
+//
+// Resetting all of our HTML Elements ensures a smoother
+// visual transition between browsers. If you don't believe me,
+// try temporarily commenting out this block of code, then go
+// and look at Mozilla versus Safari, both good browsers with
+// a good implementation of CSS. The thing is, all browser CSS
+// defaults are different and at the end of the day if visual
+// consistency is what we're shooting for, then we need to
+// make sure we're resetting all spacing elements.
+//
+
+//////////////////////////////////////////////////////
+//////////////////////////////////////////////////////
+//             _____               _                //
+//            | ___ \             | |               //
+//            | |_/ /___  ___  ___| |_              //
+//            |    // _ \/ __|/ _ \ __|             //
+//            | |\ \  __/\__ \  __/ |_              //
+//            \_| \_\___||___/\___|\__|             //
+//                                                  //
+//////////////////////////////////////////////////////
+//////////////////////////////////////////////////////
+
+// Selection //
+::selection
+	color: 		  $base-selection-color
+	background: $base-selection-background
+
+//////////////////////////////////////////////////////
+//////////////////////////////////////////////////////
+
+// Eveything //
+*
+	margin:   0
+
+// General //
+html, body
+	margin:   0
+	padding:  0
+	height:   100%
+
+// Body //
+body
+	position:   relative
+	height:     100%
+	color:      $base-color
+	background: $base-background
+	cursor:     $base-cursor-default
+	font:
+		size:     $base-font-size
+		family:   $base-font-family
+		weight:   $base-font-weight
+
+//////////////////////////////////////////////////////
+//////////////////////////////////////////////////////
+
+div, span, object, iframe, img, table, caption, thead, tbody, tfoot, tr, td, article, aside, canvas, details, figure, hgroup, menu, nav, footer, header, section, summary, mark, audio, video, flash
+	//border: 0
+
+// Headers //
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code, del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, legend, label
+	border: 0
+	vertical:
+		align: baseline
+
+// Articles //
+article, aside, canvas
+	display: block
+
+// Input Styling //
+input,
+select,
+textarea
+	font:
+		family: $base-font-family
+	&:hover
+		cursor: $base-cursor-hover
+
+// Figures //
+figure, figcaption, hgroup, footer, header, nav, section, audio, video
+	display: block
+	img
+		display: block
+
+// Tables //
+table
+	border:
+		collapse: separate
+		spacing: 0
+
+// Horizontal Rules //
+hr
+	display:		block
+	margin:  		$base-horizontal-margin
+	height: 		$base-horizontal-height
+	background: $base-horizontal-color
+	box:
+		shadow:		$base-horizontal-shadow
+
+// Bold //
+b
+	color:      $base-color
+
+// Paragraphs //
+p
+	display: block
+	margin:
+		bottom: 1.25em
+
+// Links //
+a
+	color: 				  $base-link-color
+	transition: 		opacity $animation-duration ease-in-out
+	position: 			relative
+	text:
+		decoration: 	$base-link-text-decoration
+	z:
+		index:        6
+
+	// Hover //
+	&:hover
+		cursor:       $base-cursor-hover
+		opacity:      $base-link-hover-opacity
+
+	// Img //
+	img
+		border:       0
+
+\:focus
+	outline:        0
+
+//////////////////////////////////////////////////////
+//////////////////////////////////////////////////////

data/app/assets/stylesheets/styles/structure.sass

@@ -0,0 +1,69 @@
+//////////////////////////////////////////////////////
+//////////////////////////////////////////////////////
+//   _____ _                   _                    //
+//  /  ___| |                 | |                   //
+//  \ `--.| |_ _ __ _   _  ___| |_ _   _ _ __ ___   //
+//   `--. \ __| '__| | | |/ __| __| | | | '__/ _ \  //
+//  /\__/ / |_| |  | |_| | (__| |_| |_| | | |  __/  //
+//  \____/ \__|_|   \__,_|\___|\__|\__,_|_|  \___|  //
+//                                                  //
+//////////////////////////////////////////////////////
+//////////////////////////////////////////////////////
+
+// Body //
+body
+
+  //////////////////////////////////////
+  //////////////////////////////////////
+
+  // Standard //
+  > header,
+  > footer
+    clear:       both
+    position:    fixed
+    width:       100%
+    left:        0
+    box:
+      sizing:    border-box
+    z:
+      index:     10
+
+  //////////////////////////////////////
+  //////////////////////////////////////
+
+  // Header //
+  > header
+    top:         0
+    padding:     $header-padding
+
+  //////////////////////////////////////
+  //////////////////////////////////////
+
+  // Main //
+  > main
+    display:      block
+    position:     relative
+    height:       100%
+    padding:      $header-padding $footer-padding
+    min:
+      height:     100%
+    max:
+      height:     100%
+    box:
+      sizing:     border-box
+    overflow:
+      y:          hidden
+
+  //////////////////////////////////////
+  //////////////////////////////////////
+
+  // Footer //
+  > footer
+    bottom:     0
+    padding:    $footer-padding
+
+  //////////////////////////////////////
+  //////////////////////////////////////
+
+//////////////////////////////////////////////////////
+//////////////////////////////////////////////////////

data/app/assets/stylesheets/styles/ui/flash.sass

@@ -0,0 +1,128 @@
+/////////////////////////////////////////////
+/////////////////////////////////////////////
+//        ______ _           _             //
+//       |  ___| |         | |     		     //
+//       | |_  | | __ _ ___| |__    	     //
+//       |  _| | |/ _` / __| '_ \          //
+//       | |   | | (_| \__ \ | | |         //
+//       \_|   |_|\__,_|___/_| |_|         //
+//                                         //
+/////////////////////////////////////////////
+/////////////////////////////////////////////
+
+// In the new Rails, this will come through
+// as a real-time notification.
+
+/////////////////////////////////////////////
+/////////////////////////////////////////////
+
+// Flash
+flash#flash
+	$padding: 0.5em
+
+	// http://stackoverflow.com/a/485887/1143732 (for sizing with margin)
+	position:     fixed
+	top: 				  2em
+	left: 				0
+	right: 				0
+	margin: 			0 1em
+	z:
+		index: 			10000
+
+	// Message
+	> message
+		display: 			block
+		padding:			($padding + 0.1em) $padding $padding 0
+		margin: 			0 auto 0.5em
+		color: 				rgba(255,255,255,1)
+		background-color: 	rgba(0,0,0,1)
+		border: 			1px solid rgba(0,0,0,0.85)
+		transition: 	background ($animation-duration * 0.65) ease-in-out, opacity ($animation-duration * 0.85) ease-in-out
+		font:
+			size: 			0.85em
+			weight: 		bold
+		text:
+			align: 			center
+			shadow: 		1px 1px 0 rgba(0,0,0,1)
+			transform: 		capitalize
+		border:
+			radius: 		3px
+		box:
+			sizing: 		border-box
+			shadow:			0 1px 1px 0 rgba(0,0,0,0.35)
+		animation:
+			delay: 0.5s
+
+		&:after
+			content: 	  ""
+			display: 	  block
+			position: 	absolute
+			width: 		  100%
+			height: 	  1px
+			top: 		    0
+			left: 		  0
+			background: rgba(255,255,255,0.145)
+			transition: background ($animation-duration * 0.65) ease-in-out
+
+		//
+
+		&:hover
+			cursor: 		  	  pointer
+			background-color: rgba(0,0,0,0.5)
+			&:after
+				background: 	  rgba(255,255,255,0.18)
+
+		&:active
+			background-color: rgba(0,0,0,0.75)
+			&:after
+				background: 	  rgba(255,255,255,0.16)
+
+		////
+
+		// Styling
+		$options: (notice: rgba(#FF002F,1), error: rgba(184,11,14,1), alert: rgba(11,83,184,1))
+		@each $option, $color in $options
+			@if map-has-key($options, $option)
+				&.#{$option}
+					background: linear-gradient(bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%)
+					background:
+						color: $color
+
+					&:hover
+						background:
+							color: darken($color, 5%)
+
+					&:active
+						background:
+							color: darken($color, 7%)
+			@else
+				@warn "Unfortunately, no value could be retrieved from `#{$option}`. "
+
+		////
+
+		i
+			position:  absolute
+			left: 	   0
+			top: 	   0
+			height:    100%
+			border:
+				right: 1px solid rgba(0,0,0,0.15)
+
+			&:before
+				display: block
+				padding: ($padding + 0.15em) 0 $padding
+				margin: 0 ($padding + 0.15em) 0 ($padding + 0.25em)
+
+			&:after
+				content: 	""
+				display: 	block
+				position: 	absolute
+				top: 		0
+				right: 		-2px
+				width: 		1px
+				height: 	100%
+				background: rgba(255,255,255,0.1)
+
+
+/////////////////////////////////////////////
+/////////////////////////////////////////////

data/app/assets/stylesheets/styles/ui/fonts.sass

@@ -0,0 +1,32 @@
+/////////////////////////////////////////////
+/////////////////////////////////////////////
+//        ______         __        		     //
+//       |  ___|        | |       		     //
+//       | |_ ___  _ __ | |_ ___           //
+//       |  _/ _ \| '_ \| __/ __|          //
+//       | || (_) | | | | |_\__ \          //
+//       \_| \___/|_| |_|\__|___/          //
+//                                         //
+/////////////////////////////////////////////
+/////////////////////////////////////////////
+
+//http://bourbon.io/docs/#font-face
+
+// Antenna
+// Ref https://github.com/thoughtbot/bourbon/blob/tg-5-0-documentation/core/bourbon/library/_font-face.scss
+// Have to set "file formats" manually https://github.com/thoughtbot/bourbon/blob/tg-5-0-documentation/core/bourbon/settings/_settings.scss#L31
+//$family: ( thin: 200, regular: 400, medium: 600 )
+
+//@each $name, $weight in $family
+//  @include font-face("Antenna", "antenna/#{$name}/#{$name}",  ("ttf", "woff", "svg", "eot"), true)
+//    font:
+//      weight: $weight
+//      style:  normal
+
+//  @include font-face("Antenna", "antenna/#{$name}/italic",  ("ttf", "woff", "svg", "eot"), true)
+//    font:
+//      weight: $weight
+//      style:  italic
+
+/////////////////////////////////////////////
+/////////////////////////////////////////////

data/app/assets/stylesheets/styles/ui/modals.sass

@@ -0,0 +1,61 @@
+/////////////////////////////////////////////
+/////////////////////////////////////////////
+//     __  __           _       _          //
+//    |  \/  |         | |     | |         //
+//    | .  . | ___   __| | __ _| |___      //
+//    | |\/| |/ _ \ / _` |/ _` | / __|     //
+//    | |  | | (_) | (_| | (_| | \__ \     //
+//    \_|  |_/\___/ \__,_|\__,_|_|___/     //
+/////////////////////////////////////////////
+/////////////////////////////////////////////
+
+/// Last updated 18/06/2017
+/// Bootstrap 4.0.0.alpha-6
+/// R.Peck
+
+/////////////////////////////////////////////
+/////////////////////////////////////////////
+
+// Modals //
+modal
+
+  //////////////////////////////////////
+  //////////////////////////////////////
+
+  // Main //
+  > main
+    display:      block
+    position:     absolute
+    top:          50%
+    left:         50%
+    width:        fit-content
+    height:       auto
+    cursor:       $base-cursor-default
+    border:       $base-modal-border
+    background:   $base-modal-background
+    transform:    translateX(-100%) translateY(-100%)
+    perspective:  1px
+    max:
+      height:     95%
+    box:
+      sizing:     border-box
+
+    ///////////////////////////////////
+    ///////////////////////////////////
+
+    // Title //
+    > title
+
+      // Move //
+      &.move
+        cursor: $base-cursor-move
+
+      // Exit //
+      > .exit
+        display: block
+
+  //////////////////////////////////////
+  //////////////////////////////////////
+
+/////////////////////////////////////////////
+/////////////////////////////////////////////