coolstrap-generator 0.1.0

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/themes/_default.scss

@@ -0,0 +1,255 @@
+@import "compass";
+
+//Variables
+$theme-header-color: #444;
+$theme-nav-color: #888;
+$theme-footer-color: #444;
+$theme-base-color: #F8F8F8;
+$theme-border-radius: 5px;
+
+//Layout
+article {
+  background-color: $theme-base-color;
+}
+//Text
+h1 {
+  font-size: 14px;
+}
+h2 {
+  font-size: 1.08em;
+}
+header h1, header h2 {
+}
+
+
+// Bars colors
+header {
+  background-color: $theme-header-color;
+  border-bottom: 1px solid darken($theme-header-color,10%);
+  border-top: 1px solid lighten($theme-header-color,10%);
+  //padding-top: 1px;
+  color: $theme-base-color;
+}
+
+nav {
+  background-color: $theme-nav-color;
+  border-bottom: 1px solid darken($theme-nav-color,10%);
+  padding-top: 1px;
+}
+
+footer {
+  background-color: $theme-footer-color;
+  border-bottom: 1px solid darken($theme-footer-color,10%);
+}
+
+
+// Buttons colors
+a {
+  font-weight: bold;
+  i {
+  }
+}
+header {
+  color: lighten($theme-header-color,80%);
+  a:not(.onlyIcon) {
+    background-color: darken($theme-header-color,5%);
+    border: 1px solid darken($theme-header-color,10%);
+    color: lighten($theme-header-color,80%);
+    * { color: lighten($theme-header-color,80%); }
+  }
+}
+nav {
+  color: lighten($theme-header-color,80%);
+  a:not(.onlyIcon) {
+    background-color: darken($theme-nav-color,5%);
+    border: 1px solid darken($theme-nav-color,15%);
+    color: lighten($theme-header-color,80%);
+    * { color: lighten($theme-nav-color,80%); }
+  }
+}
+footer {
+  a {
+    margin: 3px;
+    * { color: #FFF; }
+    i {  }
+    &.is-active {
+      background-color: #FFF;
+      border: 1px solid darken($theme-footer-color,40%);
+      * { color: $theme-footer-color; }
+      i { border-color: $theme-footer-color; }
+    }
+  }
+}
+
+
+
+
+
+// Border radius
+header,
+nav,
+footer {
+  a:not(.onlyIcon) {
+    @include border-radius($theme-border-radius);
+  }
+}
+header,
+nav,
+footer {
+  .control-group {
+    a {
+      @include border-radius(0);
+      &:first-child { @include border-left-radius($theme-border-radius); }
+      &:last-child  { @include border-right-radius($theme-border-radius); }
+    }
+  }
+}
+
+ul[data-type="listview"].inset {
+  @include border-radius($theme-border-radius);
+  li {
+    &:first-child { @include border-top-radius($theme-border-radius); }
+    &:last-child  { @include border-bottom-radius($theme-border-radius); }
+  }
+}
+
+
+
+
+
+ul {
+  li              { z-index: 1; }
+  li.is-active    { z-index: 2; }
+  li.list-divider { z-index: 3; }
+}
+
+
+
+
+
+ul[data-type="listview"] {
+  color: #666;
+  a {
+    color: #666;
+  }
+  li {
+    background-color: #FFF;
+    margin-top: -1px;
+    position: relative;
+    border-style: solid;
+    border-color: darken($theme-base-color,10%);
+    .title { color: #444; }
+    .picture {
+      background-image: url(https://si0.twimg.com/profile_images/2090403606/abf2c68e837d11e19e4a12313813ffc0_7_normal.jpg);
+      width: 44px;
+      height: 44px;
+      &.small {
+        width: 30px;
+        height: 30px;
+      }
+    }
+    &.is-active {
+      background-color: darken($theme-base-color,2%);
+      border-color: darken($theme-base-color,15%);
+    }
+    &.list-divider {
+      background-color: darken($theme-base-color,30%);
+      border-color: darken($theme-base-color,40%);
+    }
+  }
+
+  &:not(.inset) {
+    li { border-width: 1px 0; }
+  }
+  &.inset {
+    li { border-width: 1px; }
+  }
+}
+
+.list-divider {
+  font-size: 11px;
+  color: darken($theme-base-color,60%);
+}
+
+
+
+.badge {
+  li & {
+    @include border-radius($theme-border-radius);
+    background-color: darken($theme-base-color,20);
+    font-size: 11px;
+  }
+}
+
+
+
+
+
+
+
+//Dialogs
+div[role="dialog"] {
+  background-color: darken($theme-base-color,20);
+  a {
+    background-color: #333;
+    color: #FFF;
+  }
+}
+div#{$isModal} {
+  .close {
+    @include border-radius(20px);
+    border: 2px solid #FFF;
+    background: darken($theme-base-color,20);
+  }
+}
+
+//Forms
+
+form {
+  input,
+  textarea,
+  select {
+    border: 1px solid #ccc;
+  }
+  .content {
+    background-color: #eee;
+    border-bottom: 1px solid #bbb;
+  }
+}
+
+
+//Sliders
+.slider {
+  @include border-radius(1em);
+  background-color: #ddd;
+  border: 1px solid #aaa;
+  .progress{
+  @include border-radius(1em);
+  background-color: blue;
+    .circle {
+      @include border-radius(1em);
+      background-color: #ccc;
+      border: 1px solid #888;
+
+    }
+  }
+}
+
+.loader {
+  @include border-radius(8px);
+  background-color: rgba(black,.4);
+  border: 1px solid rgba(black,.6);
+  padding: 0;
+  .progress {
+    @include border-radius(5px);
+    width: 30%;
+    background-color: #FFF;
+  }
+}
+
+
+
+
+
+
+

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/themes/coolstrap.css.scss

@@ -0,0 +1,164 @@
+@import "compass";
+@import "../structure/utilities/variables";
+
+$theme-header-color: #009AFF;
+$theme-header-color2: #225233;
+
+$theme-tabbar-color: #2B3035;
+$theme-toolbar-color: #B4BEC5;
+$theme-border-radius: 5px;
+
+$theme-base-color: #333;
+
+
+article {
+  background-color: lighten($theme-base-color,80%);
+}
+
+footer {
+  color: #FFF;
+}
+
+footer#{$isTabbar} {
+  a:not(.onlyIcon) {
+    @include border-radius(0px);
+  }
+  a {
+    margin: 0px;
+    border: 0 none;
+    color: lighten($theme-base-color,50%);
+    * { color: lighten($theme-base-color,50%); }
+    &.is-active {
+      background-color: darken($theme-base-color,1%);
+      border: 0 none;
+      color: lighten($theme-base-color,70%);
+      * { color: lighten($theme-base-color,70%); }
+    }
+  }
+}
+
+aside {
+
+  nav {
+    background-color: darken($theme-base-color,5%);
+    border-color: darken($theme-base-color,5%);
+  }
+
+  nav#{$isToolbar} {
+    a {
+      border: 0 none;
+      @include border-radius(20px);
+      color: lighten($theme-base-color,0%);
+      * { color: lighten($theme-base-color,0%); }
+    }
+  }
+
+
+  nav#{$isTabbar} {
+    margin-top: -5px;
+    a {
+      margin: 5px;
+      background-color: darken($theme-base-color,2%);
+      border: 1px solid darken($theme-base-color,0%);
+      color: lighten($theme-base-color,50%);
+      * { color: lighten($theme-base-color,50%); }
+      &.is-active {
+        background-color: lighten($theme-base-color,10%);
+        border: 1px solid lighten($theme-base-color,15%);
+        color: lighten($theme-base-color,70%);
+        * { color: lighten($theme-base-color,70%); }
+      }
+    }
+  }
+
+
+  header {
+    a.is-active {
+      background-color: #000;
+    }
+  }
+
+
+  background-color: #333;
+  input {
+    @include border-radius(20px);
+    background-color: lighten($theme-base-color,10%);
+    color: lighten($theme-base-color,60%);
+    padding: 0 10px;
+  }
+
+  header {
+    background-color: darken($theme-base-color,5%);
+    border-top: 1px solid lighten($theme-base-color,10%) !important;
+  }
+
+  .badge {
+    background-color: lighten($theme-base-color,10%);
+    color: lighten($theme-base-color,60%);
+  }
+
+  ul[data-type="listview"] {
+    color: lighten($theme-base-color,60%);
+    a { color: lighten($theme-base-color,60%); }
+    i {
+      width: 18px;
+      text-align: center;
+      font-size: 17px;
+    }
+    li {
+      background-color: #333;
+      border-top: 1px solid lighten($theme-base-color,5%);
+      border-bottom: 1px solid darken($theme-base-color,5%);
+      margin: 0;
+
+      .title { color: #DDD; }
+      &.is-active {
+        background-color: darken($theme-base-color,2%);
+        border-color: darken($theme-base-color,15%);
+      }
+      &.list-divider {
+        background-color: lighten($theme-base-color,5%);
+        border-color: lighten($theme-base-color,2%);
+      }
+    }
+    .aside:last-child i {
+      color: lighten($theme-base-color,15%)
+    }
+  }
+
+  .list-divider {
+    font-weight: bold;
+    color: lighten($theme-base-color,25%);
+  }
+}
+
+
+
+
+/* Dialogs */
+div[role="dialog"] {
+  color: #CCC;
+  background-color: darken($theme-base-color,60%);
+  background-color: darken($theme-base-color,60%);
+  a {
+    background-color: #444;
+    color: #DDD;
+  }
+}
+div#{$isModal} {
+  padding: 0 10px;
+  .close {
+    @include border-radius(20px);
+    border: 0px none;
+    background: darken($theme-base-color,20%);
+    font-size: 25px;
+    padding: 3px;
+    i {
+      top: 2px;
+      position: relative;
+    }
+  }
+}
+
+
+

