coolstrap-generator 0.1.0

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/structure/components/_navigations.scss

@@ -0,0 +1,192 @@
+/*
+ * General
+ */
+
+header,
+nav,
+footer {
+
+  /* box flex and center layout for container */
+  @include setFlexibleBox;
+  text-align: center;
+
+  /* reset for item list */
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  /* vertical box flex layout for inner content */
+  .content, > hgroup {
+    @include setFlexibleBox(vertical,stretch);
+  }
+
+  /* box flex some content */
+  .content, > hgroup, > h1, input, ul, li {
+    @include box-flex(1);
+    display: block;
+  }
+
+  /* spacing for content */
+  .content, hgroup, .control-group {
+    margin: 0 $default-interface-spacing;
+  }
+  > * + * {
+    margin-left: 0 !important;
+  }
+
+  /* basic title format */
+  h1 { font-size: 16px; }
+  h2 { font-size: 13px; }
+
+  i  { display: block; }
+
+  a  { @include setFlexibleBox; }
+
+}
+
+/* title landscape format */
+@media only screen and (min-width : 321px) and (max-width : 480px) and (orientation : landscape)  {
+  header#{$isNotVertical} {
+    h1 { display: block; }
+    hgroup > {
+      h1, h2 {
+        @include ellipsis;
+        display: inline
+      }
+    }
+  }
+}
+
+
+/* Icon spacing in buttons */
+header#{$isNotVertical},
+nav#{$isNotTabbar},
+footer#{$isNotTabbar} {
+  i + span { margin-left: 5px; }
+  span + i { margin-left: 5px; }
+}
+
+
+header#{$isNotVertical} {
+  i {
+    @include square($default-header-icon);
+    line-height:    $default-header-icon;
+    font-size:      $default-header-icon;
+  }
+  /* Format fot buttons and input for non vertical header */
+  a, input {
+    height:         $default-header-button;
+    margin:      0  $default-interface-spacing;
+  }
+  a {
+    padding:     0  $default-interface-spacing;
+  }
+  .control-group {
+    height:         $default-header-button;
+    a { height: auto !important; }
+  }
+}
+header#{$isVertical} {
+  i           { @include square($default-header-vertical-icon); }
+  //.onlyIcon i { @include square($default-header-vertical-button); }
+  /* Format fot buttons for vertical header */
+  a {
+    width:         $default-header-vertical-button;
+    margin:        $default-header-vertical-spacing;
+    padding:       $default-header-vertical-spacing;
+  }
+}
+//Landscape buttons
+@media only screen and (min-width : 321px) and (max-width : 480px) and (orientation : landscape) {
+  header#{$isNotVertical} {
+    a, input {
+      height:        $default-header-landscape-button;
+    }
+  }
+}
+
+nav,
+footer {
+  i {
+    @include square($default-navbar-icon);
+    line-height:    $default-navbar-icon;
+    font-size:      $default-navbar-icon;
+  }
+  //.onlyIcon i { @include square($default-navbar-button); }
+  &#{$isToolbar} {
+    /* Format fot buttons and inputs for toolbars */
+    a, input {
+      height:        $default-navbar-button;
+      margin:      0 $default-interface-spacing;
+    }
+    a {
+      padding:     0 $default-interface-spacing;
+    }
+    .control-group {
+      height:        $default-navbar-button;
+      a { height: auto !important; }
+    }
+  }
+  &#{$isTabbar} {
+    i {
+      @include square($default-tabbar-icon);
+      line-height:    $default-tabbar-icon;
+      font-size:      $default-tabbar-icon;
+    }
+    /* Vertical align for elements in tabbar */
+    a { @include box-orient(vertical); }
+  }
+  /* Format fot buttons and inputs for toolbars */
+  &#{$isTabbar},
+  &#{$isNormal} {
+    @include box-align(stretch);
+    ul, li { @include setFlexibleBox(horizontal, stretch); }
+    a { @include box-flex(1); }
+  }
+}
+
+.titleOnLeft {
+  * { @include box-ordinal-group(2); }
+
+  > h1, hgroup, .content {
+    @include box-ordinal-group(1);
+    @include box-align(start);
+    padding-left: $default-interface-spacing;
+    text-align: left;
+  }
+}
+
+
+
+
+/*
+header,
+nav,
+footer {
+  h1, h2, li, a {
+    @include ellipsis;
+  }
+
+  > .title {
+    width: 100%;
+  }
+  input {
+    position: relative;
+    display: block;
+    &[data-icon] {
+      &:after {
+        @include square($default-navbar-icon);
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        margin-top: -($default-navbar-icon / 2);
+      }
+    }
+  }
+
+}
+*/
+

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/structure/components/_tools.scss

