eyeglass-restyle/test/fixtures/restyle-complex.scss

@import 'restyle';

@include restyle-add-state(hover, '&:hover, &.hover, &:focus, &.focus');

@include restyle-define(test, (
  color: red,
  margin: 5px,
  font-size: 10px,
  border-color: this(color),

  // some variables
  restyle-var(simple): simple,

  '&.test': (
    simple: restyle-var(simple),
    color: root(color),

    '& > .child': (
      restyle-var(simple): simple2,
      color1: this(root(color)),
      color2: this(parent(color)),
      color3: this(parent(parent(color))),
      simple: restyle-var(simple)
    ),

    restyle-states: (
      hover: (
        test: restyle-var(simple),
        color: this(parent(color))
      )
    )
  ),

  restyle-modifiers: (
    fancy: (
      color: green,
      margin: null,
      simple: restyle-var(simple),
    ),
    simple: (
      color: null,
      '&.test': null
    ),
    single-nested-restyle: (
      restyle: simple test
    ),
    nested-restyle: (
      restyle: (simple test, fancy test),
      font-size: 16px // test overriding a property from a nested restyle
    ),
    null-nested-restyle: (
      restyle: null
    ),
    inherit-fancy: (
      restyle-extends: fancy
    )
  ),

  restyle-states: (
    hover: (
      color: purple,

      '& .sub': (
        color: orange
      )
    )
  )
));

.should-be-test {
  @include restyle(test);
}

.should-be-fancy-test {
  @include restyle(fancy test);
}

.should-be-fancy-test {
  @include restyle('fancy test');
}

.should-be-simple-test {
  @include restyle(simple test);
}

.should-be-simple-test-and-fancy-test {
  @include restyle(simple test, fancy test);
}

.should-be-simple-fancy-test {
  @include restyle(simple fancy test);
}

.should-be-fancy-simple-test {
  @include restyle(fancy simple test);
}

.should-be-simple-test {
  @include restyle(single-nested-restyle test);
}

.should-be-simple-test-and-fancy-test {
  @include restyle(nested-restyle test);
}

.should-be-fancy-test {
  @include restyle(inherit-fancy test);
}

.null-nested-restyle{
  @include restyle(null-nested-restyle test);
}




@include restyle-define(selectorTest, (
  '&::before': (
    color: green
  ),

  restyle-modifiers: (
    selectorA: (
      '&::before': (
        color: red
      )
    ),
    selectorB: (
      '&::before': (
        color: blue
      )
    )
  )
));

.should-be-selectorTest-green {
  @include restyle(selectorTest);
}

.should-be-selectorTest-red {
  @include restyle(selectorA selectorTest);
}

.should-be-selectorTest-blue {
  @include restyle(selectorB selectorTest);
}

.should-be-selectorTest-blue {
  @include restyle(selectorA selectorB selectorTest);
}


@include restyle-define(headline, (
  color: blue,
  font-weight: bold,
  text-transform: uppercase,
  font-family: sans-serif,

  restyle-modifiers: (
    large: (
      padding-top: 0,
      position: relative,
      font-size: 50px,
      // add a nifty separator bar
      '&::before': (
        background-color: blue,
        bottom: 12px,
        content: "",
        height: 8px,
        left: 0,
        position: absolute,
        right: 0
      ),
      '& > another': (
        color: green,
        height: 100%
      )
    ),

    full-width: (
      color: red,
      '&::before': (
        position: static,
        left: -100%,
        right: -100%,
        color: green
      ),
      '& > another': (
        color: pink
      )
    )
  )
));


.should-be-headline {
  @include restyle(headline);
}

.should-be-headline-large {
  @include restyle(large headline);
}

.should-be-headline-fullwidth {
  @include restyle(full-width headline);
}

.should-be-headline-large-fullwidth {
  @include restyle(large full-width headline);
}