fuel 0.3.3 → 0.3.20

data/app/assets/stylesheets/fuel/components/_alerts.scss

@@ -0,0 +1,27 @@
+// Alerts Component
+// ========================================
+
+@each $alert in $alerts {
+  $name:     nth($alert, 1);
+  $color-1:  nth($alert, 2);
+  $color-2:  nth($alert, 3);
+
+  .alert--#{$name} {
+    @include position(relative);
+    @include rem(margin-bottom, 10px);
+    @include rem(padding, 10px);
+    background: lighten($color-1, 10%);
+    border: 1px solid $color-2;
+    color: $color-2;
+    text-align: center;
+    width: 100%;
+    z-index: 2;
+
+    #app-icon{ fill: $color-2; }
+  }
+
+  .alert--content { @include font-type($primary-sans-serif, normal, 700); }
+  .alert--close-icon {
+    @include position(absolute, 5px 5px null null);
+  }
+};

data/app/assets/stylesheets/fuel/components/_animations.scss

@@ -0,0 +1,26 @@
+// Animation Components
+// ========================================
+
+
+// Fade In
+@include keyframes(fade-in) {
+  0% { opacity: 0; }
+  100% { opacity: 100%; }
+}
+
+@include keyframes(fade-in-down) {
+  0% {  opacity: 0; transform: translate3d(0, -100%, 0); }
+  100% { opacity: 1; transform: none; }
+}
+
+@include keyframes(fade-in-up){
+  0% { opacity: 0; transform: translate3d(0, 20%, 0); }
+  100% { opacity: 1; transform: none; }
+}
+
+
+// Slide
+@include keyframes(slide-in-up){
+  0%{ transform: translate3d(0, -20%, 0); visibility: visible; }
+  100%{ transform: translate3d(0, 0, 0); }
+}

data/app/assets/stylesheets/fuel/components/_application-icons.scss

@@ -0,0 +1,42 @@
+// Application Icons Component
+// ========================================
+
+
+// Variables
+$application-height:    30px;
+$application-icon-size: 95px 31px;
+$application-width:     32px;
+$application-icons:     image-url('fuel/icons/application-icons.svg');
+
+
+// Basic Styles
+%application-icon{
+  @include hide-text;
+  background-image: $application-icons;
+  background-size: $application-icon-size;
+  background-repeat: no-repeat;
+  display: inline-block;
+  height: $application-height;
+  width: $application-width;
+
+}
+
+
+// List
+$icons: (
+  add      $application-width * 0,
+  search   $application-width * 1,
+  arrow    $application-width * 3
+);
+
+
+// Loop
+@each $icon in $icons{
+  $name:      nth($icon, 1);
+  $position:  nth($icon, 2);
+
+  .#{$name}-icon{
+    background-position: -($position * 1) 0;
+    @extend %application-icon;
+  }
+}

data/app/assets/stylesheets/fuel/components/_buttons.scss

@@ -0,0 +1,106 @@
+// Buttons Component
+// ========================================
+
+// Main Button
+.button{
+  @include font-type($primary-sans-serif, normal, 700);
+  @include position(relative, null null null null);
+  @include s-foxtrot;
+  @include rem(margin-bottom, 15px);
+  @include rem(padding, 10px 12px);
+  @include transition (all 0.3s ease-in-out);
+  border-radius: 2px;
+  display: inline-block;
+  line-height: normal;
+  text-align: center;
+  text-transform: uppercase;
+  -webkit-appearance: none;
+
+  &:hover{ cursor: pointer; opacity: 1; }
+
+  &:focus{
+    border: none;
+    outline: none;
+    text-decoration: none;
+  }
+}
+
+// Button Styles
+@each $button in $buttons{
+  $type:  nth($button, 1);
+  $bg-1:  nth($button, 2);
+  $color: nth($button, 3);
+
+  .button--#{$type}{
+    background: $bg-1;
+    border-radius: 2px;
+    color: $color;
+
+    &:hover{
+      background-color: darken($bg-1, 5%);
+      opacity: 1;
+    }
+
+    &:active{
+      background-color: darken($bg-1, 3%);
+      color: darken($bg-1, 5%);
+    }
+
+    &:focus{ @include box-shadow(0 0 0, transparent); border: none; }
+  }
+
+  .button--header{
+    @include box-shadow(0 0 10px, rgba(0, 0, 0, 0.25));
+    @include rem(margin, 15px auto);
+    @include rem(padding, 15px 35px);
+    text-transform: uppercase;
+
+    &:hover{ @include box-shadow(0 0 0, rgba(0, 0, 0, 0)); }
+  }
+
+
+  // Links
+  .link-#{$type}{
+    color: $bg-1;
+
+    &:hover{ opacity: 0.6; }
+  }
+
+  .link__underline{
+    text-decoration: underline;
+    &:hover{ text-decoration: underline; }
+  }
+}
+
+
+// Button List Styles
+.button-list{
+  @include span-columns(12 of 12);
+  text-align: center;
+
+  li{ display: inline; }
+
+  li > a{
+    @include rem(min-width, 135px);
+    display: inline-block;
+  }
+}
+
+
+// Button Scroll
+.button--scroll{
+  @include box-shadow(0 4px 15px, rgba(0, 0, 0, 0.25));
+  @include position(absolute, null 10% -25px null);
+  @include rem(height, 45px);
+  @include rem(width, 45px);
+  background-color: $white-base;
+  border-radius: 30em;
+
+  &:hover{ opacity: 0.85; }
+
+  .icon{
+    @include position(absolute, 20px 0 null 0);
+    @include rem(width, 20px);
+    margin: 0 auto;
+  }
+}

