psique 0.1.0

data/assets/javascripts/psique.js.coffee

@@ -0,0 +1,2 @@
+#= require_self
+#= require_tree .

data/assets/javascripts/psique/panels.js.coffee

@@ -0,0 +1,7 @@
+$ ->
+  $(".tab[role='tab']").click ->
+    tab      = $(this)
+    tabpanel = $("##{ tab.attr('aria-controls') }")
+
+    $([tab[0], tabpanel[0]]).addClass('active')
+    $([tab[0], tabpanel[0]]).siblings().removeClass('active')

data/assets/stylesheets/psique.scss

@@ -0,0 +1,19 @@
+// Reset and vendors
+@import 'normalize';
+@import 'compass';
+@import 'breakpoint';
+@import 'susy';
+@import 'font-awesome';
+
+// Settings and mixins
+@import 'psique/settings';
+@import 'psique/mixins';
+
+// Base and core elements
+@import 'psique/typography';
+@import 'psique/grid';
+@import 'psique/panels';
+@import 'psique/summaries';
+@import 'psique/lists';
+@import 'psique/forms';
+@import 'psique/buttons';

data/assets/stylesheets/psique/_buttons.scss

@@ -0,0 +1,222 @@
+$gen-font: 'Roboto', sans-serif;
+@mixin button-properties($borderpx,$border-color, $color, $padding, $btnwidth, $font, $fsize, $fweight){
+  border: $borderpx solid $border-color;
+  color: $color;
+  padding: $padding; width: $btnwidth;
+  font-family:$font; font-size:$fsize; font-weight:$fweight;
+}
+@mixin vertical-center(){
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);transform: translateY(-50%);
+}
+html, html a {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+}
+
+body{
+  margin:0;
+  width:100%;
+}
+.set_wrapper{
+  width:80%;
+  margin:0 auto;
+  max-width:920px;
+  min-width: 920px;
+}
+.button-container{
+  margin-top: 60px; margin-left: 60px;
+  display:inline-block;
+  vertical-align:top;
+}
+.btn{
+  @include background-image(linear-gradient($capota-light,$capota));
+  @include single-box-shadow(0px, -1px, 0px, 0px,rgba(255, 255, 255, 0.15), inset);
+  @include button-properties(1px,$capota-dark, white, 6px 25px, auto, $gen-font, 0.8em, 600);
+  border-radius:4px;
+  text-align: center;
+  cursor:pointer;
+  &:hover{
+    @include background-image(linear-gradient($capota-light,$capota-dark));
+  }
+  &:active{
+    @include background-image(linear-gradient($capota-light,$capota));
+    @include single-box-shadow(0px, 1px, 4px, 0px,rgba(16, 90, 134, 1), inset);
+  }
+}
+.btn-orange{
+  @include background-image(linear-gradient($darkorange-light,$darkorange));
+  @include single-box-shadow(0px, -1px, 0px, 0px,rgba(255, 255, 255, 0.15), inset);
+  @include button-properties(1px,$darkorange-dark, white, 6px 25px, auto, $gen-font, 0.8em, 600);
+  border-radius:4px;
+  text-align: center;
+  cursor:pointer;
+  &:hover{
+    @include background-image(linear-gradient($darkorange-light,$darkorange-dark));
+  }
+  &:active{
+    @include background-image(linear-gradient($darkorange-light,$darkorange));
+    @include single-box-shadow(0px, 1px, 4px, 0px,rgba(152, 59, 3, 0.87), inset);
+  }
+}
+.btn-inactive{
+  background: $lightgrey;
+  @include single-box-shadow(0px, -1px, 0px, 0px,rgba(255, 255, 255, 0.15), inset);
+  @include button-properties(1px,$auxgrey, $auxgrey, 6px 25px, auto, $gen-font, 0.8em, 600);
+  border-radius:4px;
+  text-align: center;
+  cursor: not-allowed;
+}
+.btn-icon{
+  padding:6px 20px;
+  .fa{
+    padding-right:4px;
+    font-size: 1.4em;
+    vertical-align: text-top;
+  }
+  span{
+    padding-left:3px;
+  }
+}
+
+/*------Social Connect Buttons-------*/
+$twitter:#4099FF;
+$facebook:#3D62B3;
+$gplus:#D50F0F;
+$twitter-light:lighten(#4099FF,8);
+$facebook-light:lighten(#3D62B3,8);
+$gplus-light:lighten(#D50F0F,8);
+$twitter-dark:darken(#4099FF,8);
+$facebook-dark:darken(#3D62B3,8);
+$gplus-dark:darken(#D50F0F,8);
+
+.btn-twitter{
+  @include background-image(linear-gradient($twitter-light,$twitter));
+  @include single-box-shadow(0px, -1px, 0px, 0px,rgba(255, 255, 255, 0.15), inset);
+  @include button-properties(1px,$twitter-dark, white, 6px 0px, 190px, $gen-font, 0.8em, 600);
+  border-radius:4px;
+  text-align: center;
+  cursor:pointer;
+  .fa{
+    padding-right: 7px;
+    display:inline-block;
+  }
+  span{
+    padding-right: 5px;
+    display:inline-block;
+    width: 3px;
+    border-left: 1px solid $twitter-dark;
+  }
+  p{
+    display:inline-block;
+    margin:0;
+    padding-right: 18px; padding-left: 13px;
+  }
+  &:hover{
+    @include background-image(linear-gradient($twitter-light,$twitter-dark));
+  }
+  &:active{
+    @include background-image(linear-gradient($twitter-light,$twitter));
+    @include single-box-shadow(0px, 1px, 4px, 0px,rgba(45, 116, 197, 1), inset);
+  }
+}
+.btn-facebook{
+  @include background-image(linear-gradient($facebook-light,$facebook));
+  @include single-box-shadow(0px, -1px, 0px, 0px,rgba(255, 255, 255, 0.15), inset);
+  @include button-properties(1px,$facebook-dark, white, 6px 0px, 190px, $gen-font, 0.8em, 600);
+  border-radius:4px;
+  text-align: center;
+  cursor:pointer;
+  .fa{
+    padding-right: 11px;
+    display:inline-block;
+  }
+  span{
+    padding-right: 13px;
+    display:inline-block;
+    width: 3px;
+    border-left: 1px solid $facebook-dark;
+  }
+  p{
+    display:inline-block;
+    margin:0;
+    padding-right:5px;
+  }
+  &:hover{
+    @include background-image(linear-gradient($facebook-light,$facebook-dark));
+  }
+  &:active{
+    @include background-image(linear-gradient($facebook-light,$facebook));
+    @include single-box-shadow(0px, 1px, 4px, 0px,rgba(10, 45, 123, 1), inset);
+  }
+}
+.btn-gplus{
+  @include background-image(linear-gradient($gplus-light,$gplus));
+  @include single-box-shadow(0px, -1px, 0px, 0px,rgba(255, 255, 255, 0.15), inset);
+  @include button-properties(1px,$gplus-dark, white, 6px 0px, 190px, $gen-font, 0.8em, 600);
+  border-radius:4px;
+  text-align: center;
+  cursor:pointer;
+  .fa{
+    padding-right: 7px;
+    display:inline-block;
+  }
+  span{
+    padding-right: 15px;
+    display:inline-block;
+    width: 3px;
+    border-left: 1px solid $gplus-dark;
+  }
+  p{
+    display:inline-block;
+    margin:0;
+    padding-right:12px;
+  }
+  &:hover{
+    @include background-image(linear-gradient($gplus-light,$gplus-dark));
+  }
+  &:active{
+    @include background-image(linear-gradient($gplus-light,$gplus));
+    @include single-box-shadow(0px, 1px, 4px, 0px,rgba(152, 59, 3, 0.87), inset);
+  }
+}
+.h30{
+  height: 30px;
+}
+
+.input-box{
+  @include border-left-radius(4px);
+  border: 1px solid $auxgrey;
+  outline: none;
+  display: inline-block;
+  vertical-align:top;
+  height:26px;
+  padding-left:10px;
+}
+.input-btn{
+  @include border-left-radius(0);
+  width: auto;
+  height:30px;
+  padding: 0px 9px;
+  display: inline-block;
+  position: relative;
+  left: -7px;
+  outline: none;
+  vertical-align: top;
+}
+.inactive{
+  background: $lightgrey;
+  color: $auxgrey;
+  border: 1px solid $auxgrey;
+  cursor: not-allowed;
+  outline: none;
+  box-shadow:none;
+  &:hover{
+    @extend .inactive;
+  }
+  &:active{
+    @extend .inactive;
+  }
+}

data/assets/stylesheets/psique/_forms.scss

@@ -0,0 +1,92 @@
+/*doc
+---
+title: Forms
+name: forms
+category: Core
+---
+*/
+
+label {
+  display: inline-block;
+  font-weight: bold;
+  margin-bottom: 2px;
+  max-width: 100%;
+}
+
+.input {
+  @include trailer(.5);
+
+  select,
+  textarea,
+  input:not([type='checkbox']):not([type='file']):not([type='radio']) {
+    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .15));
+    @include box-sizing(border-box);
+    @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
+    background-color: $white;
+    background-image: none;
+    border: 1px solid $aux-grey;
+    border-radius: 4px;
+    color: #444;
+    display: block;
+    font-size: 12px;
+    height: 28px;
+    line-height: 28px;
+    padding: 0 5px;
+    width: 100%;
+
+    &:focus {
+      @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .15), 0 0 4px $azul-ceruleo);
+      border-color: $azul-ceruleo;
+      outline: 0;
+    }
+  }
+
+  textarea {
+    min-height: 100px;
+    resize: none;
+  }
+
+  [type='radio'],
+  [type='checkbox'] {
+    line-height: normal;
+    margin: 1px 0 0;
+    margin-left: -20px;
+    position: absolute;
+  }
+
+  &.boolean,
+  &.radio {
+    cursor: pointer;
+    display: inline-block;
+    font-weight: normal;
+    margin-bottom: 0;
+    padding-left: 20px;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  &.highlight {
+    label { color: $highlight-color; }
+    select,
+    input:not([type='checkbox']):not([type='file']) {
+      @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .15), 0 0 4px $highlight-color);
+      border-color: $highlight-color;
+    }
+  }
+}
+
+.boolean.upside {
+  padding-left: 0;
+
+  input {
+    margin-left: 0;
+    right: -20px;
+  }
+}
+
+.hint {
+  display: inline-block;
+  font-size: .9em;
+  margin-top: 5px;
+  max-width: 100%;
+}

data/assets/stylesheets/psique/_grid.scss

@@ -0,0 +1,20 @@
+// Define grid container responsive with one breakpoint
+.grid {
+  @include container;
+  @include susy-breakpoint($screen-mobile, $layout-desktop) {
+    @include container;
+    max-width: none;
+  }
+}
+
+// Create mobile first grid system
+@include make-cols('sm');
+
+// Create desktop grid system
+@include breakpoint($screen-mobile) {
+  @include make-cols('lg');
+}
+
+.row {
+  overflow: hidden;
+}

data/assets/stylesheets/psique/_lists.scss

@@ -0,0 +1,160 @@
+/*doc
+---
+title: Lists
+name: list
+category: Components
+---
+
+```haml_example
+%aside.panel
+  %header.panel-header.border-bottom
+    Foros
+  %section.panel-content
+    %article.media
+      .media-left
+        %img{:src => "http://www.fillmurray.com/g/75/70/"}
+      .media-right
+        %header.media-header
+          %h4.media-title
+            %a{href: '#'} Lorem ipsum dolor sit amet consectetur adipisicing
+            %span.author john doe
+        %section.media-content
+          %p Lorem ipsum dolor sit amet consectetur adipisicing.
+
+    %article.media
+      .media-left
+        %img{:src => "http://www.fillmurray.com/g/80/75/"}
+      .media-right
+        %header.media-header
+          %h4.media-title
+            %a{href: '#'} Lorem ipsum dolor sit amet consectetur adipisicing
+            %span.author john doe
+        %section.media-content
+          %p Lorem ipsum dolor sit amet consectetur adipisicing.
+```
+
+```haml_example
+%aside.panel
+  %header.panel-header.border-bottom
+    Otras secciones
+  %section.panel-content
+    .links-clean
+      %ul.left
+        %li
+          %a Lorem ipsum
+        %li
+          %a Dolor sit amet
+        %li
+          %a Consectetur
+      %ul.right
+        %li
+          %a Lorem ipsum
+        %li
+          %a Dolor sit amet
+        %li
+          %a Consectetur
+```
+
+```haml_example
+%aside.panel
+  %header.panel-header.border-bottom
+    Otras secciones
+  %section.panel-content
+    .links-decorated
+      %ul.left
+        %li
+          %a Lorem ipsum
+        %li
+          %a Dolor sit amet
+        %li
+          %a Consectetur
+      %ul.right
+        %li
+          %a Lorem ipsum
+        %li
+          %a Dolor sit amet
+        %li
+          %a Consectetur
+```
+*/
+
+%media {
+  @extend .row;
+
+  .media-title {
+    color: $primary-color;
+    font-weight: normal;
+    margin-bottom: 0;
+    line-height: 1em;
+    a { color: $primary-color; }
+  }
+
+  .author {
+    color: #666;
+    display: inline-block;
+    font-size: 11px !important;
+    font-weight: normal;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .media-content {
+    p {
+      color: #323131;
+      font-size: 14px;
+      line-height: 1.2em;
+      margin: 0;
+      margin-top: .5em;
+    }
+  }
+
+  .thumbnail {
+    margin-bottom: .5em;
+  }
+
+  img {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+.media {
+  @extend %media;
+
+  .media-left { @extend .col-sm-2; }
+  .media-right { @extend .col-sm-10; }
+}
+
+.links-clean {
+  @extend .row;
+  ul {
+    margin: 0;
+    padding: 0;
+    &.left { @extend .col-sm-6; }
+    &.right { @extend .col-sm-6; }
+
+    a {
+      color: $primary-color;
+      font-weight: bold;
+    }
+  }
+}
+
+.links-decorated {
+  @extend .links-clean;
+
+  li {
+    position: relative;
+    padding-left: 15px;
+    &:after {
+      border: 1px solid #9a2c2d;
+      content: '';
+      display: block;
+      height: 8px;
+      left: 0;
+      position: absolute;
+      top: 30%;
+      width: 8px;
+    }
+  }
+}