Matthew Schinckel avatar Matthew Schinckel committed 6893a96

Initial import of sass files

Comments (0)

Files changed (16)

+@import reset

Empty file added.

+
+
+=icon
+  +square($icon-size)
+  background: 
+    image: url(unquote("#{$icon-source}"))
+
+=icon-pos($x, $y)
+  background-position:
+    x: -$icon-size * ($x - 1)
+    y: -$icon-size * ($y - 1)
+  &:hover, &:checked
+    background-position-y: -$icon-size * $y
+
+=icon-pos-no-hover($x, $y)
+  +icon-pos($x, $y)
+  &:hover
+    background-position-y: -$icon-size * ($y - 1)
+  &:hover:checked
+    background-position-y: -$icon-size * $y
+
+=icon-pos-before-after($x, $y)
+  &:before, &:after
+    background-position:
+      x: -$icon-size * ($x - 1)
+      y: -$icon-size * ($y - 1)
+  &:hover:before, &:hover:after
+    background-position-y: -$icon-size * $y
+
+=icon-before-after($l: 0, $r: 0, $t: 0, $b: 0)
+  content: url(unquote($blank-image))
+  +icon
+  position: relative
+  top: -$t
+  padding-bottom: $t
+
+  
+=icon-before($x, $y, $l: 0, $r: 0, $t: 0, $b: 0)
+  +icon-pos-before-after($x,$y)
+  &:before
+    +icon-before-after($l,$r,$t,$b)
+    margin: 0 8px 0 0
+
+=icon-after($x,$y,$l: 0, $r: 0, $t: 0, $b: 0)
+  +icon-pos-before-after($x,$y)
+  &:after
+    +icon-before-after($l,$r,$t,$b)
+    margin: 0 0 0 8px
+    
+// TODO: Have icons and hover-icons
+
+=icon-alert
+  +icon-pos(1,5)
+=icon-error
+  +icon-alert
+=icon-info
+  +icon-pos(3,5)
+=icon-notice
+  +icon-info
+=icon-help
+  +icon-pos(4,5)
+=icon-check
+  +icon-pos(2,5)
+=icon-success
+  +icon-check
+
+=icon-circle-close
+  +icon-pos(1,1)
+=icon-circle-triangle-n
+  +icon-pos(2,1)
+=icon-circle-triangle-s
+  +icon-pos(3,1)
+=icon-circle-triangle-e
+  +icon-pos(4,1)
+=icon-circle-triangle-w
+  +icon-pos(5,1)
+
+=icon-close
+  +icon-pos(1,3)
+
+.icon
+  +icon
+  display: inline-block
+  overflow: hidden
+  text-indent: -999999px
+  
+  &.icon-circle-close
+    +icon-circle-close
+  &.icon-circle-triangle-n
+    +icon-circle-triangle-n
+  &.icon-circle-triangle-s
+    +icon-circle-triangle-s
+  &.icon-circle-triangle-e
+    +icon-circle-triangle-e
+  &.icon-circle-triangle-w
+    +icon-circle-triangle-w
+  
+  &.icon-close
+    +icon-close
+  
+  &.icon-alert
+    +icon-alert
+  &.icon-info
+    +icon-info
+  &.icon-notice
+    +icon-notice
+  &.icon-help
+    +icon-help
+  &.icon-check
+    +icon-success

sass/_images.sass

