Permalink
Browse files

Removes a lot of legacy default CSS attached to SC.SegmentedView. Als…

…o makes Ace theme slightly more easily allow for sprited button images (requires a width and height on the icon). After some consideration, the icon sizes are set by default to: 12x12px for small, 14x14px for regular, 16x16px for large and 24x24px for huge. These sizes fit well with the theme and although odd numbered heights would position more nicely, even numbered height icons are much more common.
  • Loading branch information...
publickeating committed Oct 10, 2012
1 parent dde2737 commit afbdb3ed46dbae6facce59b38e893a964005f00b
@@ -1,128 +1,54 @@
.sc-segmented-view {
display: block;
white-space: nowrap;
- z-index: 1;

This comment has been minimized.

Show comment
Hide comment
@nicolasbadia

nicolasbadia Oct 16, 2012

Member

This was useful with the TabView to avoid the SegmentedView to be behind the container.

@nicolasbadia

nicolasbadia Oct 16, 2012

Member

This was useful with the TabView to avoid the SegmentedView to be behind the container.

This comment has been minimized.

Show comment
Hide comment
@dcporter

dcporter Jul 20, 2013

Member

@nicolasbadia does the TabView use z-index also? Can we fix by remove it there too?

@dcporter

dcporter Jul 20, 2013

Member

@nicolasbadia does the TabView use z-index also? Can we fix by remove it there too?

This comment has been minimized.

Show comment
Hide comment
@nicolasbadia

nicolasbadia Jul 22, 2013

Member

I've just remove it and everything seem fine. So I guess it's not needed anymore.

@nicolasbadia

nicolasbadia Jul 22, 2013

Member

I've just remove it and everything seem fine. So I guess it's not needed anymore.

This comment has been minimized.

Show comment
Hide comment
@dcporter

dcporter Jul 22, 2013

Member

Tremendous! Thanks much.

@dcporter

dcporter Jul 22, 2013

Member

Tremendous! Thanks much.

+
+ /* The entire SegmentedView is disabled. */
+ &.disabled {
+ .sc-segment-view {
+ background: #FFF;
+ color: #999;
+
+ &.sel {
+ background: #EEE;
+ }
+ }
+ }
img.icon {
position: relative;
- vertical-align: middle;
}
+ /* Style for an individual segment. */
.sc-segment-view {
- border-right: 1px #555 solid;
+ background: #DDD;
color: black;
display: inline-block;
- height: 22px;
- line-height: 22px;
position: relative;
text-align: center;
- text-decoration: none;
- text-shadow: #b0b0b0 0px 1px 0px;
- top: 0;
&:focus {
outline: none;
}
- &.sc-first-segment {
- padding-left: 10px;
- padding-right: 10px;
- background: #DDDDDD;
- .sc-button-inner {
- padding-right: 10px;
- }
- .active,
- .sel {
- background: #999999;
- }
+ &.active, &.sel {
+ background: #999;
}
- &.sc-last-segment {
- padding-right: 10px;
- border:none;
- background: #DDDDDD;
- .sc-button-inner {
- padding-left: 10px;
- }
- .active,
- .sel {
- background: #999999;
- }
- }
-
- .sc-middle-segment .sc-button-inner {
- padding-left: 10px;
- padding-right: 10px;
- }
-
- .sc-button-inner {
- background: #DDDDDD;
- }
-
- .sel .sc-button-inner {
- background: #999999;
- text-shadow: #909090 0px 1px 0px;
- }
-
- .active .sc-button-inner {
- background: #999999;
- text-shadow: #909090 0px 1px 0px;
- }
-
- &.vertical {
- display: block;
- }
-
- &.disabled .sc-button-inner {
- background: #FFFFFF;
+ &.disabled {
+ background: #FFF;
color: #999;
- }
-
- &.sc-first-segment.disabled {
- background: #FFFFFF;
- .sel.disabled {
- background: #FFFFFF;
- }
- }
- &.sc-last-segment.disabled {
- background: #FFFFFF;
- .sel.disabled {
- background: #FFFFFF;
+ &.sel {
+ background: #EEE;
}
}
- &.sel .sc-button-inner.disabled {
- background: #FFFFFF;
+ &.sel.active {
+ background: #888;
}
- }
- .sc-button-inner {
- display: block;
- min-width: 20px;
- min-height: 22px;
- }
- &.disabled{
- .sc-segment-view .sc-button-inner {
- background: #FFFFFF;
- color: #999;
- }
- .sc-segment-view{
- &.sc-first-segment {
- background: #FFFFFF;
- .sel {
- background: #FFFFFF;
- }
- }
- &.sc-last-segment {
- background: #FFFFFF;
- &.sel {
- background: #FFFFFF;
- }
- }
- &.sel .sc-button-inner {
- background: #FFFFFF;
- }
+ &.vertical {
+ display: block;
}
}
}
@@ -23,15 +23,16 @@ $theme.sc-segment-view {
}
.sc-button-label {
- padding: 0px;
font-size: 11px;
- top: -2px;
+ line-height: 18px;
margin-left: 9px;
margin-right: 10px;
}
- img {
- top: -3px;
+ img.icon {
+ height: 12px;
+ top: 2px;
+ width: 12px;
}
&.sc-first-segment .left {
@@ -29,13 +29,18 @@ $theme.sc-segment-view {
}
.sc-button-label {
- padding: 0px;
font-size: 12px;
- top: 0;
+ line-height: 24px;
margin-left: 9px;
margin-right: 10px;
}
+ img.icon {
+ height: 14px;
+ top: 5px;
+ width: 14px;
+ }
+
&.sc-first-segment .left {
@include slice("segmented_normal.png", $width: 8);
}
@@ -29,15 +29,16 @@ $theme.sc-segment-view {
}
.sc-button-label {
- padding: 0px;
font-size: 13px;
- top: 4px;
+ line-height: 30px;
margin-left: 9px;
margin-right: 10px;
}
- img {
- top: -2px;
+ img.icon {
+ height: 16px;
+ top: 7px;
+ width: 16px;
}
&.sc-first-segment .left {
@@ -26,14 +26,17 @@ $theme.sc-segment-view {
color:#777;
font-size: 16px;
font-weight: bold;
- top: 11px;
+ line-height: 44px;
+ // top: 11px;
text-shadow: 0px 1px 1px white;
margin-left: 9px;
margin-right: 10px;
}
- img {
- top: -2px;
+ img.icon {
+ height: 24px;
+ top: 9px;
+ width: 24px;
}
&.sc-first-segment .left {

0 comments on commit afbdb3e

Please sign in to comment.