sadui 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0e1199c279b130d52136f0bfb8e07b7eb2cfe180
-  data.tar.gz: ff37b1446b3151166da8cb99a89d58509429d92c
+  metadata.gz: 977ff3142f068948a0393afd7f7d22c575c18ffa
+  data.tar.gz: a6f860734f9804e6a6c99ad6b6f6e3c70fc3971c
 SHA512:
-  metadata.gz: 1ab09501f5bf076d6a624a7a8ee9118446e39ef99839eb2afdee6993e9b70ba84841b10fb9c55462c446bf80088025d3ffc89f0dd236181dcb544c6fd3d514ae
-  data.tar.gz: 9d79354d47a26efcbd26f38387a7f037150db7b8a84fbe4f5de24878c8ec89fd736d56cf6351e980e2e30ae97d75e2500f4e0558cd87c0affa058a4e8698911c
+  metadata.gz: e75533fab5f14e4c6ac1bbf2eaad55a8e4c060b957253121095160eee419ee6d4316104dbdd6b37ea4dfc5e37b0a5cd93aa20e78d5ddc7e45c6def2ce5e18bdd
+  data.tar.gz: d6fbd5620a58b44b27711ce5f02ee909f0885dd3b37a0c5e63ff230aeefeb9cb37a339829600c3ee91b908037bdc1251fa2c7b6d20322b233d93314fa5b209cd

data/lib/sadui/version.rb

@@ -1,3 +1,3 @@
 module Sadui
-  VERSION = "0.0.3"
+  VERSION = "0.0.4"
 end

data/scss/sadui/_components.scss

@@ -0,0 +1,11 @@
+@import "components/bullet",
+        "components/button",
+        "components/carousel",
+        "components/expand_text",
+        "components/modal",
+        "components/overlay",
+        "components/play_button",
+        "components/pretty_checkradio",
+        "components/pretty_dropdown",
+        "components/tab",
+        "components/tooltip";

data/scss/sadui/_conf.scss

@@ -0,0 +1,32 @@
+/* Compass Globals */
+$experimental-support-for-svg: true;
+
+/* layers */
+$zBase:         1000; // Any value
+$zHell:         $zBase - 100; // Below Template
+$zTemplate:     $zBase; // Template level
+$zModule:       $zBase + 100; // Module level
+$zTemplateTop:  $zBase + 200; // Above template
+$zDialog:       $zBase + 300; // Dialogs
+$zTooltip:      $zBase + 400; // Tooltips
+
+/* Transition Speeds */
+$transitionDurationBase: 1s;
+
+/* Carousel */
+$carouselMaxItems: 24; // arbitrary number to limit generated css for each position
+
+/* Bullet */
+$bulletSize: 0.85rem;
+
+/* Play Button */
+$playButtonArrowSize: 1.15em;
+
+/* Carousel */
+$carouselNavigationItemWidth: 20px;
+
+/* Default Colors */
+$colorActive:   rgb(51,51,204);
+$colorInactive: rgb(110,110,110);
+$colorWhite:    rgb(255,255,255);
+$colorBlack:    rgb(0,0,0);

data/scss/sadui/_effects.scss

@@ -0,0 +1 @@
+@import "effects/transition.sweet";

data/scss/sadui/_sadui.scss

@@ -0,0 +1,7 @@
+/* SADUI Component Bootstrap */
+
+@import "compass/css3";
+@import "compass/css3/user-interface";
+@import "compass/typography";
+
+@import "conf";

data/scss/sadui/_themes.scss

@@ -0,0 +1,11 @@
+@import "themes/bullet",
+        "themes/button",
+        "themes/carousel",
+        "themes/expand_text",
+        "themes/modal",
+        "themes/overlay",
+        "themes/play_button",
+        "themes/pretty_checkradio",
+        "themes/pretty_dropdown",
+        "themes/tab",
+        "themes/tooltip";

data/scss/sadui/components/_bullet.scss

@@ -0,0 +1,55 @@
+@import "../sadui";
+
+.bullet-menu {
+    @include user-select(none);
+}
+
+.bullet-menu-horizontal {
+    .bullet-item {
+        @include inline-block;
+    }
+}
+
+.bullet-menu-vertical {
+    .bullet-item {
+        display: block;
+        clear: both;
+    }
+}
+
+.bullet-item {
+    cursor: pointer;
+    position: relative;
+
+    &:hover {
+        .bullet {
+            background-color: darken($colorInactive, 20);
+        }
+    }
+
+    &.is-selected,
+    &.is-selected:hover {
+        .bullet {
+            background-color: $colorActive;
+        }
+    }
+
+    input[type="radio"] {
+        visibility: hidden;
+        position: absolute;
+        width: $bulletSize;
+        height: $bulletSize;
+    }
+}
+
+.bullet-item-label {
+    @include inline-block;
+}
+
+.bullet {
+    @include inline-block;
+    width: $bulletSize;
+    height: $bulletSize;
+    @include border-radius($bulletSize*2);
+    background-color: darken($colorInactive, 10);
+}

data/scss/sadui/components/_button.scss

@@ -0,0 +1,51 @@
+@import "../sadui";
+
+.button {
+    @include inline-block;
+    @include user-select(none);
+    white-space: nowrap;
+    cursor: pointer;
+    position: relative;//required for input masking
+
+    border: 0 none;// resets default <button|input>
+
+    text-decoration: none;// resets default <a>
+
+    > * {
+        @include inline-block;
+    }
+    
+    // input masking
+    input[type="button"],
+    input[type="submit"] {
+        width: 100%;
+        height: 100%;
+        line-height: 100% !important;
+        background-color: transparent;
+        border: 0 none;
+        outline: 0 none;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        @include opacity(0);
+        cursor: pointer;
+    }
+
+    // .button-label {}
+
+    // .button-icon {}
+}
+button.button {
+    // background-color: transparent;
+    // margin: 0;
+    // padding: 0;
+}
+
+.button-group {
+    // margin-left: 1em;
+    // &:first-child {
+    //     margin-left: 0;
+    // }
+}