+
+$image-root: "../img"
+$blank-image: unquote("#{$image-root}/blank.png")
+$icon-source: unquote("#{$image-root}/icon-sprite.png")
+$icon-size: 16px
+$button-bg: unquote("#{$image-root}/button-bg.png")
+$range-bg: unquote("#{$image-root}/slider-bg-h.png")
+$spinner: unquote("#{$image-root}/spinner.gif")
+
+$button-border-colour: #b6b6b6
+$button-text-colour: #4f4f4f
+$button-border-colour-hover: #9d9d9d
+$button-text-colour-hover: #313131
+$button-border-colour-active: #7096ab
+$button-text-colour-active: #1c4257
+$button-border-colour-selected: $button-border-colour-hover
+$button-text-colour-selected: $button-text-colour-hover
+$button-border-colour-default: $button-border-colour-active
+$button-text-colour-default: $button-text-colour-active
+
+=button-text
+  text-align: center
+  color: $button-text-colour
+  line-height: 1.4em
+  text-shadow: 0px 1px 0px rgba(255,255,255,0.8)
+  font-size: 14px
+  text-decoration: none
+  font-weight: bold
+  
+button, input[type="button"], input[type="submit"], .button, .button-set label, .button-set input[type="radio"]
+  margin: 5px
+  -khtml-appearance: none
+  -moz-appearance: none
+  -webkit-appearance: none
+  +bg-x($button-bg)
+  +button-text
+  &:checked, &:checked + label
+    background-position: 0px -66px
+    border-color: $button-border-colour-selected
+    color: $button-text-colour-selected
+    &:hover:not(:disabled), &:active:not(:disabled)
+      border-color: $button-border-colour-selected
+      color: $button-text-colour-selected
+    &:active:not(:disabled)
+      background-position: 0px -66px
+  &:hover:not(:disabled)
+    +box-shadow(0px, 0px, 8px, rgba(212,212,212,1))
+    border-color: $button-border-colour-hover
+    color: $button-text-colour-hover
+  &:active:not(:disabled)
+    background-position: 0px -66px
+  &.default, &[type="submit"]
+    background-position: 0px -33px
+    border-color: $button-border-colour-default
+    color: $button-text-colour-default
+    &:hover, &:active:not(:disabled)
+      color: $button-text-colour-default
+      border-color: $button-border-colour-default
+    &:active:not(:disabled)
+      background-position: 0px -99px
+  &:disabled, &.disabled, &:disabled + label
+    &:hover
+      +box-shadow(0,0,0,0)
+      color: $button-text-colour
+      &[type="submit"], &.default
+        color: $button-text-colour-default
+    &:active + label
+      background-position: 0 0
+    +opacity(50)
+    cursor: default
+  display: inline-block
+  position: relative
+  cursor: pointer
+  border: 1px solid $button-border-colour
+  +rounded-border(3px)
+  padding: 4px 8px
+  
+  &[type="radio"]
+    display: none
+  
+  // TODO: make these icons depend upon the value that is the attribute.
+  // TODO: make the icons in the before/after selectors hover too.
+
+  &[left-icon="action"]
+    +icon-before(1,1)
+  
+  &[right-icon]
+    +icon-after(2,1)
+
+.button-set
+  margin: 0 7px
+  *
+    -moz-appearance: none
+    
+  label
+    margin:
+      left: 0
+      right: -5px
+    +rounded-border(0px)
+  .first, :first-child + label
+    +rounded-border-left(3px)
+  .last, :last-child
+    +rounded-border-right(3px)
+
+input
+  &[type="radio"], &[type="checkbox"], &[type="range"]
+    -khtml-appearance: none
+    -moz-appearance: none
+    -webkit-appearance: none
+    &:disabled
+      +opacity(50)
+  &[type="radio"], &[type="checkbox"]
+    +icon
+    +icon-pos-no-hover(8,1)
+  &[type="checkbox"]
+    +icon-pos-no-hover(7,1)
+  &[type="range"]
+    margin: 10px 0
+    height: 5px
+    +bg-x($range-bg)
+    &:hover:not(:disabled)::-webkit-slider-thumb
+      +icon-pos(6,2)
+        
+    &::-webkit-slider-thumb
+      -khtml-appearance: none
+      +icon
+      +icon-pos(6,1)

sass/_layout.sass

+header
+  display: block

sass/_messages.sass

+$error-border-color: #f2c0c0
+$error-bg-color: #fce0e0
+$success-border-color: #c0f2c0
+$success-bg-color: #e0fce0
+$notice-border-color: #c0c0f2
+$notice-bg-color: #e0e0fc
+$help-border-color: #e2e2a0
+$help-bg-color: #fcfce0
+
+p.error, p.success, p.help, p.notice
+  border: 1px solid
+  padding: 8px 10px 10px 10px
+  margin: 10px 0
+  +icon-before(0,0,2px,0)
+    
+      
+p.error
+  border-color: $error-border-color
+  background-color: $error-bg-color
+  &:before
+    +icon-error
+
+p.success
+  border-color: $success-border-color
+  background-color: $success-bg-color
+  &:before
+    +icon-success
+
+p.notice
+  border-color: $notice-border-color
+  background-color: $notice-bg-color
+  &:before
+    +icon-notice
+
+p.help
+  border-color: $help-border-color
+  background-color: $help-bg-color
+  &:before
+    +icon-help

