hpoydar-compass-aristo-plugin 0.2.6

data/examples/aristo/index.html.haml

@@ -0,0 +1,235 @@
+!!!
+%html{ :lang => "en" }
+  
+  %head
+    %meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
+    %title
+      Aristo
+    %link{ :href => "stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
+  
+  %body
+    
+    #header.container
+      %h1
+        Aristo
+      %h2
+        Something believed to be the best of it's kind:
+        %i
+          the trout is the aristocrat of freshwater fish
+          
+      %p.compass
+        Examples of the CSS3
+        %a{:href => 'http://github.com/hpoydar/compass-aristo-plugin'} Aristo plugin
+        for the
+        %a{:href => 'http://compass-style.org'} Compass
+        CSS authoring framework in action. Looks best in Webkit browsers (Safari, Chrome).
+          
+    .section.container
+      %h2
+        Buttons
+        
+      .column.span-8        
+        %p
+          %button.aristo-default
+            More
+        
+          %button.aristo-default{:disabled => 'disabled'}
+            More
+            
+        %p.compass
+          %code
+            button.aristo-default
+          or
+          %code
+            +aristo-default-button
+          
+      .column.span-8.last
+        %p
+          %button.aristo-blue
+            More
+
+          %button.aristo-blue{:disabled => 'disabled'}
+            More
+            
+        %p.compass
+          %code
+            button.aristo-blue
+          or
+          %code
+            +aristo-blue-button
+    
+    
+              
+    .section.container
+      %h2
+        Controls
+        
+      .column.span-8
+        %p
+          %input.aristo{:type => 'checkbox', :id => 'checkbox_a'}
+          %label.aristo-checkbox{:for => 'checkbox_a'}
+            Checkbox A
+          %br
+          %input.aristo{:type => 'checkbox', :id => 'checkbox_b'}
+          %label.aristo-checkbox{:for => 'checkbox_b'}
+            Checkbox B
+            
+      
+        %p.compass
+          %code
+            label.aristo-checkbox
+          and
+          %code
+            input[type=checkbox].aristo
+          or
+          %code
+            +aristo-checkbox
+      
+      .column.span-8      
+        %p
+          %input.aristo{:type => 'radio', :name => 'radio', :value => 'a', :id => 'radio_a', :checked => 'checked'}
+          %label.aristo-radio{:for => 'radio_a'}
+            Radio A
+          %br
+          %input.aristo{:type => 'radio', :name => 'radio', :value => 'b', :id => 'radio_b'}
+          %label.aristo-radio{:for => 'radio_b'}
+            Radio B
+          %br
+          %input.aristo{:type => 'radio', :name => 'radio', :value => 'c', :id => 'radio_c'}
+          %label.aristo-radio{:for => 'radio_c'}
+            Radio C
+            
+        %p.compass
+          %code
+            label.aristo-radio
+          and
+          %code
+            input[type=radio].aristo
+          or
+          %code
+            +aristo-radio
+
+            
+      .column.span-8.last
+        %p
+          %input{:type => 'range'}
+          
+        %p.compass
+          %code
+            +aristo-slider
+          
+      .column.span-8
+        %p
+          %select
+            %option
+              Target A
+            %option
+              Target B
+            %option 
+              Target C
+      
+    .section.container
+      %h2
+        Menus
+
+      .column.span-8
+
+        %ul.aristo-menu
+          %li
+            %a
+              New
+          %li
+            %a
+              Open
+          %li
+            %a
+              Save
+          %li
+            %a
+              Project
+          %li
+            %a
+              Build
+              
+        %p.compass
+          %code
+            ul.aristo-menu
+          or
+          %code
+            +aristo-menu
+            
+      .column.span-8
+
+        %ul.aristo-menu-inverse
+          %li
+            %a
+              New
+          %li
+            %a
+              Open
+          %li
+            %a
+              Save
+          %li
+            %a
+              Project
+          %li
+            %a
+              Build
+              
+        %p.compass
+          %code
+            ul.aristo-menu-inverse
+          or
+          %code
+            +aristo-menu-inverse
+      
+      
+    .section.container
+      %h2
+        Scrollbars
+        
+      %div.span-8{:style => "overflow: scroll; height: 300px;"}
+        %p.span-16
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut tincidunt augue. Nunc placerat, libero eu lobortis mollis, mi lectus tristique metus, vel tincidunt nibh est sed odio. Donec euismod ultricies est, nec porta ipsum dictum sit amet. Suspendisse lacus purus, ullamcorper eget rutrum ut, laoreet vitae velit. Nam in leo eu nisi congue sagittis sed sed nisi. Sed ultricies luctus justo. Pellentesque orci arcu, vulputate vel dapibus non, posuere a orci. Suspendisse quis massa magna. Suspendisse potenti. Fusce placerat tempor purus id euismod. Praesent et turpis nisl, in pellentesque nisl. Nam vulputate justo tristique turpis tincidunt id dictum orci aliquet.
+        %p.span-16
+          Phasellus laoreet justo non libero lacinia fermentum commodo felis ornare. Quisque in est quis turpis venenatis gravida. Nullam eu enim quis mauris ultricies sollicitudin. Nunc convallis ante et massa condimentum nec interdum nibh ornare. Morbi fringilla sapien vel lacus ultricies id malesuada purus dignissim. Donec ut ornare nulla. Phasellus ipsum urna, venenatis at lacinia pulvinar, faucibus non metus. Proin adipiscing porttitor mollis. Nam risus dui, hendrerit sed elementum vitae, eleifend nec sem. Nunc vehicula, ligula eget sagittis dictum, tellus leo eleifend lorem, eget semper neque lorem in erat. Nunc non risus non velit mattis ultricies. Nunc volutpat feugiat justo id sollicitudin. Praesent in odio neque, id tempor diam.
+        %p.span-16  
+          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas egestas tempus ornare. Ut adipiscing feugiat tincidunt. Sed adipiscing imperdiet nisl, vitae mollis ante venenatis ut. Donec mollis, nulla vel malesuada vehicula, risus sem faucibus arcu, sed varius velit justo et risus. Mauris iaculis commodo erat, eget suscipit mi tempus in. Nullam venenatis sapien nec est mollis lacinia. Aenean placerat suscipit lectus, a luctus libero eleifend vel. Cras turpis mi, porta eget pharetra id, pharetra eget felis. Ut ac eros justo. Duis quis velit consequat eros placerat malesuada. In luctus lacus ut felis euismod porttitor. Aliquam tristique augue quis nunc imperdiet cursus. Aliquam erat volutpat. Donec leo est, placerat vel tristique at, imperdiet ut massa. Maecenas vel tortor a mi sodales eleifend eleifend eget nibh. Cras sagittis vehicula velit, et ultricies ante vehicula sit amet. Fusce massa risus, tempor eget elementum pharetra, sodales eu felis. Nam ut tellus neque, vitae dapibus purus.
+
+      %p.compass.span-8
+        %code
+          +aristo-scrollbars
+
+    .section.container.text
+      %h2
+        Text
+
+      %p
+        %span.regular
+          ARIAL Regular 12/22
+        
+      %p
+        %span.bold
+          ARIAL Bold 14/24
+        
+      %p.compass.span-8
+        %code
+          +regular-aristo-font
+        or
+        %code
+          +bold-aristo-font
+        
+    .section.container
+      %h2
+        Windows
+
+      %p
+        %i
+          TODO
+
+        
+    #footer.container
+      = 'This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">Creative Commons Attribution-Share Alike 3.0 United States License</a><br /><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/us/88x31.png" /></a>'
+      
+      

data/examples/aristo/src/.gitignore

@@ -0,0 +1 @@
+aristo.sass

data/examples/aristo/src/screen.sass

@@ -0,0 +1,71 @@
+@import blueprint
+@import compass/reset
+@import aristo
+
++blueprint-grid
+
+body
+  +regular-aristo-font
+  :color #333
+ 
+p
+  :margin 10px 0
+ 
+a
+  :color rgb(50, 116, 209)
+ 
+#header
+  :margin-top 40px
+  
+  h1
+    :text-transform uppercase
+    :font-size 36px
+    :font-weight bold
+    :height 36px
+    :line-height 36px
+    :color #000
+  
+.section
+  :margin-top 20px
+  
+  h2
+    :color #999
+    :border-bottom 1px solid #ccc
+    :font-size 10px
+    :line-height 12px
+    :margin-bottom 15px
+    :text-transform uppercase
+    :letter-spacing 1px
+    
+  &.text
+    .regular
+      +regular-aristo-font
+    .bold
+      +bold-aristo-font
+  
+#footer
+  :border-top 1px solid #ccc
+  :text-align right
+  :margin-top 20px
+  :padding-top 10px
+  :margin-bottom 40px
+  :font-size 11px
+  :color #999
+  a
+    :color #999
+
+p.compass
+  :padding 7px
+  :margin 10px 15px 10px 0
+  :background #f1f1f1
+  :color #666
+
+code
+  :font-family Monaco, 'Courier New', Tahoma, monospace
+  :color #38667f
+  :font-size 11px
+
++aristo-slider
+
++aristo-scrollbars
+  

data/examples/aristo/stylesheets/.gitignore

@@ -0,0 +1 @@
+*.css

data/lib/aristo.rb

@@ -0,0 +1,2 @@
+require File.join(File.dirname(__FILE__), 'aristo', 'compass_plugin')
+require File.join(File.dirname(__FILE__), 'aristo', 'sass_extensions')

data/lib/aristo/compass_plugin.rb

@@ -0,0 +1,5 @@
+options = {}
+options[:stylesheets_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'sass'))
+options[:templates_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'templates'))
+ 
+Compass::Frameworks.register('aristo', options)

