psique 1.0.2 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8530ef7ca494976459b72e9ce23fd7c601fd8c5d
-  data.tar.gz: 9b9caca3aac6eb9246ecca0c8ae42dff35ec460c
+  metadata.gz: 078b0f4bea30d77a1249bef4832f6c5cecfd89cb
+  data.tar.gz: 2ab818465a01f05a02a69690fca4b70848059925
 SHA512:
-  metadata.gz: 2044bc4a5516f0e08d39ee15e1acb45ca6c3832b63ddd54fc764a978c3c9fddc8406c352376ca6663a036efe6f1ad1fe748c9c7530a03d6f209e93a443ed2f91
-  data.tar.gz: 65da844447dba976cf3dfe429c434001caa0874ba6a7beebb384c4d960216633b0e75b154ba63216eaa8cdb8aeb8abe3d89269e7b989dcf7aabe39e4aba10094
+  metadata.gz: 2d57d35164fcc75037538e6a281e75b77314d5cc480cebea485fa7ae1a7096d30031837d56f95fd0631360e8888ce0a5fd129c6168fbdf9352133a780b11d369
+  data.tar.gz: f9835d8294a39cb6b211b22831c35bc91a9ead0805c6ec6248f2f6a118cdb4df031e258e2d3c9b2355b54d143e278dd2712210934c7112ea09d88db15bf84f13

data/README.md

