archetype 0.0.1.pre.1 → 0.0.1.pre.3.00dfd9a

data/stylesheets/archetype/styleguide/components/_button_toolbars.scss

@@ -0,0 +1,17 @@
+// ==========
+// BUTTON TOOLBAR
+// ==========
+$STYLEGUIDE_BUTTON_TOOLBARS_ID: button-toolbar !default;
+$STYLEGUIDE_BUTTON_TOOLBARS: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_BUTTON_TOOLBARS_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTON_TOOLBARS_ID,  $STYLEGUIDE_BUTTON_TOOLBARS, (
+  (default, (
+    line-height         1,
+    inline-block        true,
+    vertical-align      middle,
+    clearfix            legacy-pie-clearfix
+  )),
+  nil
+), $CONFIG_THEME);
+}

data/stylesheets/archetype/styleguide/components/_buttons.scss

@@ -0,0 +1,338 @@
+// ==========
+// BUTTONS
+// ==========
+$STYLEGUIDE_BUTTONS_ID: button !default;
+$STYLEGUIDE_BUTTONS: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_BUTTONS_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_BUTTONS_ID,  $STYLEGUIDE_BUTTONS, (
+  (default, (
+    // these are common between all buttons
+    font-weight             bold,
+    border-width            $CONFIG_DIM_GENERIC_BORDER,
+    border-style            solid,
+    cursor                  pointer,
+    margin                  0,
+    overflow                visible,
+    text-decoration         (none !important),
+    width                   auto,
+    text-shadow             $CONFIG_SHADOW_BUTTON_TEXT,
+    // sizing
+    border-radius           $CONFIG_DIM_BUTTON_RADIUS,
+    padding                 _styleguideGetButtonPadding(medium),
+    // we set the size intentionally two pixels large and use box-sizing to adjust it
+    // this makes IE6/7 behave properly and other browsers adjust correctly
+    height                  (_styleguideGetButtonHeight(medium) + (2*$CONFIG_DIM_GENERIC_BORDER)),
+    line-height             _styleguideGetButtonHeight(medium),
+    box-sizing              border-box,
+    font-size               nth($CONFIG_FONT_BUTTON_MEDIUM, 1),
+    // palette
+    color                   $CONFIG_COLOR_BUTTON_PRIMARY,
+    background-color        $CONFIG_COLOR_BG_BUTTON_PRIMARY,
+    border-color            $CONFIG_COLOR_BORDER_BUTTON_PRIMARY,
+    filter-gradient         $CONFIG_GRADIENT_BUTTON_PRIMARY_IE,
+    background-image        $CONFIG_GRADIENT_BUTTON_PRIMARY,
+    white-space             nowrap,
+    // alignment
+    inline-block            true, // this will use the inline-block() mixin
+    vertical-align          middle,
+    // states
+    (states, (
+      (hover, (
+        background-color    $CONFIG_COLOR_BG_BUTTON_PRIMARY_HOVER,
+        filter-gradient     $CONFIG_GRADIENT_BUTTON_PRIMARY_HOVER_IE,
+        background-image    $CONFIG_GRADIENT_BUTTON_PRIMARY_HOVER,
+        box-shadow          $CONFIG_SHADOW_BUTTON_HOVER
+      )),
+      (active, (
+        box-shadow          $CONFIG_SHADOW_BUTTON_ACTIVE,
+        nil
+      )),
+      (disabled, (
+        background-color    $CONFIG_COLOR_BG_BUTTON_PRIMARY_HOVER,
+        filter-gradient     $CONFIG_GRADIENT_BUTTON_PRIMARY_HOVER_IE,
+        background-image    $CONFIG_GRADIENT_BUTTON_PRIMARY_HOVER,
+        box-shadow          none,
+        cursor              default,
+        opacity             $CONFIG_OPACITY_BUTTON_DISABLED
+      ))
+    ))
+  )),
+  // IMPORTANCE
+  (primary, (
+    // inherits from default
+    nil
+  )),
+  (secondary, (
+    text-shadow             $CONFIG_SHADOW_BUTTON_TEXT_INVERTED,
+    color                   $CONFIG_COLOR_BUTTON_SECONDARY,
+    background-color        $CONFIG_COLOR_BG_BUTTON_SECONDARY,
+    border-color            $CONFIG_COLOR_BORDER_BUTTON_SECONDARY,
+    filter-gradient         $CONFIG_GRADIENT_BUTTON_SECONDARY_IE,
+    background-image        $CONFIG_GRADIENT_BUTTON_SECONDARY,
+    (states, (
+      (hover, (
+        background-color    $CONFIG_COLOR_BG_BUTTON_SECONDARY_HOVER,
+        filter-gradient     $CONFIG_GRADIENT_BUTTON_SECONDARY_HOVER_IE,
+        background-image    $CONFIG_GRADIENT_BUTTON_SECONDARY_HOVER
+      )),
+      (disabled, (
+        background-color    $CONFIG_COLOR_BG_BUTTON_SECONDARY_HOVER,
+        filter-gradient     $CONFIG_GRADIENT_BUTTON_SECONDARY_HOVER_IE,
+        background-image    $CONFIG_GRADIENT_BUTTON_SECONDARY_HOVER
+      ))
+    ))
+  )),
+  (spotlight, (
+    text-shadow             $CONFIG_SHADOW_BUTTON_TEXT_INVERTED,
+    background-color        $CONFIG_COLOR_BG_BUTTON_SPOTLIGHT,
+    border-color            $CONFIG_COLOR_BORDER_BUTTON_SPOTLIGHT,
+    color                   $CONFIG_COLOR_BUTTON_SPOTLIGHT,
+    filter-gradient         $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_IE,
+    background-image        $CONFIG_GRADIENT_BUTTON_SPOTLIGHT,
+    (states, (
+      (hover, (
+        background-color    $CONFIG_COLOR_BG_BUTTON_SPOTLIGHT_HOVER,
+        filter-gradient     $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_HOVER_IE,
+        background-image    $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_HOVER
+      )),
+      (disabled, (
+        background-color    $CONFIG_COLOR_BG_BUTTON_SPOTLIGHT_HOVER,
+        filter-gradient     $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_HOVER_IE,
+        background-image    $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_HOVER
+      ))
+    ))
+  )),
+  // CONTEXTS
+  // in a dark context
+  (in-dark, (
+    border-color            $CONFIG_COLOR_BORDER_BUTTON_DARK,
+    nil
+  )),
+  // IMPORTANCE in CONTEXTS
+  ((primary in-dark), (
+    (states, (
+      (hover, (
+        background-color    $CONFIG_COLOR_BG_BUTTON_PRIMARY_DARK_HOVER,
+        filter-gradient     $CONFIG_GRADIENT_BUTTON_PRIMARY_DARK_HOVER_IE,
+        background-image    $CONFIG_GRADIENT_BUTTON_PRIMARY_DARK_HOVER
+      )),
+      nil
+    )),
+    nil
+  )),
+  ((secondary in-dark), (
+    (states, (
+      (hover, (
+        background-color    $CONFIG_COLOR_BG_BUTTON_SECONDARY_DARK_HOVER,
+        filter-gradient     $CONFIG_GRADIENT_BUTTON_SECONDARY_DARK_HOVER_IE,
+        background-image    $CONFIG_GRADIENT_BUTTON_SECONDARY_DARK_HOVER
+      )),
+      nil
+    )),
+    nil
+  )),
+  ((spotlight in-dark), (
+    (states, (
+      (hover, (
+        background-color    $CONFIG_COLOR_BG_BUTTON_SPOTLIGHT_DARK_HOVER,
+        filter-gradient     $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_DARK_HOVER_IE,
+        background-image    $CONFIG_GRADIENT_BUTTON_SPOTLIGHT_DARK_HOVER
+      )),
+      nil
+    )),
+    nil
+  )),
+  // in the punchcut context (inherit from in-dark)
+  (primary in-punchcut, (
+    inherit (primary in-dark),
+    nil
+  )),
+  (secondary in-punchcut, (
+    inherit (secondary in-dark),
+    nil
+  )),
+  (spotlight in-punchcut, (
+    inherit (spotlight in-dark),
+    nil
+  )),
+  // in the bristol context (inherit from in-dark)
+  (primary in-bristol, (
+    inherit (primary in-dark),
+    nil
+  )),
+  (secondary in-bristol, (
+    inherit (secondary in-dark),
+    nil
+  )),
+  (spotlight in-bristol, (
+    inherit (spotlight in-dark),
+    nil
+  )),
+  // BUTTON TOOLBARS
+  (in-button-toolbar, (
+    margin-right            $CONFIG_DIM_BUTTON_SPACING_OUTER,
+    float                   left,
+    display                 block,
+    inline-block            nil
+  )),
+  (small in-button-toolbar, (
+    margin-right            $CONFIG_DIM_BUTTON_SPACING_OUTER_NARROW,
+    nil
+  )),
+  (last in-button-toolbar, (
+    margin-right            nil,
+    nil
+  )),
+  (right aligned in-button-toolbar, (
+    float                   right,
+    margin-right            nil,
+    margin-left             $CONFIG_DIM_BUTTON_SPACING_OUTER
+  )),
+  (right aligned small in-button-toolbar, (
+    margin-left             $CONFIG_DIM_BUTTON_SPACING_OUTER_NARROW,
+    nil
+  )),
+  (right aligned last in-button-toolbar, (
+    margin-left             nil,
+    nil
+  )),
+  // BUTTON GROUPS
+  (in-button-group, (
+    border-radius           0,
+    float                   left,
+    border-left-width       0,
+    display                 block,
+    inline-block            nil
+  )),
+  (last in-button-group, (
+    border-radius           (0 $CONFIG_DIM_BUTTON_RADIUS $CONFIG_DIM_BUTTON_RADIUS 0),
+    nil
+  )),
+  // fix the inner borders in a button group in a dark context
+  (in-button-group in-dark, (
+    border-right-color      $CONFIG_COLOR_BORDER_BUTTON_PRIMARY,
+    nil
+  )),
+  (secondary in-button-group in-dark, (
+    border-right-color      $CONFIG_COLOR_BORDER_BUTTON_SECONDARY,
+    nil
+  )),
+  (spotlight in-button-group in-dark, (
+    border-right-color      $CONFIG_COLOR_BORDER_BUTTON_SPOTLIGHT,
+    nil
+  )),
+  // restore the dark border for the last one
+  (last in-button-group in-dark, (
+    border-right-color      $CONFIG_COLOR_BORDER_BUTTON_DARK,
+    nil
+  )),
+  (in-button-group in-punchcut, (
+    inherit (in-button-group in-dark),
+    nil
+  )),
+  (secondary in-button-group in-punchcut, (
+    inherit (secondary in-button-group in-dark),
+    nil
+  )),
+  (spotlight in-button-group in-punchcut, (
+    inherit (spotlight in-button-group in-dark),
+    nil
+  )),
+  (last in-button-group in-punchcut, (
+    inherit (last in-button-group in-dark),
+    nil
+  )),
+  (in-button-group in-bristol, (
+    inherit (in-button-group in-dark),
+    nil
+  )),
+  (secondary in-button-group in-bristol, (
+    inherit (secondary in-button-group in-dark),
+    nil
+  )),
+  (spotlight in-button-group in-bristol, (
+    inherit (spotlight in-button-group in-dark),
+    nil
+  )),
+  (last in-button-group in-bristol, (
+    inherit (last in-button-group in-dark),
+    nil
+  )),
+  // need to add here for inheritance order to preserve the first button appearance
+  (first in-button-group, (
+    border-radius           ($CONFIG_DIM_BUTTON_RADIUS 0 0 $CONFIG_DIM_BUTTON_RADIUS),
+    // restore the left-border for the first button
+    border-left-width       nil
+  )),
+  // SIZES
+  (large, (
+    font-size               nth($CONFIG_FONT_BUTTON_LARGE, 1),
+    padding                 _styleguideGetButtonPadding(large),
+    height                  (_styleguideGetButtonHeight(large) + (2*$CONFIG_DIM_GENERIC_BORDER)),
+    line-height             _styleguideGetButtonHeight(large)
+  )),
+  (medium, (
+    // inherits from default
+    nil
+  )),
+  (small, (
+    font-size               nth($CONFIG_FONT_BUTTON_SMALL, 1),
+    padding                 _styleguideGetButtonPadding(small),
+    height                  (_styleguideGetButtonHeight(small) + (2*$CONFIG_DIM_GENERIC_BORDER)),
+    line-height             _styleguideGetButtonHeight(small)
+  )),
+  // narrow variants
+  (narrow, (
+    padding                 _styleguideGetButtonPadding(medium, narrow),
+    nil
+  )),
+  (narrow large, (
+    padding                 _styleguideGetButtonPadding(large, narrow),
+    nil
+  )),
+  (narrow small, (
+    padding                 _styleguideGetButtonPadding(small, narrow),
+    nil
+  )),
+  (indicator, (
+    hide-text               true,
+    border                  0,
+    color                   $CONFIG_COLOR_BUTTON_INDICATOR, // Added so IE 6/7 hide the text
+    width                   nth($CONFIG_DIM_BUTTON_INDICATOR_SMALL, 1),
+    height                  nth-cyclic($CONFIG_DIM_BUTTON_INDICATOR_SMALL, 2),
+    font-size               0,
+    line-height             0,
+    overflow                hidden,
+    padding                 0, // override browser defaults,
+    margin                  (0 horizontal-spacing(0.4, $abuse: true)),
+    text-shadow             nil,
+    border-radius           $CONFIG_DIM_BUTTON_INDICATOR_SMALL_RADIUS,
+    background-color        $CONFIG_COLOR_BUTTON_INDICATOR,
+    filter-gradient         nil,
+    background-image        nil,
+    (states, (
+      (hover, (
+        background-color    nil,
+        filter-gradient     nil,
+        background-image    nil,
+        box-shadow          nil
+      )),
+      (active, (
+        inherit (hover),
+        nil
+      )),
+      (disabled, (
+        color               nil,
+        background-color    nil,
+        filter-gradient     nil,
+        background-image    nil
+      )),
+      (selected, (
+        inherit (disabled),
+        nil
+      ))
+    ))
+  ))
+), $CONFIG_THEME);
+}

