Skip to content
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...
1 parent dde2737 commit afbdb3ed46dbae6facce59b38e893a964005f00b @publickeating publickeating committed
View
122 frameworks/desktop/resources/segmented.css
@@ -1,128 +1,54 @@
.sc-segmented-view {
display: block;
white-space: nowrap;
- z-index: 1;
@nicolasbadia SproutCore member

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

@dcporter SproutCore member

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

@nicolasbadia SproutCore member

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

@dcporter SproutCore member

Tremendous! Thanks much.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+
+ /* 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;
}
}
}
View
9 themes/ace/resources/segmented/18px/segmented.css
@@ -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 {
View
9 themes/ace/resources/segmented/24px/segmented.css
@@ -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);
}
View
9 themes/ace/resources/segmented/30px/segmented.css
@@ -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 {
View
9 themes/ace/resources/segmented/44px/segmented.css
@@ -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.
Something went wrong with that request. Please try again.