data/scss/sadui/components/_carousel.scss

@@ -0,0 +1,140 @@
+/* Carousel Base */
+
+@import "../sadui";
+
+.carousel {
+    
+    // Reset
+    * {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+
+    @include user-select(none);
+    overflow: visible;
+
+    &, *:focus {
+        outline-width: 0;
+    }
+}
+
+// this needs dimension
+.carousel-content-wrapper {
+    // z-index: $zModule+11;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+
+    // fixes z-index bug in Chrome
+    -webkit-transform: translate3d(0px, 0px, 0px);
+}
+
+.carousel-handle {
+    display: none;
+    // height: 100%;
+    // position: absolute;
+    // width: 100%;
+    // display: block;
+    // z-index: $zTemplateTop;
+}
+
+.carousel-content {
+    // z-index: $zModule+10;
+    // min-height: 100px;
+
+    list-style: none;
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    white-space: nowrap;
+
+    &.is-animate {
+        @include transition-property(translate3d);
+        @include transition-duration($transitionDurationBase);
+        @include transition-timing-function(ease-in-out);            
+    }
+}
+
+.carousel-content-item {
+    @include inline-block;
+    vertical-align: top;
+    height: 100%;
+}
+
+%carousel-navigation-item {
+    // position: absolute;
+    // z-index: $zModule+8;
+    // top: 0;
+
+    cursor: pointer;
+    // height: 100%;
+    width: $carouselNavigationItemWidth;
+    height: $carouselNavigationItemWidth;
+
+    &.is-disabled,
+    &[disabled] {
+        visibility: hidden;
+        cursor: default;
+    }
+    .label {
+        @include hide-text;
+        display: block;
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+        top: 50%;
+        position: absolute;
+    }
+}
+.carousel-navigation-item-back {
+    @extend %carousel-navigation-item;
+    left: 0;
+    .label {
+        // ui-sprite(carousel-arrow-back);
+    }
+}
+.carousel-navigation-item-forward {
+    @extend %carousel-navigation-item;
+    right: 0;
+    .label {
+        // ui-sprite(carousel-arrow-forward);
+    }
+}
+
+.carousel-pagination {
+    position: absolute;
+}
+.carousel-background {
+    z-index: $zModule;
+    left: 0;
+    right: 0;
+    height: 100%;
+    .carousel-background-item {
+        height: 100%;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: cover;
+    }
+}
+
+.carousel-pagination {
+
+    z-index: $zModule+20;
+
+   // .carousel-pagination-item {
+        // @extend %bullet-item;
+
+        // .carousel-pagination-bullet {
+            // @extend %bullet;
+        // }
+
+        // .carousel-pagination-label {
+            // @extend %bullet-item-label;
+        // }
+
+    // }
+}

data/scss/sadui/components/_expand_text.scss

@@ -0,0 +1,14 @@
+@import "../sadui";
+
+.expand-text {
+    cursor: pointer;
+    display: none;
+
+    * {
+        @include inline-block;
+    }
+
+    &.is-visible {
+        @include inline-block;
+    }
+}

data/scss/sadui/components/_modal.scss

@@ -0,0 +1,43 @@
+@import "../sadui";
+
+.modal {
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+
+    // height: 0;
+
+    z-index: $zDialog + 1;
+
+    background: $colorWhite;
+
+    .modal-wrapper {
+        display: none;
+    }
+
+    &.is-visible {
+        // height: inherit;
+
+        .modal-wrapper {
+            display: block;
+        }
+    }
+}
+
+.modal-generic {
+
+    .modal-close-wrapper {
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 0;
+    }
+    
+    .close-icon {}
+
+    .modal-content-wrapper {}
+
+}

data/scss/sadui/components/_overlay.scss

@@ -0,0 +1,23 @@
+@import "../sadui";
+
+.overlay {
+
+    position: absolute;
+    z-index: $zDialog;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+
+    overflow: auto;
+    margin: -(rhythm(2)) 0 0 0;
+    padding: 0;
+    background: rgba($colorBlack, 0.65);
+
+    height: 0;
+
+    &.is-visible {
+        height: 1000%;
+    }
+}

data/scss/sadui/components/_play_button.scss

@@ -0,0 +1,54 @@
+@import "../sadui";
+
+.play-button-container {
+    cursor: pointer;
+    display: block;
+    position: relative;
+    .play-button {
+        position: relative;
+        margin: auto;
+    }
+
+    &:hover {
+        .play-button {
+            background: rgba($colorBlack, 0.9);
+        }
+    }
+    &:active,
+    &.is-click {
+        .play-button-arrow {
+        }
+        .play-button-arrow-shadow {
+            visibility: hidden;
+        }
+    }
+}
+.play-button {
+    display: block;
+    background: rgba($colorBlack, 0.5);
+
+    width: 8em;
+    height: 5em;
+    
+    .play-button-arrow {
+        width: 0;
+        height: 0;
+        position: absolute;
+        z-index: $zModule+2;
+        top: 50%;
+        left: 50%;
+        margin-top: -0.95em;
+        margin-left: -0.35em;
+
+        border-top: $playButtonArrowSize solid transparent;
+        border-bottom: $playButtonArrowSize solid transparent;
+        border-left: $playButtonArrowSize solid $colorWhite;
+    }
+
+    .play-button-arrow-shadow {
+        @extend .play-button-arrow;
+        border-left-color: $colorBlack;
+        // top: 32%;
+        z-index: $zModule+1;
+    }
+}