data/lib/aristo/sass_extensions.rb

@@ -0,0 +1,7 @@
+require 'sass'
+ 
+module Sass::Script::Functions
+  def enumerate(prefix, from_index, to_index)
+    Sass::Script::String.new(((from_index.value)..(to_index.value)).map{|i| "#{prefix}#{i}"}.join(", "))
+  end
+end

data/sass/aristo/_all.sass

@@ -0,0 +1,6 @@
+@import aristo/text
+@import aristo/buttons
+@import aristo/controls
+@import aristo/menus
+@import aristo/scrollbars
+@import aristo/windows

data/sass/aristo/_buttons.sass

@@ -0,0 +1,42 @@
+// Buttons
+
+=aristo-default-button
+  +bold-aristo-font
+  -khtml-appearance: none
+  -moz-appearance: none
+  :padding 0px 13px
+  :background none
+  :margin 5px
+  :-webkit-border-image= image_url("aristo-button-bezel-o.png") "2 2 2 2" "stretch" "stretch"
+  :-moz-border-image= image_url("aristo-button-bezel-o.png") "2 2 2 2" "stretch" "stretch"
+  :color #4F4F4F
+  :-webkit-transition -webkit-box-shadow 0.2s linear
+  :text-shadow 0px 1px 1px #fff
+  :height 24px
+  :line-height 20px
+  &:hover
+    -webkit-box-shadow: 0 0 5px #d4d4d4
+    -moz-box-shadow: 0 0 5px #d4d4d4
+  &:active:not(:disabled)
+    :-webkit-border-image= image_url("aristo-button-bezel-x.png") "2 2 2 2" "stretch" "stretch"
+    :-moz-border-image= image_url("aristo-button-bezel-x.png") "2 2 2 2" "stretch" "stretch"
+  &:disabled
+    :opacity 0.5
+  
+=aristo-blue-button
+  +aristo-default-button
+  :-webkit-border-image= image_url("aristo-button-bezel-blue-o.png") "2 2 2 2" "stretch" "stretch"
+  :-moz-border-image= image_url("aristo-button-bezel-blue-o.png") "2 2 2 2" "stretch" "stretch"
+  :color #1c4257
+  &:hover
+    -webkit-box-shadow: 0 0 5px #A1CAE2
+    -moz-box-shadow: 0 0 5px #A1CAE2
+  &:active:not(:disabled)
+    :-webkit-border-image= image_url("aristo-button-bezel-blue-x.png") "2 2 2 2" "stretch" "stretch"
+    :-moz-border-image= image_url("aristo-button-bezel-blue-x.png") "2 2 2 2" "stretch" "stretch"
+  
+button.aristo-default
+  +aristo-default-button
+
+button.aristo-blue
+  +aristo-blue-button

