├── .gitignore ├── assets ├── img │ ├── bg.jpg │ ├── mask.png │ ├── cover_4.jpg │ ├── dulau.jpg │ ├── favicon.png │ ├── mockup.png │ ├── new_logo.png │ ├── tim_80x80.png │ ├── apple-icon.png │ ├── carousel_red.png │ ├── cover_4_blur.jpg │ ├── carousel_blue.png │ ├── carousel_green.png │ ├── carousel_orange.png │ └── blurred-black-cover.jpeg ├── sass │ ├── gsdk │ │ ├── mixins │ │ │ ├── _tabs.scss │ │ │ ├── _navbars.scss │ │ │ ├── _inputs.scss │ │ │ ├── _transparency.scss │ │ │ ├── _labels.scss │ │ │ ├── _buttons.scss │ │ │ └── _vendor-prefixes.scss │ │ ├── _mixins.scss │ │ ├── _carousel.scss │ │ ├── _alerts.scss │ │ ├── _collapse.scss │ │ ├── _modal.scss │ │ ├── _dropdown.scss │ │ ├── _labels-and-progress-bars.scss │ │ ├── _typography.scss │ │ ├── _buttons.scss │ │ ├── _misc.scss │ │ ├── _tooltips.scss │ │ ├── _inputs.scss │ │ ├── _tabs-navs-pagination.scss │ │ ├── _sliders.scss │ │ ├── _checkbox-radio-switch.scss │ │ ├── _variables.scss │ │ ├── _responsive.scss │ │ └── _navbars.scss │ └── gsdk.scss ├── js │ ├── custom.js │ ├── gsdk-checkbox.js │ ├── get-shit-done.js │ ├── gsdk-radio.js │ ├── gsdk-bootstrapswitch.js │ └── jquery-ui-1.10.4.custom.min.js └── css │ └── demo.css ├── bootstrap3 ├── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff ├── css │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.css └── js │ └── bootstrap.min.js ├── genezio.yaml ├── LICENSE.md ├── template.html ├── README.md ├── notification.html ├── navbar-transparent.html └── tutorial.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore dummyapp folder 2 | /gsdk/dummyapp 3 | -------------------------------------------------------------------------------- /assets/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/bg.jpg -------------------------------------------------------------------------------- /assets/img/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/mask.png -------------------------------------------------------------------------------- /assets/img/cover_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/cover_4.jpg -------------------------------------------------------------------------------- /assets/img/dulau.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/dulau.jpg -------------------------------------------------------------------------------- /assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/favicon.png -------------------------------------------------------------------------------- /assets/img/mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/mockup.png -------------------------------------------------------------------------------- /assets/img/new_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/new_logo.png -------------------------------------------------------------------------------- /assets/img/tim_80x80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/tim_80x80.png -------------------------------------------------------------------------------- /assets/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/apple-icon.png -------------------------------------------------------------------------------- /assets/img/carousel_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/carousel_red.png -------------------------------------------------------------------------------- /assets/img/cover_4_blur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/cover_4_blur.jpg -------------------------------------------------------------------------------- /assets/sass/gsdk/mixins/_tabs.scss: -------------------------------------------------------------------------------- 1 | @mixin pill-style($color){ 2 | border: 1px solid $color; 3 | color: $color; 4 | } -------------------------------------------------------------------------------- /assets/img/carousel_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/carousel_blue.png -------------------------------------------------------------------------------- /assets/img/carousel_green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/carousel_green.png -------------------------------------------------------------------------------- /assets/img/carousel_orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/carousel_orange.png -------------------------------------------------------------------------------- /bootstrap3/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/bootstrap3/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /assets/img/blurred-black-cover.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/assets/img/blurred-black-cover.jpeg -------------------------------------------------------------------------------- /bootstrap3/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/bootstrap3/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /bootstrap3/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/bootstrap3/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /bootstrap3/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/bootstrap3/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /bootstrap3/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/bootstrap3/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /bootstrap3/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/bootstrap3/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /bootstrap3/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/get-shit-done/HEAD/bootstrap3/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /assets/js/custom.js: -------------------------------------------------------------------------------- 1 | var transparentDemo = true; 2 | var fixedTop = false; 3 | 4 | $(window).scroll(function(e) { 5 | oVal = ($(window).scrollTop() / 170); 6 | $(".blur").css("opacity", oVal); 7 | 8 | }); 9 | 10 | -------------------------------------------------------------------------------- /assets/sass/gsdk/mixins/_navbars.scss: -------------------------------------------------------------------------------- 1 | @mixin navbar-color($color){ 2 | background-color: $color; 3 | } 4 | 5 | @mixin center-item(){ 6 | left: 0; 7 | right: 0; 8 | margin-right: auto; 9 | margin-left: auto; 10 | position: absolute; 11 | } -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: get-shit-done 2 | region: us-east-1 3 | frontend: 4 | # Specifies the path of your code. 5 | path: . 6 | # Specifies the folder where the build is located. 7 | # This is the folder that will be deployed. 8 | publish: . 9 | yamlVersion: 2 10 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_mixins.scss: -------------------------------------------------------------------------------- 1 | //Utilities 2 | 3 | @import "mixins/transparency"; 4 | @import "mixins/vendor-prefixes"; 5 | 6 | //Components 7 | 8 | @import "mixins/buttons"; 9 | @import "mixins/inputs"; 10 | @import "mixins/labels"; 11 | @import "mixins/tabs"; 12 | @import "mixins/navbars"; 13 | 14 | -------------------------------------------------------------------------------- /assets/sass/gsdk/mixins/_inputs.scss: -------------------------------------------------------------------------------- 1 | @mixin input-size($padding-vertical, $padding-horizontal, $height){ 2 | padding: $padding-vertical $padding-horizontal; 3 | height: $height; 4 | } 5 | 6 | @mixin placeholder($color, $opacity){ 7 | color: $color; 8 | @include opacity(1); 9 | } 10 | 11 | @mixin light-form(){ 12 | border-radius: 0; 13 | border:0; 14 | padding: 0; 15 | background-color: transparent; 16 | 17 | } -------------------------------------------------------------------------------- /assets/sass/gsdk/mixins/_transparency.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: #{alpha(opacity=$opacity-ie)}; 8 | } 9 | 10 | @mixin black-filter($opacity){ 11 | top: 0; 12 | left: 0; 13 | height: 100%; 14 | width: 100%; 15 | position: absolute; 16 | background-color: rgba(17,17,17,$opacity); 17 | display: block; 18 | content: ""; 19 | z-index: 1; 20 | } -------------------------------------------------------------------------------- /assets/sass/gsdk/_carousel.scss: -------------------------------------------------------------------------------- 1 | .carousel-control{ 2 | // width: 8%; 3 | &.left, 4 | &.right{ 5 | background-image: none; 6 | } 7 | .fa{ 8 | font-size: 35px; 9 | } 10 | .fa, 11 | .icon-prev, 12 | .icon-next{ 13 | display: inline-block; 14 | position: absolute; 15 | top: 50%; 16 | z-index: 5; 17 | margin-top: -17px; 18 | margin-left: -9px; 19 | } 20 | } 21 | .carousel-inner > .item { 22 | transition: left 1200ms cubic-bezier(0.455, 0.03, 0.4, 0.955) 0s; 23 | -webkit-transition: left 1200ms cubic-bezier(0.455, 0.03, 0.4, 0.955) 0s; 24 | } -------------------------------------------------------------------------------- /assets/sass/gsdk/mixins/_labels.scss: -------------------------------------------------------------------------------- 1 | @mixin label-style(){ 2 | padding: $padding-label-vertical $padding-label-horizontal; 3 | border: 1px solid $default-color; 4 | border-radius: $border-radius-small; 5 | color: $default-color; 6 | font-weight: $font-weight-semi; 7 | font-size: $font-size-small; 8 | text-transform: uppercase; 9 | display: inline-block; 10 | vertical-align: middle; 11 | } 12 | 13 | @mixin label-color($color){ 14 | border-color: $color; 15 | color: $color; 16 | } 17 | @mixin label-color-fill($color){ 18 | border-color: $color; 19 | color: $white-color; 20 | background-color: $color; 21 | } -------------------------------------------------------------------------------- /assets/sass/gsdk/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | border: 0; 3 | border-radius: 0; 4 | color: #FFFFFF; 5 | padding: 10px 15px; 6 | font-size: 14px; 7 | 8 | .container &{ 9 | border-radius: 4px; 10 | 11 | } 12 | .navbar &{ 13 | border-radius: 0; 14 | left: 0; 15 | position: absolute; 16 | right: 0; 17 | top: 85px; 18 | width: 100%; 19 | z-index: 3; 20 | } 21 | .navbar:not(.navbar-transparent) &{ 22 | top: 70px; 23 | } 24 | } 25 | .alert-info{ 26 | background-color: $azure-navbar; 27 | } 28 | .alert-success { 29 | background-color: $green-navbar; 30 | } 31 | .alert-warning { 32 | background-color: $orange-navbar; 33 | } 34 | .alert-danger { 35 | background-color: $red-navbar; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_collapse.scss: -------------------------------------------------------------------------------- 1 | .panel-group{ 2 | .panel { 3 | border: 0; 4 | border-bottom: 1px solid $medium-gray; 5 | box-shadow: none; 6 | } 7 | .panel-default > .panel-heading { 8 | background-color: $white-color; 9 | border-color: $white-color; 10 | } 11 | .panel{ 12 | border-radius: 0; 13 | } 14 | .panel-title{ 15 | font-size: $font-size-h5; 16 | } 17 | .panel-title a:hover, .panel-title a:focus{ 18 | text-decoration: none; 19 | } 20 | .gsdk-collapse{ 21 | display: block; 22 | height: 0px; 23 | visibility: visible; 24 | overflow: hidden; 25 | transition: all 400ms; 26 | } 27 | .panel-title a:hover, 28 | .panel-title a:focus{ 29 | color: $default-states-color; 30 | } 31 | .panel-default > .panel-heading + .panel-collapse.gsdk-collapse > .panel-body { 32 | box-shadow: inset 0 7px 10px -7px rgba(0,0,0,0.14); 33 | } 34 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Creative Tim (http://creative-tim.com/) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_modal.scss: -------------------------------------------------------------------------------- 1 | .modal-header { 2 | border: 0 none; 3 | } 4 | .modal-content { 5 | border: 0 none; 6 | border-radius: 10px; 7 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgba(0, 0, 0, 0.1); 8 | } 9 | .modal-dialog { 10 | padding-top: 60px; 11 | } 12 | .modal-footer { 13 | border-top: 0 none; 14 | padding: 5px 10px; 15 | text-align: right; 16 | .btn{ 17 | font-size: 16px; 18 | } 19 | .btn-default.btn-simple{ 20 | font-weight: 400; 21 | } 22 | .divider { 23 | background-color: #DDDDDD; 24 | display: inline-block; 25 | float: inherit; 26 | height: 26px; 27 | margin: 8px -3px; 28 | position: absolute; 29 | width: 1px; 30 | } 31 | 32 | 33 | } 34 | .modal-footer .modal-footer 35 | .modal.fade .modal-dialog { 36 | transform: none; 37 | -webkit-transform: none; 38 | -moz-transform: none; 39 | } 40 | .modal.in { 41 | // opacity: 0.25; 42 | .modal-dialog { 43 | transform: none; 44 | -webkit-transform: none; 45 | -moz-transform: none; 46 | } 47 | } 48 | 49 | .modal-footer 50 | .modal.fade .modal-dialog { 51 | transform: none; 52 | } 53 | 54 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown-menu{ 2 | margin: 0; 3 | padding: 0; 4 | border-radius: $border-radius-extreme; 5 | z-index: 9000; 6 | @include box-shadow($dropdown-shadow); 7 | 8 | > li > a { 9 | padding: $padding-base-vertical $padding-base-horizontal; 10 | color: #333333; 11 | } 12 | > li > a:focus{ 13 | outline: 0 !important; 14 | } 15 | 16 | > li:first-child > a{ 17 | border-top-left-radius: $border-radius-extreme; 18 | border-top-right-radius: $border-radius-extreme; 19 | } 20 | 21 | > li:last-child > a{ 22 | border-bottom-left-radius: $border-radius-extreme; 23 | border-bottom-right-radius: $border-radius-extreme; 24 | } 25 | 26 | > li > a:hover, 27 | > li > a:focus { 28 | background-color: $smoke-bg; 29 | color: #333333; 30 | opacity: 1; 31 | text-decoration: none; 32 | } 33 | 34 | > .active > a{ 35 | &, 36 | &:focus, 37 | &:hover{ 38 | background-color: $info-bg; 39 | } 40 | } 41 | } 42 | 43 | 44 | //fix bug for the select items in btn-group 45 | .btn-group.select{ 46 | overflow: hidden; 47 | } 48 | .btn-group.select.open{ 49 | overflow: visible; 50 | } 51 | 52 | -------------------------------------------------------------------------------- /assets/sass/gsdk.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Get Shit Done Kit - v1.4.1.0 5 | ========================================================= 6 | 7 | * Product Page: http://www.creative-tim.com/product/get-shit-done-kit 8 | * Copyright 2017 Creative Tim (http://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/timcreative/get-shit-done/blob/master/LICENSE.md) 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | */ 16 | 17 | 18 | @import "gsdk/variables"; 19 | @import "gsdk/mixins"; 20 | @import "gsdk/typography"; 21 | 22 | // Core CSS 23 | @import "gsdk/misc"; 24 | @import "gsdk/buttons"; 25 | @import "gsdk/inputs"; 26 | @import "gsdk/sliders"; 27 | @import "gsdk/alerts"; 28 | @import "gsdk/labels-and-progress-bars"; 29 | @import "gsdk/tooltips"; 30 | @import "gsdk/checkbox-radio-switch"; 31 | @import "gsdk/navbars"; 32 | 33 | 34 | // Fancy Stuff 35 | @import "gsdk/dropdown"; 36 | @import "gsdk/tabs-navs-pagination"; 37 | @import "gsdk/collapse"; 38 | @import "gsdk/carousel"; 39 | @import "gsdk/modal"; 40 | @import "gsdk/responsive"; 41 | 42 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_labels-and-progress-bars.scss: -------------------------------------------------------------------------------- 1 | /* Labels & Progress-bar */ 2 | .label{ 3 | padding: 0.2em 0.6em 0.2em; 4 | border: 1px solid #999999; 5 | border-radius: 3px; 6 | color: #999999; 7 | background-color: #FFFFFF; 8 | font-weight: 500; 9 | font-size: 11px; 10 | text-transform: uppercase; 11 | display: inline-block; 12 | margin-bottom: 3px; 13 | } 14 | .label-primary{ 15 | border-color: $primary-color; 16 | color: $primary-color; 17 | } 18 | .label-info{ 19 | border-color: $info-color; 20 | color: $info-color; 21 | } 22 | .label-success{ 23 | border-color: $success-color; 24 | color: $success-color; 25 | } 26 | .label-warning{ 27 | border-color: $warning-color; 28 | color: $warning-color; 29 | } 30 | .label-danger{ 31 | border-color: $danger-color; 32 | color: $danger-color; 33 | } 34 | .label.label-fill{ 35 | color: #FFFFFF; 36 | } 37 | .label-primary.label-fill, .progress-bar, .progress-bar-primary{ 38 | background-color: $primary-color; 39 | } 40 | .label-info.label-fill, .progress-bar-info{ 41 | background-color: $info-color; 42 | } 43 | .label-success.label-fill, .progress-bar-success{ 44 | background-color: $success-color; 45 | } 46 | .label-warning.label-fill, .progress-bar-warning{ 47 | background-color: $warning-color; 48 | } 49 | .label-danger.label-fill, .progress-bar-danger{ 50 | background-color: $danger-color; 51 | } 52 | .label-default.label-fill{ 53 | background-color: #999999; 54 | } 55 | .progress { 56 | background-color: #E5E5E5; 57 | border-radius: 3px; 58 | box-shadow: none; 59 | height: 4px; 60 | } 61 | .progress-thin{ 62 | height: 2px; 63 | } -------------------------------------------------------------------------------- /assets/sass/gsdk/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Mixin for generating new styles 2 | @mixin btn-styles($btn-color, $btn-states-color) { 3 | border-color: $btn-color; 4 | color: $btn-color; 5 | 6 | &:hover, 7 | &:focus, 8 | &:active, 9 | &.active, 10 | &:active:focus, 11 | &:active:hover, 12 | &.active:focus, 13 | &.active:hover, 14 | .open > &.dropdown-toggle, 15 | .open > &.dropdown-toggle:focus, 16 | .open > &.dropdown-toggle:hover { 17 | background-color: $transparent-bg; 18 | color: $btn-states-color; 19 | border-color: $btn-states-color; 20 | } 21 | 22 | &.disabled, 23 | &:disabled, 24 | &[disabled], 25 | fieldset[disabled] & { 26 | &, 27 | &:hover, 28 | &:focus, 29 | &.focus, 30 | &:active, 31 | &.active { 32 | background-color: $transparent-bg; 33 | border-color: $btn-color; 34 | } 35 | } 36 | 37 | 38 | &.btn-fill { 39 | color: $white-color; 40 | background-color: $btn-color; 41 | @include opacity(1); 42 | 43 | &:hover, 44 | &:focus, 45 | &:active, 46 | &.active, 47 | .open > &.dropdown-toggle{ 48 | background-color: $btn-states-color; 49 | color: $white-color; 50 | } 51 | 52 | .caret{ 53 | border-top-color: $white-color; 54 | } 55 | } 56 | 57 | .caret{ 58 | border-top-color: $btn-color; 59 | } 60 | } 61 | 62 | 63 | @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){ 64 | font-size: $font-size; 65 | border-radius: $border; 66 | padding: $padding-vertical $padding-horizontal; 67 | 68 | &.btn-round{ 69 | padding: $padding-vertical + 1 $padding-horizontal; 70 | } 71 | 72 | &.btn-simple{ 73 | padding: $padding-vertical + 2 $padding-horizontal; 74 | } 75 | 76 | } -------------------------------------------------------------------------------- /template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Get Shit Done Kit Template by Creative Tim 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | 31 |
32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_typography.scss: -------------------------------------------------------------------------------- 1 | /* Font Smoothing */ 2 | 3 | h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, .btn-simple, a, .td-name, td{ 4 | -moz-osx-font-smoothing: grayscale; 5 | -webkit-font-smoothing: antialiased; 6 | font-family: "Helvetica Neue","Open Sans",Arial,sans-serif; 7 | } 8 | 9 | h1, .h1, h2, .h2, h3, .h3, h4, .h4{ 10 | font-weight: $font-weight-normal; 11 | margin: $margin-large-vertical 0 $margin-base-vertical; 12 | } 13 | 14 | h1, .h1 { 15 | font-size: $font-size-h1; 16 | } 17 | h2, .h2{ 18 | font-size: $font-size-h2; 19 | } 20 | h3, .h3{ 21 | font-size: $font-size-h3; 22 | margin: 20px 0 10px; 23 | } 24 | h4, .h4{ 25 | font-size: $font-size-h4; 26 | line-height: 30px; 27 | } 28 | h5, .h5 { 29 | font-size: $font-size-h5; 30 | margin-bottom: 15px; 31 | } 32 | h6, .h6{ 33 | font-size: $font-size-h6; 34 | font-weight: $font-weight-bold; 35 | text-transform: uppercase; 36 | } 37 | p{ 38 | font-size: $font-paragraph; 39 | line-height: $line-height-general; 40 | } 41 | 42 | h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { 43 | color: $dark-gray; 44 | font-weight: $font-weight-light; 45 | line-height: $line-height-general; 46 | } 47 | 48 | h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small { 49 | font-size: 60%; 50 | } 51 | 52 | h1 .subtitle{ 53 | display: block; 54 | font-family: 'Grand Hotel',cursive; 55 | margin: 0 0 $margin-large-vertical; 56 | } 57 | 58 | .text-primary, .text-primary:hover{ 59 | color: $primary-color !important; 60 | } 61 | .text-info, .text-info:hover{ 62 | color: $info-color !important; 63 | } 64 | .text-success, .text-success:hover{ 65 | color: $success-color !important; 66 | } 67 | .text-warning, .text-warning:hover{ 68 | color: $warning-color !important; 69 | } 70 | .text-danger, .text-danger:hover{ 71 | color: $danger-color !important; 72 | } 73 | 74 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn{ 2 | border-width: $border-thick; 3 | background-color: $transparent-bg; 4 | font-weight: $font-weight-normal; 5 | 6 | @include opacity(.8); 7 | padding: $padding-base-vertical $padding-base-horizontal; 8 | 9 | @include btn-styles($default-color, $default-states-color); 10 | 11 | &:hover, 12 | &:focus{ 13 | @include opacity(1); 14 | outline: 0 !important; 15 | } 16 | &:active, 17 | &.active, 18 | .open > &.dropdown-toggle { 19 | @include box-shadow(none); 20 | outline: 0 !important; 21 | } 22 | } 23 | 24 | // Apply the mixin to the buttons 25 | //.btn-default { @include btn-styles($default-color, $default-states-color); } 26 | .btn-primary { @include btn-styles($primary-color, $primary-states-color); } 27 | .btn-success { @include btn-styles($success-color, $success-states-color); } 28 | .btn-info { @include btn-styles($info-color, $info-states-color); } 29 | .btn-warning { @include btn-styles($warning-color, $warning-states-color); } 30 | .btn-danger { @include btn-styles($danger-color, $danger-states-color); } 31 | .btn-neutral { 32 | @include btn-styles($white-color, $white-color); 33 | 34 | &:active, 35 | &.active, 36 | .open > &.dropdown-toggle{ 37 | background-color: $white-color; 38 | color: $default-color; 39 | } 40 | 41 | &.btn-fill, 42 | &.btn-fill:hover, 43 | &.btn-fill:focus{ 44 | color: $default-color; 45 | } 46 | 47 | &.btn-simple:active, 48 | &.btn-simple.active{ 49 | background-color: transparent; 50 | } 51 | } 52 | 53 | .btn{ 54 | &:disabled, 55 | &[disabled], 56 | &.disabled{ 57 | @include opacity(.5); 58 | } 59 | } 60 | .btn-round{ 61 | border-width: $border-thin; 62 | border-radius: $btn-round-radius !important; 63 | padding: $padding-round-vertical $padding-round-horizontal; 64 | } 65 | .btn-simple{ 66 | border: $none; 67 | font-size: $font-size-medium; 68 | padding: $padding-base-vertical $padding-base-horizontal; 69 | } 70 | .btn-lg{ 71 | @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large); 72 | font-weight: $font-weight-normal; 73 | } 74 | .btn-sm{ 75 | @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small); 76 | } 77 | .btn-xs { 78 | @include btn-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $border-radius-small); 79 | } 80 | .btn-wd { 81 | min-width: 140px; 82 | } 83 | .btn-group.select{ 84 | width: 100%; 85 | } 86 | .btn-group.select .btn{ 87 | text-align: left; 88 | } 89 | .btn-group.select .caret{ 90 | position: absolute; 91 | top: 50%; 92 | margin-top: -1px; 93 | right: 8px; 94 | } 95 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_misc.scss: -------------------------------------------------------------------------------- 1 | /* General overwrite */ 2 | body{ 3 | font-family: "Helvetica Neue","Open Sans",Arial,sans-serif; 4 | } 5 | .main{ 6 | background-color: #FFFFFF; 7 | position: relative; 8 | } 9 | a{ 10 | color: $info-color; 11 | 12 | &:hover, &:focus{ 13 | color: $info-states-color; 14 | text-decoration: none; 15 | } 16 | } 17 | 18 | a:focus, a:active, 19 | button::-moz-focus-inner, 20 | input[type="reset"]::-moz-focus-inner, 21 | input[type="button"]::-moz-focus-inner, 22 | input[type="submit"]::-moz-focus-inner, 23 | select::-moz-focus-inner, 24 | input[type="file"] > input[type="button"]::-moz-focus-inner { 25 | outline : 0; 26 | } 27 | .ui-slider-handle:focus, 28 | .navbar-toggle { 29 | outline : 0 !important; 30 | } 31 | 32 | /* Animations */ 33 | .form-control, 34 | .input-group-addon, 35 | .tagsinput, 36 | .navbar, 37 | .navbar .alert{ 38 | @include transition($general-transition-time, linear); 39 | } 40 | 41 | .fa{ 42 | width: 18px; 43 | text-align: center; 44 | } 45 | .margin-top{ 46 | margin-top: 50px; 47 | } 48 | 49 | 50 | /* CT colors */ 51 | .ct-blue, 52 | .ct-blue.checkbox.checked .second-icon, 53 | .ct-blue.checkbox.checked, 54 | .ct-blue.radio.checked .second-icon, 55 | .ct-blue.radio.checked{ 56 | color: $primary-color; 57 | } 58 | .ct-azzure, 59 | .ct-azzure.checkbox.checked .second-icon, 60 | .ct-azzure.radio.checked .second-icon, 61 | .ct-azzure.checkbox.checked, 62 | .ct-azzure.radio.checked{ 63 | color: $info-color; 64 | } 65 | .ct-green, 66 | .ct-green.checkbox.checked .second-icon, 67 | .ct-green.radio.checked .second-icon, 68 | .ct-green.checkbox.checked, 69 | .ct-green.radio.checked{ 70 | color: $success-color; 71 | } 72 | .ct-orange, 73 | .ct-orange.checkbox.checked .second-icon, 74 | .ct-orange.radio.checked .second-icon, 75 | .ct-orange.checkbox.checked, 76 | .ct-orange.radio.checked{ 77 | color: $warning-color; 78 | } 79 | .ct-red, 80 | .ct-red.checkbox.checked .second-icon, 81 | .ct-red.radio.checked .second-icon, 82 | .ct-red.checkbox.checked, 83 | .ct-red.radio.checked{ 84 | color: $danger-color; 85 | } 86 | input.ct-blue + span.switch-left, 87 | input.ct-blue + span + label + span.switch-right{ 88 | background-color: $primary-color; 89 | } 90 | input.ct-azzure + span.switch-left, 91 | input.ct-azure + span + label + span.switch-right{ 92 | background-color: $info-color; 93 | } 94 | input.ct-green + span.switch-left, 95 | input.ct-green + span + label + span.switch-right{ 96 | background-color: $success-color; 97 | } 98 | input.ct-orange + span.switch-left, 99 | input.ct-orange + span + label + span.switch-right{ 100 | background-color: $warning-color; 101 | } 102 | input.ct-red + span.switch-left, 103 | input.ct-red + span + label + span.switch-right{ 104 | background-color: $danger-color; 105 | } 106 | 107 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_tooltips.scss: -------------------------------------------------------------------------------- 1 | .tooltip { 2 | font-size: $font-size-base; 3 | font-weight: $font-weight-bold; 4 | 5 | &.top { 6 | margin-top: -11px; 7 | padding: 0; 8 | } 9 | &.top .tooltip-inner:after { 10 | border-top: 11px solid #FAE6A4; 11 | border-left: 11px solid rgba(0, 0, 0, 0); 12 | border-right: 11px solid rgba(0, 0, 0, 0); 13 | bottom: -10px; 14 | } 15 | &.top .tooltip-inner:before { 16 | border-top: 11px solid rgba(0, 0, 0, 0.2); 17 | border-left: 11px solid rgba(0, 0, 0, 0); 18 | border-right: 11px solid rgba(0, 0, 0, 0); 19 | bottom: -11px; 20 | } 21 | &.bottom { 22 | margin-top: 11px; 23 | padding: 0; 24 | } 25 | &.bottom .tooltip-inner:after { 26 | border-bottom: 11px solid #FAE6A4; 27 | border-left: 11px solid rgba(0, 0, 0, 0); 28 | border-right: 11px solid rgba(0, 0, 0, 0); 29 | top: -10px; 30 | } 31 | &.bottom .tooltip-inner:before { 32 | border-bottom: 11px solid rgba(0, 0, 0, 0.2); 33 | border-left: 11px solid rgba(0, 0, 0, 0); 34 | border-right: 11px solid rgba(0, 0, 0, 0); 35 | top: -11px; 36 | } 37 | &.left{ 38 | margin-left: -11px; 39 | padding: 0; 40 | } 41 | &.left .tooltip-inner:after { 42 | border-left: 11px solid #FAE6A4; 43 | border-top: 11px solid rgba(0, 0, 0, 0); 44 | border-bottom: 11px solid rgba(0, 0, 0, 0); 45 | right: -10px; 46 | left: auto; 47 | margin-left: 0; 48 | } 49 | &.left .tooltip-inner:before { 50 | border-left: 11px solid rgba(0, 0, 0, 0.2); 51 | border-top: 11px solid rgba(0, 0, 0, 0); 52 | border-bottom: 11px solid rgba(0, 0, 0, 0); 53 | right: -11px; 54 | left: auto; 55 | margin-left: 0; 56 | } 57 | &.right{ 58 | margin-left: 11px; 59 | padding: 0; 60 | } 61 | &.right .tooltip-inner:after { 62 | border-right: 11px solid #FAE6A4; 63 | border-top: 11px solid rgba(0, 0, 0, 0); 64 | border-bottom: 11px solid rgba(0, 0, 0, 0); 65 | left: -10px; 66 | top: 0; 67 | margin-left: 0; 68 | } 69 | &.right .tooltip-inner:before { 70 | border-right: 11px solid rgba(0, 0, 0, 0.2); 71 | border-top: 11px solid rgba(0, 0, 0, 0); 72 | border-bottom: 11px solid rgba(0, 0, 0, 0); 73 | left: -11px; 74 | top: 0; 75 | margin-left: 0; 76 | } 77 | } 78 | 79 | .tooltip-arrow{ 80 | display: none; 81 | opacity: 0; 82 | } 83 | .tooltip-inner { 84 | background-color: #FAE6A4; 85 | border-radius: 4px; 86 | box-shadow: 0 1px 13px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(115, 71, 38, 0.23); 87 | color: #734726; 88 | max-width: 260px; 89 | min-width: 86px; 90 | padding: 6px 10px; 91 | text-align: center; 92 | text-decoration: none; 93 | } 94 | .tooltip-inner:after { 95 | content: ""; 96 | display: inline-block; 97 | left: 100%; 98 | margin-left: -60%; 99 | position: absolute; 100 | } 101 | .tooltip-inner:before { 102 | content: ""; 103 | display: inline-block; 104 | left: 100%; 105 | margin-left: -60%; 106 | position: absolute; 107 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Get Shit Done Kit - Free Bootstrap UI Kit](http://demos.creative-tim.com/get-shit-done/index.html) 2 | 3 | ![Get Shit Done Kit](http://s3.amazonaws.com/creativetim_bucket/products/17/original/GSDK_thumbnail3.png?1431435570 "Get Shit Done Kit") 4 | 5 | Free Bootstrap 3 UI Kit, the best starting point for any online project you are building. It magically offers responsive design and easy to use elements. It has became a trademark for the online community of a clean and nice looking interface. 6 | 7 | Using Bootstrap straight out of the box doesn't solve design. The team behind Creative Tim strongly believes in this argument and has made this kit following this perspective. Customisation is vital for any project using Bootstrap. 8 | 9 | So how can you enjoy the Bootstrap benefits and have a facelift for your project? Simply import the Get Shit Done Kit into your project or start building on top of it. It easy to use and integrate. 10 | 11 | 12 | ## Links: 13 | 14 | + [Live Preview](http://demos.creative-tim.com/get-shit-done/index.html) 15 | + [Get Shit Done PRO](http://gsdk.creative-tim.com/) (from $39) 16 | 17 | ## Quick start 18 | 19 | Quick start options: 20 | 21 | - [Download from Github](https://github.com/creativetimofficial/get-shit-done). 22 | - [Download from Creative Tim](http://www.creative-tim.com/product/get-shit-done-kit). 23 | - Clone the repo: `git clone https://github.com/creativetimofficial/get-shit-done`. 24 | 25 | 26 | ### What's included 27 | 28 | Within the download you'll find the following directories and files: 29 | 30 | ``` 31 | get-shit-done/ 32 | ├── assets/ 33 | │   ├── css/ 34 | │   │   ├── demo.css 35 | │   │   └── gsdk.css 36 | │   ├── img/ 37 | │   ├── js/ 38 | │   │   ├── custom.js 39 | │   │   ├── get-shit-done.js 40 | │   │   ├── gsdk-bootstrapswitch.js 41 | │   │   ├── gsdk-checkbox.js 42 | │   │   ├── gsdk-radio.js 43 | │   │   ├── jquery-ui-1.10.4.custom.min.js 44 | │   │   └── presentation-page 45 | │   └── sass/ 46 | │   ├── gsdk/ 47 | │   └── gsdk.scss 48 | ├── bootstrap3/ 49 | ├── components.html 50 | ├── index.html 51 | ├── jquery 52 | ├── navbar-transparent.html 53 | ├── notification.html 54 | ├── template.html 55 | └── tutorial.html 56 | 57 | ``` 58 | 59 | ### Version logs 60 | 61 | - V1.0.0 - 09.05.2014 Initial Release 62 | - V1.1.0 - 22.09.2014 Added discount for Get Shit Done Kit PRO 63 | - V1.2.0 - 30.04.2015 Bug Fixing and documentation changes 64 | - V1.3.0 - 30.01.2016 Small updates 65 | - V1.4.0 - 01.08.2016 Added SASS files 66 | - V1.4.1 - 18.01.2017 Switched to MIT license [current version] 67 | 68 | ## License 69 | 70 | - Copyright 2017 Creative Tim (http://www.creative-tim.com) 71 | - Licensed under MIT (https://github.com/timcreative/get-shit-done/blob/master/LICENSE.md) 72 | 73 | 74 | ## Useful Links 75 | 76 | More products from Creative Tim: 77 | 78 | Tutorials: 79 | 80 | Freebies: 81 | 82 | Affiliate Program (earn money): 83 | 84 | Social Media: 85 | 86 | Twitter: 87 | 88 | Facebook: 89 | 90 | Dribbble: 91 | 92 | Google+: 93 | 94 | Instagram: 95 | 96 | 97 | -------------------------------------------------------------------------------- /assets/js/gsdk-checkbox.js: -------------------------------------------------------------------------------- 1 | !function ($) { 2 | 3 | /* CHECKBOX PUBLIC CLASS DEFINITION 4 | * ============================== */ 5 | 6 | var Checkbox = function (element, options) { 7 | this.init(element, options); 8 | } 9 | 10 | Checkbox.prototype = { 11 | 12 | constructor: Checkbox 13 | 14 | , init: function (element, options) { 15 | var $el = this.$element = $(element) 16 | 17 | this.options = $.extend({}, $.fn.checkbox.defaults, options); 18 | $el.before(this.options.template); 19 | this.setState(); 20 | } 21 | 22 | , setState: function () { 23 | var $el = this.$element 24 | , $parent = $el.closest('.checkbox'); 25 | 26 | $el.prop('disabled') && $parent.addClass('disabled'); 27 | $el.prop('checked') && $parent.addClass('checked'); 28 | } 29 | 30 | , toggle: function () { 31 | var ch = 'checked' 32 | , $el = this.$element 33 | , $parent = $el.closest('.checkbox') 34 | , checked = $el.prop(ch) 35 | , e = $.Event('toggle') 36 | 37 | if ($el.prop('disabled') == false) { 38 | $parent.toggleClass(ch) && checked ? $el.removeAttr(ch) : $el.prop(ch, ch); 39 | $el.trigger(e).trigger('change'); 40 | } 41 | } 42 | 43 | , setCheck: function (option) { 44 | var d = 'disabled' 45 | , ch = 'checked' 46 | , $el = this.$element 47 | , $parent = $el.closest('.checkbox') 48 | , checkAction = option == 'check' ? true : false 49 | , e = $.Event(option) 50 | 51 | $parent[checkAction ? 'addClass' : 'removeClass' ](ch) && checkAction ? $el.prop(ch, ch) : $el.removeAttr(ch); 52 | $el.trigger(e).trigger('change'); 53 | } 54 | 55 | } 56 | 57 | 58 | /* CHECKBOX PLUGIN DEFINITION 59 | * ======================== */ 60 | 61 | var old = $.fn.checkbox 62 | 63 | $.fn.checkbox = function (option) { 64 | return this.each(function () { 65 | var $this = $(this) 66 | , data = $this.data('checkbox') 67 | , options = $.extend({}, $.fn.checkbox.defaults, $this.data(), typeof option == 'object' && option); 68 | if (!data) $this.data('checkbox', (data = new Checkbox(this, options))); 69 | if (option == 'toggle') data.toggle() 70 | if (option == 'check' || option == 'uncheck') data.setCheck(option) 71 | else if (option) data.setState(); 72 | }); 73 | } 74 | 75 | $.fn.checkbox.defaults = { 76 | template: '' 77 | } 78 | 79 | 80 | /* CHECKBOX NO CONFLICT 81 | * ================== */ 82 | 83 | $.fn.checkbox.noConflict = function () { 84 | $.fn.checkbox = old; 85 | return this; 86 | } 87 | 88 | 89 | /* CHECKBOX DATA-API 90 | * =============== */ 91 | 92 | $(document).on('click.checkbox.data-api', '[data-toggle^=checkbox], .checkbox', function (e) { 93 | var $checkbox = $(e.target); 94 | if (e.target.tagName != "A") { 95 | e && e.preventDefault() && e.stopPropagation(); 96 | if (!$checkbox.hasClass('checkbox')) $checkbox = $checkbox.closest('.checkbox'); 97 | $checkbox.find(':checkbox').checkbox('toggle'); 98 | } 99 | }); 100 | 101 | $(function () { 102 | $('[data-toggle="checkbox"]').each(function () { 103 | var $checkbox = $(this); 104 | $checkbox.checkbox(); 105 | }); 106 | }); 107 | 108 | }(window.jQuery); 109 | 110 | -------------------------------------------------------------------------------- /assets/js/get-shit-done.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Get Shit Done Kit - v1.4.1.0 5 | ========================================================= 6 | 7 | * Product Page: http://www.creative-tim.com/product/get-shit-done-kit 8 | * Copyright 2017 Creative Tim (http://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/timcreative/get-shit-done/blob/master/LICENSE.md) 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | */ 16 | 17 | searchVisible = 0; 18 | transparent = true; 19 | 20 | $(document).ready(function(){ 21 | /* Activate the switches with icons */ 22 | $('.switch')['bootstrapSwitch'](); 23 | 24 | /* Activate regular switches */ 25 | $("[data-toggle='switch']").wrap('
').parent().bootstrapSwitch(); 26 | 27 | $('[data-toggle="search"]').click(function(){ 28 | if(searchVisible == 0){ 29 | searchVisible = 1; 30 | $(this).parent().addClass('active'); 31 | $('.navbar-search-form').fadeIn(function(){ 32 | $('.navbar-search-form input').focus(); 33 | }); 34 | } else { 35 | searchVisible = 0; 36 | $(this).parent().removeClass('active'); 37 | $(this).blur(); 38 | $('.navbar-search-form').fadeOut(function(){ 39 | $('.navbar-search-form input').blur(); 40 | }); 41 | } 42 | }); 43 | 44 | $('[data-toggle="gsdk-collapse"]').hover( 45 | function(){ 46 | console.log('on hover'); 47 | var thisdiv = $(this).attr("data-target"); 48 | 49 | if(!$(this).hasClass('state-open')){ 50 | $(this).addClass('state-hover'); 51 | $(thisdiv).css({ 52 | 'height':'30px' 53 | }); 54 | } 55 | 56 | }, 57 | function(){ 58 | var thisdiv = $(this).attr("data-target"); 59 | $(this).removeClass('state-hover'); 60 | 61 | if(!$(this).hasClass('state-open')){ 62 | $(thisdiv).css({ 63 | 'height':'0px' 64 | }); 65 | } 66 | } 67 | ); 68 | 69 | $('[data-toggle="gsdk-collapse"]').click( 70 | function(event){ 71 | event.preventDefault(); 72 | 73 | var thisdiv = $(this).attr("data-target"); 74 | var height = $(thisdiv).children('.panel-body').height(); 75 | 76 | if($(this).hasClass('state-open')){ 77 | $(thisdiv).css({ 78 | 'height':'0px', 79 | }); 80 | $(this).removeClass('state-open'); 81 | } else { 82 | $(thisdiv).css({ 83 | 'height':height, 84 | }); 85 | $(this).addClass('state-open'); 86 | } 87 | } 88 | ); 89 | }); 90 | 91 | $(function () { 92 | $('[data-toggle="gsdk-collapse"]').each(function () { 93 | var thisdiv = $(this).attr("data-target"); 94 | $(thisdiv).addClass("gsdk-collapse"); 95 | }); 96 | 97 | }); 98 | 99 | $(document).scroll(function() { 100 | if( $(this).scrollTop() > 260 ) { 101 | if(transparent) { 102 | transparent = false; 103 | $('nav[role="navigation"]').removeClass('navbar-transparent'); 104 | } 105 | } else { 106 | if( !transparent ) { 107 | transparent = true; 108 | $('nav[role="navigation"]').addClass('navbar-transparent'); 109 | } 110 | } 111 | }); 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_inputs.scss: -------------------------------------------------------------------------------- 1 | .form-control::-moz-placeholder{ 2 | @include placeholder($medium-gray,1); 3 | } 4 | .form-control:-moz-placeholder{ 5 | @include placeholder($medium-gray,1); 6 | } 7 | .form-control::-webkit-input-placeholder{ 8 | @include placeholder($medium-gray,1); 9 | } 10 | .form-control:-ms-input-placeholder{ 11 | @include placeholder($medium-gray,1); 12 | } 13 | 14 | 15 | .form-control { 16 | background-color: $white-bg; 17 | border: 1px solid $medium-gray; 18 | border-radius: $border-radius-base; 19 | color: #444444; 20 | 21 | @include input-size($padding-base-vertical, $padding-base-horizontal, $height-base); 22 | @include box-shadow(none); 23 | 24 | &:focus{ 25 | background-color: $white-bg; 26 | border: 1px solid $dark-gray; 27 | @include box-shadow(none); 28 | outline: 0 !important; 29 | } 30 | 31 | .has-success &, 32 | .has-error &, 33 | .has-success &:focus, 34 | .has-error &:focus{ 35 | border-color: $light-gray; 36 | @include box-shadow(none); 37 | } 38 | 39 | .has-success &{ 40 | color: $success-color; 41 | &:focus{ 42 | border-color: $success-color; 43 | } 44 | } 45 | 46 | .has-error &{ 47 | color: $danger-color; 48 | &:focus{ 49 | border-color: $danger-color; 50 | } 51 | } 52 | 53 | & + .form-control-feedback{ 54 | border-radius: $border-radius-large; 55 | font-size: $font-size-base; 56 | padding: 0 12px 0 0; 57 | position: absolute; 58 | right: 25px; 59 | top: 13px; 60 | vertical-align: middle; 61 | } 62 | 63 | .open > &{ 64 | border-radius: $border-radius-base $border-radius-base 0 0; 65 | border-bottom-color: transparent; 66 | } 67 | } 68 | 69 | .input-lg{ 70 | height: 55px; 71 | padding: $padding-large-vertical $padding-large-horizontal; 72 | } 73 | 74 | .has-error{ 75 | .form-control-feedback{ 76 | color: $danger-color; 77 | } 78 | } 79 | .has-success{ 80 | .form-control-feedback{ 81 | color: $success-color 82 | } 83 | } 84 | 85 | 86 | .input-group-addon { 87 | background-color: $white-color; 88 | border: 1px solid $light-gray; 89 | border-radius: $border-radius-base; 90 | 91 | -webkit-transition: all 300ms linear; 92 | -moz-transition: all 300ms linear; 93 | -o-transition: all 300ms linear; 94 | -ms-transition: all 300ms linear; 95 | transition: all 300ms linear; 96 | 97 | .has-success &, 98 | .has-error &{ 99 | background-color: $white-color; 100 | border: 1px solid $light-gray; 101 | } 102 | .has-error .form-control:focus + &{ 103 | border-color: $danger-color; 104 | color: $danger-color; 105 | } 106 | .has-success .form-control:focus + &{ 107 | border-color: $success-color; 108 | color: $success-color; 109 | } 110 | .form-control:focus + &, 111 | .form-control:focus ~ &{ 112 | background-color: $white-color; 113 | border-color: $dark-gray; 114 | } 115 | } 116 | 117 | .input-group .form-control:first-child, 118 | .input-group-addon:first-child, 119 | .input-group-btn:first-child > .dropdown-toggle, 120 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { 121 | border-right: 0 none; 122 | } 123 | .input-group .form-control:last-child, 124 | .input-group-addon:last-child, 125 | .input-group-btn:last-child > .dropdown-toggle, 126 | .input-group-btn:first-child > .btn:not(:first-child) { 127 | border-left: 0 none; 128 | } 129 | .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { 130 | background-color: $light-gray; 131 | color: $default-color; 132 | cursor: not-allowed; 133 | } 134 | 135 | .input-group-btn .btn{ 136 | border-width: $border-thin; 137 | padding: $padding-round-vertical $padding-base-horizontal; 138 | } 139 | .input-group-btn .btn-default:not(.btn-fill){ 140 | border-color: $medium-gray; 141 | } 142 | 143 | .input-group-btn:last-child > .btn{ 144 | margin-left: 0; 145 | } 146 | 147 | .input-group-focus .input-group-addon{ 148 | border-color: $dark-gray; 149 | } 150 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_tabs-navs-pagination.scss: -------------------------------------------------------------------------------- 1 | /* Navigation menu */ 2 | .nav-pills { 3 | > li + li { 4 | margin-left: 0; 5 | } 6 | > li > a { 7 | border: 1px solid $info-color; 8 | border-radius: 0; 9 | color: $info-color; 10 | margin-left: -1px; 11 | 12 | &:hover, 13 | &:focus{ 14 | background-color: #F5F5F5; 15 | } 16 | } 17 | > li.active > a, 18 | > li.active > a:hover, 19 | > li.active > a:focus { 20 | background-color: $info-color; 21 | color: #FFFFFF !important; 22 | } 23 | > li:first-child > a{ 24 | border-radius: $border-radius-base 0 0 $border-radius-base; 25 | margin: 0; 26 | } 27 | > li:last-child > a{ 28 | border-radius: 0 $border-radius-base $border-radius-base 0; 29 | } 30 | } 31 | 32 | // style for pagination 33 | .pagination.pagination-no-border > li > a, 34 | .pagination.pagination-no-border > li > span{ 35 | border: 0; 36 | } 37 | .pagination > li > a, .pagination > li > span, .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span{ 38 | border-radius: 50%; 39 | margin: 0 2px; 40 | color: $default-states-color; 41 | } 42 | .pagination > li.active > a, .pagination > li.active > span, .pagination > li.active > a:hover, .pagination > li.active > span:hover, .pagination > li.active > a:focus, .pagination > li.active > span:focus { 43 | background-color: $info-color; 44 | border: 0; 45 | color: #FFFFFF; 46 | padding: 7px 13px; 47 | } 48 | 49 | .nav-pills.ct-blue > li.active > a, 50 | .nav-pills.ct-blue > li.active > a:hover, 51 | .nav-pills.ct-blue > li.active > a:focus, 52 | .pagination.ct-blue > li.active > a, 53 | .pagination.ct-blue > li.active > span, 54 | .pagination.ct-blue > li.active > a:hover, 55 | .pagination.ct-blue > li.active > span:hover, 56 | .pagination.ct-blue > li.active > a:focus, 57 | .pagination.ct-blue > li.active > span:focus{ 58 | background-color: $primary-color; 59 | } 60 | 61 | .nav-pills.ct-azzure > li.active > a, 62 | .nav-pills.ct-azzure > li.active > a:hover, 63 | .nav-pills.ct-azzure > li.active > a:focus, 64 | .pagination.ct-azzure > li.active > a, 65 | .pagination.ct-azzure > li.active > span, 66 | .pagination.ct-azzure > li.active > a:hover, 67 | .pagination.ct-azzure > li.active > span:hover, 68 | .pagination.ct-azzure > li.active > a:focus, 69 | .pagination.ct-azzure > li.active > span:focus{ 70 | background-color: $info-color; 71 | } 72 | 73 | .nav-pills.ct-green > li.active > a, 74 | .nav-pills.ct-green > li.active > a:hover, 75 | .nav-pills.ct-green > li.active > a:focus, 76 | .pagination.ct-green > li.active > a, 77 | .pagination.ct-green > li.active > span, 78 | .pagination.ct-green > li.active > a:hover, 79 | .pagination.ct-green > li.active > span:hover, 80 | .pagination.ct-green > li.active > a:focus, 81 | .pagination.ct-green > li.active > span:focus{ 82 | background-color: $success-color; 83 | } 84 | 85 | .nav-pills.ct-orange > li.active > a, 86 | .nav-pills.ct-orange > li.active > a:hover, 87 | .nav-pills.ct-orange > li.active > a:focus, 88 | .pagination.ct-orange > li.active > a, 89 | .pagination.ct-orange > li.active > span, 90 | .pagination.ct-orange > li.active > a:hover, 91 | .pagination.ct-orange > li.active > span:hover, 92 | .pagination.ct-orange > li.active > a:focus, 93 | .pagination.ct-orange > li.active > span:focus{ 94 | background-color: $warning-color; 95 | } 96 | 97 | .nav-pills.ct-red > li.active > a, 98 | .nav-pills.ct-red > li.active > a:hover, 99 | .nav-pills.ct-red > li.active > a:focus, 100 | .pagination.ct-red > li.active > a, 101 | .pagination.ct-red > li.active > span, 102 | .pagination.ct-red > li.active > a:hover, 103 | .pagination.ct-red > li.active > span:hover, 104 | .pagination.ct-red > li.active > a:focus, 105 | .pagination.ct-red > li.active > span:focus{ 106 | background-color: $danger-color; 107 | } 108 | .nav-pills.ct-blue > li > a { 109 | @include pill-style($primary-color); 110 | } 111 | .nav-pills.ct-azzure > li > a { 112 | @include pill-style($info-color); 113 | } 114 | .nav-pills.ct-green > li > a { 115 | @include pill-style($success-color); 116 | } 117 | .nav-pills.ct-orange > li > a { 118 | @include pill-style($warning-color); 119 | } 120 | .nav-pills.ct-red > li > a { 121 | @include pill-style($danger-color); 122 | } -------------------------------------------------------------------------------- /assets/js/gsdk-radio.js: -------------------------------------------------------------------------------- 1 | /* ============================================================= 2 | * flatui-radio v0.0.3 3 | * ============================================================ */ 4 | 5 | !function ($) { 6 | 7 | /* RADIO PUBLIC CLASS DEFINITION 8 | * ============================== */ 9 | 10 | var Radio = function (element, options) { 11 | this.init(element, options); 12 | } 13 | 14 | Radio.prototype = { 15 | 16 | constructor: Radio 17 | 18 | , init: function (element, options) { 19 | var $el = this.$element = $(element) 20 | 21 | this.options = $.extend({}, $.fn.radio.defaults, options); 22 | $el.before(this.options.template); 23 | this.setState(); 24 | } 25 | 26 | , setState: function () { 27 | var $el = this.$element 28 | , $parent = $el.closest('.radio'); 29 | 30 | $el.prop('disabled') && $parent.addClass('disabled'); 31 | $el.prop('checked') && $parent.addClass('checked'); 32 | } 33 | 34 | , toggle: function () { 35 | var d = 'disabled' 36 | , ch = 'checked' 37 | , $el = this.$element 38 | , checked = $el.prop(ch) 39 | , $parent = $el.closest('.radio') 40 | , $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body') 41 | , $elemGroup = $parentWrap.find(':radio[name="' + $el.attr('name') + '"]') 42 | , e = $.Event('toggle') 43 | 44 | if ($el.prop(d) == false) { 45 | $elemGroup.not($el).each(function () { 46 | var $el = $(this) 47 | , $parent = $(this).closest('.radio'); 48 | 49 | if ($el.prop(d) == false) { 50 | $parent.removeClass(ch) && $el.removeAttr(ch).trigger('change'); 51 | } 52 | }); 53 | 54 | if (checked == false) $parent.addClass(ch) && $el.prop(ch, true); 55 | $el.trigger(e); 56 | 57 | if (checked !== $el.prop(ch)) { 58 | $el.trigger('change'); 59 | } 60 | } 61 | } 62 | 63 | , setCheck: function (option) { 64 | var ch = 'checked' 65 | , $el = this.$element 66 | , $parent = $el.closest('.radio') 67 | , checkAction = option == 'check' ? true : false 68 | , checked = $el.prop(ch) 69 | , $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body') 70 | , $elemGroup = $parentWrap.find(':radio[name="' + $el['attr']('name') + '"]') 71 | , e = $.Event(option) 72 | 73 | $elemGroup.not($el).each(function () { 74 | var $el = $(this) 75 | , $parent = $(this).closest('.radio'); 76 | 77 | $parent.removeClass(ch) && $el.removeAttr(ch); 78 | }); 79 | 80 | $parent[checkAction ? 'addClass' : 'removeClass'](ch) && checkAction ? $el.prop(ch, ch) : $el.removeAttr(ch); 81 | $el.trigger(e); 82 | 83 | if (checked !== $el.prop(ch)) { 84 | $el.trigger('change'); 85 | } 86 | } 87 | 88 | } 89 | 90 | 91 | /* RADIO PLUGIN DEFINITION 92 | * ======================== */ 93 | 94 | var old = $.fn.radio 95 | 96 | $.fn.radio = function (option) { 97 | return this.each(function () { 98 | var $this = $(this) 99 | , data = $this.data('radio') 100 | , options = $.extend({}, $.fn.radio.defaults, $this.data(), typeof option == 'object' && option); 101 | if (!data) $this.data('radio', (data = new Radio(this, options))); 102 | if (option == 'toggle') data.toggle() 103 | if (option == 'check' || option == 'uncheck') data.setCheck(option) 104 | else if (option) data.setState(); 105 | }); 106 | } 107 | 108 | $.fn.radio.defaults = { 109 | template: '' 110 | } 111 | 112 | 113 | /* RADIO NO CONFLICT 114 | * ================== */ 115 | 116 | $.fn.radio.noConflict = function () { 117 | $.fn.radio = old; 118 | return this; 119 | } 120 | 121 | 122 | /* RADIO DATA-API 123 | * =============== */ 124 | 125 | $(document).on('click.radio.data-api', '[data-toggle^=radio], .radio', function (e) { 126 | var $radio = $(e.target); 127 | e && e.preventDefault() && e.stopPropagation(); 128 | if (!$radio.hasClass('radio')) $radio = $radio.closest('.radio'); 129 | $radio.find(':radio').radio('toggle'); 130 | }); 131 | 132 | $(function () { 133 | $('[data-toggle="radio"]').each(function () { 134 | var $radio = $(this); 135 | $radio.radio(); 136 | }); 137 | }); 138 | 139 | }(window.jQuery); 140 | 141 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_sliders.scss: -------------------------------------------------------------------------------- 1 | 2 | /*! 3 | * jQuery UI Slider 1.10.4 4 | * http://jqueryui.com 5 | * 6 | * Copyright 2014 jQuery Foundation and other contributors 7 | * Released under the MIT license. 8 | * http://jquery.org/license 9 | * 10 | * http://api.jqueryui.com/slider/#theming 11 | */ 12 | .ui-slider { 13 | position: relative; 14 | text-align: left; 15 | } 16 | .ui-slider .ui-slider-handle { 17 | position: absolute; 18 | z-index: 2; 19 | width: 1.2em; 20 | height: 1.2em; 21 | cursor: default; 22 | } 23 | .ui-slider .ui-slider-range { 24 | position: absolute; 25 | z-index: 1; 26 | font-size: .7em; 27 | display: block; 28 | border: 0; 29 | background-position: 0 0; 30 | } 31 | 32 | /* For IE8 - See #6727 */ 33 | .ui-slider.ui-state-disabled .ui-slider-handle, 34 | .ui-slider.ui-state-disabled .ui-slider-range { 35 | filter: inherit; 36 | } 37 | 38 | .ui-slider-horizontal { 39 | height: 4px; 40 | } 41 | .ui-slider-horizontal .ui-slider-handle { 42 | margin-left: -10px; 43 | top: -7px; 44 | } 45 | .ui-slider-horizontal .ui-slider-range { 46 | top: 0; 47 | height: 100%; 48 | } 49 | .ui-slider-horizontal .ui-slider-range-min { 50 | left: 0; 51 | } 52 | .ui-slider-horizontal .ui-slider-range-max { 53 | right: 0; 54 | } 55 | 56 | .ui-slider-vertical { 57 | width: .8em; 58 | height: 100px; 59 | } 60 | .ui-slider-vertical .ui-slider-handle { 61 | left: -.3em; 62 | margin-left: 0; 63 | margin-bottom: -.6em; 64 | } 65 | .ui-slider-vertical .ui-slider-range { 66 | left: 0; 67 | width: 100%; 68 | } 69 | .ui-slider-vertical .ui-slider-range-min { 70 | bottom: 0; 71 | } 72 | .ui-slider-vertical .ui-slider-range-max { 73 | top: 0; 74 | } 75 | 76 | /* Component containers 77 | ----------------------------------*/ 78 | .ui-widget { 79 | font-size: 1.1em/*{fsDefault}*/; 80 | } 81 | .ui-widget .ui-widget { 82 | font-size: 1em; 83 | } 84 | .ui-widget input, 85 | .ui-widget select, 86 | .ui-widget textarea, 87 | .ui-widget button { 88 | font-size: 1em; 89 | } 90 | .ui-widget-content { 91 | background-color: #E5E5E5; 92 | } 93 | .ui-widget-content a { 94 | color: #222222/*{fcContent}*/; 95 | } 96 | .ui-widget-header { 97 | background: #999999; 98 | color: #222222; 99 | font-weight: bold; 100 | } 101 | .ui-widget-header a { 102 | color: #222222; 103 | } 104 | 105 | .slider-primary .ui-widget-header{ 106 | background-color: #3472F7; 107 | } 108 | .slider-info .ui-widget-header{ 109 | background-color: #2C93FF; 110 | } 111 | .slider-success .ui-widget-header{ 112 | background-color: #05AE0E; 113 | } 114 | .slider-warning .ui-widget-header{ 115 | background-color: #FF9500; 116 | } 117 | .slider-danger .ui-widget-header{ 118 | background-color: #FF3B30; 119 | } 120 | 121 | /* Interaction states 122 | ----------------------------------*/ 123 | .ui-state-default, 124 | .ui-widget-content .ui-state-default, 125 | .ui-widget-header .ui-state-default { 126 | background: rgb(255,255,255); /* Old browsers */ 127 | background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,242,1) 100%); /* FF3.6+ */ 128 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(241,241,242,1))); /* Chrome,Safari4+ */ 129 | background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,242,1) 100%); /* Chrome10+,Safari5.1+ */ 130 | background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,242,1) 100%); /* Opera 11.10+ */ 131 | background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,242,1) 100%); /* IE10+ */ 132 | background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,242,1) 100%); /* W3C */ 133 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f2',GradientType=0 ); /* IE6-9 */ 134 | 135 | border-radius: 50%; 136 | box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 2px rgba(0, 0, 0, 0.4); 137 | height:15px; 138 | width:15px; 139 | cursor:pointer; 140 | } 141 | .ui-state-default a, 142 | .ui-state-default a:link, 143 | .ui-state-default a:visited { 144 | color: #555555/*{fcDefault}*/; 145 | text-decoration: none; 146 | } 147 | 148 | .ui-state-hover a, 149 | .ui-state-hover a:hover, 150 | .ui-state-hover a:link, 151 | .ui-state-hover a:visited, 152 | .ui-state-focus a, 153 | .ui-state-focus a:hover, 154 | .ui-state-focus a:link, 155 | .ui-state-focus a:visited { 156 | color: #212121/*{fcHover}*/; 157 | text-decoration: none; 158 | } 159 | .ui-state-active a, 160 | .ui-state-active a:link, 161 | .ui-state-active a:visited { 162 | color: #212121/*{fcActive}*/; 163 | text-decoration: none; 164 | } 165 | 166 | /* Interaction Cues 167 | ----------------------------------*/ 168 | .ui-state-highlight, 169 | .ui-widget-content .ui-state-highlight, 170 | .ui-widget-header .ui-state-highlight { 171 | border: 1px solid #fcefa1; 172 | background: #fbf9ee; 173 | color: #363636; 174 | } 175 | .ui-state-highlight a, 176 | .ui-widget-content .ui-state-highlight a, 177 | .ui-widget-header .ui-state-highlight a { 178 | color: #363636; 179 | } 180 | .ui-state-error, 181 | .ui-widget-content .ui-state-error, 182 | .ui-widget-header .ui-state-error { 183 | border: 1px solid $danger-color/*{borderColorError}*/; 184 | background-color: $danger-color; 185 | color: $danger-color/*{fcError}*/; 186 | } 187 | .ui-state-error a, 188 | .ui-widget-content .ui-state-error a, 189 | .ui-widget-header .ui-state-error a { 190 | color: $danger-color/*{fcError}*/; 191 | } 192 | .ui-state-error-text, 193 | .ui-widget-content .ui-state-error-text, 194 | .ui-widget-header .ui-state-error-text { 195 | color: $danger-color/*{fcError}*/; 196 | } 197 | .ui-priority-primary, 198 | .ui-widget-content .ui-priority-primary, 199 | .ui-widget-header .ui-priority-primary { 200 | font-weight: bold; 201 | } 202 | .ui-priority-secondary, 203 | .ui-widget-content .ui-priority-secondary, 204 | .ui-widget-header .ui-priority-secondary { 205 | opacity: .7; 206 | filter:Alpha(Opacity=70); 207 | font-weight: normal; 208 | } 209 | .ui-state-disabled, 210 | .ui-widget-content .ui-state-disabled, 211 | .ui-widget-header .ui-state-disabled { 212 | opacity: .35; 213 | filter:Alpha(Opacity=35); 214 | background-image: none; 215 | } 216 | .ui-state-disabled .ui-icon { 217 | filter:Alpha(Opacity=35); /* For IE8 - See #6059 */ 218 | } -------------------------------------------------------------------------------- /notification.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Get Shit Done Kit by Creative Tim 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 91 | 92 |
93 |
94 |

Awesome looking header
just for my friendsThis is like a small motto before the story.

95 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

96 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

97 | 98 |
99 |
100 | 101 |
102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /assets/sass/gsdk/mixins/_vendor-prefixes.scss: -------------------------------------------------------------------------------- 1 | // User select 2 | // For selecting text on the page 3 | 4 | @mixin user-select($select) { 5 | -webkit-user-select: $select; 6 | -moz-user-select: $select; 7 | -ms-user-select: $select; // IE10+ 8 | user-select: $select; 9 | } 10 | 11 | @mixin box-shadow($shadow...) { 12 | -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 13 | box-shadow: $shadow; 14 | } 15 | 16 | // Box sizing 17 | @mixin box-sizing($boxmodel) { 18 | -webkit-box-sizing: $boxmodel; 19 | -moz-box-sizing: $boxmodel; 20 | box-sizing: $boxmodel; 21 | } 22 | 23 | 24 | @mixin transition($time, $type){ 25 | -webkit-transition: all $time $type; 26 | -moz-transition: all $time $type; 27 | -o-transition: all $time $type; 28 | -ms-transition: all $time $type; 29 | transition: all $time $type; 30 | } 31 | 32 | @mixin transform-scale($value){ 33 | -webkit-transform: scale($value); 34 | -moz-transform: scale($value); 35 | -o-transform: scale($value); 36 | -ms-transform: scale($value); 37 | transform: scale($value); 38 | } 39 | 40 | @mixin transform-translate-x($value){ 41 | -webkit-transform: translate3d($value, 0, 0); 42 | -moz-transform: translate3d($value, 0, 0); 43 | -o-transform: translate3d($value, 0, 0); 44 | -ms-transform: translate3d($value, 0, 0); 45 | transform: translate3d($value, 0, 0); 46 | } 47 | 48 | @mixin transform-origin($coordinates){ 49 | -webkit-transform-origin: $coordinates; 50 | -moz-transform-origin: $coordinates; 51 | -o-transform-origin: $coordinates; 52 | -ms-transform-origin: $coordinates; 53 | transform-origin: $coordinates; 54 | } 55 | 56 | @mixin icon-gradient ($top-color, $bottom-color){ 57 | background: $top-color; 58 | background: -moz-linear-gradient(top, $top-color 0%, $bottom-color 100%); 59 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top-color), color-stop(100%,$bottom-color)); 60 | background: -webkit-linear-gradient(top, $top-color 0%,$bottom-color 100%); 61 | background: -o-linear-gradient(top, $top-color 0%,$bottom-color 100%); 62 | background: -ms-linear-gradient(top, $top-color 0%,$bottom-color 100%); 63 | background: linear-gradient(to bottom, $top-color 0%,$bottom-color 100%); 64 | } 65 | 66 | @mixin vertical-align { 67 | position: relative; 68 | top: 50%; 69 | -webkit-transform: translateY(-50%); 70 | -ms-transform: translateY(-50%); 71 | transform: translateY(-50%); 72 | } 73 | 74 | @mixin rotate-180(){ 75 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 76 | -webkit-transform: rotate(180deg); 77 | -ms-transform: rotate(180deg); 78 | transform: rotate(180deg); 79 | } 80 | 81 | @mixin bar-animation($type){ 82 | -webkit-animation: $type 500ms linear 0s; 83 | -moz-animation: $type 500ms linear 0s; 84 | animation: $type 500ms 0s; 85 | -webkit-animation-fill-mode: forwards; 86 | -moz-animation-fill-mode: forwards; 87 | animation-fill-mode: forwards; 88 | } 89 | 90 | @mixin topbar-x-rotation(){ 91 | @keyframes topbar-x { 92 | 0% {top: 0px; transform: rotate(0deg); } 93 | 45% {top: 6px; transform: rotate(145deg); } 94 | 75% {transform: rotate(130deg); } 95 | 100% {transform: rotate(135deg); } 96 | } 97 | @-webkit-keyframes topbar-x { 98 | 0% {top: 0px; -webkit-transform: rotate(0deg); } 99 | 45% {top: 6px; -webkit-transform: rotate(145deg); } 100 | 75% {-webkit-transform: rotate(130deg); } 101 | 100% { -webkit-transform: rotate(135deg); } 102 | } 103 | @-moz-keyframes topbar-x { 104 | 0% {top: 0px; -moz-transform: rotate(0deg); } 105 | 45% {top: 6px; -moz-transform: rotate(145deg); } 106 | 75% {-moz-transform: rotate(130deg); } 107 | 100% { -moz-transform: rotate(135deg); } 108 | } 109 | } 110 | 111 | @mixin topbar-back-rotation(){ 112 | @keyframes topbar-back { 113 | 0% { top: 6px; transform: rotate(135deg); } 114 | 45% { transform: rotate(-10deg); } 115 | 75% { transform: rotate(5deg); } 116 | 100% { top: 0px; transform: rotate(0); } 117 | } 118 | 119 | @-webkit-keyframes topbar-back { 120 | 0% { top: 6px; -webkit-transform: rotate(135deg); } 121 | 45% { -webkit-transform: rotate(-10deg); } 122 | 75% { -webkit-transform: rotate(5deg); } 123 | 100% { top: 0px; -webkit-transform: rotate(0); } 124 | } 125 | 126 | @-moz-keyframes topbar-back { 127 | 0% { top: 6px; -moz-transform: rotate(135deg); } 128 | 45% { -moz-transform: rotate(-10deg); } 129 | 75% { -moz-transform: rotate(5deg); } 130 | 100% { top: 0px; -moz-transform: rotate(0); } 131 | } 132 | } 133 | 134 | @mixin bottombar-x-rotation(){ 135 | @keyframes bottombar-x { 136 | 0% {bottom: 0px; transform: rotate(0deg);} 137 | 45% {bottom: 6px; transform: rotate(-145deg);} 138 | 75% {transform: rotate(-130deg);} 139 | 100% {transform: rotate(-135deg);} 140 | } 141 | @-webkit-keyframes bottombar-x { 142 | 0% {bottom: 0px; -webkit-transform: rotate(0deg);} 143 | 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} 144 | 75% {-webkit-transform: rotate(-130deg);} 145 | 100% {-webkit-transform: rotate(-135deg);} 146 | } 147 | @-moz-keyframes bottombar-x { 148 | 0% {bottom: 0px; -moz-transform: rotate(0deg);} 149 | 45% {bottom: 6px; -moz-transform: rotate(-145deg);} 150 | 75% {-moz-transform: rotate(-130deg);} 151 | 100% {-moz-transform: rotate(-135deg);} 152 | } 153 | } 154 | 155 | @mixin bottombar-back-rotation{ 156 | @keyframes bottombar-back { 157 | 0% { bottom: 6px;transform: rotate(-135deg);} 158 | 45% { transform: rotate(10deg);} 159 | 75% { transform: rotate(-5deg);} 160 | 100% { bottom: 0px;transform: rotate(0);} 161 | } 162 | @-webkit-keyframes bottombar-back { 163 | 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} 164 | 45% {-webkit-transform: rotate(10deg);} 165 | 75% {-webkit-transform: rotate(-5deg);} 166 | 100% {bottom: 0px;-webkit-transform: rotate(0);} 167 | } 168 | @-moz-keyframes bottombar-back { 169 | 0% {bottom: 6px;-moz-transform: rotate(-135deg);} 170 | 45% {-moz-transform: rotate(10deg);} 171 | 75% {-moz-transform: rotate(-5deg);} 172 | 100% {bottom: 0px;-moz-transform: rotate(0);} 173 | } 174 | 175 | } 176 | 177 | 178 | -------------------------------------------------------------------------------- /navbar-transparent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Get Shit Done Kit by Creative Tim 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 91 | 92 |
93 |
94 |

Awesome looking header
just for my friendsThis is like a small motto before the story.

95 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

96 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

97 | 98 |
99 |
100 | 101 |
102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_checkbox-radio-switch.scss: -------------------------------------------------------------------------------- 1 | /* Checkbox and radio */ 2 | .checkbox, 3 | .radio { 4 | margin-bottom: 12px; 5 | padding-left: 32px; 6 | position: relative; 7 | -webkit-transition: color 0.25s linear; 8 | transition: color 0.25s linear; 9 | font-size: 14px; 10 | font-weight: normal; 11 | line-height: 1.5; 12 | color: #333333; 13 | } 14 | .checkbox input, 15 | .radio input { 16 | outline: none !important; 17 | display: none; 18 | } 19 | .checkbox .icons, 20 | .radio .icons { 21 | color: $medium-gray; 22 | display: block; 23 | height: 20px; 24 | left: 0; 25 | position: absolute; 26 | top: 0; 27 | width: 20px; 28 | text-align: center; 29 | line-height: 21px; 30 | font-size: 20px; 31 | cursor: pointer; 32 | -webkit-transition: color 0.2s linear; 33 | transition: color 0.2s linear; 34 | } 35 | 36 | 37 | .checkbox .icons .first-icon, 38 | .radio .icons .first-icon, 39 | .checkbox .icons .second-icon, 40 | .radio .icons .second-icon { 41 | display: inline-table; 42 | position: absolute; 43 | left: 0; 44 | top: 0; 45 | background-color: transparent; 46 | margin: 0; 47 | @include opacity(1); 48 | } 49 | .checkbox .icons .second-icon, 50 | .radio .icons .second-icon { 51 | @include opacity(0); 52 | } 53 | .checkbox:hover, 54 | .radio:hover { 55 | -webkit-transition: color 0.2s linear; 56 | transition: color 0.2s linear; 57 | } 58 | .checkbox:hover .first-icon, 59 | .radio:hover .first-icon { 60 | @include opacity(0); 61 | } 62 | .checkbox:hover .second-icon, 63 | .radio:hover .second-icon { 64 | @include opacity (1); 65 | } 66 | .checkbox.checked, 67 | .radio.checked { 68 | color: $info-color; 69 | } 70 | .checkbox.checked .first-icon, 71 | .radio.checked .first-icon { 72 | opacity: 0; 73 | filter: alpha(opacity=0); 74 | } 75 | .checkbox.checked .second-icon, 76 | .radio.checked .second-icon { 77 | opacity: 1; 78 | filter: alpha(opacity=100); 79 | color: $info-color; 80 | -webkit-transition: color 0.2s linear; 81 | transition: color 0.2s linear; 82 | } 83 | .checkbox.disabled, 84 | .radio.disabled { 85 | cursor: default; 86 | color: $medium-gray !important; 87 | } 88 | .checkbox.disabled .icons, 89 | .radio.disabled .icons { 90 | color: $medium-gray !important; 91 | } 92 | .checkbox.disabled .first-icon, 93 | .radio.disabled .first-icon { 94 | opacity: 1; 95 | filter: alpha(opacity=100); 96 | } 97 | .checkbox.disabled .second-icon, 98 | .radio.disabled .second-icon { 99 | opacity: 0; 100 | filter: alpha(opacity=0); 101 | } 102 | .checkbox.disabled.checked .icons, 103 | .radio.disabled.checked .icons { 104 | color: $medium-gray; 105 | } 106 | .checkbox.disabled.checked .first-icon, 107 | .radio.disabled.checked .first-icon { 108 | opacity: 0; 109 | filter: alpha(opacity=0); 110 | } 111 | .checkbox.disabled.checked .second-icon, 112 | .radio.disabled.checked .second-icon { 113 | opacity: 1; 114 | filter: alpha(opacity=100); 115 | color: #D9D9D9; 116 | } 117 | 118 | 119 | 120 | /* ============================================================ 121 | * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru 122 | * http://www.larentis.eu/switch/ 123 | * ============================================================ 124 | * Licensed under the Apache License, Version 2.0 125 | * http://www.apache.org/licenses/LICENSE-2.0 126 | * ============================================================ */ 127 | .has-switch { 128 | border-radius: 30px; 129 | cursor: pointer; 130 | display: inline-block; 131 | line-height: 1.72222; 132 | overflow: hidden; 133 | position: relative; 134 | text-align: left; 135 | width: 60px; 136 | 137 | -webkit-user-select: none; 138 | -moz-user-select: none; 139 | -ms-user-select: none; 140 | -o-user-select: none; 141 | user-select: none; 142 | 143 | /* this code is for fixing safari bug with hidden overflow for border-radius */ 144 | -webkit-mask: url('../img/mask.png') 0 0 no-repeat; 145 | -webkit-mask-size: 60px 24px; 146 | mask: url('../img/mask.png') 0 0 no-repeat; 147 | } 148 | .has-switch.deactivate { 149 | opacity: 0.5; 150 | filter: alpha(opacity=50); 151 | cursor: default !important; 152 | } 153 | .has-switch.deactivate label, 154 | .has-switch.deactivate span { 155 | cursor: default !important; 156 | } 157 | .has-switch > div { 158 | position: relative; 159 | top: 0; 160 | width: 100px; 161 | } 162 | .has-switch > div.switch-animate { 163 | -webkit-transition: left 0.25s ease-out; 164 | transition: left 0.25s ease-out; 165 | } 166 | .has-switch > div.switch-off { 167 | left: -35px; 168 | } 169 | 170 | .has-switch > div.switch-on { 171 | left: 0; 172 | } 173 | .has-switch > div label { 174 | background-color: #FFFFFF; 175 | @include icon-gradient (rgba(255,255,255,1), rgba(241,241,242,1)); 176 | 177 | box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 1px rgba(0, 0, 0, 0.25); 178 | cursor: pointer; 179 | } 180 | .has-switch input[type=checkbox] { 181 | display: none; 182 | } 183 | .has-switch span { 184 | /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; */ 185 | cursor: pointer; 186 | float: left; 187 | font-size: 11px; 188 | font-weight: 400; 189 | height: 24px; 190 | line-height: 15px; 191 | margin: 0; 192 | padding-bottom: 6px; 193 | padding-top: 5px; 194 | position: relative; 195 | text-align: center; 196 | text-indent: -10px; 197 | width: 50%; 198 | z-index: 1; 199 | -webkit-transition: 0.25s ease-out; 200 | transition: 0.25s ease-out; 201 | } 202 | .has-switch span.switch-left { 203 | background-color: $info-color; 204 | border-left: 1px solid rgba(0, 0, 0, 0); 205 | border-radius: 30px 0 0 30px; 206 | color: #FFFFFF; 207 | } 208 | .has-switch .switch-off span.switch-left{ 209 | background-color: $medium-gray; 210 | } 211 | .has-switch span.switch-right { 212 | border-radius: 0 30px 30px 0; 213 | background-color: $info-color; 214 | color: #ffffff; 215 | text-indent: 1px; 216 | } 217 | .has-switch .switch-off span.switch-right{ 218 | background-color: $medium-gray; 219 | } 220 | 221 | .has-switch label { 222 | border-radius: 12px; 223 | float: left; 224 | height: 22px; 225 | margin: 1px -13px; 226 | padding: 0; 227 | position: relative; 228 | transition: all 0.25s ease-out 0s; 229 | vertical-align: middle; 230 | width: 22px; 231 | z-index: 100; 232 | -webkit-transition: 0.25s ease-out; 233 | transition: 0.25s ease-out; 234 | } 235 | .has-switch .switch-on .fa-check:before{ 236 | margin-left: 10px; 237 | } 238 | .has-switch:hover .switch-on label{ 239 | margin: 1px -17px; 240 | width: 26px; 241 | } 242 | .has-switch:hover .switch-off label{ 243 | margin: 1px -13px; 244 | width: 26px; 245 | } 246 | 247 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_variables.scss: -------------------------------------------------------------------------------- 1 | //== Buttons 2 | // 3 | //## For each of Bootstrap's buttons, define text, background and border color. 4 | 5 | $none: 0 !default; 6 | $border-thin: 1px !default; 7 | $border-thick: 2px !default; 8 | 9 | $white-color: #FFFFFF !default; 10 | $white-bg: #FFFFFF !default; 11 | 12 | $smoke-bg: #F5F5F5 !default; 13 | 14 | $black-bg: rgba(30,30,30,.97) !default; 15 | 16 | $black-color: #333333 !default; 17 | $black-hr: #444444 !default; 18 | 19 | $light-gray: #E3E3E3 !default; 20 | $medium-gray: #DDDDDD !default; 21 | $dark-gray: #9A9A9A !default; 22 | 23 | $transparent-bg: transparent !default; 24 | 25 | $default-color: #888888 !default; 26 | $default-bg: #888888 !default; 27 | $default-states-color: #777777 !default; 28 | 29 | $primary-color: #3472F7 !default; 30 | $primary-bg: #3472F7 !default; 31 | $primary-states-color: #1D62F0 !default; 32 | 33 | $success-color: #05AE0E !default; 34 | $success-bg: #05AE0E !default; 35 | $success-states-color: #049F0C !default; 36 | 37 | $info-color: #2CA8FF !default; 38 | $info-bg: #2CA8FF !default; 39 | $info-states-color: #109CFF !default; 40 | 41 | $warning-color: #FF9500 !default; 42 | $warning-bg: #FF9500 !default; 43 | $warning-states-color: #ED8D00 !default; 44 | 45 | 46 | $danger-color: #FF3B30 !default; 47 | $danger-bg: #FF3B30 !default; 48 | $danger-states-color: #EE2D20 !default; 49 | 50 | 51 | 52 | $link-disabled-color: #666666 !default; 53 | 54 | 55 | /* light colors */ 56 | $light-blue: rgba($primary-color, .2); 57 | $light-azure: rgba($info-color, .2); 58 | $light-green: rgba($success-color, .2); 59 | $light-orange: rgba($warning-color, .2); 60 | $light-red: rgba($danger-color, .2); 61 | 62 | 63 | //== Components 64 | // 65 | 66 | $padding-base-vertical: 8px !default; 67 | $padding-base-horizontal: 16px !default; 68 | 69 | $padding-round-vertical: 9px !default; 70 | $padding-round-horizontal: 18px !default; 71 | 72 | $padding-simple-vertical: 10px !default; 73 | $padding-simple-horizontal: 18px !default; 74 | 75 | $padding-large-vertical: 14px !default; 76 | $padding-large-horizontal: 30px !default; 77 | 78 | $padding-small-vertical: 5px !default; 79 | $padding-small-horizontal: 10px !default; 80 | 81 | $padding-xs-vertical: 1px !default; 82 | $padding-xs-horizontal: 5px !default; 83 | 84 | $padding-label-vertical: 2px !default; 85 | $padding-label-horizontal: 12px !default; 86 | 87 | $margin-large-vertical: 30px !default; 88 | $margin-base-vertical: 15px !default; 89 | 90 | $margin-bottom: 0 0 10px 0 !default; 91 | $border-radius-small: 3px !default; 92 | $border-radius-base: 4px !default; 93 | $border-radius-large: 6px !default; 94 | $border-radius-extreme: 10px !default; 95 | 96 | $border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default; 97 | $border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default; 98 | 99 | $btn-round-radius: 30px !default; 100 | 101 | $height-base: 40px !default; 102 | 103 | $font-size-base: 14px !default; 104 | $font-size-small: 12px !default; 105 | $font-size-medium: 16px !default; 106 | $font-size-large: 18px !default; 107 | $font-size-large-navbar: 20px !default; 108 | 109 | $font-size-h1: 52px !default; 110 | $font-size-h2: 36px !default; 111 | $font-size-h3: 28px !default; 112 | $font-size-h4: 22px !default; 113 | $font-size-h5: 18px !default; 114 | $font-size-h6: 14px !default; 115 | $font-paragraph: 16px !default; 116 | $font-size-navbar: 16px !default; 117 | $font-size-small: 12px !default; 118 | 119 | $font-weight-light: 300 !default; 120 | $font-weight-normal: 400 !default; 121 | $font-weight-semi: 500 !default; 122 | $font-weight-bold: 600 !default; 123 | 124 | $line-height-general: 1.5 !default; 125 | $line-height: 20px !default; 126 | $line-height-lg: 54px !default; 127 | 128 | 129 | $border-radius-top: 10px 10px 0 0 !default; 130 | $border-radius-bottom: 0 0 10px 10px !default; 131 | 132 | $dropdown-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125); 133 | 134 | $general-transition-time: 300ms !default; 135 | 136 | $slow-transition-time: 370ms !default; 137 | $dropdown-coordinates: 29px -50px !default; 138 | 139 | $fast-transition-time: 150ms !default; 140 | $select-coordinates: 50% -40px !default; 141 | 142 | $transition-linear: linear !default; 143 | $transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; 144 | $transition-ease: ease 0s; 145 | 146 | $navbar-padding-a: 10px 15px; 147 | $navbar-margin-a: 15px 3px; 148 | 149 | $padding-social-a: 10px 5px; 150 | 151 | $navbar-margin-a-btn: 15px 3px; 152 | $navbar-margin-a-btn-round: 16px 3px; 153 | 154 | $navbar-padding-a-icons: 6px 15px; 155 | $navbar-margin-a-icons: 6px 3px; 156 | 157 | $navbar-padding-brand: 20px 15px; 158 | $navbar-margin-brand: 5px 0px; 159 | 160 | $navbar-margin-brand-icons: 12px auto; 161 | 162 | $navbar-margin-btn: 15px 3px; 163 | 164 | 165 | 166 | $height-icon-sm: 32px; 167 | $width-icon-sm: 32px; 168 | $padding-icon-sm: 4px; 169 | $border-radius-icon-sm: 7px; 170 | 171 | $height-icon-message: 40px; 172 | $width-icon-message: 40px; 173 | 174 | $height-icon-message-sm: 20px; 175 | $width-icon-message-sm: 20px; 176 | 177 | 178 | $white-navbar: rgba(#FFFFFF, .96); 179 | $blue-navbar: rgba(#34ACDC, .98); 180 | $azure-navbar: rgba(#5BCAFF, .98); 181 | $green-navbar: rgba(#4CD964, .98); 182 | $orange-navbar: rgba(#FF9500, .98); 183 | $red-navbar: rgba(#FF4C40, .98); 184 | 185 | 186 | 187 | $topbar-x: topbar-x !default; 188 | $topbar-back: topbar-back !default; 189 | $bottombar-x: bottombar-x !default; 190 | $bottombar-back: bottombar-back !default; 191 | 192 | 193 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_responsive.scss: -------------------------------------------------------------------------------- 1 | 2 | @media (min-width: 768px){ 3 | .navbar-form { 4 | margin-top: 21px; 5 | margin-bottom: 21px; 6 | padding-left: 5px; 7 | padding-right: 5px; 8 | } 9 | .navbar-search-form{ 10 | display: none; 11 | } 12 | .navbar-nav > li > .dropdown-menu, 13 | .dropdown .dropdown-menu{ 14 | @include transform-scale(0); 15 | @include transition($slow-transition-time, $transition-bezier); 16 | @include opacity(0); 17 | visibility: hidden; 18 | display: block; 19 | } 20 | .navbar-nav > li.open > .dropdown-menu, 21 | .dropdown.open .dropdown-menu{ 22 | @include transform-scale(1); 23 | @include transform-origin($dropdown-coordinates); 24 | @include opacity(1); 25 | visibility: visible; 26 | } 27 | 28 | .navbar-nav > li > .dropdown-menu:before{ 29 | border-bottom: 11px solid rgba(0, 0, 0, 0.2); 30 | border-left: 11px solid rgba(0, 0, 0, 0); 31 | border-right: 11px solid rgba(0, 0, 0, 0); 32 | content: ""; 33 | display: inline-block; 34 | position: absolute; 35 | left: 12px; 36 | top: -11px; 37 | } 38 | .navbar-nav > li > .dropdown-menu:after { 39 | border-bottom: 11px solid #FFFFFF; 40 | border-left: 11px solid rgba(0, 0, 0, 0); 41 | border-right: 11px solid rgba(0, 0, 0, 0); 42 | content: ""; 43 | display: inline-block; 44 | position: absolute; 45 | left: 12px; 46 | top: -10px; 47 | } 48 | 49 | .navbar-nav.navbar-right > li > .dropdown-menu:before{ 50 | left: auto; 51 | right: 12px; 52 | } 53 | 54 | .navbar-nav.navbar-right > li > .dropdown-menu:after{ 55 | left: auto; 56 | right: 12px; 57 | } 58 | 59 | .footer:not(.footer-big){ 60 | nav > ul{ 61 | li:first-child{ 62 | margin-left: 0; 63 | } 64 | } 65 | } 66 | 67 | .nav-open .navbar-collapse{ 68 | @include transform-translate-x(0px); 69 | } 70 | .nav-open .navbar .container{ 71 | @include transform-translate-x(-200px); 72 | } 73 | 74 | .navbar-burger{ 75 | .container{ 76 | padding: 0 15px; 77 | } 78 | .navbar-header{ 79 | width: 100%; 80 | } 81 | .navbar-toggle{ 82 | display: block; 83 | margin-right: 0; 84 | } 85 | 86 | &.navbar .navbar-collapse.collapse, 87 | &.navbar .navbar-collapse.collapse.in, 88 | &.navbar .navbar-collapse.collapsing{ 89 | display: none !important; 90 | } 91 | } 92 | } 93 | 94 | /* Changes for small display */ 95 | 96 | @media (max-width: 767px){ 97 | .navbar-transparent{ 98 | padding-top: 0px; 99 | background-color: rgba(0, 0, 0, 0.45); 100 | } 101 | 102 | .body-click { 103 | right: 230px; 104 | } 105 | 106 | body{ 107 | position: relative; 108 | 109 | & > .navbar-collapse { 110 | width: 230px; 111 | @include transform-translate-x(230px); 112 | } 113 | } 114 | 115 | .navbar{ 116 | .container{ 117 | width: 100%; 118 | position: relative; 119 | @include transform-translate-x(0px); 120 | @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 121 | 122 | .nav-open &{ 123 | @include transform-translate-x(-230px); 124 | } 125 | } 126 | 127 | .navbar-collapse.collapse, 128 | .navbar .navbar-collapse.collapse.in, 129 | .navbar .navbar-collapse.collapsing{ 130 | display: none !important; 131 | } 132 | } 133 | 134 | .nav-open .navbar-collapse{ 135 | @include transform-translate-x(0px); 136 | } 137 | 138 | .navbar-toggle .icon-bar{ 139 | display: block; 140 | position: relative; 141 | background: $white-color; 142 | width: 24px; 143 | height: 2px; 144 | border-radius: 1px; 145 | margin: 0 auto; 146 | } 147 | 148 | .navbar-default .navbar-toggle .icon-bar{ 149 | background-color: $default-color; 150 | } 151 | 152 | .navbar-header .navbar-toggle { 153 | margin-top: 17px; 154 | margin-bottom: 17px; 155 | width: 40px; 156 | height: 40px; 157 | } 158 | .bar1, 159 | .bar2, 160 | .bar3 { 161 | outline: 1px solid transparent; 162 | } 163 | .bar1 { 164 | top: 0px; 165 | @include bar-animation($topbar-back); 166 | } 167 | .bar2 { 168 | opacity: 1; 169 | } 170 | .bar3 { 171 | bottom: 0px; 172 | @include bar-animation($bottombar-back); 173 | } 174 | .toggled .bar1 { 175 | top: 6px; 176 | @include bar-animation($topbar-x); 177 | } 178 | .toggled .bar2 { 179 | opacity: 0; 180 | } 181 | .toggled .bar3 { 182 | bottom: 6px; 183 | @include bar-animation($bottombar-x); 184 | } 185 | 186 | @include topbar-x-rotation(); 187 | @include topbar-back-rotation(); 188 | @include bottombar-x-rotation(); 189 | @include bottombar-back-rotation(); 190 | 191 | @-webkit-keyframes fadeIn { 192 | 0% {opacity: 0;} 193 | 100% {opacity: 1;} 194 | } 195 | @-moz-keyframes fadeIn { 196 | 0% {opacity: 0;} 197 | 100% {opacity: 1;} 198 | } 199 | @keyframes fadeIn { 200 | 0% {opacity: 0;} 201 | 100% {opacity: 1;} 202 | } 203 | 204 | [class*="navbar-"] .navbar-nav { 205 | & > li > a, 206 | > li > a:hover, 207 | > li > a:focus, 208 | .active > a, 209 | .active > a:hover, 210 | .active > a:focus, 211 | .open .dropdown-menu > li > a, 212 | .open .dropdown-menu > li > a:hover, 213 | .open .dropdown-menu > li > a:focus, 214 | .navbar-nav .open .dropdown-menu > li > a:active { 215 | // color: white; 216 | } 217 | 218 | & > li > a, 219 | > li > a:hover, 220 | > li > a:focus, 221 | .open .dropdown-menu > li > a, 222 | .open .dropdown-menu > li > a:hover, 223 | .open .dropdown-menu > li > a:focus{ 224 | opacity: .7; 225 | background: transparent; 226 | } 227 | 228 | &.navbar-nav .open .dropdown-menu > li > a:active { 229 | opacity: 1; 230 | } 231 | 232 | & .dropdown > a{ 233 | &:hover .caret { 234 | border-bottom-color: #777; 235 | border-top-color: #777; 236 | } 237 | &:active .caret { 238 | border-bottom-color: white; 239 | border-top-color: white; 240 | } 241 | } 242 | } 243 | .dropdown-menu { 244 | display: none; 245 | } 246 | .navbar-fixed-top { 247 | -webkit-backface-visibility: hidden; 248 | } 249 | .navbar-toggle:hover, 250 | .navbar-toggle:focus { 251 | background-color: transparent !important; 252 | } 253 | .btn.dropdown-toggle{ 254 | margin-bottom: 0; 255 | } 256 | 257 | } 258 | -------------------------------------------------------------------------------- /assets/sass/gsdk/_navbars.scss: -------------------------------------------------------------------------------- 1 | .nav { 2 | > li{ 3 | > a:hover, 4 | > a:focus{ 5 | background-color: transparent; 6 | } 7 | } 8 | } 9 | .navbar{ 10 | border: $none; 11 | font-size: $font-size-navbar; 12 | transition: all 0.4s; 13 | -webkit-transition: all 0.4s; 14 | 15 | .navbar-brand { 16 | font-weight: $font-weight-bold; 17 | margin: $navbar-margin-brand; 18 | padding: $navbar-padding-brand; 19 | font-size: $font-size-large-navbar; 20 | } 21 | .navbar-nav{ 22 | > li > a { 23 | padding: $navbar-padding-a; 24 | margin: $navbar-margin-a; 25 | } 26 | > li > a.btn{ 27 | margin: $navbar-margin-a-btn; 28 | padding: $padding-base-vertical $padding-base-horizontal; 29 | } 30 | > li > a.btn-round{ 31 | margin: $navbar-margin-a-btn-round; 32 | } 33 | > li > a [class^="fa"]{ 34 | font-size: $font-size-large + 1; 35 | position: relative; 36 | top: 1px; 37 | } 38 | } 39 | .btn{ 40 | margin: $navbar-margin-btn; 41 | font-size: $font-size-base; 42 | } 43 | .btn-simple{ 44 | font-size: $font-size-medium; 45 | } 46 | .caret{ 47 | // @include center-item(); 48 | } 49 | 50 | 51 | } 52 | 53 | .navbar-nav > li > .dropdown-menu{ 54 | border-radius: $border-radius-extreme; 55 | margin-top: -5px; 56 | } 57 | 58 | .navbar-transparent, [class*="navbar-ct"]{ 59 | .navbar-brand{ 60 | color: $white-color; 61 | @include opacity(.9); 62 | 63 | &:focus, 64 | &:hover{ 65 | background-color: transparent; 66 | color: $white-color; 67 | @include opacity(1); 68 | } 69 | } 70 | 71 | .navbar-nav{ 72 | > li > a:not(.btn), 73 | > li > a.btn-default{ 74 | color: $white-color; 75 | border-color: $white-color; 76 | @include opacity(0.8); 77 | } 78 | 79 | > li > a.btn-default:hover, 80 | > li > a.btn-default:focus{ 81 | border-color: $white-color; 82 | @include opacity(1); 83 | } 84 | 85 | > .active > a:not(.btn), 86 | > .active > a:hover:not(.btn), 87 | > .active > a:focus:not(.btn), 88 | > li > a:hover:not(.btn), 89 | > li > a:focus:not(.btn){ 90 | background-color: transparent; 91 | border-radius: 3px; 92 | color: $white-color; 93 | @include opacity(1); 94 | } 95 | .nav > li > a.btn:hover{ 96 | background-color: transparent; 97 | } 98 | 99 | > .dropdown > a .caret, 100 | > .dropdown > a:hover .caret, 101 | > .dropdown > a:focus .caret{ 102 | border-bottom-color: $white-color; 103 | border-top-color: $white-color; 104 | } 105 | 106 | > .open > a, 107 | > .open > a:hover, 108 | > .open > a:focus { 109 | background-color: transparent; 110 | color: $white-color; 111 | @include opacity(1); 112 | } 113 | } 114 | 115 | .btn-default{ 116 | color: $white-color; 117 | border-color: $white-color; 118 | } 119 | .btn-default.btn-fill{ 120 | color: $dark-gray; 121 | background-color: $white-color; 122 | @include opacity(.9); 123 | } 124 | .btn-default.btn-fill:hover, 125 | .btn-default.btn-fill:focus, 126 | .btn-default.btn-fill:active, 127 | .btn-default.btn-fill.active, 128 | .open .dropdown-toggle.btn-fill.btn-default{ 129 | border-color: $white-color; 130 | @include opacity(1); 131 | } 132 | 133 | .navbar-toggle .icon-bar{ 134 | background-color: $white-color !important; 135 | } 136 | } 137 | 138 | .navbar-toggle:hover, 139 | .navbar-toggle:focus { 140 | background-color: transparent; 141 | } 142 | 143 | /* 144 | .navbar-transparent{ 145 | .dropdown-menu .divider{ 146 | background-color: rgba($white-color,.2); 147 | } 148 | } 149 | */ 150 | 151 | .navbar-inverse{ 152 | .navbar-toggle:hover, 153 | .navbar-toggle:focus { 154 | background-color: transparent; 155 | } 156 | .navbar-nav > .open > a{ 157 | &, 158 | &:focus, 159 | &:hover{ 160 | background-color: transparent; 161 | } 162 | } 163 | } 164 | 165 | .nav-open .nav .caret{ 166 | border-bottom-color: $white-color; 167 | border-top-color: $white-color; 168 | } 169 | 170 | .navbar-default { 171 | background-color: $white-navbar; 172 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 173 | 174 | .navbar-nav{ 175 | > .active > a, 176 | > .active > a:not(.btn):hover, 177 | > .active > a:not(.btn):focus, 178 | > li > a:not(.btn):hover, 179 | > li > a:not(.btn):focus { 180 | background-color: transparent; 181 | border-radius: 3px; 182 | color: $info-color; 183 | @include opacity(1); 184 | } 185 | 186 | > .dropdown > a:hover .caret, 187 | > .dropdown > a:focus .caret { 188 | border-bottom-color: $info-color; 189 | border-top-color: $info-color; 190 | 191 | } 192 | 193 | > .open > a, 194 | > .open > a:hover, 195 | > .open > a:focus{ 196 | background-color: transparent; 197 | color: $info-color; 198 | } 199 | 200 | .navbar-toggle:hover,.navbar-toggle:focus { 201 | background-color: transparent; 202 | } 203 | 204 | } 205 | 206 | &:not(.navbar-transparent) .btn-default:hover{ 207 | color: $info-color; 208 | border-color: $info-color; 209 | } 210 | &:not(.navbar-transparent) .btn-neutral, 211 | &:not(.navbar-transparent) .btn-neutral:hover, 212 | &:not(.navbar-transparent) .btn-neutral:active{ 213 | color: $dark-gray; 214 | } 215 | 216 | .navbar-toggle:hover, 217 | .navbar-toggle:focus { 218 | background-color: transparent; 219 | } 220 | } 221 | 222 | .navbar-form{ 223 | @include box-shadow(none); 224 | .form-control{ 225 | @include light-form(); 226 | height: 22px; 227 | font-size: $font-size-navbar; 228 | line-height: $line-height-general; 229 | color: $light-gray; 230 | } 231 | .navbar-transparent & .form-control, 232 | [class*="navbar-ct"] & .form-control{ 233 | color: $white-color; 234 | border: $none; 235 | border-bottom: 1px solid rgba($white-color,.6); 236 | } 237 | 238 | } 239 | 240 | .navbar-ct-blue{ 241 | @include navbar-color($blue-navbar); 242 | } 243 | .navbar-ct-azzure{ 244 | @include navbar-color($azure-navbar); 245 | } 246 | .navbar-ct-green{ 247 | @include navbar-color($green-navbar); 248 | } 249 | .navbar-ct-orange{ 250 | @include navbar-color($orange-navbar); 251 | } 252 | .navbar-ct-red{ 253 | @include navbar-color($red-navbar); 254 | } 255 | 256 | .navbar-transparent{ 257 | padding-top: 15px; 258 | background-color: transparent; 259 | border-bottom: 1px solid transparent; 260 | } 261 | 262 | .navbar-toggle{ 263 | margin-top: 19px; 264 | margin-bottom: 19px; 265 | border: $none; 266 | 267 | .icon-bar { 268 | background-color: $white-color; 269 | } 270 | .navbar-collapse, 271 | .navbar-form { 272 | border-color: transparent; 273 | } 274 | } -------------------------------------------------------------------------------- /assets/css/demo.css: -------------------------------------------------------------------------------- 1 | 2 | .tim-container{ 3 | background: #ffffff; 4 | 5 | } 6 | .tim-row{ 7 | margin-bottom: 20px; 8 | } 9 | .tim-title{ 10 | margin-top: 30px; 11 | margin-bottom: 15px; 12 | } 13 | .tim-typo{ 14 | padding-left: 25%; 15 | margin-bottom: 40px; 16 | position: relative; 17 | } 18 | .tim-typo .tim-note{ 19 | bottom: 10px; 20 | color: #c0c1c2; 21 | display: block; 22 | font-weight: 400; 23 | font-size: 13px; 24 | line-height: 13px; 25 | left: 0; 26 | margin-left: 20px; 27 | position: absolute; 28 | width: 260px; 29 | } 30 | .tim-row{ 31 | margin-top: 50px; 32 | } 33 | .tim-row h3{ 34 | margin-top: 0; 35 | } 36 | .switch{ 37 | margin-right: 20px; 38 | } 39 | #navbar-full .navbar{ 40 | border-radius: 0 !important; 41 | margin-bottom: 0; 42 | } 43 | .navigation-example{ 44 | margin-top: 0px; 45 | } 46 | .space{ 47 | height: 130px; 48 | display: block; 49 | } 50 | .navigation-example .img-src{ 51 | background-attachment: scroll; 52 | } 53 | .main{ 54 | background-color: #FFFFFF; 55 | } 56 | .navigation-example{ 57 | height: 660px; 58 | background-image: url('../img/bg.jpg'); 59 | background-position: center center; 60 | background-size: cover; 61 | position: relative; 62 | } 63 | #notifications{ 64 | background-color: #FFFFFF; 65 | display: block; 66 | width: 100%; 67 | position: relative; 68 | } 69 | .tim-note{ 70 | text-transform: capitalize; 71 | } 72 | 73 | .card{ 74 | background-color: #FFFFFF; 75 | padding: 10px 0 20px; 76 | width: 100%; 77 | } 78 | .card h3{ 79 | margin-bottom: 20px; 80 | } 81 | .card button{ 82 | margin-top: 30px; 83 | } 84 | .subscribe-form{ 85 | padding-top: 20px; 86 | } 87 | .subscribe-form .form-control{ 88 | 89 | } 90 | 91 | .space-100{ 92 | height: 100px; 93 | display: block; 94 | width: 100%; 95 | } 96 | 97 | .be-social{ 98 | padding-bottom: 20px; 99 | /* border-bottom: 1px solid #aaa; */ 100 | margin: 0 auto 40px; 101 | } 102 | .txt-white{ 103 | color: #FFFFFF; 104 | } 105 | .txt-gray{ 106 | color: #ddd !important; 107 | } 108 | .footer{ 109 | background-color: #DDDDDD; 110 | background-image: url('../img/cover_4_blur.jpg'); 111 | background-attachment: fixed; 112 | position: relative; 113 | } 114 | .heart{ 115 | color: #FF3B30; 116 | } 117 | .footer .overlayer{ 118 | background-color: rgba(27, 27, 27, 0.7); 119 | position: relative; 120 | } 121 | .footer .credits { 122 | margin-top: 25px; 123 | padding: 20px 0 15px; 124 | text-align: center; 125 | color: #EEE; 126 | } 127 | .footer .credits a{ 128 | color: #FFFFFF; 129 | } 130 | .social-share{ 131 | float: left; 132 | margin-right: 8px; 133 | } 134 | .social-share a{ 135 | color: #FFFFFF; 136 | } 137 | #subscribe_email{ 138 | border-radius: 0; 139 | border-left: 0; 140 | border-right: 0; 141 | } 142 | .pick-class-label{ 143 | border-radius: 8px; 144 | color: #ffffff; 145 | cursor: pointer; 146 | display: inline; 147 | font-size: 75%; 148 | font-weight: bold; 149 | line-height: 1; 150 | margin-right: 10px; 151 | padding: 15px 23px; 152 | text-align: center; 153 | vertical-align: baseline; 154 | white-space: nowrap; 155 | } 156 | 157 | .parallax-pro{ 158 | width:100%; 159 | display: block; 160 | position: relative; 161 | background-color: #000; 162 | } 163 | .parallax-pro > .img-src{ 164 | background-position: center center; 165 | background-repeat: no-repeat; 166 | background-size: cover; 167 | position: absolute; 168 | width: 100%; 169 | height: 100%; 170 | z-index: 0; 171 | 172 | } 173 | .parallax-pro:after{ 174 | position: absolute; 175 | left: 0; 176 | top: 0; 177 | width: 100%; 178 | height: 100%; 179 | background-color: rgba(0,0,0,.3); 180 | display: block; 181 | content: ""; 182 | z-index: 0; 183 | } 184 | .parallax-pro .container{ 185 | padding-top: 20px; 186 | z-index: 1; 187 | position: relative; 188 | } 189 | .parallax-pro .hello a{ 190 | color: #fff; 191 | text-decoration: none; 192 | } 193 | .parallax-pro .hello{ 194 | font-size: 48px; 195 | font-weight: 300; 196 | position: relative; 197 | /* width: 430px; */ 198 | margin: 30px auto 50px; 199 | } 200 | .parallax-pro .label{ 201 | font-size: 18px; 202 | position: absolute; 203 | text-transform: uppercase; 204 | background-color: #FF9500; 205 | color: #FFFFFF; 206 | width: 60px; 207 | margin-top: 10px; 208 | margin-left: 10px; 209 | padding: 0; 210 | line-height: 30px; 211 | text-align: center; 212 | font-weight: 500; 213 | letter-spacing: 0; 214 | } 215 | .parallax-pro small{ 216 | padding-top: 15px; 217 | font-size: 20px; 218 | display: block; 219 | color: #fff; 220 | } 221 | .parallax-pro ul{ 222 | width: 280px; 223 | margin: 0 auto; 224 | } 225 | .parallax-pro li{ 226 | padding: 9px 0; 227 | border-bottom: 1px solid #777; 228 | } 229 | .parallax-pro .actions{ 230 | margin-top: 40px; 231 | } 232 | .parallax-pro .actions{ 233 | margin-left: 10px; 234 | } 235 | .parallax-pro .motto{ 236 | color: #FFFFFF; 237 | font-size: 64px; 238 | font-weight: 600; 239 | position: relative; 240 | text-align: center; 241 | text-shadow: 0 0 10px rgba(0, 0, 0, 0.27); 242 | text-transform: uppercase; 243 | z-index: 3; 244 | margin: 0 auto; 245 | top: 22%; 246 | width: 285px; 247 | } 248 | .parallax-pro .motto .pro{ 249 | position: absolute; 250 | font-size: 18px; 251 | background-color: #FFFFFF; 252 | width: 70px; 253 | height: 70px; 254 | border-radius: 50%; 255 | text-align: center; 256 | line-height: 70px; 257 | color: #333333; 258 | text-shadow: 0 0 0; 259 | } 260 | .parallax-pro .motto .square{ 261 | padding: 7px 14px; 262 | height: auto; 263 | width: auto; 264 | line-height: inherit; 265 | border-radius: 6px; 266 | bottom: 22px; 267 | right: -25px; 268 | color: #FFFFFF; 269 | background-color: #ff9500; 270 | font-weight: 300; 271 | background-color: #ff9500; 272 | } 273 | .social-share{ 274 | margin-right: 0px; 275 | margin-top: 10px; 276 | } 277 | .footer h4{ 278 | margin: 0px 0 20px; 279 | } 280 | .space-30{ 281 | height: 30px; 282 | display: block; 283 | } 284 | .credits{ 285 | display: block; 286 | margin: 15px 0; 287 | color: #ddd; 288 | opacity: .8; 289 | } 290 | .credits a{ 291 | color: #FFFFFF; 292 | } 293 | .sharing-title{ 294 | margin: 10px; 295 | line-height: 40px; 296 | } 297 | .social-line{ 298 | padding: 5px 0; 299 | } 300 | .section-gray{ 301 | padding: 10px 0; 302 | background-color: #EEE; 303 | } 304 | .section-gray h5{ 305 | margin: 0; 306 | line-height: 40px; 307 | } 308 | 309 | /* EXTRA SHIT */ 310 | /* @cristina: fisier singular, folosit pentru efectul de blur la parallax in header */ 311 | 312 | .blurred-container{ 313 | position:relative; 314 | width:100%; 315 | height:540px; 316 | top:0; 317 | left:0; 318 | } 319 | .blurred-container > .img-src{ 320 | position:fixed; 321 | width:100%; 322 | height:540px; 323 | background-repeat:no-repeat; 324 | background-size:cover; 325 | background-position: center center; 326 | } 327 | .blur{ 328 | opacity:0; 329 | } 330 | 331 | .logo-container{ 332 | margin-top: 10px; 333 | } 334 | .logo-container .logo{ 335 | overflow: hidden; 336 | border-radius: 50%; 337 | border: 1px solid #333333; 338 | height: 50px; 339 | width: 50px; 340 | float: left; 341 | } 342 | .logo-container .logo img{ 343 | width: 100%; 344 | } 345 | .logo-container .brand{ 346 | font-size: 18px; 347 | color: #FFFFFF; 348 | float: left; 349 | height: 50px; 350 | line-height: 20px; 351 | margin-left: 10px; 352 | margin-top: 5px; 353 | width: 60px; 354 | } 355 | .blurred-container .motto{ 356 | color: #FFFFFF; 357 | font-size: 76px; 358 | font-weight: 600; 359 | 360 | text-align: center; 361 | text-shadow: 0 0 10px rgba(0, 0, 0, 0.33); 362 | text-transform: uppercase; 363 | top: 100px; 364 | z-index: 3; 365 | 366 | display: block; 367 | margin: 0 auto; 368 | position: relative; 369 | width: 306px; 370 | height: 0; 371 | } 372 | .blurred-container .motto .border{ 373 | float: left; 374 | border: 3px solid #FFFFFF; 375 | padding: 0px 30px; 376 | text-align: center; 377 | } 378 | .blurred-container .motto .no-right-border{ 379 | border-right: none; 380 | } 381 | 382 | @media (max-width: 768px){ 383 | .blurred-container .motto{ 384 | font-size: 60px; 385 | width: 268px; 386 | top: 130px; 387 | } 388 | } 389 | .main{ 390 | background-color: #FFFFFF; 391 | position: relative; 392 | } 393 | 394 | #buttons .btn, #tooltips .btn{ 395 | margin-bottom: 15px; 396 | } 397 | .img-dog{ 398 | display: inline-block; 399 | margin-bottom: 25px; 400 | } -------------------------------------------------------------------------------- /assets/js/gsdk-bootstrapswitch.js: -------------------------------------------------------------------------------- 1 | /* ============================================================ 2 | * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru 3 | * http://www.larentis.eu/switch/ 4 | * ============================================================ 5 | * Licensed under the Apache License, Version 2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * ============================================================ */ 8 | 9 | !function ($) { 10 | "use strict"; 11 | 12 | $.fn['bootstrapSwitch'] = function (method) { 13 | var methods = { 14 | init: function () { 15 | return this.each(function () { 16 | var $element = $(this) 17 | , $div 18 | , $switchLeft 19 | , $switchRight 20 | , $label 21 | , myClasses = "" 22 | , classes = $element.attr('class') 23 | , color 24 | , moving 25 | , onLabel = "ON" 26 | , offLabel = "OFF" 27 | , icon = false; 28 | 29 | $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) { 30 | if (classes.indexOf(el) >= 0) 31 | myClasses = el; 32 | }); 33 | 34 | $element.addClass('has-switch'); 35 | 36 | if ($element.data('on') !== undefined) 37 | color = "switch-" + $element.data('on'); 38 | 39 | if ($element.data('on-label') !== undefined) 40 | onLabel = $element.data('on-label'); 41 | 42 | if ($element.data('off-label') !== undefined) 43 | offLabel = $element.data('off-label'); 44 | 45 | if ($element.data('icon') !== undefined) 46 | icon = $element.data('icon'); 47 | 48 | $switchLeft = $('') 49 | .addClass("switch-left") 50 | .addClass(myClasses) 51 | .addClass(color) 52 | .html(onLabel); 53 | 54 | color = ''; 55 | if ($element.data('off') !== undefined) 56 | color = "switch-" + $element.data('off'); 57 | 58 | $switchRight = $('') 59 | .addClass("switch-right") 60 | .addClass(myClasses) 61 | .addClass(color) 62 | .html(offLabel); 63 | 64 | $label = $('