@@ -4,26 +4,3 @@
 [![Code Climate](https://codeclimate.com/github/Soluciones/Psique/badges/gpa.svg)](https://codeclimate.com/github/Soluciones/Psique)
 
 Style Guide in Sass for Emergia's apps Rails
-
-## Control de versiones
-
-### Incrementar versión en el código
-
-Cuando el cambio ya está _mergeado_ en `master`, es hora de incrementar el contador de versiones para hacer la subida. En `lib/psique/version.rb`:
-
-    module Psique
-      VERSION = '1.0.2'
-    end
-
-### Escribir changelog
-
-En `changelog.txt`, se comentan las características que se han añadido en esta versión.
-
-###  Subir cambios a git y crear _tag_
-
-En la línea de comandos, desde el directorio del engine:
-
-    > git commit -m "Cambio de version"
-    > git push origin
-    > git tag 1.0.2
-    > git push origin 1.0.2

data/app/assets/javascripts/psique/dropdown.js.coffee

@@ -0,0 +1,31 @@
+do ($ = jQuery, window, document) ->
+
+  # DROPDOWN DEFAULTS
+  # ===================
+
+  defaults =
+    target: 'dropdown'
+
+  # DROPDOWN PUBLIC CLASS DEFINITION
+  # ==================================
+
+  class Dropdown
+    constructor: (@element) ->
+      @$element = $ @element
+      @$menu    = $ @$element.data(defaults.target)
+
+      @init()
+
+    init: ->
+      @$element.on click: (event) =>
+        event.preventDefault()
+        @toggle()
+
+    toggle: ->
+      @$menu.toggleClass('is-open')
+
+  # DROPDOWN AUTOLOAD
+  # ===================
+
+  if $("[data-#{defaults.target}]").length > 0
+    new Dropdown("[data-#{defaults.target}]")

data/app/assets/javascripts/psique/menu.js.coffee

@@ -1,7 +1,4 @@
-document.querySelector('.menu-item[data-submenu]').addEventListener 'touchstart', (event) ->
-  if (icon = event.target).matches('i')
-    event.preventDefault()
-    submenu = this.querySelector(this.dataset.submenu)
-    icon.classList.toggle('fa-angle-double-down')
-    icon.classList.toggle('fa-angle-double-up')
-    $(submenu).slideToggle(450)
+$('.menu-item[data-submenu] .fa').on 'touchstart', (event) ->
+  event.preventDefault()
+  $menuItem = $(this).closest('.menu-item')
+  $menuItem.toggleClass('is-active')

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

@@ -1,3 +1 @@
-#= require psique/offcanvas
-#= require psique/menu
-#= require psique/menu_lvl2
+#= require_tree .

data/app/assets/stylesheets/psique/components/_button.scss

@@ -11,25 +11,46 @@
 
 %btn {
   @include appearance(none);
-  border: none;
-  color: #fff;
+  border: 0;
+  color: $white;
   cursor: pointer;
   display: inline-block;
   font-size: 1em;
   font-weight: 600;
-  line-height: 1;
-  padding: .5em 1.5em;
+  height: $btn-base-size;
+  line-height: $btn-base-size;
+  padding: 0 1.5em;
   text-decoration: none;
   user-select: none;
-  vertical-align: middle;
   white-space: nowrap;
 }
 
+.btn {
+  @extend %btn;
+}
+
+.btn--split {
+  padding-right: 4em;
+  position: relative;
+}
+
+.btn--split-icon {
+  border-left: $btn--split-border;
+  display: block;
+  height: 100%;
+  line-height: $btn-base-size;
+  padding: 0 1em;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
 // ----- Button menu toggle ----- //
 
 .btn-menu {
   background: none;
   border: 0;
+  padding: 0;
 
   &:focus { outline: 0; }
 
@@ -49,17 +70,23 @@
 
 .btn--a {
   @extend %btn;
-  @include linear-gradient(lighten($capota-blue, 20), $capota-blue);
+
+  @include linear-gradient(lighten($c-primary, 20), $c-primary);
   border-radius: 5px;
-  &:hover{
-    @include linear-gradient(lighten($capota-blue,10), darken($capota-blue, 8));
+
+  &:hover {
+    @include linear-gradient(lighten($c-primary, 10), darken($c-primary, 8));
   }
 }
 
 .btn--b {
   @extend %btn;
-  &:hover{
-    @include linear-gradient(lighten($capota-blue,10), darken($capota-blue, 8));
+
+  @include linear-gradient(lighten($c-secondary, 20), $c-secondary);
+  border-radius: 5px;
+
+  &:hover {
+    @include linear-gradient(lighten($c-secondary, 10), darken($c-secondary, 8));
   }
 }
 
@@ -67,9 +94,9 @@
 
 .btn--disabled {
   @extend %btn;
-  background-color: $light-grey;
-  border: 1px solid $mid-grey;
-  color: $mid-grey;
+  background-color: $c-warning;
+  border: 1px solid $c-border;
+  color: $c-border;
   cursor: not-allowed;
   border-radius: 5px;
 }
@@ -85,44 +112,6 @@
   }
 }
 
-// Button Colors
-
-.btn--blue {
-  @include linear-gradient(lighten($capota-blue, 20), $capota-blue);
-  border: 1px solid $capota-blue;
-  &:hover{
-    @include linear-gradient(lighten($capota-blue, 10), darken($capota-blue, 8));
-
-  }
-}
-.btn--orange{
-  @include linear-gradient(lighten($vibrant-orange, 20), $vibrant-orange);
-  border: 1px solid $dark-orange;
-  &:hover{
-    @include linear-gradient(lighten($vibrant-orange,10), darken($vibrant-orange, 8));
-  }
-}
-.btn--grey{
-  background: $mid-grey;
-  color: $capota-blue;
-  &:hover{
-    @include background(darken($mid-grey,10));
-  }
-}
-.btn--granate {
-  @extend %btn;
-  @include linear-gradient(lighten($granate, 10), $granate);
-  border-radius: 5px;
-  &:hover{
-    @include linear-gradient(lighten($granate, 5), darken($granate, 8));
-  }
-}
-
-// Social
-
-.btn--facebook { @include btnSocial($facebook-blue, $navy-blue); }
-.btn--gplus { @include btnSocial($gplus-red, $granate); }
-.btn--twitter { @include btnSocial($twitter-blue, $capota-blue); }
 
 // ----- Sizes ----- //
 

data/app/assets/stylesheets/psique/components/_comment.scss

@@ -0,0 +1,83 @@
+// *************************************
+//
+//   Comment
+//   -> Styles for a comment
+//
+// *************************************
+
+// -------------------------------------
+//   Base
+// -------------------------------------
+
+.comment {
+  border-bottom: $comment-border-bottom;
+  padding-bottom: 1rem;
+}
+
+// -------------------------------------
+//   Scaffolding
+// -------------------------------------
+
+.comment-header {
+  @include display(flex);
+  @include align-items(center);
+  @include justify-content(space-between);
+  margin-bottom: .5rem;
+}
+
+.comment-avatar {
+  margin-right: .5rem;
+  max-height: $comment-avatar-size;
+  max-width: $comment-avatar-size;
+  position: relative;
+}
+
+.comment-avatar-overlay {
+  background: rgba(0, 0, 0, .5);
+  bottom: 0;
+  color: $white;
+  padding: rem(2px);
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}
+
+.comment-meta {
+  @include flex-grow(1);
+  font-size: rem(15px);
+}
+
+.comment-meta-title {
+  display: block;
+  font-size: rem(16px);
+  font-weight: bold;
+
+  &::first-letter { text-transform: capitalize; }
+}
+
+.comment-meta-time {
+  display: block;
+}
+
+.comment-meta-referer-btn {
+  @include align-self(center);
+  font-size: rem(15px);
+  text-align: center;
+  .fa { color: $c-primary; display: block; }
+}
+
+.comment-actions {
+  @extend %horizontal-list;
+  @include display(flex);
+  @include justify-content(space-between);
+  margin-bottom: 0;
+  a { text-decoration: none; }
+}
+
+// -------------------------------------
+//   States
+// -------------------------------------
+
+.is-hightlight {
+  .comment-actions & { color: $c-alert; }
+}

data/app/assets/stylesheets/psique/components/_dropdown.scss

@@ -0,0 +1,37 @@
+// *************************************
+//
+//   Dropdown
+//   -> Dropdown element
+//
+// *************************************
+
+// -------------------------------------
+//   Base
+// -------------------------------------
+
+.dropdown {
+  @include columns(2);
+  background-color: $dropdown-bg-color;
+  border-top: $dropdown-border-top;
+  display: none;
+  margin: 0;
+  padding: 1rem 1rem .5rem;
+  position: absolute;
+  width: 100%;
+}
+
+.dropdown-item {
+  color: $dropdown-item-color;
+  line-height: 2rem;
+  text-decoration: none;
+}
+
+// -------------------------------------
+//   States
+// -------------------------------------
+
+// ----- Is open ----- //
+
+.dropdown.is-open {
+  display: block;
+}

data/app/assets/stylesheets/psique/components/_form.scss

@@ -25,19 +25,19 @@
   @include appearance(none);
   @include transition(border-color .2s $ease-in-out-quint);
   background: #fff;
-  border: 1px solid $mid-grey;
+  border: 1px solid $c-border;
   border-radius: em(4px);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   padding: .5em;
   width: 100%;
 
   @include placeholder {
-    color: darken($mid-grey, 10%);
+    color: darken($c-border, 10%);
     font-size: 90%;
   }
 
   &:focus {
-    border-color: $capota-blue;
+    border-color: $c-secondary;
     outline: none;
   }
 }

data/app/assets/stylesheets/psique/components/_list-item.scss

@@ -0,0 +1,67 @@
+// *************************************
+//
+//   List item
+//   -> Styles for a list item
+//
+// *************************************
+
+// -------------------------------------
+//   Base
+// -------------------------------------
+
+.list-item {
+  border-bottom: $list-item-border-bottom;
+  margin: 1rem 0 1.5rem;
+  padding-bottom: 1rem;
+  a { text-decoration: none; }
+}
+
+// -------------------------------------
+//   Scaffolding
+// -------------------------------------
+
+.list-item-title {
+  h2 {
+    color: $list-item-title-color;
+    display: inline-block;
+    font-size: $list-item-title-size;
+    line-height: 1.2rem;
+    margin: 0;
+  }
+
+  a {
+    color: $list-item-title-color;
+    font-weight: 600;
+    margin-right: 1rem;
+  }
+}
+
+.list-item-meta {
+  @extend %horizontal-list;
+  color: $list-item-meta-color;
+  display: inline-block;
+  list-style-type: none;
+
+  > li { margin-right: .5rem; }
+  .fa { color: $list-item-meta-icon-color; }
+}
+
+.list-item-detail > * {
+  color: $list-item-detail-color;
+}
+
+
+// -------------------------------------
+//   States
+// -------------------------------------
+
+.list-item.is-sticky {
+
+  .list-item-title::before {
+    color: $list-item-sticky-icon-color;
+    content: '\f08d';
+    display: inline-block;
+    font-family: 'FontAwesome';
+    margin-right: .5rem;
+  }
+}

data/app/assets/stylesheets/psique/components/_panel.scss

@@ -20,14 +20,14 @@
 // ----- Header ----- //
 
 .panel-header {
-  background-color: $ceruleo-blue;
-  color: #fff;
+  background-color: $panel-header-background;
+  color: complement($emerald);
   font-weight: bold;
   padding: .5rem 1rem;
   position: relative;
 
   &:before {
-    @include triangle(20px, $ceruleo-blue, down);
+    @include triangle(20px, $c-info, down);
     bottom: -8px;
     content: '';
     left: 100px;