data/stylesheets/archetype/styleguide/components/_canvas.scss

@@ -0,0 +1,15 @@
+// ==========
+// CANVAS
+// ==========
+$STYLEGUIDE_CANVAS_ID: canvas !default;
+$STYLEGUIDE_CANVAS: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_CANVAS_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_CANVAS_ID,  $STYLEGUIDE_CANVAS, (
+  (default, (
+    background  nth($CONFIG_TEXTURE_CANVAS, 1),
+    nil
+  )),
+  nil
+), $CONFIG_THEME);
+}

data/stylesheets/archetype/styleguide/components/_carets.scss

@@ -0,0 +1,336 @@
+// ==========
+// CARETS
+// ==========
+$STYLEGUIDE_CARETS_ID: caret !default;
+$STYLEGUIDE_CARETS: () !default;
+
+@if not styleguide-component-exists($STYLEGUIDE_CARETS_ID, $CONFIG_THEME) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_CARETS_ID,  $STYLEGUIDE_CARETS, (
+  (default, (
+    inline-block        true,
+    vertical-align      middle,
+    // triangle... @see triangle() mixin
+    height              0,
+    width               0,
+    font-size           0,
+    line-height         0,
+    border-style        dashed,
+    border-color        transparent,
+    border-top-style    solid,
+    border-width        _styleguideCaretSize(medium),
+    border-top-color    nth($CONFIG_COLOR_COPY, 1),
+    overflow            hidden,
+    content             $CONTENT_PLACEHOLDER
+  )),
+  (in-dark, (
+    border-top-color    nth-cyclic($CONFIG_COLOR_COPY, 2),
+    nil
+  )),
+  (in-punchcut, (
+    inherit (in-dark),
+    nil
+  )),
+  (in-bristol, (
+    inherit (in-dark),
+    nil
+  )),
+  (in-tooltip, (
+    inherit (in-dark),
+    nil
+  )),
+  (in-button, (
+    border-top-color    $CONFIG_COLOR_BUTTON_PRIMARY,
+    nil
+  )),
+  (in-button in-secondary, (
+    border-top-color    $CONFIG_COLOR_BUTTON_SECONDARY,
+    nil
+  )),
+  (in-button in-spotlight, (
+    border-top-color    $CONFIG_COLOR_BUTTON_SPOTLIGHT,
+    nil
+  )),
+  // SIZES
+  (large, (
+    border-width        _styleguideCaretSize(large),
+    nil
+  )),
+  (small, (
+    border-width        _styleguideCaretSize(small),
+    nil
+  )),
+  (in-button in-large, (
+    inherit (large),
+    nil
+  )),
+  (in-button in-small, (
+    inherit (small),
+    nil
+  )),
+  // upward caret
+  (north, (
+    border-top-color    nil,
+    border-top-style    nil,
+    border-bottom-style solid,
+    border-bottom-color nth($CONFIG_COLOR_COPY, 1),
+    border-width        _styleguideCaretSize(medium, north)
+  )),
+  (north in-button, (
+    border-bottom-color $CONFIG_COLOR_BUTTON_PRIMARY,
+    nil
+  )),
+  (north in-button in-secondary, (
+    border-bottom-color $CONFIG_COLOR_BUTTON_SECONDARY,
+    nil
+  )),
+  (north in-button in-spotlight, (
+    border-bottom-color $CONFIG_COLOR_BUTTON_SPOTLIGHT,
+    nil
+  )),
+  // rightward caret
+  (east, (
+    border-top-color    nil,
+    border-top-style    nil,
+    border-left-style   solid,
+    border-left-color   nth($CONFIG_COLOR_COPY, 1),
+    border-width        _styleguideCaretSize(medium, east)
+  )),
+  (east in-button, (
+    border-left-color   $CONFIG_COLOR_BUTTON_PRIMARY,
+    nil
+  )),
+  (east in-button in-secondary, (
+    border-left-color   $CONFIG_COLOR_BUTTON_SECONDARY,
+    nil
+  )),
+  (east in-button in-spotlight, (
+    border-left-color   $CONFIG_COLOR_BUTTON_SPOTLIGHT,
+    nil
+  )),
+  // leftward caret
+  (west, (
+    border-top-color    nil,
+    border-top-style    nil,
+    border-right-style  solid,
+    border-right-color  nth($CONFIG_COLOR_COPY, 1),
+    border-width        _styleguideCaretSize(medium, east)
+  )),
+  (west in-button, (
+    border-left-color   $CONFIG_COLOR_BUTTON_PRIMARY,
+    nil
+  )),
+  (west in-button in-secondary, (
+    border-left-color   $CONFIG_COLOR_BUTTON_SECONDARY,
+    nil
+  )),
+  (west in-button in-spotlight, (
+    border-left-color   $CONFIG_COLOR_BUTTON_SPOTLIGHT,
+    nil
+  )),
+  // SIZES
+  (north in-button in-large, (
+    border-width        _styleguideCaretSize(large, north),
+    nil
+  )),
+  (north in-button in-small, (
+    border-width        _styleguideCaretSize(small, north),
+    nil
+  )),
+  (west in-button in-large, (
+    border-width        _styleguideCaretSize(large, west),
+    nil
+  )),
+  (west in-button in-small, (
+    border-width        _styleguideCaretSize(small, west),
+    nil
+  )),
+  (east in-button in-large, (
+    border-width        _styleguideCaretSize(large, east),
+    nil
+  )),
+  (east in-button in-small, (
+    border-width        _styleguideCaretSize(small, east),
+    nil
+  )),
+  // on hovercards
+  (on-hovercard, (
+    // remove unneeded styles
+    inline-block        nil,
+    vertical-align      nil,
+    height              nil,
+    width               nil,
+    font-size           nil,
+    line-height         nil,
+    border-style        nil,
+    border-color        nil,
+    border-top-style    nil,
+    border-right-style  nil,
+    border-bottom-style nil,
+    border-left-style   nil,
+    border-width        nil,
+    border-top-color    nil,
+    border-right-color  nil,
+    border-bottom-color nil,
+    border-left-color   nil,
+    overflow            nil,
+    // real styles
+    position            absolute,
+    display             block,
+    width               nth($CONFIG_DIM_HOVERCARD_TIP, 1),
+    height              nth-cyclic($CONFIG_DIM_HOVERCARD_TIP, 2),
+    margin-left         -1/2*nth($CONFIG_DIM_HOVERCARD_TIP, 1),
+    background          (transparent image-url($CONFIG_IMG_HOVERCARD_TIP) _styleguideGetTooltipTipBG(south) no-repeat),
+    top                 100%,
+    left                50%
+  )),
+  (south-west on-hovercard, (
+    left                $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-left         nil
+  )),
+  (south-east on-hovercard, (
+    left                nil,
+    right               $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-left         nil
+  )),
+  (north on-hovercard, (
+    background-position _styleguideGetTooltipTipBG(north),
+    top                 nil,
+    bottom              100%
+  )),
+  (north-west on-hovercard, (
+    inherit (north on-hovercard),
+    left                $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-left         nil
+  )),
+  (north-east on-hovercard, (
+    inherit (north on-hovercard),
+    left                nil,
+    right               $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-left         nil
+  )),
+  (east on-hovercard, (
+    width               nth-cyclic($CONFIG_DIM_HOVERCARD_TIP, 2),
+    height              nth($CONFIG_DIM_HOVERCARD_TIP, 1),
+    margin-top          -1/2*nth($CONFIG_DIM_HOVERCARD_TIP, 1),
+    margin-left         nil,
+    background-position _styleguideGetTooltipTipBG(east),
+    top                 50%,
+    left                100%
+  )),
+  (east-north on-hovercard, (
+    inherit (east on-hovercard),
+    top                 $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-top          nil
+  )),
+  (east-south on-hovercard, (
+    inherit (east on-hovercard),
+    top                 nil,
+    bottom              $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-top          nil
+  )),
+  (west on-hovercard, (
+    width               nth-cyclic($CONFIG_DIM_HOVERCARD_TIP, 2),
+    height              nth($CONFIG_DIM_HOVERCARD_TIP, 1),
+    margin-top          -1/2*nth($CONFIG_DIM_HOVERCARD_TIP, 1),
+    margin-left         nil,
+    background-position _styleguideGetTooltipTipBG(west),
+    top                 50%,
+    right               100%,
+    left                nil
+  )),
+  (west-north on-hovercard, (
+    inherit (west on-hovercard),
+    top                 $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-top          nil
+  )),
+  (west-south on-hovercard, (
+    inherit (west on-hovercard),
+    top                 nil,
+    bottom              $CONFIG_DIM_HOVERCARD_TIP_OFFSET,
+    margin-top          nil
+  )),
+  // on tooltips
+  (on-tooltip, (
+    position            absolute,
+    margin-left         -1*$CONFIG_DIM_TOOLTIP_TIP,
+    top                 100%,
+    left                50%,
+    border-width        _styleguideCaretSize(tooltip),
+    border-top-color    nth($CONFIG_COLOR_BORDER_TOOLTIP, 1)
+  )),
+  (south-west on-tooltip, (
+    left                $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-left         nil
+  )),
+  (south-east on-tooltip, (
+    left                nil,
+    right               $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-left         nil
+  )),
+  (north on-tooltip, (
+    border-width        _styleguideCaretSize(tooltip, north),
+    border-top-color    nil,
+    border-top-style    nil,
+    border-bottom-style solid,
+    border-bottom-color nth($CONFIG_COLOR_BORDER_TOOLTIP, 1),
+    top                 nil,
+    bottom              100%
+  )),
+  (north-west on-tooltip, (
+    inherit (north on-tooltip),
+    left                $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-left         nil
+  )),
+  (north-east on-tooltip, (
+    inherit (north on-tooltip),
+    right               $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    left                nil,
+    margin-left         nil
+  )),
+  (east on-tooltip, (
+    border-width        _styleguideCaretSize(tooltip, east),
+    border-top-color    nil,
+    border-top-style    nil,
+    border-left-style   solid,
+    border-left-color   nth($CONFIG_COLOR_BORDER_TOOLTIP, 1),
+    margin-left         nil,
+    margin-top          -1*$CONFIG_DIM_TOOLTIP_TIP,
+    top                 50%,
+    left                100%
+  )),
+  (east-north on-tooltip, (
+    inherit (east on-tooltip),
+    top                 $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-top          nil
+  )),
+  (east-south on-tooltip, (
+    inherit (east on-tooltip),
+    top                 nil,
+    bottom              $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-top          nil
+  )),
+  (west on-tooltip, (
+    border-width        _styleguideCaretSize(tooltip, west),
+    border-top-color    nil,
+    border-top-style    nil,
+    border-right-style  solid,
+    border-right-color  nth($CONFIG_COLOR_BORDER_TOOLTIP, 1),
+    margin-left         nil,
+    margin-top          -1*$CONFIG_DIM_TOOLTIP_TIP,
+    top                 50%,
+    right               100%,
+    left                nil
+  )),
+  (west-north on-tooltip, (
+    inherit (west on-tooltip),
+    top                 $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-top          nil
+  )),
+  (west-south on-tooltip, (
+    inherit (west on-tooltip),
+    top                 nil,
+    bottom              $CONFIG_DIM_TOOLTIP_TIP_OFFSET,
+    margin-top          nil
+  ))
+), $CONFIG_THEME);
+}