sproutcore 1.4.5 → 1.5.0.pre.3

data/lib/frameworks/sproutcore/themes/ace/resources/segmented/24px/segmented.css

@@ -0,0 +1,91 @@
+@theme(sc-regular-size) {
+
+$theme.segment {
+
+  height: 24px;
+  
+  .left {
+    width: 8px;
+    height: 24px;
+    @include slice("segmented_normal.png", $left: 100, $width: 8);
+  }
+  
+  .right {
+    width: 8px;
+    height: 24px;
+    @include slice("segmented_normal.png", $left: 92, $width: 8);
+  }
+  
+  .middle {
+    left: 8px; right: 8px;
+    height: 24px;
+    @include slice("segmented_normal.png", $repeat: repeat-x, $left: 8, $width: 1);
+  }
+  
+  .sc-button-label {
+    padding: 0px;
+    font-size: 11px;
+    top: 0px;
+    margin-left: 9px;
+    margin-right: 10px;
+  }
+  
+  &.sc-first-segment .left {
+    @include slice("segmented_normal.png", $width: 8);
+  }
+    
+  &.sc-last-segment .right {
+    @include slice("segmented_normal.png", $right: 0, $width: 8);  
+  }
+  
+  
+  /* ACTIVE STATE */
+  &.active {
+    .left { @include slice("segmented_active.png", $left: 100, $width: 8); }
+    .right { @include slice("segmented_active.png", $left: 92, $width: 8); }
+    .middle { @include slice("segmented_active.png", $left: 8, $width: 1); }
+  }
+  
+  &.active.sc-first-segment {
+    .left { @include slice("segmented_active.png", $left: 0, $width: 8); }
+  }
+  
+  &.active.sc-last-segment {
+    .right { @include slice("segmented_active.png", $right: 0, $width: 8); }
+  }
+  
+  
+  /* SELECTED STATE */
+  &.sel {
+    .left { @include slice("segmented_selected.png", $left: 100, $width: 8); }
+    .right { @include slice("segmented_selected.png", $left: 92, $width: 8); }
+    .middle { @include slice("segmented_selected.png", $left: 8, $width: 1); }
+  }
+
+  &.sel.sc-first-segment {
+    .left { @include slice("segmented_selected.png", $left: 0, $width: 8); }
+  }
+
+  &.sel.sc-last-segment {
+    .right { @include slice("segmented_selected.png", $right: 0, $width: 8); }
+  }
+  
+  
+  /* SELECTED ACTIVE STATE */
+  &.sel.active {
+    .left { @include slice("segmented_selected_active.png", $left: 100, $width: 8); }
+    .right { @include slice("segmented_selected_active.png", $left: 92, $width: 8); }
+    .middle { @include slice("segmented_selected_active.png", $left: 8, $width: 1); }
+  }
+
+  &.sel.active.sc-first-segment {
+    .left { @include slice("segmented_selected_active.png", $left: 0, $width: 8); }
+  }
+
+  &.sel.active.sc-last-segment {
+    .right { @include slice("segmented_selected_active.png", $right: 0, $width: 8); }
+  }
+
+}
+
+}

data/lib/frameworks/sproutcore/themes/ace/resources/segmented/30px/segmented.css

