rapido-css 0.1.6 → 0.1.7

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    ZWI0NDQxMjY4MTY3YWVkMTg4YmVlZTBiZGU0MjI4OWFiZjJhYjdiZA==
+    ZjVhNGVlMDFlZDU1OTc4YWUyYTk5N2ZjOWVhYTAyNDEzMTNmNmE1Zg==
   data.tar.gz: !binary |-
-    OTFiZmRjMGQ5YzI1Nzg3NjdlYTU1YmVlZDM3OTA4NGZkZTczZjkzMA==
+    NzViNTBmNWU3YzNiY2M1YjQ3NjVjYThkOTEzYTgzOWI1NmYxNTQ5YQ==
 SHA512:
   metadata.gz: !binary |-
-    YTA3YWIxZmU1NWM5MDFhNDgyOWUzMTZmNTdkMmI0NzkzYjM2YzFiNGUwYzQ5
-    ZDYzMTgwYzQ4MmRiMmZkN2JlODViZjExOTFlODMyZTczZDU3YzU2YzYyNWQ5
-    ZDJiYzllZjczNTBmZjViMWIxOWNiN2I5MGU5ZDk4MDRkZDQ5YjI=
+    MDNiZTE2ZTI1NjFlZGQ0OGMzMTUyZmE5YWQwMmU0YWYyMTEyOGQwYmMwYWY0
+    YzM3NjgxNmY0NDg2NGQ2YWIyMjU1MjNlMGJkY2YzMTMzZmQxN2ZhMWMzNGMy
+    YTAzYjJkYmUwMDE0NWFiZjIwMDc0N2MzM2U1NTQ0Njc0NWE5Yzc=
   data.tar.gz: !binary |-
-    YjM4YmM3ZDJiM2QxZWM1YjBlNTI4N2FhMDgwMDBiZTZjOGQ0YzE5NjFjYzI4
-    MzNlZWE5MDU1Y2NlOTZmYTk2NDZmZjdkZTBlYWRmYjg5MTJiYmNiYzJhNmY2
-    NDFhOWRlNTNlODQyNWIzOTU5Yzg5YzRlNWFiOTkwZjEyMDVlNGQ=
+    ZTYwYmZhMGNjNDU0OTQxYjk0ZWQ4NGZhZTA1MGYyMzc5MTcyMzcxZDFhMDNl
+    MDhiODZhYzQ0ODg3MTVlZjRiZWMyNDVlOGE0NmEwNmNiMzMzMTVlZWMwYWJh
+    ZGIxMDgxYzQzMmUzNDM5YmIzOWY5YzkwZTBlN2VlYmJiOGFhZGY=

data/stylesheets/_default-styles.scss

@@ -8,7 +8,7 @@ Every component refer to a silent class from `_default-style.scss`.
 These are all the classes available by default, others can be added or removed based on what component you want
 to enable or disable.
 
-Styleguide 30
+Styleguide 32
 
 */
 
@@ -25,7 +25,7 @@ Titles
     %h5                             # For <h5>
     %h6                             # For <h6>
 
-Styleguide 30.1
+Styleguide 32.1
 
 */
 
@@ -40,15 +40,19 @@ Styleguide 30.1
 
 Inputs and Selects
 
-    %input                          # For the <input> and <textarea>
-    %input-addon                    # For the addon texts in forms
-    %select                         # Custom select style, by default it use %input
+    %form__label                    # For the <label>
+    %form__input                    # For the <input> and <textarea>
+    %form__addon                    # For the addon texts in forms
+    %form__select                   # Custom select style, by default it use %input
+    %form__suggest                  # Styling for suggest dropdowns
 
-Styleguide 30.2
+Styleguide 32.2
 
 */
 