data/app/assets/stylesheets/fuel/components/_card.scss

@@ -0,0 +1,39 @@
+// Card Component
+// ========================================
+
+
+// Variables
+$card-background:    $white-base;
+$card-border:        1px solid $grey-base;
+$card-border-radius: 3px;
+$card-padding:       20px;
+
+// Structure
+.card {
+  @include rem(padding, $card-padding);
+  background-color: $card-background;
+  border: $card-border;
+  border-radius: $card-border-radius;
+  overflow: hidden;
+}
+
+.card-image {
+  @include rem(margin, 20px auto);
+  border-radius: 30em;
+  overflow: hidden;
+
+  img {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.card-image--avatar {
+  @include rem(height, 100px);
+  @include rem(width, 100px);
+}
+
+.card-image--featured_image {
+  @include rem(height, 200px);
+  @include rem(width, 200px);
+}

data/app/assets/stylesheets/fuel/components/_components.scss

@@ -0,0 +1,13 @@
+// Fuel Components
+// ========================================
+
+@import "animations";
+@import "alerts";
+@import "application-icons";
+@import "buttons";
+@import "card";
+@import "forms";
+@import "navigation-icons";
+@import "navbar";
+@import "page-sidebar";
+@import "sliding-panel";

data/app/assets/stylesheets/fuel/components/_forms.scss

@@ -0,0 +1,90 @@
+// Form Styles Stylesheet
+// ========================================
+
+// Labels
+label {
+  @include font-type($primary-sans-serif, normal, 700);
+  @include rem(margin-bottom, 3px);
+  @include s-golf;
+  color: $grey-dark;
+  display: block;
+  text-transform: uppercase;
+}
+
+fieldset{ @include rem(margin-bottom, 30px); }
+
+.half-group {
+  @include span-columns(6 of 12);
+
+  .half-group__nested {
+    @include span-columns(3 of 6);
+  }
+}
+
+.third-group {
+  @include span-columns(4 of 12);
+}
+
+.half-group,
+.third-group {
+
+  &.last {
+    @include rem(margin-bottom, 20px);
+    margin-right: 0;
+  }
+}
+
+// Inputs
+#{$all-text-inputs},
+input,
+input[type="file"],
+select,
+textarea{
+  @include appearance(none);
+  @include font-type($primary-sans-serif, normal, 300);
+  @include placeholder{ font-style: italic; }
+  @include s-golf;
+  background-color: $white-base;
+  border: 1px solid $grey-light;
+  border-radius: 2px;
+  box-sizing: border-box;
+  height: 40px;
+  padding: 8px 6px;
+  width: 100%;
+  -webkit-font-smoothing: antialiased;
+  -ms-appearance: none;
+
+  &:focus{
+    @include box-shadow(0 0 0, transparent);
+    border-color: $grey-light;
+    outline: none;
+  }
+}
+
+input[type="submit"] {
+  @include s-golf;
+  border: none;
+  width: inherit;
+
+  &:hover { cursor: pointer; }
+}
+
+.datepicker {
+  background-image: image-url('fuel/icons/calendar-icon.svg');
+  background-position: 97%;
+  background-repeat: no-repeat;
+  background-size: 18px;
+}
+
+// Specific Teaser Heights
+textarea {
+  &.tease { @include rem(height, 60px); }
+  &.post { @include rem(height, 250px); }
+}
+
+select{
+  background-image: image-url('fuel/icons/dropdown-arrow-icon.svg');
+  background-position: 97%;
+  background-repeat: no-repeat;
+  background-size: 10px;
+}

data/app/assets/stylesheets/fuel/components/_navbar.scss

@@ -0,0 +1,45 @@
+// Navbar Component
+// ========================================
+
+
+// Variables
+$navbar-background-color: $blue-dark;
+$navbar-padding:          15px 10px;
+$navbar-position:         fixed;
+$navbar-shadow-color:     rgba(0, 0, 0, 0.5);
+$navbar-shadow-spread:    inset 0 0 5px;
+$navbar-width:            70px;
+
+$navbar-logo-size:        100px;
+
+$navbar-link-color:       $white-base;
+
+
+// Structure
+.navbar {
+  @include box-shadow($navbar-shadow-spread, $navbar-shadow-color);
+  @include position($navbar-position, -5px null 0 0);
+  @include rem(padding, $navbar-padding);
+  @include rem(width, $navbar-width);
+  background-color: $navbar-background-color;
+}
+
+.navbar-logo {
+  @include rem(height, $navbar-logo-size - 20px);
+  @include rem(width, $navbar-logo-size);
+
+  img{ width: 50%; }
+}
+
+.navbar-link {
+  @include font-type($primary-sans-serif, normal, 700);
+  @include rem(margin-bottom, 15px);
+  @include s-hotel;
+  @include transition(all 0.3s ease-in-out);
+  color: $navbar-link-color;
+  text-align: center;
+  text-transform: uppercase;
+
+  &:hover { color: $blue-base; }
+
+}

data/app/assets/stylesheets/fuel/components/_navigation-icons.scss

@@ -0,0 +1,41 @@
+// Navigation Icons Component
+// ========================================
+
+
+// Variables
+$navigation-height:    50px;
+$navigation-icon-size: 152px 55px;
+$navigation-width:     50px;
+$navigation-icons:     image-url('fuel/icons/navigation-icons.svg');
+
+
+// Basic Styles
+%navigation-icon{
+  background-image: $navigation-icons;
+  background-size: $navigation-icon-size;
+  background-repeat: no-repeat;
+  display: inline-block;
+  height: $navigation-height;
+  width: $navigation-width;
+
+}
+
+
+// List
+$icons: (
+  authors  $navigation-width * 0,
+  posts    $navigation-width * 1,
+  settings $navigation-width * 3
+);
+
+
+// Loop
+@each $icon in $icons{
+  $name:      nth($icon, 1);
+  $position:  nth($icon, 2);
+
+  .#{$name}-icon{
+    background-position: -($position * 1) 0;
+    @extend %navigation-icon;
+  }
+}

data/app/assets/stylesheets/fuel/components/_page-sidebar.scss

@@ -0,0 +1,60 @@
+// Page Siebar Component
+// ========================================
+
+
+// Variables
+$sidebar-background-color:      $white-base;
+$sidebar-position:              fixed;
+$sidebar-shadow-color:          rgba(0, 0, 0, 0.35);
+$sidebar-shadow-spread:         0 0 5px;
+$sidebar-width:                 250px;
+
+$sidebar-header-background:     $blue-base;
+$sidebar-header-padding:        20px 10px;
+$sidebar-header-shadow-color:   rgba(0, 0, 0, 0.35);
+$sidebar-header-shadow-spread:  2px 0 5px;
+
+
+// Structure
+.page-sidebar{
+  @include box-shadow($sidebar-shadow-spread, $sidebar-shadow-color);
+  @include position($sidebar-position, 0 null 0 80px);
+  @include rem(width, $sidebar-width);
+  background-color: $sidebar-background-color;
+  overflow: hidden;
+}
+
+.page-sidebar--header{
+  @include box-shadow($sidebar-header-shadow-spread, $sidebar-header-shadow-color);
+  @include rem(padding, $sidebar-header-padding);
+  background-color: $sidebar-header-background;
+
+  .header-container--right,
+  .header-container--left{
+    display: inline-block;
+  }
+
+  .header-container--right{
+    @include position(relative, -10px null null null);
+    float: right;
+  }
+
+  .header--title{
+    @include s-foxtrot;
+    color: $white-base;
+    margin-bottom: 0;
+    text-transform: uppercase;
+  }
+}
+
+.header-container--right__actions{
+
+  li{
+    @include rem(margin-right, 5px);
+    display: inline;
+    float: left;
+    vertical-align: middle;
+
+    &:last-child{ margin-right: 0; }
+  }
+}