sass/_mixins.sass

+
+=square($size)
+  width: $size
+  height: $size
+
+=full-size
+  +square(100%)
+
+=full-width
+  width: 100%
+
+=full-height
+  height: 100%
+
+
+=box-shadow($a, $b, $c, $col)
+  -moz-box-shadow: $a $b $c $col
+  -webkit-box-shadow: $a $b $c $col
+  box-shadow: $a $b $c $col
+
+=opacity($percent)
+  opacity: $percent/100
+  filter: Alpha(Opacity=$percent)
+
+// Helpers for rounded borders
+
+
+=border-radius($radius, $a, $b)
+  border-#{$a}-#{$b}-radius: $radius
+  -moz-border-radius-#{$a}#{$b}: $radius
+  -webkit-border-#{$a}-#{$b}-radius: $radius
+  -khtml-border-#{$a}-#{$b}-radius: $radius
+
+=rounded-border-top($radius)
+  +border-radius($radius, top, left)
+  +border-radius($radius, top, right)
+
+=rounded-border-bottom($radius)
+  +border-radius($radius, bottom, left)
+  +border-radius(radius, bottom, right)
+
+=rounded-border-left($radius)
+  +border-radius(radius, bottom, left)
+  +border-radius(radius, top, left)
+
+=rounded-border-right($radius)
+  +border-radius(radius, top, right)
+  +border-radius($radius, bottom, right)
+
+=rounded-border($radius)
+  border-radius: $radius
+  -moz-border-radius: $radius
+  -webkit-border-radius: $radius
+  -khtml-border-radius: $radius
+
+
+// Image related
+
+=bg-x($image)
+  background: url(unquote("#{$image}")) repeat-x
+
+=bg-y($image)
+  background: url(unquote("#{$image}")) repeat-y
+
+  

Empty file added.

sass/_progress_bar.sass

