better_styles 0.0.0.33

data/assets/stylesheets/better/lib/_text.scss

@@ -0,0 +1,66 @@
+// no line break in texts, when to long for box show "..."
+@mixin noWrap {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@mixin no_wrap {        @include noWrap; }
+@mixin no-wrap {        @include noWrap; }
+@mixin no_word_break {  @include noWrap; }
+@mixin no-word-break {  @include noWrap; }
+
+
+
+// user formated text .. like pre tag
+@mixin preText {
+    white-space: -moz-pre-wrap !important;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+@mixin pre_text {  @include preText; }
+@mixin pre-text {  @include preText; }
+@mixin user_input {  @include preText; }
+@mixin user-input {  @include preText; }
+
+
+
+// make icons and fonts thinner in webkit (white icons on dark background)
+@mixin antialiasedText {
+	text-shadow: 0 0 0 rgba(0,0,0,.01);
+	-webkit-font-smoothing: antialiased;
+	text-rendering: optimizelegibility;
+}
+
+@mixin antialiased_text {  @include antialiasedText; }
+@mixin antialiased-text {  @include antialiasedText; }
+
+
+
+// make it smooth and app-like on mobile (best in body!)
+@mixin mobileAppImprovements {
+    -webkit-font-smoothing: antialiased;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    ::-webkit-scrollbar { display: none; }
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+@mixin mobile_app_improvements {  @include mobileAppImprovements; }
+@mixin mobile-app-improvements {  @include mobileAppImprovements; }
+
+
+
+// add rules for all text elements
+@mixin textTags {
+	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, span, a {
+		@content;
+	}
+}
+
+@mixin text_tags { @include textTags { @content; } }
+@mixin text-tags { @include textTags { @content; } }
+

data/assets/stylesheets/better/navigations/_aside_lnk.scss

@@ -0,0 +1,100 @@
+#nav_list, #nav-list {
+  
+  
+  
+}
+
+$appAside-bg: #333;
+
+
+.aside_lnk, .aside_lnk a {
+    display: block;
+}
+
+.aside_lnk {
+    display: block;
+    line-height: 2.5rem;
+    text-align: left;
+    @include noWrap;
+    overflow: hidden;
+    text-decoration: none;
+    cursor: pointer;
+    .icn, .labl {
+        line-height: 2.5rem;
+        height: 2.5rem;
+    }
+    .icn {
+        font-size: 1.2rem;
+        width: 2.5rem;
+        float: left;
+        text-align: center;
+        img { margin-top: .25rem; }
+    }
+
+    .aside_nav, .aside_nav li, .aside_nav li a {
+        display: block; position: relative;
+        margin: 0; padding: 0;
+    }
+    
+    img.flag { width: 1.2rem; }
+
+    .aside_nav {
+        display: none;
+        list-style: none;
+        padding: 0.25rem 0 0.5rem;
+        background: darken( $appAside-bg, 5% );
+        li {
+            margin: 0;
+
+            &.divide {
+                display: block;
+                height: 0;
+                margin: 0.25rem 0.5rem;
+                border: none;
+                background: transparent;
+                border-top: solid 1px rgba(0,0,0,.23);
+                border-bottom: solid 1px rgba(255,255,255,.42);
+            }
+
+            a {
+                height: 2.2rem;
+                text-decoration: none;
+                background: darken( $appAside-bg, 5% );
+                &:hover { background: darken( $appAside-bg, 10% ); }
+
+                .icn, .labl {
+                    line-height: 2.2rem;
+                    height: 2.2rem;
+                    padding: 0;
+                    color: #777;
+                }
+                .icn {
+                    font-size: 1.2rem;
+                    width: 2.5rem;
+                    float: left;
+                    text-align: center;
+                }
+
+                &.current, &.active {
+                    .icn, .labl { color: $brand-color; }
+                }
+            }
+        }
+    }
+
+
+    &.on {
+        & > .aside_nav { display: block; }
+    }
+
+}
+
+a.aside_lnk, .aside_lnk > a {
+    &.current { color: #069; }
+    &:hover {
+        background: darken( $appAside-bg, 20% );
+    }
+    &:hover, &:focus, &:active, &.active {
+        text-decoration: none;
+    }
+}

data/assets/stylesheets/better/navigations/_nav_list.scss

@@ -0,0 +1,177 @@
+$fontSize:      1rem;
+$lineHeight:    1.42em;
+$activeColor:   $brand-color;
+$currentBG:     $white;
+$navColor:      $text-gray;
+$hoverBG:       $white;
+$hoverColor:    $brand-color;
+$borderColor:   $main-border-color;
+$subNavBG:      rgba(0,0,0,.05);
+
+.nav_list, .nav-list {
+  &, & > li, .sub_nav, .sub_nav li, a, span.lst_lnk , p.lst_lnk {
+    display: block; position: relative;
+    margin: 0; padding: 0;
+  }
+  &, & > li, .sub_nav, .sub_nav li {
+    list-style: none;
+  }
+}
+
+
+.nav_list, .nav-list {
+  
+  font-size: $fontSize;
+  
+  li {
+    border: none;
+    
+    a, span.lst_lnk, p.lst_lnk {
+      padding: 0.8em 0.6em;
+      line-height: $lineHeight;
+      text-decoration: none;
+      color: $navColor;
+      .label {
+        font-size: inherit; line-height: inherit; color: inherit; 
+        margin-left: 10px; margin-top: -1px;
+        text-align: center;
+        float: right;
+        width: 2.5em;
+        border: solid 1px $borderColor;
+        border-radius: 80px;
+      }
+    }
+    a:hover, a:focus {
+      background: $hoverBG;
+      color: $hoverColor;
+    }
+    
+    .sub_nav {
+      display: none;
+      background: $subNavBG;
+      li {
+        a, span.lst_lnk, p.lst_lnk {
+            padding: 0.5em 0.6em;
+            font-size: 0.9em;
+        }
+        .sub_nav {
+          li {
+            a, span.lst_lnk, p.lst_lnk {
+                padding: 0.3em 0.6em;
+            }
+          }
+        }
+      }
+    }
+    
+    &.active {
+        & > a {
+            font-weight: $bold;
+        }
+	      & > .sub_nav { display: block; }
+    }
+    &.current > a { 
+      color: $activeColor;
+      background: $currentBG;
+    }
+    
+    &.arrow {
+      
+    }
+    
+  }
+  
+  
+  
+  // some other styles
+  &.lined {
+    li + li {   border-top: solid 1px $borderColor; }
+    .sub_nav {  border-top: solid 1px $borderColor; }
+  }
+  
+  &.pressed {
+    // background: $white;
+    li {
+      &.current, &.active {
+        padding-left: 3px;
+        & > a {
+          // background: $white;
+        }
+        .sub_nav > li { padding-left: 3px; }
+      }
+    }
+  }
+  
+  &.color-pressed {
+    // background: $white;
+    li {
+      &.current, &.active {
+        
+        &:before {
+          display: block; position: absolute;
+          margin: 0; padding: 0;
+          content: "";
+          top: 0; left: 0; bottom: 0;
+          width: 3px;
+          background: $activeColor;
+        }
+        padding-left: 3px;
+        & > a {
+          // background: $white;
+        }
+      }
+    }
+    .sub_nav { padding-left: 1px; }
+  }
+  
+  &.nice {
+    li .sub_nav {
+      overflow: hidden;
+			&:before, &:after {
+				display: block; position: absolute; content: "";
+				margin: 0; padding: 0;
+				z-index: 3;
+        left: -10px; right: -10px;
+        height: 5px;
+			}
+			&:before {
+				top: -7px; 
+				box-shadow: 0  2px 7px 0 rgba(0,0,0,.35);
+			}
+			&:after {
+				bottom: -7px;
+				box-shadow: 0 -2px 7px 0 rgba(0,0,0,.35);
+			}
+    }
+  }
+  
+  
+  &.arrowed li a, li.arrow > a {
+    padding-right: 2.5em;
+    &:after {
+        display: block;
+        position: absolute;
+        top: 0; right: 0; bottom: 0;
+        padding: inherit;
+        @include horizontal-padding( 0 );
+        text-align: center;
+        width: 1.5em;
+        line-height: $line-height-computed + 10;
+        content: "\e920";
+        font-family: 'betterwork-icons';
+        font-weight: normal;
+        font-style: normal;
+        font-size: 1.6em;
+        line-height: .9;
+    }
+  }
+  &.arrowed li.active > a, li.arrow.active > a {
+    &:after { content: "\e91f"; }
+  }
+  
+  
+  &.shiny {
+      @include single_shine( rgba(0, 0, 0, 0.13), 2, right, 1px, 10px, 5px, 80 );
+  }
+  
+}

data/assets/stylesheets/better/templates/_fixed_aside_to_header.scss

@@ -0,0 +1,89 @@
+body {
+	&.blank {
+		background: #fff;
+	}
+	&.main_template {
+	    padding: 40px 0 0 0;
+	}
+}
+
+#app_content {
+	display: block; 
+	position: relative;
+	// position: static;
+	width: 100%; height: 100%;
+	
+	z-index: 1;
+	
+	@include gpu_render;
+	
+}
+
+
+#aside {
+	// @mixin single_shine( $color, $times: 3, $position: right, $width: 5px, $blur: 5px, $size: 0, $corner: 100 )
+	display: block; position: fixed;
+	top: 40px; right: auto; bottom: 0; left: 0;
+	width: 220px;
+	z-index: 99999;
+	background: #e5e5e5;
+	// box-shadow: inset -2px 0 3px 0 #000;
+	border-right: solid 1px #ccc;
+	overflow-y: scroll;
+	.btn { width: 90%; margin: 0 auto; display: block; }
+	
+	// transform: translateZ( 0 ) ;
+	// transform: translateX( -222px ) ; 
+    
+    transform: translate(-220px,0) ;
+    
+    @include transition (all 0.5s ease-in-out);
+    @include asideScrollBar;
+}
+
+
+#mobile_header {
+    position: fixed;
+    top: 0; right: 0; left: 0;
+    height: 40px; line-height: 40px;
+    z-index: 999999;
+    // @include linear-gradient( #222, #111 );
+    color: #ccc;
+    background: rgba(0,0,0,.80);
+    text-shadow: 0 1px 1px #000;
+    i, i:before { font-size: 24px; line-height: 40px;}
+    text-decoration: none;
+}
+
+body.aside-on {
+    #aside {
+        // transform: translateX( 0 ) ;
+        transform: translate(0,0) ;
+    }
+    #mobile_header { color: #069; }
+}
+
+
+
+
+@include responsiveStep-sm {
+    
+    body {
+    	&.main_template {
+    	    padding: 0 0 0 220px;
+    	}
+    }
+    
+    #aside {
+        @include single_shine( rgba(0,0,0,.13), 1, right, 10px );
+        display: block; position: fixed;
+        top: 0;
+        
+        // transform: translateX( 0 ) ;
+        transform: translate(0,0) ;
+    }
+    
+    #mobile_header {
+        display: none;
+    }
+}

