fortitude-sass 0.5.0 → 0.5.1

data/app/assets/stylesheets/fortitude/api/blocks/_tooltip.scss

@@ -0,0 +1,149 @@
+/*------------------------------------*\
+    #TOOLTIP
+\*------------------------------------*/
+
+$fortitude-tooltip-width: 18rem !default;
+$fortitude-tooltip-border-radius: 0.2rem !default;
+$fortitude-tooltip-arrow-size: 0.6rem !default;
+$fortitude-tooltip-color: #ffffff !default;
+$fortitude-tooltip-background-color: rgba(30, 30, 30, 0.9) !default;
+$fortitude-tooltip-padding: 0.8rem !default;
+$fortitude-tooltip-font-size: 1rem !default;
+$fortitude-tooltip-line-height: 1.4rem !default;
+$fortitude-tooltip-padding-vertical: $fortitude-tooltip-padding !default;
+$fortitude-tooltip-padding-horizontal: $fortitude-tooltip-padding !default;
+$fortitude-tooltip-min-height: $fortitude-tooltip-line-height + $fortitude-tooltip-padding * 2 !default;
+
+@mixin fortitude-tooltip {
+  position: relative;
+  cursor: pointer;
+  &::before,
+  &::after {
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    transform: translate3d(0, 0, 0);
+    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out, transform 0.15s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+    pointer-events: none;
+  }
+  &:hover::before,
+  &:hover::after {
+    visibility: visible;
+    opacity: 1;
+  }
+  &::before {
+    z-index: 1001;
+    border: $fortitude-tooltip-arrow-size solid transparent;
+    background: transparent;
+    content: "";
+  }
+  &::after {
+    z-index: 1000;
+    padding: $fortitude-tooltip-padding-vertical $fortitude-tooltip-padding-horizontal;
+    width: $fortitude-tooltip-width;
+    background-color: $fortitude-tooltip-background-color;
+    border-radius: $fortitude-tooltip-border-radius;
+    color: $fortitude-tooltip-color;
+    content: attr(data-tooltip);
+    font-size: $fortitude-tooltip-font-size;
+    line-height: $fortitude-tooltip-line-height;
+  }
+}
+
+@mixin fortitude-tooltip--top {
+  &::before,
+  &::after {
+    bottom: 100%;
+    left: 50%;
+  }
+  &::before {
+    margin-left: -$fortitude-tooltip-arrow-size;
+    margin-bottom: -($fortitude-tooltip-arrow-size * 2);
+    border-top-color: $fortitude-tooltip-background-color;
+  }
+  &::after {
+    margin-left: -($fortitude-tooltip-width / 2);
+  }
+  &:hover::before,
+  &:hover::after,
+  &:focus::before,
+  &:focus::after {
+    transform: translateY(-($fortitude-base-spacing-unit / 4 + $fortitude-tooltip-arrow-size));
+  }
+}
+
+@mixin fortitude-tooltip--right {
+  &::before,
+  &::after {
+    bottom: 50%;
+    left: 100%;
+  }
+  &::before {
+    top: $fortitude-tooltip-padding-vertical - ($fortitude-tooltip-arrow-size / 2 + $fortitude-tooltip-padding-vertical / 2);
+    margin-bottom: 0;
+    margin-left: -($fortitude-tooltip-arrow-size * 2);
+    border-top-color: transparent;
+    border-right-color: $fortitude-tooltip-background-color;
+  }
+  &::after {
+    margin-left: 0;
+    margin-bottom: -($fortitude-tooltip-padding-vertical + 0.7rem);
+  }
+  &:hover::before,
+  &:hover::after,
+  &:focus::before,
+  &:focus::after {
+    transform: translateX($fortitude-base-spacing-unit / 4 + $fortitude-tooltip-arrow-size);
+  }
+}
+
+@mixin fortitude-tooltip--bottom {
+  &::before,
+  &::after {
+    top: 100%;
+    bottom: auto;
+    left: 50%;
+  }
+  &::before {
+    margin-top: -($fortitude-tooltip-arrow-size * 2);
+    margin-bottom: 0;
+    border-top-color: transparent;
+    border-bottom-color: $fortitude-tooltip-background-color;
+  }
+  &::after {
+    margin-left: -($fortitude-tooltip-width / 2);
+  }
+  &:hover::before,
+  &:hover::after,
+  &:focus::before,
+  &:focus::after {
+    transform: translateY($fortitude-base-spacing-unit / 4 + $fortitude-tooltip-arrow-size);
+  }
+}
+
+@mixin fortitude-tooltip--left {
+  &::before,
+  &::after {
+    right: 100%;
+    bottom: 50%;
+    left: auto;
+  }
+  &::before {
+    top: $fortitude-tooltip-padding-vertical - ($fortitude-tooltip-arrow-size / 2 + $fortitude-tooltip-padding-vertical / 2);
+    margin-left: 0;
+    margin-right: -($fortitude-tooltip-arrow-size * 2);
+    margin-bottom: 0;
+    border-top-color: transparent;
+    border-left-color: $fortitude-tooltip-background-color;
+  }
+  &::after {
+    margin-left: 0;
+    margin-bottom: -($fortitude-tooltip-padding-vertical + 0.7rem);
+  }
+  &:hover::before,
+  &:hover::after,
+  &:focus::before,
+  &:focus::after {
+    transform: translateX(-($fortitude-base-spacing-unit / 4 + $fortitude-tooltip-arrow-size));
+  }
+}