+.progress-bar, *[role="progress-bar"]
+  margin: 10px 0
+  width: 500px
+  +bg-x($button-bg)
+  border: 1px solid silver
+  background-position-y: -75px
+  +rounded-border(3px)
+  height: 24px
+  .value
+    +bg-x($button-bg)
+    background-position-y: -34px
+    max-width: 100%
+    height: 100%
+    +rounded-border-left(3px)
+
+=spinner($size: 64px)
+  height: $size
+  width-min: $size
+  background: url(unquote("#{$spinner}")) no-repeat center
+  background-size: $size
+  
+.spinner, *[role="spinner"], *[role="progress-indeterminate"]
+  +spinner(48px)
+  
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
+  margin: 0
+  padding: 0
+  border: 0
+  outline: 0
+  vertical-align: baseline
+  background: transparent
+
+body
+  line-height: 1
+
+ol, ul
+  list-style: none
+
+blockquote, q
+  quotes: none
+
+blockquote
+  &:before, &:after
+    content: ""
+    content: none
+
+q
+  &:before, &:after
+    content: ""
+    content: none
+
+/* remember to define focus styles!
+
+\:focus
+  outline: 0
+
+/* remember to highlight inserts somehow!
+
+ins
+  text-decoration: none
+
+del
+  text-decoration: line-through
+
+/* tables still need 'cellspacing="0"' in the markup
+
+table
+  border-collapse: collapse
+  border-spacing: 0

sass/_resizeable.sass

+*[role="resizeable"]
+  width: 250px
+  height: 25px
+  border: 1px solid gray
+  background-color: silver
+  +rounded-border(15px)
+  
+  div.handle
+    display: block
+    width: 15px
+    height: 100%
+    &.left
+      cursor: w-resize
+      float: left
+  
+    &.right
+      cursor: e-resize
+      float: right
+  

Empty file added.

+.tab-bar, *[role="tabbed-browser"]
+  position: relative
+  display: block
+  list-style-type: none
+  left: 0
+  right: 0
+  top: 0
+  li, *[role="tab-bar"] span
+    list-style-type: none
+    position: relative
+    display: inline-block
+    padding: 4px 8px
+    border: 1px solid gray
+    +rounded-border-top(3px)
+    +bg-x($button-bg)
+    &.active
+      border-bottom-color: white
+      background: white
+      z-index: 2
+    a
+      display: block
+      +button-text
+      +full-width
+    &:disabled
+      +opacity(50)
+  .tab-content, *[role="tab-content"]
+    display: block
+    border: 1px solid gray
+    position: relative
+    top: -1px
+    padding: 1em 1.4em
+/*
+ *CSS 3 Docs
+ *http://qooxdoo.org/documentation/general/webkit_css_styles
+ *http://trac.webkit.org/browser/trunk/LayoutTests//fast/css
+
+*
+  font-family: "Arial"
+  font-size: 14px
+  font-weight: bold
+
+input
+  &[type="checkbox"]
+    -khtml-appearance: none
+    background: url(../images/check-box-bezel.png) no-repeat
+    width: 15px
+    height: 16px
+    &:checked
+      background: url(../images/check-box-bezel-selected.png) no-repeat
+  &[type="radio"]
+    -khtml-appearance: none
+    background: url(../images/radio-bezel.png) no-repeat
+    width: 17px
+    height: 17px
+    &:checked
+      border: none
+      background: url(../images/radio-bezel-selected.png) no-repeat
+
+button
+  margin: 5px
+  -khtml-appearance: none
+  -moz-appearance: none
+  background: none
+  -webkit-border-image: url(../images/button-bezel.png) 2 2 2 2 stretch stretch
+  -moz-border-image: url(../images/button-bezel.png) 2 2 2 2 stretch stretch
+  padding: 3px 8px
+  color: #4f4f4f
+  -webkit-transition: -webkit-box-shadow 0.2s linear
+  text-shadow: 0px 1px 1px white
+  &.default
+    color: #1c4257
+    -webkit-border-image: url(../images/default-button-bezel.png) 2 2 2 2 stretch stretch
+    -moz-border-image: url(../images/default-button-bezel.png) 2 2 2 2 stretch stretch
+
+.hud button
+  font-size: 11px
+  color: white
+  padding: 0
+  -webkit-border-image: url(../images/hud/button-bezel.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
+  -moz-border-image: url(../images/hud/button-bezel.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
+  text-shadow: none
+
+button
+  &.hud
+    font-size: 11px
+    color: white
+    padding: 0
+    -webkit-border-image: url(../images/hud/button-bezel.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
+    -moz-border-image: url(../images/hud/button-bezel.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
+    text-shadow: none
+  &:hover:not(:disabled)
+    -webkit-box-shadow: 0 0 15px #d4d4d4
+    -moz-box-shadow: 0 0 15px #d4d4d4
+  &.default:hover
+    -webkit-box-shadow: 0 0 15px #a1cae2
+    -moz-box-shadow: 0 0 15px #a1cae2
+
+.hud button:hover
+  -webkit-box-shadow: none
+  -moz-box-shadow: none
+
+button
+  &.hud:hover
+    -webkit-box-shadow: none
+    -moz-box-shadow: none
+  &:active:not(:disabled)
+    -webkit-border-image: url(../images/button-bezel-highlighted.png) 2 2 2 2 stretch stretch
+    -moz-border-image: url(../images/button-bezel-highlighted.png) 2 2 2 2 stretch stretch
+  &.default:active
+    -webkit-border-image: url(../images/default-button-bezel-highlighted.png) 2 2 2 2 stretch stretch
+    -moz-border-image: url(../images/default-button-bezel-highlighted.png) 2 2 2 2 stretch stretch
+
+.hud button:active
+  -webkit-border-image: url(../images/hud/button-bezel-highlighted.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
+  -moz-border-image: url(../images/hud/button-bezel-highlighted.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
+
+button
+  &.hud:active
+    -webkit-border-image: url(../images/hud/button-bezel-highlighted.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
+    -moz-border-image: url(../images/hud/button-bezel-highlighted.png) 9 13 10 13 / 8px 13px 9px 13px repeat repeat
+  &:disabled
+    opacity: 0.5
+
+\:
+  &:-webkit-scrollbar
+    width: 17px
+    height: 17px
+  &:-webkit-scrollbar-button
+    &:vertical
+      &:end
+        background: url(../images/scroller-down-arrow.png) no-repeat
+        width: 17px
+        height: 20px
+      &:start
+        background: url(../images/scroller-up-arrow.png) no-repeat
+        width: 17px
+        height: 22px
+    &:horizontal
+      &:start
+        background: url(../images/scroller-left-arrow.png) no-repeat
+        width: 22px
+        height: 17px
+      &:end
+        background: url(../images/scroller-right-arrow.png) no-repeat
+        width: 22px
+        height: 17px
+  &:-webkit-scrollbar-thumb
+    &:vertical
+      -webkit-border-image: url(../images/scroller-vertical-knob.png) 8 0 8 0 / 8px 0 8px 0 stretch repeat
+    &:horizontal
+      -webkit-border-image: url(../images/scroller-horizontal-knob.png) 7 9 7 9 / 7px 9px 7px 9px stretch repeat
+  &:-webkit-scrollbar-track-piece
+    &:vertical
+      &:start
+        background-image: url(../images/scroller-up-arrow-track.png), url(../images/scroller-vertical-track.png)
+        background-repeat: no-repeat, repeat-y
+      &:end
+        background-image: url(../images/scroller-down-arrow-track.png), url(../images/scroller-vertical-track.png)
+        background-repeat: no-repeat, repeat-y
+        background-position: bottom left, 0 0
+    &:horizontal
+      &:end
+        background-image: url(../images/scroller-right-arrow-track.png), url(../images/scroller-horizontal-track.png)
+        background-repeat: no-repeat, repeat-x
+        background-position: bottom right, 0 0
+      &:start
+        background-image: url(../images/scroller-left-arrow-track.png), url(../images/scroller-horizontal-track.png)
+        background-repeat: no-repeat, repeat-x
+  &:-webkit-scrollbar-button
+    &:start:decrement, &:end:increment
+      display: block
+    &:start:increment, &:end:decrement
+      display: none
+
+/* Turn on single button up on top, and down on bottom
+
+/* Turn off the down area up on top, and up area on bottom
+
+input[type="range"]
+  -khtml-appearance: none
+  -webkit-border-image: url(../images/slider-horizontal-track.png) 2 4 2 4 / 2px 4px 2px 4px repeat repeat
+  height: 5px
+  padding: 0
+
+\::-webkit-slider-thumb
+  -khtml-appearance: none
+  background: url(../images/slider-knob.png) no-repeat
+  width: 23px
+  height: 24px
+  &:active
+    background: url(../images/slider-knob-highlighted.png) no-repeat
+
+/*This doesn't seem to be implemented yet
+
+input, textarea
+  font-size: 12px
+  color: black !important
+  font-weight: normal
+  padding: 4px !important
+  border: none
+
+\::-webkit-input-placeholder
+  color: #bdc7d3
+
+.copy
+  cursor: copy
+
+.progress
+  cursor: progress
+
+header, .header
+  display: block
+  height: 30px
+  width: 300px
+  padding: 10px
+  text-align: center
+  border-bottom: 2px solid #979797
+  background: #c2c2c2
+  background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#c2c2c2))
+  background: -moz-linear-gradient(left top, left bottom, from(#eaeaea), to(#c2c2c2))
+  text-shadow: 0px 1px 1px white
+  color: #2c2c2c
+
+.hud
+  -webkit-border-radius: 3px
+  color: white
+  background: -webkit-gradient(linear, left top, left bottom, from(#525252), color-stop(0.3, #212121), color-stop(0.33, #1d1d1d), to(#1d1d1d))
+  background: -moz-linear-gradient(left top, left bottom, from(#525252), color-stop(0.3, #212121), color-stop(0.33, #1d1d1d), to(#1d1d1d))
+  height: 100px
+  width: 200px
+
+nav
+  display: block
+  width: 100%
+  height: 33px
+  background: -webkit-gradient(linear, left top, left bottom, from(#030303), to(#44474b))
+  background: -moz-linear-gradient(left top, left bottom, from(#030303), to(#44474b))
+  clear: both
+  a
+    display: block
+    float: left
+    padding: 10px
+    color: #a5a5a5
+    font-size: 11px
+    font-weight: normal
+    text-shadow: 0px 1px 1px black
+    text-decoration: none
+    &:hover, &.active
+      background: -webkit-gradient(linear, left top, left bottom, from(#81afc8), to(#bbe1f7))
+      background: -moz-linear-gradient(left top, left bottom, from(#81afc8), to(#bbe1f7))
+      color: #1c4257
+      text-shadow: 0px 1px 1px white
+@import base
+@import mixins
+@import images
+@import icons
+@import input
+@import tabs
+@import messages
+@import progress_bar
+@import resizeable
+
+*
+  font-family: "Helvetica"
+  font-size: 11px
+  line-height: 125%
+  
+
+body
+  margin: 25px
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.