data/lib/coolstrap-generator/templates/app/assets/stylesheets/customtheme.css.scss

@@ -0,0 +1,19 @@
+@import "compass";
+
+
+ul[data-type="listview"] .content > * + * {
+  margin-top: 2px;
+  .meta { color: #999; }
+}
+ul#mail {
+  h1 { font-size: 16px; }
+  h2 { font-weight: normal; }
+  p { color: #999; }
+}
+ul#twitterlist {
+  h1 {
+    span {
+      color: #999;
+    }
+  }
+}

data/lib/coolstrap-generator/templates/app/components/_formelements.html.haml

@@ -0,0 +1,130 @@
+
+					
+%h1 Radio y checkbox
+%form.inset
+	
+	.content
+		%label 
+			%input{:type => "checkbox"}	
+			Utilizar HTML
+	.content
+		%label 
+			%input{:type => "checkbox"}	
+			Utilizar CSS	
+
+	.content
+		%label 
+			%input{:type => "radio", :name => "radio"}	
+			Usar Coolstrap
+	.content
+		%label 
+			%input{:type => "radio", :name => "radio"}	
+			No usar Coolstrap
+
+%h1 horizontales			
+%form.inset
+	.content.horizontal
+		%label 
+			%input{:type => "radio", :name => "radio"}	
+			Cantar Lambada
+	.content.horizontal
+		%label 
+			%input{:type => "radio", :name => "radio"}	
+			Cantar Cueca				
+
+	
+
+%form.inset
+	.content.horizontal
+		%label 
+			%input{:type => "checkbox"}	
+			Bailar Rock and Roll
+	.content.horizontal
+		%label 
+			%input{:type => "checkbox"}	
+			Bailar Samba
+	
+		
+
+
+%h1 Con porcentajes		
+%form.inset	
+	
+	.content.horizontal
+		.aside Name
+		%input{:type => "text"}	
+	.content.horizontal
+		.aside 
+			%i.icon-phone-sign
+		%input{:type => "tel"}
+	.content.horizontal
+		.aside Larger Adress
+		%input{:type => "text"}	
+	.content.horizontal.start
+		.aside Label mas extensa que su contenedor
+		%input{:type => "text"}
+	.content.horizontal.start
+		.aside Descripcion
+		%textarea
+	.content.horizontal
+		.aside Dia para entrenar carrera
+		%select
+			%option{:value => "option 1"}	Lunes
+			%option{:value => "option 2"}	Miercoles
+			%option{:value => "option 3"}	Viernes
+
+%h1 Label encima
+%form.inset
+	.content.stack
+		%label 
+			Name
+			%input{:type => "text"}	
+	.content.stack
+		%label 
+			Date
+			%input{:type => "date"}		
+	.content.stack
+		%label 
+			Datetime
+			%input{:type => "datetime"}
+	.content.stack
+		%label 
+			Datetime-local
+			%input{:type => "datetime-local"}			
+	.content.stack
+		%label 
+			Time
+			%input{:type => "time"}	
+	.content.stack
+		%label 
+			Month
+			%input{:type => "month"}
+	.content.stack
+		%label 
+			Number
+			%input{:type => "number"}
+	.content.stack
+		%label 
+			Tel
+			%input{:type => "tel"}
+	.content.stack
+		%label 
+			Url
+			%input{:type => "url"}
+	.content.stack
+		%label 
+			Week
+			%input{:type => "week"}						
+	.content.stack
+		%label 
+			Descripcion
+			%textarea	
+	.content.stack
+		%label 
+			Escoja su dia libre
+			%select
+				%option{:value => "option 1"}	Martes					
+				%option{:value => "option 2"}	Jueves					
+				%option{:value => "option 3"}	Sabado	
+
+