@@ -0,0 +1,91 @@
+@theme(sc-large-size) {
+
+$theme.segment {
+
+  height: 30px;
+  
+  .left {
+    width: 8px;
+    height: 30px;
+    @include slice("segmented_normal.png", $left: 100, $width: 8);
+  }
+  
+  .right {
+    width: 8px;
+    height: 30px;
+    @include slice("segmented_normal.png", $left: 92, $width: 8);
+  }
+  
+  .middle {
+    left: 8px; right: 8px;
+    height: 30px;
+    @include slice("segmented_normal.png", $repeat: repeat-x, $left: 8, $width: 1);
+  }
+  
+  .sc-button-label {
+    padding: 0px;
+    font-size: 13px;
+    top: 4px;
+    margin-left: 9px;
+    margin-right: 10px;
+  }
+  
+  &.sc-first-segment .left {
+    @include slice("segmented_normal.png", $width: 8);
+  }
+    
+  &.sc-last-segment .right {
+    @include slice("segmented_normal.png", $right: 0, $width: 8);  
+  }
+  
+  
+  /* ACTIVE STATE */
+  &.active {
+    .left { @include slice("segmented_active.png", $left: 100, $width: 8); }
+    .right { @include slice("segmented_active.png", $left: 92, $width: 8); }
+    .middle { @include slice("segmented_active.png", $left: 8, $width: 1); }
+  }
+  
+  &.active.sc-first-segment {
+    .left { @include slice("segmented_active.png", $left: 0, $width: 8); }
+  }
+  
+  &.active.sc-last-segment {
+    .right { @include slice("segmented_active.png", $right: 0, $width: 8); }
+  }
+  
+  
+  /* SELECTED STATE */
+  &.sel {
+    .left { @include slice("segmented_selected.png", $left: 100, $width: 8); }
+    .right { @include slice("segmented_selected.png", $left: 92, $width: 8); }
+    .middle { @include slice("segmented_selected.png", $left: 8, $width: 1); }
+  }
+
+  &.sel.sc-first-segment {
+    .left { @include slice("segmented_selected.png", $left: 0, $width: 8); }
+  }
+
+  &.sel.sc-last-segment {
+    .right { @include slice("segmented_selected.png", $right: 0, $width: 8); }
+  }
+  
+  
+  /* SELECTED ACTIVE STATE */
+  &.sel.active {
+    .left { @include slice("segmented_selected_active.png", $left: 100, $width: 8); }
+    .right { @include slice("segmented_selected_active.png", $left: 92, $width: 8); }
+    .middle { @include slice("segmented_selected_active.png", $left: 8, $width: 1); }
+  }
+
+  &.sel.active.sc-first-segment {
+    .left { @include slice("segmented_selected_active.png", $left: 0, $width: 8); }
+  }
+
+  &.sel.active.sc-last-segment {
+    .right { @include slice("segmented_selected_active.png", $right: 0, $width: 8); }
+  }
+
+}
+
+}

data/lib/frameworks/sproutcore/themes/ace/resources/segmented/44px/segmented.css

@@ -0,0 +1,95 @@
+@theme(sc-jumbo-size) {
+
+$theme.segment {
+
+  height: 44px;
+  
+  .left {
+    width: 8px;
+    height: 44px;
+    @include slice("segmented_normal.png", $left: 100, $width: 8);
+  }
+  
+  .right {
+    width: 8px;
+    height: 44px;
+    @include slice("segmented_normal.png", $left: 92, $width: 8);
+  }
+  
+  .middle {
+    left: 8px; right: 8px;
+    height: 44px;
+    @include slice("segmented_normal.png", $repeat: repeat-x, $left: 8, $width: 1);
+  }
+  
+  .sc-button-label {
+    color:#777;
+    font-size: 16px;
+    font-weight: bold;
+    top: 12px;
+    text-shadow: 0px 1px 1px white;
+    margin-left: 9px;
+    margin-right: 10px;
+  }
+  
+  &.sc-first-segment .left {
+    @include slice("segmented_normal.png", $width: 8);
+  }
+    
+  &.sc-last-segment .right {
+    @include slice("segmented_normal.png", $right: 0, $width: 8);  
+  }
+  
+  
+  /* ACTIVE STATE */
+  &.active {
+    .left { @include slice("segmented_active.png", $left: 100, $width: 8); }
+    .right { @include slice("segmented_active.png", $left: 92, $width: 8); }
+    .middle { @include slice("segmented_active.png", $left: 8, $width: 1); }
+  }
+  
+  &.active.sc-first-segment {
+    .left { @include slice("segmented_active.png", $left: 0, $width: 8); }
+  }
+  
+  &.active.sc-last-segment {
+    .right { @include slice("segmented_active.png", $right: 0, $width: 8); }
+  }
+  
+  
+  /* SELECTED STATE */
+  &.sel {
+    .left { @include slice("segmented_selected.png", $left: 100, $width: 8); }
+    .right { @include slice("segmented_selected.png", $left: 92, $width: 8); }
+    .middle { @include slice("segmented_selected.png", $left: 8, $width: 1); }
+    
+    .sc-button-label { color: white; text-shadow: 0px -1px 1px rgba(0,0,0,.7);}
+  }
+
+  &.sel.sc-first-segment {
+    .left { @include slice("segmented_selected.png", $left: 0, $width: 8); }
+  }
+
+  &.sel.sc-last-segment {
+    .right { @include slice("segmented_selected.png", $right: 0, $width: 8); }
+  }
+  
+  
+  /* SELECTED ACTIVE STATE */
+  &.sel.active {
+    .left { @include slice("segmented_selected_active.png", $left: 100, $width: 8); }
+    .right { @include slice("segmented_selected_active.png", $left: 92, $width: 8); }
+    .middle { @include slice("segmented_selected_active.png", $left: 8, $width: 1); }
+  }
+
+  &.sel.active.sc-first-segment {
+    .left { @include slice("segmented_selected_active.png", $left: 0, $width: 8); }
+  }
+
+  &.sel.active.sc-last-segment {
+    .right { @include slice("segmented_selected_active.png", $right: 0, $width: 8); }
+  }
+
+}
+
+}

