Date: Tue, 17 Apr 2012 03:59:30 -0700 (PDT)
From: Jonny Suchomel <jo...@suchomel.co>
To: sproutcore@googlegroups.com
Message-ID: <5172040.1662.1334660370089.JavaMail.geo-discussion-forums@ynmf4>
Subject: SC 1.8 and Theming
MIME-Version: 1.0
Content-Type: multipart/mixed; 
	boundary="----=_Part_1660_19753488.1334660370088"

------=_Part_1660_19753488.1334660370088
Content-Type: multipart/alternative; 
	boundary="----=_Part_1661_9337731.1334660370088"

------=_Part_1661_9337731.1334660370088
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 7bit

I have tried to add a new theme to the segmented view in the same way as 
done for the button in the guides. But I can't get it to work. Should it be 
possible to theme the segmented view ant tab view in the same way as the 
button, or must I do it in some other way? 

$theme.button {
  @include slices("button.png", $left: 3, $right: 3);
 
  color: white;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 1);
 
  /* & is SCSS's way of continuing the parent selector;
     this translates to: $theme.button.active */
  &.active {
    @include slices("button-active.png", $left: 3, $right: 4);
  }
}

$theme.sc-segmented-view {
  @include slices("segmented.png", $left: 3, $right: 3);
 
  color: white;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 1);
 
  /* & is SCSS's way of continuing the parent selector;
     this translates to: $theme.button.active */
  &.active {
    @include slices("segmented-active.png", $left: 3, $right: 4);
  }
}

------=_Part_1661_9337731.1334660370088
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable

I have tried to add a new theme to the segmented view in the same way as do=
ne for the button in the guides. But I can't get it to work. Should it be p=
ossible to theme the segmented view ant tab view in the same way as the but=
ton, or must I do it in some other way?&nbsp;<div><br></div><div><div>$them=
e.button {</div><div>&nbsp; @include slices("button.png", $left: 3, $right:=
 3);</div><div>&nbsp;</div><div>&nbsp; color: white;</div><div>&nbsp; text-=
shadow: 0px -1px 0px rgba(0, 0, 0, 1);</div><div>&nbsp;</div><div>&nbsp; /*=
 &amp; is SCSS's way of continuing the parent selector;</div><div>&nbsp; &n=
bsp; &nbsp;this translates to: $theme.button.active */</div><div>&nbsp; &am=
p;.active {</div><div>&nbsp; &nbsp; @include slices("button-active.png", $l=
eft: 3, $right: 4);</div><div>&nbsp; }</div><div>}</div><div><br></div><div=
>$theme.sc-segmented-view {</div><div>&nbsp; @include slices("segmented.png=
", $left: 3, $right: 3);</div><div>&nbsp;</div><div>&nbsp; color: white;</d=
iv><div>&nbsp; text-shadow: 0px -1px 0px rgba(0, 0, 0, 1);</div><div>&nbsp;=
</div><div>&nbsp; /* &amp; is SCSS's way of continuing the parent selector;=
</div><div>&nbsp; &nbsp; &nbsp;this translates to: $theme.button.active */<=
/div><div>&nbsp; &amp;.active {</div><div>&nbsp; &nbsp; @include slices("se=
gmented-active.png", $left: 3, $right: 4);</div><div>&nbsp; }</div><div>}</=
div></div>
------=_Part_1661_9337731.1334660370088--

------=_Part_1660_19753488.1334660370088--