-    %input {
+    %form__label {}
+
+    %form__input {
         border-color: $gray;
         background-color: $grayLighter;
         @include box-shadow(inset 0 1px 0 #fff);
@@ -59,16 +63,31 @@ Styleguide 30.2
         }
     }
 
-    %input-addon {
+    %form__addon {
         color: $text-color;
         border-color: $grayLight;
         background-color: $grayLighter;
     }
 
-    %select {
-        @extend %input;
+    %form__select {
+        @extend %form__input;
+    }
+
+    %form__suggest {
+        @include opacity(0);
+        background-color: $gray;
+
+      &.open {
+          @include opacity(1);
+      }
+
+      a {
+          color: white;
+      }
+
     }
 
+
 /*
 
 Buttons
@@ -81,7 +100,7 @@ Buttons
     %btn__disabled                  # For disabled button
     %btn__current                   # For current button (es. used in Pagination)
 
-Styleguide 30.3
+Styleguide 32.3
 
 */
 
@@ -185,7 +204,7 @@ Captions
 
     %caption                        # Used for the captions in .caption and modals
 
-Styleguide 30.4
+Styleguide 32.4
 
 */
 
@@ -201,7 +220,7 @@ Labels (Badges & Pills)
 
     %pill                           # For the .badge and .pill
 
-Styleguide 30.5
+Styleguide 32.5
 
 */
 
@@ -217,7 +236,7 @@ Dropdowns
     %dropdown                       # For the dropdown's list
     %dropdown--open                 # For the drodpown button in .open state
 
-Styleguide 30.6
+Styleguide 32.6
 
 */
 
@@ -254,7 +273,7 @@ Tables
     %table--hover                   # For .table--hover
     %table--sortable                # For .table--sortable
 
-Styleguide 30.7
+Styleguide 32.7
 
 */
 
@@ -295,7 +314,7 @@ Navs
     %nav--btn__current              # For the current selected link
     %nav--btn__disabled             # For the disabled links
 
-Styleguide 30.8
+Styleguide 32.8
 
 */
 
@@ -318,7 +337,7 @@ Breadcrumbs
     %breadcrumbs                     # Base style of breadcrumbs
     %breadcrumbs__current            # For the current selected link
 
-Styleguide 30.9
+Styleguide 32.9
 
 */
 
@@ -350,7 +369,7 @@ Pagination
     %pagination--btn__current       # For the current selected link
     %pagination--btn__disabled      # For the disabled links
 
-Styleguide 30.10
+Styleguide 32.10
 
 */
 
@@ -371,7 +390,7 @@ Pager
     %pager--btn__active             # For the :active  state of %pager--btn
     %pager--btn__disabled           # For the disabled links
 
-Styleguide 30.11
+Styleguide 32.11
 
 */
 
@@ -393,27 +412,27 @@ Modals
     %modal__caption                 # For the caption
     %modal__loading                 # Position and style of the loading icon
 
-Styleguide 30.12
+Styleguide 32.12
 
 */
 
     // Buttons
 
-    .btnPlay:after              { @include icon-font(\f04b); }
-    .btnPlayOn:after            { @include icon-font(\f04c); }
-    .btnToggle:after            { @include icon-font(\f065); }
-    .btnToggleOn:after          { @include icon-font(\f066); }
-    .btnPrev:after              { @include icon-font(\f04a); }
-    .btnNext:after              { @include icon-font(\f051); }
-    .btnClose:after             { @include icon-font(\f00d); }
-    .fancybox-close:after       { @include icon-font(\f00d); }
+    .btnPlay:after              { content: "▶" }
+    .btnPlayOn:after            { content: "‖" }
+    .btnToggle:after            { content: "◉" }
+    .btnToggleOn:after          { content: "⦿" }
+    .btnPrev:after              { content: "≪" }
+    .btnNext:after              { content: "≫" }
+    .btnClose:after             { content: "×" }
+    .fancybox-close:after       { content: "×" }
 
     .fancybox-prev {
-      span:after   { @include icon-font(\f053); }
+      span:after   { content: "<" }
     }
 
     .fancybox-next {
-      span:after   { @include icon-font(\f054); }
+      span:after   { content: ">" }
     }
 
     %modal__btn {
@@ -473,7 +492,7 @@ Sliders
     %slider__caption                # For the caption
     %slider__loading                # Position and style of the loading icon
 
-Styleguide 30.13
+Styleguide 32.13
 
 */
 
@@ -484,8 +503,8 @@ Styleguide 30.13
         line-height: $slider-btn-size;
         margin-top: -($slider-btn-size / 2);
 
-        &.bx-prev i:after { @include icon-font(\f053); }
-        &.bx-next i:after { @include icon-font(\f054); }
+        &.bx-prev i:after { content: "<" }
+        &.bx-next i:after { content: ">" }
     }
 
     // Pager
@@ -523,7 +542,7 @@ Tabs
     %tab__btn__current              # For the current selected tab link
     %tab__container                 # For the content continer
 
-Styleguide 30.14
+Styleguide 32.14
 
 */
 
@@ -558,7 +577,7 @@ Alerts
 
     %alert                          # For all alert messages
 
-Styleguide 30.15
+Styleguide 32.15
 
 */
 
@@ -571,11 +590,11 @@ Styleguide 30.15
 
 OffCanvas Nav
 
-    %nav--offcanvas                 #
-    %nav--offcanvas__dim            #
-    %nav__toggle                    # For the toggle open/close button in responsive mode
+    %nav--offcanvas                 # For the sidebar
+    %nav--offcanvas__dim            # For the dimming the content on menu open
+    %nav__toggle                    # For the toggle open/close button
 
-Styleguide 30.16
+Styleguide 32.16
 
 */
 
@@ -602,10 +621,52 @@ Styleguide 30.16
         }
 
         &:before {
-            @include icon-font(\f0c9);
+            content: "≡"
+        }
+    }
+
+
+
+/*
+
+Overlays
+
+    %overlay__close                 # For the default close button
+
+    %overlay__content               # For styling the main content area
+    %overlay__content--open         # Animation for showing the content
+    %overlay__content--close        # Animation for hiding the content
+
+    %overlay__background            # Color of background overlay
+    %overlay__background--open      # Animation for showing the background
+    %overlay__background--close     # Animation for hiding the background
+
+Styleguide 32.17
+
+*/
+
+
+    %overlay__close {
+        @include position(absolute, 2em 2em 0 0);
+        color: #CCCCCC;
+        &:hover {
+          color: #FFFFFF;
         }
+
+    }
+
+    %overlay__content {
+      color: $white;
     }
 
+    %overlay__background {
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiqAcAAIgAgoGu+rEAAAAASUVORK5CYII=');
+    }
+
+    %overlay__content--open       { @extend .fadeInDown; }
+    %overlay__content--close      { @extend .fadeOutUp; }
+    %overlay__background--open    { @extend .fadeIn; }
+    %overlay__background--close   { @extend .fadeOut; }
 
 /*
 
@@ -614,23 +675,25 @@ Shared
 Classes For other classes of generic elements
 
     %caret                          # Side triangle For Dropdowns and Selects
-    %loader-ico                     # generic loader icon For all scripts
+    %loader-ico                     # Generic loader icon For all scripts
+    %tooltip                        # Additional style for tooltips.
+                                      To change the colors see the 'colors' sections
 
-Styleguide 30.17
+Styleguide 32.18
 
 */
 
     %caret {
         &:after {
-            @include icon-font(\f078);
+          content: "▼"
         }
     }
 
     %loader-ico {
-        background:
-            url('//cdn.jsdelivr.net/wp-advanced-ajax-page-loader/2.5.12/loaders/SMALL%20-%20Spinning%20Arrows.gif')
-            center center no-repeat;
+        background: url('//cdn.jsdelivr.net/wp-advanced-ajax-page-loader/2.5.12/loaders/SMALL%20-%20Spinning%20Arrows.gif') center center no-repeat;
     }
 
+    %tooltip { }
+
 }
 