data/lib/frameworks/sproutcore/themes/ace/resources/segmented/segmented.css

@@ -0,0 +1,79 @@
+$theme.segmented {
+  overflow: visible;
+
+  .disabled {
+    opacity: 0.5;
+  }
+
+}
+
+$theme.segmented $theme.segment {
+  margin: 0px;
+  background: none;
+  border: 0px none;
+  color: #555;
+  text-shadow: 0px 1px 1px white;
+  display:inline-block;
+  zoom: 1;
+  overflow:hidden;
+  position: relative;
+  padding: 0px;
+  
+  &.sc-first-segment { margin: 0px; padding: 0px ;}
+  &.sc-last-segment { margin: 0px; padding: 0px; }
+  
+  .left {
+    position: absolute;
+    left: 0px;
+    zoom: 1;
+  }
+  
+  .right {
+    position: absolute;
+    right: 0px;
+    zoom: 1;
+  }
+  
+  .middle {
+    margin: 0px;
+    padding: 0px;
+    padding-top:1px;
+    vertical-align:top;
+    zoom: 1;
+    position: absolute;
+  }
+  
+  .sc-button-label {
+    position: relative;
+  }
+  
+  &.active {
+    color: #333;
+    text-shadow: 0px 1px 1px white;
+  }
+  
+  &.sel {
+    background:none;
+    color: #fff;
+    text-shadow: 0px -1px 1px rgba(0,0,0,.5);
+  }
+  
+  &.sel.active {
+    background:none;
+    color: #fff;
+    text-shadow: 0px -1px 1px rgba(0,0,0,.5);
+  }
+  
+  img {
+    vertical-align: middle;
+    position: relative;
+    top: -2px;
+    left: -2px;
+    margin-right:2px;
+  }
+  
+  .disabled {
+    opacity: 0.5;
+  }
+  
+}

data/lib/frameworks/sproutcore/themes/ace/resources/slider/ace/14px/slider.css

@@ -0,0 +1,27 @@
+@theme(sc-small-size) {
+
+  $theme.slider {
+    overflow: visible;
+  
+    .track { 
+      position: absolute;
+      top: 50%; height: 5px; left: 0px; right: 0px;
+      margin-top: -2px;
+      
+      @include slices("../track.png", $left: 3, $right: 3); 
+    }
+    
+    .sc-handle { 
+      display: block; position: absolute;
+      width: 14px; height: 16px; top: 50%; margin-top: -7px;
+
+      @include slice("knob.png"); 
+    }
+  
+    &.active {
+      .sc-handle { @include slice("knob_active.png"); }
+    }
+  
+  }
+
+}

data/lib/frameworks/sproutcore/themes/ace/resources/slider/ace/16px/slider.css

@@ -0,0 +1,27 @@
+@theme(sc-regular-size) {
+
+  $theme.slider {
+    overflow: visible;
+  
+    .track { 
+      position: absolute;
+      top: 50%; height: 5px; left: 0px; right: 0px;
+      margin-top: -2px;
+      
+      @include slices("../track.png", $left: 3, $right: 3); 
+    }
+    
+    .sc-handle { 
+      display: block; position: absolute;
+      width: 16px; height: 18px; top: 50%; margin-top: -8px;
+
+      @include slice("knob.png"); 
+    }
+  
+    &.active {
+      .sc-handle { @include slice("knob_active.png"); }
+    }
+  
+  }
+
+}