data/app/assets/stylesheets/fortitude/api/blocks/_ui-list.scss

@@ -0,0 +1,50 @@
+/*------------------------------------*\
+    #UI-LIST
+\*------------------------------------*/
+
+/**
+ * The UI list object creates blocky list items with a keyline separator out of
+ * a `ul` or `ol`.
+**/
+
+// Predefine the variables below in order to alter and enable specific features.
+$fortitude-ui-list-padding: $fortitude-base-spacing-unit !default;
+$fortitude-ui-list-padding--small: halve($fortitude-ui-list-padding) !default;
+$fortitude-ui-list-padding--large: double($fortitude-ui-list-padding) !default;
+
+$fortitude-ui-list-border-width: 0.1rem !default;
+$fortitude-ui-list-border-style: solid !default;
+$fortitude-ui-list-border-color: #ccc !default;
+
+$fortitude-enable-ui-list--small: false !default;
+$fortitude-enable-ui-list--large: false !default;
+
+@mixin fortitude-ui-list {
+  border: 0 $fortitude-ui-list-border-style $fortitude-ui-list-border-color;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-top-width: $fortitude-ui-list-border-width;
+}
+
+@mixin fortitude-ui-list__item($fortitude-extension: null) {
+  border: 0 $fortitude-ui-list-border-style $fortitude-ui-list-border-color;
+  border-bottom-width: $fortitude-ui-list-border-width;
+  @if $fortitude-extension == small {
+    @include fortitude-ui-list--small__item;
+  }
+  @else if $fortitude-extension == large {
+    @include fortitude-ui-list--large__item;
+  }
+  @else {
+    padding: $fortitude-ui-list-padding;
+  }
+}
+
+@mixin fortitude-ui-list--small__item {
+  padding: $fortitude-ui-list-padding--small;
+}
+
+@mixin fortitude-ui-list--large__item {
+  padding: $fortitude-ui-list-padding--large;
+}

data/app/assets/stylesheets/fortitude/api/blocks/_wings.scss

@@ -0,0 +1 @@
+

data/bower.json

@@ -1,7 +1,7 @@
 {
   "name": "fortitude-sass",
   "homepage": "http://fortitude.io/",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "main": [
     "app/assets/stylesheets/fortitude/tools/_functions.scss",
     "app/assets/stylesheets/fortitude/tools/_mixins.scss",

data/lib/fortitude-sass/version.rb

@@ -1,3 +1,3 @@
 module Fortitude
-  VERSION = '0.5.0'
+  VERSION = '0.5.1'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: fortitude-sass
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.5.1
 platform: ruby
 authors:
 - Aaron Reisman
@@ -100,6 +100,30 @@ files:
 - app/assets/javascripts/fortitude/jquery/generic/wait-for-animation.js
 - app/assets/javascripts/fortitude/jquery/index.js
 - app/assets/stylesheets/fortitude.scss
+- app/assets/stylesheets/fortitude/api/blocks/_badge.scss
+- app/assets/stylesheets/fortitude/api/blocks/_bare-list.scss
+- app/assets/stylesheets/fortitude/api/blocks/_block-list.scss
+- app/assets/stylesheets/fortitude/api/blocks/_box.scss
+- app/assets/stylesheets/fortitude/api/blocks/_button.scss
+- app/assets/stylesheets/fortitude/api/blocks/_container.scss
+- app/assets/stylesheets/fortitude/api/blocks/_flag.scss
+- app/assets/stylesheets/fortitude/api/blocks/_flashbar.scss
+- app/assets/stylesheets/fortitude/api/blocks/_fluid-container.scss
+- app/assets/stylesheets/fortitude/api/blocks/_inline-list.scss
+- app/assets/stylesheets/fortitude/api/blocks/_input.scss
+- app/assets/stylesheets/fortitude/api/blocks/_layout.scss
+- app/assets/stylesheets/fortitude/api/blocks/_list-navigation.scss
+- app/assets/stylesheets/fortitude/api/blocks/_media.scss
+- app/assets/stylesheets/fortitude/api/blocks/_modal.scss
+- app/assets/stylesheets/fortitude/api/blocks/_navigationbar.scss
+- app/assets/stylesheets/fortitude/api/blocks/_shade.scss
+- app/assets/stylesheets/fortitude/api/blocks/_table.scss
+- app/assets/stylesheets/fortitude/api/blocks/_tabs-navigation.scss
+- app/assets/stylesheets/fortitude/api/blocks/_tabs.scss
+- app/assets/stylesheets/fortitude/api/blocks/_text.scss
+- app/assets/stylesheets/fortitude/api/blocks/_tooltip.scss
+- app/assets/stylesheets/fortitude/api/blocks/_ui-list.scss
+- app/assets/stylesheets/fortitude/api/blocks/_wings.scss
 - app/assets/stylesheets/fortitude/base/_hr.scss
 - app/assets/stylesheets/fortitude/base/_images.scss
 - app/assets/stylesheets/fortitude/base/_lists.scss