data/stylesheets/_functions.scss

@@ -4,7 +4,7 @@ Functions
 
 For 99% of the framework I used Compass' and Susy's functions but I've made some for covering edge cases.
 
-Styleguide 25
+Styleguide 27
 
 */
 
@@ -19,7 +19,7 @@ There are lots of easing options available, from the basic ``linear`` or ``ease-
 * **easeOut**: easeOutQuad, easeOutCubic, easeOutQuart, easeOutQuint, easeOutSine, easeOutExpo, easeOutCirc, easeOutBack
 * **easeInOut**: easeInOutQuad, easeInOutCubic, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInOutExpo, easeInOutCirc, easeInOutBack
 
-Styleguide 21.2
+Styleguide 23.2
 
 */
 
@@ -76,7 +76,7 @@ Become:
 
     left: -10em
 
-Styleguide 25.2
+Styleguide 27.2
 
 */
 
@@ -99,7 +99,7 @@ Become:
 
     margin-left: -1.42857em;
 
-Styleguide 25.3
+Styleguide 27.3
 
 */
 
@@ -115,7 +115,7 @@ space_neg()
 Similar to `rhythm_neg()` but for Susy's `space()` function, more info:
 [Susy Reference](http://susy.oddbird.net/guides/reference/#ref-space).
 
-Styleguide 25.4
+Styleguide 27.4
 
 */
 
@@ -130,7 +130,7 @@ strip_units()
 Remove eny type of unit from a number, more info:
 [StackOverflow](http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass).
 
-Styleguide 25.5
+Styleguide 27.5
 
 */
 

data/stylesheets/components/_buttons.scss

@@ -26,11 +26,10 @@ Styleguide 3
         border-style: solid;
         border-width: $input-border;
         cursor: pointer;
-        display: inline-block;
+		@include inline-block;
         line-height: 1em;
         margin-bottom: 0;
         text-align: center;
-        vertical-align: middle;
 
         &:hover, &.hover, &:focus { text-decoration: none; }
 

data/stylesheets/components/_captions.scss

@@ -136,14 +136,12 @@ Styleguide 5
       figcaption {
         top: 0;
         left: 0;
-        @include translateX(100%) ;
-        @include rotate(20deg);
+        @include simple-transform($rotate: 20deg, $trans-x:100%);
         opacity: 0;
       }
       &:hover, &:active {
         figcaption {
-          @include translateX(0) ;
-          @include rotate(0deg);
+          @include simple-transform($rotate: 0deg, $trans-x:0);
           opacity: 1;
         }
       }

data/stylesheets/components/_dropdowns.scss

@@ -54,7 +54,7 @@ Styleguide 7
     .dropdown,
     .dropdown__toggle {
         position: relative;
-        display: inline-block;
+        @include inline-block;
     }
 
     .dropdown__toggle:focus { outline: 0; }
@@ -110,6 +110,8 @@ Styleguide 7.2
         min-width: 10em;
         overflow: hidden;
         z-index: $zindex-dropdown;
+        max-width: em($dropdowns-width);
+
 
         &[data-content] { min-width: em(600px); }
 
@@ -177,7 +179,7 @@ Styleguide 7.2
         .dropdown__menu {
             @include opacity(1);
             display/*\**/: block\9; // Ugly IE8 Hack
-            max-height: $dropdowns-height;
+            max-height: em($dropdowns-height);
         }
 
     }