data/assets/stylesheets/better/templates/_icon_aside.scss

@@ -0,0 +1,404 @@
+$appAside-width:        14rem;
+$appAside-icn-width:    2.5rem;
+
+$appAside-bg:           #e5e5e5;
+$appAside-admin-bg:     #222;
+
+$appAside-color:        #444;
+$appAside-admin-color:  #ccc;
+
+$infoAside-width:       18rem;
+$infoAside-margin:      0.65rem;
+
+$filterAside-width:     15rem;
+
+.main-aside, .right-aside, .filter-aside {
+    display: block; position: fixed;
+    margin: 0; padding: 0;
+    @include gpu_render;
+    .aside-inner {
+        display: block; position: relative;
+        margin: 0; padding: 0 0 70px;
+        width: 100%; height: 100%;
+        // overflow-y: auto;
+    }
+}
+
+.main-aside   { z-index: 3; }
+.filter-aside { z-index: 1; }
+.main-content { z-index: 15; }
+.right-aside  { z-index: 75; }
+.app-logo     { z-index: 105; }
+
+
+.main-aside, .filter-aside, .main-content, .right-aside, .app-logo {
+    @include transition(all 1s ease);
+}
+body { @include transition(padding 1s ease); min-height: 100%; }
+
+
+.main-content {
+    display: block; position: relative;
+    margin: 0; padding: 0;
+    width: 100%; 
+    height: auto; min-height: 100%;
+    background: $main-bg;
+    transform: translateX( 0 ) ;
+}
+
+.main-aside {
+    left: 0; top: 0; bottom: 0;
+    width: $appAside-width;
+    background: $appAside-bg;
+    color: $appAside-color;
+    // font-size: $font-size-large;
+
+    transform: translateX(-.5 * $appAside-width) ;
+    @include asideScrollBar;
+
+    hr {
+        margin: 5px 0;
+    }
+
+
+    .bottom-btn {
+        position: absolute;
+        left: 20px; bottom: 20px; right: 20px;
+        .small_labl { display: none; }
+    }
+
+    &.admin {
+        @include antialiased_text;
+
+        background: $appAside-admin-bg;
+        color: $appAside-admin-color;
+        a.aside_lnk, .aside_lnk a {
+            background: $appAside-admin-bg;
+            color: $appAside-admin-color;
+            &.current, &.active { color: $brand-color; }
+            &:hover {
+                background: #000;
+            }
+        }
+        .aside_lnk .aside_nav {
+            background: rgba(255,255,255, .11);
+            li a {
+                background: transparent;
+                color: #f3f2f2;
+                &:hover { background: #000; }
+                .icn, .labl { color: #ccc; }
+                &.current, &.active {
+                    .icn, .labl { color: $brand-color; }
+                }
+            }
+        }
+
+        hr {
+            margin: 5px;
+            border-top-color: #000;
+            border-bottom-color: rgba(255,255,255,.07);
+        }
+    }
+
+}
+
+
+.app-logo {
+    display: block; position: fixed;
+    @include gpu_render;
+    background: #000;
+    color: #fff;
+    line-height: 30px;
+    // font-size: $font-size-xl;
+    padding: 10px 0;
+    top: 0; right: 0; bottom: auto; left: 0;
+    text-align: center;
+    transform: translateX( 0 ) ;
+
+    .toggl {
+        font-size: 20px;
+        width: 50px;
+        float: left;
+        text-align: center;
+        cursor: pointer;
+    }
+    .short-labl { display: none; }
+    .labl { display: block; }
+}
+
+
+.filter-aside {
+    left: auto; bottom: 0; right: 0;
+    top: 0;
+    width: $filterAside-width;
+    background: #999;
+    transform: translateX(.5 * $filterAside-width) ;
+}
+
+
+
+.right-aside {
+    background: #fff;
+    border: solid 1px $main-border-color;
+    border-radius: 3px;
+    right: 10px; top: 10px; bottom: 10px;
+    width: $infoAside-width;
+    z-index: 500;
+    transform: translateX($infoAside-width + $infoAside-margin) ;
+
+    .header {
+       line-height: 30px;
+       padding: 10px;
+       // font-size: $font-size-large;
+       color: $blue;
+       border-bottom: solid 1px #ccc;
+       h1, h2, h3, h4 {
+         // font-size: $font-size-large;
+         line-height: 30px;
+         padding: 0;
+         margin: 0;
+       }
+       .close {
+           display: block; position: absolute;
+           top: 7px; right: 7px;
+           width: 20px; height: 20px;
+           line-height: 20px;
+           text-align: center; vertical-align: middle;
+           text-shadow: 0 0 0 transparent;
+       }
+       &.with_avatar {
+           padding-right: 25px;
+           img.avatar {
+               max-width: 40px;
+               float: left;
+               margin: 0 7px 0 0;
+           }
+           h1, h2, h3, h4 {
+               line-height: 40px;
+           }
+       }
+    }
+    .body {
+      padding: 10px;
+      table.facts { margin: 0 auto; }
+    }
+}
+
+// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
+// Mobile:
+body {
+    // mobile .. space for app-logo
+    &.app { padding-top: 50px; }
+    
+    // mobile .. space for important_notice
+    &.with_important_notice {
+        &.app { padding-top: 80px; }
+        .app-logo { top: 30px; }
+        .main-aside { top: 30px; }
+        .right-aside { top: 90px; } // mmobile ( important_notice + app-logo )
+        &.with_info_aside {
+            .right-aside { transform: translateX( 0 ) ; }
+        }
+    }
+    
+    // mobile .. main-aside is open
+    &.with_open_aside {
+        .main-content { transform: translateX( $appAside-width ) ; }
+        .main-aside {
+            transform: translateX( 0 ) ;
+        }
+        .app-logo {
+            transform: translateX( $appAside-width ) ;
+            .toggl { color: #069; }
+        }
+    }
+    &.with_filter_aside {
+        .filter-aside { transform: translateX( 0 ) ; }
+        // see step-xs-only !!!
+        // .main-content { transform: translateX( -1 * $filterAside-width ) ; }
+        // .app-logo { transform: translateX( -1 * $filterAside-width ) ; }
+    }
+    &.with_info_aside {
+        .right-aside {
+          transform: translateX( 0 ) ;
+        }
+    }
+    
+}
+
+
+
+// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
+@include responsiveStep-sm {
+    body {
+        &.app {
+            padding-top: 0;
+            padding-left: $appAside-icn-width;
+            
+            .main-aside { top: 50px; }
+            .right-aside { top: 10px; }
+            .filter-aside { left: $appAside-icn-width; top: 0; transform: translateX( -0.5 * $filterAside-width ) ; }
+            &.with_filter_aside { 
+                padding-left: $appAside-icn-width + $filterAside-width; 
+                .filter-aside { transform: translateX( 0 ) ; }
+                 .main-content { transform: translateX( 0 ) ; }
+            }
+            &.with_important_notice {
+                padding-top: 30px;
+                .main-aside { top: 80px; }
+                .right-aside { top: 40px; }
+            }
+            
+        }
+        &.with_open_aside {
+            .main-content { transform: translateX( 0 ) ; }
+            .main-aside { transform: translateX( 0 ) ; }
+            .app-logo { transform: translateX( 0 ) ; }
+        }
+    }
+    
+    .app-logo {
+        width: $appAside-icn-width;
+        text-align: center;
+        .toggl { display: none; }
+        .labl { display: none; }
+        .short-labl { display: block; }
+        // &:hover {
+        //     .labl { display: block; }
+        //     .short-labl { display: none; }
+        //     width: $appAside-width;
+        //     @include border-right-radius( 5px );
+        // }
+    }
+    .main-aside {
+        width: $appAside-icn-width;
+        .labl { display: none; }
+        transform: translateX(0) ;
+
+        // &:hover, &:active {
+        //     width: $appAside-width;
+        //     .labl { display: block; }
+        // }
+
+        // .aside_lnk:hover {
+        //     width: $appAside-width;
+        //     .labl { display: block; }
+        //     @include border-right-radius( 5px );
+        // }
+
+    }
+    
+}
+
+// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
+@include responsiveStep-md {
+
+    body.app {
+        padding-left: $appAside-width;
+        .filter-aside { left: $appAside-width - $filterAside-width / 2; }
+        &.with_filter_aside {
+            .filter-aside { left: $appAside-width; }
+            padding-left: $appAside-width + $filterAside-width;
+        }
+        &.with_info_aside {
+            padding-right: $infoAside-width + 0.65rem;
+
+            .right-aside {
+              transform: translateX( 0 ) ;
+            }
+
+        }
+    }
+
+    .app-logo {
+        width: $appAside-width;
+        text-align: left;
+        .toggl { display: none; }
+        padding: 10px 20px;
+        .labl { display: block; }
+        .short-labl { display: none; }
+    }
+    
+    .filter-aside { left: $appAside-width; }
+    
+    .main-aside {
+        width: $appAside-width;
+        .labl { display: block; }
+        .aside_lnk:hover {
+            border-radius: 0;
+        }
+    }
+    
+    
+    .form-page-table {
+        display: table;
+        width: 100%;
+        & > .cell {
+            display: table-cell;
+            padding: 0 20px;
+            &:first-child { padding-left: 0; }
+            &:last-child { padding-right: 0; }
+            &.form {
+                width: 60%;
+                max-width: 600px;
+            }
+            &.helper {
+                width: 40%;
+                text-align: left;
+            }
+        }
+    }
+    
+}
+// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
+@include responsiveStep-lg {
+
+    .form-page-table > .cell {
+        &.form { width: 50%; }
+        &.helper { width: 50%; }
+    }
+
+}
+// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
+@include responsiveStep-xl {
+
+    .form-page-table > .cell {
+        &.form { width: 40%; }
+        &.helper { width: 60%; }
+    }
+
+}
+
+
+
+
+// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
+// // // // // // // // // // // // // // // //        only - steps        // // // // // // // // // // // // // // // // // 
+// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
+@include responsiveStep-xs-only {
+    
+    body.app {
+        &.with_filter_aside {
+            .main-content { transform: translateX( -1 * $filterAside-width ) ; }
+            .app-logo { transform: translateX( -1 * $filterAside-width ) ; }
+        }
+    }
+    
+}
+@include responsiveStep-sm-only {
+    
+    .main-aside {
+
+        .bottom-btn {
+            left: 10px; bottom: 20px; right: 10px;
+            padding: 2px 2px 5px;
+            // font-size: $font-size-large; 
+            // font-weight: 600;
+            .small_labl { display: block !important; }
+            .big_labl { display: none; }
+        }
+
+    }
+}
+
+