threespot / frontline-sass Goto Github PK

Add new mixin for scaling units based on viewport width:
http://www.sassmeister.com/gist/7f22e44ace49b5124eec

Based on this http://slides.com/davidkhourshid/deck-17#/9

Since upgrading to Rails 6, I'm getting some deprecation warnings related to this package:

DEPRECATION WARNING on line 1270 of /Users/orenmagid/development/opensecrets-sandbox/app/assets/stylesheets/../../../node_modules/frontline-sass/dist/_frontline.scss: !global assignments won't be able to declare new variables in future versions. Consider adding $burger-height: null at the top level.

There's a similar warning about the next line, $burger-gutter.

Let me know if there's any other information I can provide. Thanks!

This will allow for element styles to be nested within the element while relying on the parents state.

• fs-static-parent
• fs-attention-parent
• fs-all-states-parent

Example:

@mixin fs-attention-parent($parent:null) {
  @if $parent {
    #{$parent}:hover &,
    #{$parent}:focus &,
    #{$parent}:active & {
      @content;
    }
  }
  @else {
    @content
  }
}

https://blog.chromium.org/2020/09/giving-users-and-developers-more.html

• rename fs-strip to fs-strip-unit
• create an alias for backwards compatibility

Allow for passing a breakpoint map for scale attributes similar to poly-fluid-sizing

https://github.com/Jakobud/poly-fluid-sizing

The documentation is either out of sync or incorrect.

• fs-svg - missing params, incorrect return value
• fs-triangle - check with Rae
• fs-burger-to-cross - missing param

Would be convienent if fs-svg accepted a function for the $color arguement.

Use Case:

.example {
  background-image: url( fs-svg($name: 'chevron', $color: fs-color('blue') ) );
}

Pseudo:

@function fs-svg($name, $color) {
  // . . .
  // Fill
  $fill: '';
  @if ($color) {
    @if (type-of($color) == 'function') {
      $fill: call($color);
    } @else {
      $fill: ' fill="#{$color}"';
    }
  }
  // . . . 
}

ActionView::Template::Error (Error: Incompatible units: 'deg*deg*deg' and 'deg'.
09:46:25 web.1     |         on line 475 of node_modules/frontline-sass/dist/_frontline.scss
09:46:25 web.1     | >>     $result: $result + $item;
09:46:25 web.1     |    -------------^
09:46:25 web.1     | ):

The fs-pow() function fails for non-unitless values. Need to store the units, strip them, then reapply to the result.