@@ -0,0 +1,169 @@
+
+
+
+.flex {
+  @include box-flex(1);
+}
+.fix {
+
+}
+
+/* Lists elements */
+.list-divider {
+  padding: 5px 10px !important;
+  text-transform: uppercase;
+}
+.badge { padding: $default-badge-spacing !important; }
+
+/* Buttons groupers elements */
+.button-group,
+.control-group {
+  @include setFlexibleBox;
+  @include box-flex(0);
+  a { @include box-flex(1); }
+}
+
+.control-group {
+  @include box-align(stretch);
+  a {
+    margin: 0px 0px 0px -1px !important;
+    z-index: 0;
+  }
+  a.is-active { z-index: 1; }
+  &.autoWidth { @include box-flex(1); }
+}
+
+.button-group {
+  a {
+    margin-right: $default-content-spacing;
+    &:last-child { margin-right: 0; }
+  }
+  &.alignVertical {
+    @include box-orient(vertical);
+    @include box-align(stretch);
+    a:not(:last-child) {
+      margin-right: 0;
+      margin-bottom: $default-content-spacing;
+    }
+  }
+}
+
+/* Progress elements */
+.slider {
+  overflow: visible;
+  margin: 0 3px;
+  height: 8px;
+  padding: 0;
+  .progress {
+    position: relative;
+    height: 100%;
+    width: 50%;
+    z-index: 1;
+    .circle {
+      @include border-radius(100%);
+      position: absolute;
+      height: 18px;
+      width: 18px;
+      z-index: 2;
+      top: 50%;
+      right: -10px;
+      margin-top: -10px;
+      margin-left: -10px;
+      &.mini {
+        width: 14px;
+        height: 14px;
+        right: -10px;
+        margin-top: -8px;
+        margin-left: -8px;
+      }
+    }
+  }
+}
+
+.loader {
+  width: 220px;
+  height: 10px;
+  margin: 0 auto;
+  padding: 1px;
+  .progress {
+    width: 0;
+    min-width: 10px;
+    max-width: 100%;
+    height: 100%;
+  }
+  * + & {
+    margin-top: 5px;
+  }
+}
+
+/* Form elements */
+.toggle-content {
+  background-color: #666;
+  border: 1px solid #333;
+  height: 32px;
+  width: 80px;
+  position: relative;
+  input[type="checkbox"] {
+    display: none;
+  }
+  &:before, &:after { line-height: 32px; color: #fff;}
+  &:before {
+    content: "ON";
+    padding-left: 9px;
+  }
+  &:after {
+    content: "OFF";
+    padding-left: 12px;
+  }
+  label {
+    display: block;
+    height: 30px;
+    width: 40px;
+    position: absolute;
+    top: 0;
+    background-color: #fff;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+/*
+	header#{$isNotVertical},
+	nav#{$isToolbar},
+	footer#{$isToolbar} {
+	  a {
+	    font-size: 12px;
+	  }
+	  > a + a {
+	    margin-left: 0px;
+	  }
+	  input[type="search"] {
+	    @include box-flex(1);
+	    display: block;
+	  }
+	  input[type="search"] + a {
+	    margin-left: 0 !important;
+	  }
+	}
+
+
+	.message {
+	  i {
+	    @include inline-block;
+	    width: 16px;
+	    height: 16px;
+	    margin: -2px 5px 0 0;
+	    TODO: delete, it's only for debug
+	    @include border-radius(100%);
+	    border: 3px solid #666;
+	  }
+	}
+*/
+

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/structure/layout/_layers.scss

@@ -0,0 +1,57 @@
+// Layers
+aside,
+section#{$isNotPopup},
+article {
+  z-index: $default-layer-back;
+  &.current {
+    z-index: $default-layer-current;
+  }
+}
+
+section#{$isPopup} {
+  z-index: $default-layer-back;
+  &.current {
+    z-index: $default-layer-popup;
+  }
+}
+
+header, 
+footer,
+section > nav,
+div#{$isMain} {
+  z-index: $default-layer-front;
+}
+
+div#{$isDialog} {
+  z-index: $default-layer-dialog;
+}
+
+.overlay {
+  z-index: $default-layer-overalay;
+  &.inner {
+    z-index: $default-layer-overalay-inner;
+  }
+}
+
+
+// Visibility
+aside,
+section,
+article,
+div#{$isDialog} {
+  -webkit-backface-visibility: hidden;
+  visibility: hidden;
+}
+  
+div#{$isMain},
+div#{$isDialog}.current,
+aside.current {
+  visibility: visible;
+  section.current {
+    visibility: visible;
+    article.current {
+      visibility: visible;
+    }
+  }
+}
+

data/lib/coolstrap-generator/templates/app/assets/stylesheets/coolstrap/structure/layout/_layout.scss

@@ -0,0 +1,62 @@
+//FIXME: @Cristian: quita clases .onleft y .onright de este lugar
+.onleft   { float: left; }
+.onright  { float: right; }
+
+body {
+  overflow: hidden;
+}
+
+div#{$isMain},
+section,
+article,
+.overlay {
+  @include setHeight;
+}
+
+div#{$isMain} {
+  overflow: hidden;
+}
+
+section#{$isNotPopup},
+article {
+  header#{$isVertical} ~ &     { left: $default-header-vertical-size; bottom: 0; }
+  header#{$isNormal} ~ &       { top:  $default-header-size; }
+  nav#{$isNotTabbar} ~ &       { top:  $default-navbar-size; }
+  nav#{$isTabbar} ~ &          { top:  $default-tabbar-size; }
+  footer#{$isNotTabbar} ~ &    { bottom: $default-navbar-size; }
+  footer#{$isTabbar} ~ &       { bottom: $default-tabbar-size; }
+}
+
+div#{$isMain},
+section,
+article,
+header,
+footer,
+nav {
+  //@include box-sizing(content-box);
+}
+
+article {
+  header, nav, footer {
+    position: relative !important;
+  }
+}
+
+.scroll_container, .scrollable > * {
+  @include clearfix;
+  .inset {
+    //@include clearfix;
+    margin: $default-content-spacing;
+  }
+}
+
+// Landscape smartphone optimization
+@media only screen
+and(min-width : 321px)
+and (max-width : 480px)
+and (orientation : landscape)  {
+  section#{$isNotPopup},
+  article {
+    header#{$isNormal} ~ &     { top: $default-header-landscape-size; }
+  }
+}