data/sass/aristo/_controls.sass

@@ -0,0 +1,55 @@
+// Checkboxes and radio buttons
+
+label.aristo-radio, label.aristo-checkbox
+  +bold-aristo-font
+
+=aristo-checkbox
+  -khtml-appearance: none
+  background-image= image_url("aristo-checkbox-o.png")
+  :background-repeat no-repeat
+  :width 15px
+  :height 16px
+  :vertical-align top
+  &:checked
+    background-image= image_url("aristo-checkbox-x.png")
+    
+input.aristo
+  &[type="checkbox"]
+    +aristo-checkbox
+
+=aristo-radio
+  -khtml-appearance: none
+  background-image= image_url("aristo-radio-o.png")
+  :background-repeat no-repeat
+  :width 17px
+  :height 17px
+  :vertical-align top
+  &:checked
+    background-image= image_url("aristo-radio-x.png")
+
+input.aristo
+  &[type="radio"]
+    +aristo-radio
+
+      
+// Sliders
+
+=aristo-slider
+  input[type="range"] 
+    -khtml-appearance: none 
+    :-webkit-border-image= image_url("aristo-slider-horizontal-track.png") "2 4 2 4 / 2px 4px 2px 4px" "repeat" "repeat"
+    :height 2px
+    :padding 0
+
+  ::-webkit-slider-thumb
+    -khtml-appearance: none
+    :background-image= image_url("aristo-slider-knob-o.png")
+    :background-repeat no-repeat
+    :width 23px
+    :height 24px
+    &:active
+      :background-image= image_url("aristo-slider-knob-x.png")
+  
+
+
+// Combo boxes 

data/sass/aristo/_menus.sass

@@ -0,0 +1,43 @@
+=aristo-menu
+  :list-style none
+  :height 28px
+  :margin 0
+  :padding 0
+  :display inline-block
+  :overflow hidden
+  :background-image= image_url("aristo-menu-bg.png")
+  :background-repeat repeat-x
+  :background-position center center
+  li
+    :float left
+    :margin 0
+    :padding 0 9px
+    &:first-child
+      :padding-left 18px
+    &:last-child
+      :padding-right 18px
+    :height 28px
+    a
+      :font-size 11px
+      :line-height 28px
+      :font-weight bold
+      :color #1c4257
+      :text-shadow 0px 1px 1px #fff
+      &:hover
+        :color #000
+
+=aristo-menu-inverse
+  +aristo-menu
+  :background-image= image_url("aristo-menu-inverse-bg.png")
+  li
+    a
+      :color #a5a5a5
+      :text-shadow 0px 1px 1px #000
+      &:hover
+        :color #fff
+        
+ul.aristo-menu
+  +aristo-menu
+
+ul.aristo-menu-inverse
+  +aristo-menu-inverse