eyeglass-restyle/test/fixtures/restyle-complex-old.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: '@var.simple',
    color: '@root.color',

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

    '@restyle.states': (
      hover: (
        test: '@var.simple',
        color: '@this.@parent.color'
      )
    )
  ),

  '@restyle.modifiers': (
    fancy: (
      color: green,
      margin: null,
      simple: '@var.simple',
    ),
    simple: (
      color: null,
      '&.test': null
    ),
    nested-restyle: (
      '@restyle': (simple test, fancy test),
      font-size: 16px // test overriding a property from a nested restyle
    ),
    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-and-fancy-test {
  @include restyle(nested-restyle test);
}

.should-be-fancy-test {
  @include restyle(inherit-fancy 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);
}