fortitude-sass 0.6.5 → 0.7.0

data/app/assets/stylesheets/fortitude/settings/_defaults.scss

@@ -17,6 +17,7 @@ $fortitude-base-line-height: 2rem !default;
 $fortitude-base-color: #333 !default;
 $fortitude-base-background-color: #fff !default;
 $fortitude-class-breakpoints: (xs: null, sm: 768px, md: 992px, lg: 1200px) !default;
+$fortitude-enable-vendor-optimizations: false !default;
 
 /* [1] */
 $fortitude-breakpoints: (xs: (max-width: 767px), sm: (min-width: 768px, max-width: 991px), md: (min-width: 992px, max-width: 1199px), lg: (min-width: 1200px)) !default;

data/app/assets/stylesheets/fortitude/theme/base/_page.scss

@@ -0,0 +1,21 @@
+.text-extra-light { font-weight: 200; }
+.text-light { font-weight: 300; }
+.text-normal { font-weight: 400; }
+
+html,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @extend .text-extra-light;
+}
+
+strong {
+  @extend .text-normal;
+}
+
+.link {
+  color: map-get(map-get($fortitude-button-intents, primary), background-color);
+}

data/app/assets/stylesheets/fortitude/theme/extensions/_badge.scss

@@ -0,0 +1,11 @@
+$fortitude-enable-badge: false !default;
+
+@if $fortitude-enable-badge {
+  @each $intent, $rules in $fortitude-badge-intents {
+    .badge--#{$intent} {
+      @each $property, $value in $rules {
+          #{$property}: $value;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/fortitude/theme/extensions/_box.scss

@@ -0,0 +1,11 @@
+$fortitude-enable-box: false !default;
+
+@if $fortitude-enable-box {
+  @each $intent, $rules in $fortitude-box-intents {
+    .box--#{$intent} {
+      @each $property, $value in $rules {
+        #{$property}: $value;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/fortitude/theme/extensions/_button.scss

@@ -0,0 +1,25 @@
+$fortitude-enable-button: false !default;
+
+@if $fortitude-enable-button {
+  @each $intent, $state in $fortitude-button-intents {
+    .button--#{$intent} {
+      @each $name, $rules in $state {
+        $selector: null;
+
+        @if $name == "initial" {
+          $selector: "&";
+        } @else if $name == "disabled" {
+          $selector: "&[#{$name}]";
+        } @else {
+          $selector: "&:#{$name}";
+        }
+
+        #{$selector} {
+          @each $property, $value in $rules {
+            #{$property}: $value;
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/fortitude/theme/extensions/_flashbar.scss

@@ -0,0 +1,15 @@
+$fortitude-enable-flashbar: false !default;
+
+@if $fortitude-enable-flashbar {
+  @each $intent, $rules in $fortitude-flashbar-intents {
+    .flashbar--#{$intent} {
+      @each $property, $value in $rules {
+        #{$property}: $value;
+      }
+
+      > .flashbar__close {
+        color: map-get($rules, color);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/fortitude/theme/extensions/_navigationbar.scss

@@ -0,0 +1,51 @@
+$fortitude-enable-navigationbar: false !default;
+
+@if $fortitude-enable-navigationbar {
+  .navigationbar--default {
+    $navigationbar__toggle__icon-width: 2.2rem;
+    $navigationbar__toggle__icon-height: 2.2rem;
+
+    background-color: $gray-lightest-color;
+    border-bottom: 0.1rem solid $gray-light-color;
+    text-transform: uppercase;
+
+    .navigationbar__header__logo {
+      font-size: 1.8rem;
+      color: $gray-darkest-color;
+      text-decoration: none;
+    }
+
+    .navigationbar__toggle {
+      > .icon {
+        width: $navigationbar__toggle__icon-width;
+        height: $navigationbar__toggle__icon-height;
+        margin: fortitude-halve($fortitude-navigationbar-height - $navigationbar__toggle__icon-height) fortitude-halve($fortitude-navigationbar-height - $navigationbar__toggle__icon-height);
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIdJREFUeNpiYBgFtAaMbm5uCkD6PBALUMnMD0BsyAQ1UICKjgWbxwhiAV1dQE0X79q1a8IQjDxoUCQAKQUqmfkAGBQLQKnCAJoqqAnAqeIDFDNQMbl9gAWFApWD4sHQzNKgjDEfiAOoZOYGIE4ERZ4BFQ1lgJplAIu89VTO0oGj5TvtAUCAAQCVmCDkKRdAyQAAAABJRU5ErkJggg==');
+        // Retina
+        @media
+        (-webkit-min-device-pixel-ratio: 2),
+        (min-resolution: 192dpi) {
+          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQRJREFUeNrsl7ENwjAQRU1oKDNCUBaADVK5zgi0VMAEjADZgBEokSuYgCwQYTpKj8CdZEdHSZWz9J9kn919nc73fcYAAACYklk6WGtPFPZKdZ6dc4dRMIldUXgqT+6aRPdFvJQZVAMn1STBIQPBPW9z3oZh+NR1/aZjQ2uhTCgnc0vlcEPLAQD8Z80thWNq0Iq40+qorV2lNVcUXsqTuyTRPjldlUE1NNKac8BLa/ZkzZXC+k1cqBy6n0cnvpnafm6Bv5XojwAosGZuazuFre0R25qX1lxGa9Y6jIZozaEQE6nmyZm1tVlacyFGaM1uMuqTj47TvtFozfHRBQMAAGByvgIMAOBPRPy+NdlpAAAAAElFTkSuQmCC');
+          background-size: $navigationbar__toggle__icon-height $navigationbar__toggle__icon-width;
+        }
+      }
+    }
+
+    .navigationbar__toggle__helper {
+      width: $navigationbar__toggle__icon-width + ($fortitude-navigationbar-height - $navigationbar__toggle__icon-height);
+      height: $navigationbar__toggle__icon-height + ($fortitude-navigationbar-height - $navigationbar__toggle__icon-height);
+      margin-right: (-($navigationbar__toggle__icon-width + ($fortitude-navigationbar-height - $navigationbar__toggle__icon-height)));
+    }
+
+    .navigationbar__link {
+      color: $gray-darkest-color;
+      text-decoration: none;
+      font-size: 1.4rem;
+
+      &::before {
+        content: '';
+        color: $info-color;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/fortitude/theme/extensions/_wings.scss

@@ -0,0 +1,15 @@
+$fortitude-enable-wings: false !default;
+
+@if $fortitude-enable-wings {
+  @each $intent, $rules in $fortitude-wings-intents {
+    .wings--#{$intent} {
+      .wings__wing {
+        &::before {
+          @each $property, $value in $rules {
+            #{$property}: $value;
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/fortitude/theme/settings/_colors.scss

@@ -0,0 +1,309 @@
+$gray-darkest-color : #373942 !default;
+$gray-darker-color  : #54565E !default;
+$gray-dark-color    : #87898E !default;
+$gray-color         : #CFCFD1 !default;
+$gray-light-color   : #E7E7E8 !default;
+$gray-lighter-color : #FCFCFC !default;
+$gray-lightest-color: #FFFFFF !default;
+
+$primary-color: #1CAFC9 !default;
+$success-color: #18D985 !default;
+$info-color   : #4DDBC4 !default;
+$warning-color: #E9CB0A !default;
+$danger-color : #DE1843 !default;
+$inverse-color: $gray-darkest-color !default;
+
+$fortitude-badge-intents: (
+  "default": (
+    "background-color": $gray-lightest-color,
+    "border-color": $gray-lightest-color,
+    "color": $gray-darkest-color
+  ),
+  "primary": (
+    "background-color": $primary-color,
+    "border-color": $primary-color,
+    "color": $gray-lightest-color
+  ),
+  "success": (
+    "background-color": $success-color,
+    "border-color": $success-color,
+    "color": $gray-lightest-color
+  ),
+  "info": (
+    "background-color": $info-color,
+    "border-color": $info-color,
+    "color": $gray-lightest-color
+  ),
+  "warning": (
+    "background-color": $warning-color,
+    "border-color": $warning-color,
+    "color": $gray-lightest-color
+  ),
+  "danger": (
+    "background-color": $danger-color,
+    "border-color": $danger-color,
+    "color": $gray-lightest-color
+  ),
+  "inverse": (
+    "background-color": $gray-darkest-color,
+    "border-color": $gray-darker-color,
+    "color": $gray-lightest-color
+  )
+) !default;
+
+$fortitude-box-intents: (
+  "default": (
+    "background-color": $gray-lightest-color,
+    "border-color": $gray-lightest-color,
+    "color": $gray-darkest-color
+  ),
+  "primary": (
+    "background-color": $primary-color,
+    "border-color": $primary-color,
+    "color": $gray-lightest-color
+  ),
+  "success": (
+    "background-color": $success-color,
+    "border-color": $success-color,
+    "color": $gray-lightest-color
+  ),
+  "info": (
+    "background-color": $info-color,
+    "border-color": $info-color,
+    "color": $gray-lightest-color
+  ),
+  "warning": (
+    "background-color": $warning-color,
+    "border-color": $warning-color,
+    "color": $gray-lightest-color
+  ),
+  "danger": (
+    "background-color": $danger-color,
+    "border-color": $danger-color,
+    "color": $gray-lightest-color
+  ),
+  "inverse": (
+    "background-color": $gray-darkest-color,
+    "border-color": $gray-darker-color,
+    "color": $gray-lightest-color
+  )
+) !default;
+
+$fortitude-button-intents: (
+  "default": (
+    "initial": (
+      "background-color": $gray-lightest-color,
+      "border-color": $gray-lightest-color,
+      "color": $gray-darkest-color
+    ),
+    "hover": (
+      "background-color": fortitude-tint($gray-lightest-color, 20%),
+      "border-color": fortitude-tint($gray-lightest-color, 20%),
+      "color": $gray-darkest-color
+    ),
+    "active": (
+      "background-color": fortitude-shade($gray-lightest-color, 20%),
+      "border-color": fortitude-shade($gray-lightest-color, 20%),
+      "color": $gray-darkest-color
+    ),
+    "disabled": (
+      "background-color": $gray-lightest-color,
+      "border-color": $gray-darkest-color,
+      "color": $gray-darkest-color
+    )
+  ),
+  "primary": (
+    "initial": (
+      "background-color": $primary-color,
+      "border-color": $primary-color,
+      "color": $gray-lightest-color
+    ),
+    "hover": (
+      "background-color": fortitude-tint($primary-color, 20%),
+      "border-color": fortitude-tint($primary-color, 20%),
+      "color": $gray-lightest-color
+    ),
+    "active": (
+      "background-color": fortitude-shade($primary-color, 20%),
+      "border-color": fortitude-shade($primary-color, 20%),
+      "color": $gray-lightest-color
+    ),
+    "disabled": (
+      "background-color": $gray-lightest-color,
+      "border-color": $primary-color,
+      "color": $primary-color,
+    )
+  ),
+  "success": (
+    "initial": (
+      "background-color": $success-color,
+      "border-color": $success-color,
+      "color": $gray-lightest-color
+    ),
+    "hover": (
+      "background-color": fortitude-tint($success-color, 20%),
+      "border-color": fortitude-tint($success-color, 20%),
+      "color": $gray-lightest-color
+    ),
+    "active": (
+      "background-color": fortitude-shade($success-color, 20%),
+      "border-color": fortitude-shade($success-color, 20%),
+      "color": $gray-lightest-color
+    ),
+    "disabled": (
+      "background-color": $gray-lightest-color,
+      "border-color": $success-color,
+      "color": $success-color,
+    )
+  ),
+  "info": (
+    "initial": (
+      "background-color": $info-color,
+      "border-color": $info-color,
+      "color": $gray-lightest-color
+    ),
+    "hover": (
+      "background-color": fortitude-tint($info-color, 20%),
+      "border-color": fortitude-tint($info-color, 20%),
+      "color": $gray-lightest-color
+    ),
+    "active": (
+      "background-color": fortitude-shade($info-color, 20%),
+      "border-color": fortitude-shade($info-color, 20%),
+      "color": $gray-lightest-color
+    ),
+    "disabled": (
+      "background-color": $gray-lightest-color,
+      "border-color": $info-color,
+      "color": $info-color,
+    )
+  ),
+  "warning": (
+    "initial": (
+      "background-color": $warning-color,
+      "border-color": $warning-color,
+      "color": $gray-lightest-color
+    ),
+    "hover": (
+      "background-color": fortitude-tint($warning-color, 20%),
+      "border-color": fortitude-tint($warning-color, 20%),
+      "color": $gray-lightest-color
+    ),
+    "active": (
+      "background-color": fortitude-shade($warning-color, 20%),
+      "border-color": fortitude-shade($warning-color, 20%),
+      "color": $gray-lightest-color
+    ),
+    "disabled": (
+      "background-color": $gray-lightest-color,
+      "border-color": $warning-color,
+      "color": $warning-color,
+    )
+  ),
+  "danger": (
+    "initial": (
+      "background-color": $danger-color,
+      "border-color": $danger-color,
+      "color": $gray-lightest-color
+    ),
+    "hover": (
+      "background-color": fortitude-tint($danger-color, 20%),
+      "border-color": fortitude-tint($danger-color, 20%),
+      "color": $gray-lightest-color
+    ),
+    "active": (
+      "background-color": fortitude-shade($danger-color, 20%),
+      "border-color": fortitude-shade($danger-color, 20%),
+      "color": $gray-lightest-color
+    ),
+    "disabled": (
+      "background-color": $gray-lightest-color,
+      "border-color": $danger-color,
+      "color": $danger-color,
+    )
+  ),
+  "inverse": (
+    "initial": (
+      "background-color": $inverse-color,
+      "border-color": $inverse-color,
+      "color": $gray-lightest-color
+    ),
+    "hover": (
+      "background-color": fortitude-tint($inverse-color, 20%),
+      "border-color": fortitude-tint($inverse-color, 20%),
+      "color": $gray-lightest-color
+    ),
+    "active": (
+      "background-color": fortitude-shade($inverse-color, 20%),
+      "border-color": fortitude-shade($inverse-color, 20%),
+      "color": $gray-lightest-color
+    ),
+    "disabled": (
+      "background-color": $gray-lightest-color,
+      "border-color": $inverse-color,
+      "color": $inverse-color,
+    )
+  )
+) !default;
+
+$fortitude-flashbar-intents: (
+  "default": (
+    "background-color": $gray-lightest-color,
+    "border-color": $gray-lightest-color,
+    "color": $gray-darkest-color
+  ),
+  "primary": (
+    "background-color": $primary-color,
+    "border-color": $primary-color,
+    "color": $gray-lightest-color
+  ),
+  "success": (
+    "background-color": $success-color,
+    "border-color": $success-color,
+    "color": $gray-lightest-color
+  ),
+  "info": (
+    "background-color": $info-color,
+    "border-color": $info-color,
+    "color": $gray-lightest-color
+  ),
+  "warning": (
+    "background-color": $warning-color,
+    "border-color": $warning-color,
+    "color": $gray-lightest-color
+  ),
+  "danger": (
+    "background-color": $danger-color,
+    "border-color": $danger-color,
+    "color": $gray-lightest-color
+  ),
+  "inverse": (
+    "background-color": $gray-darkest-color,
+    "border-color": $gray-darker-color,
+    "color": $gray-lightest-color
+  )
+) !default;
+
+$fortitude-wings-intents: (
+  "default": (
+    "background-color": $gray-lightest-color
+  ),
+  "primary": (
+    "background-color": $primary-color
+  ),
+  "success": (
+    "background-color": $success-color
+  ),
+  "info": (
+    "background-color": $info-color
+  ),
+  "warning": (
+    "background-color": $warning-color
+  ),
+  "danger": (
+    "background-color": $danger-color
+  ),
+  "inverse": (
+    "background-color": $gray-darkest-color
+  )
+) !default;