vbax-template_go 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 034bc3002c637d3eacafa7fcf764bc5b4a4d1bc039e7c011bb75b0aa0a2bed57
+  data.tar.gz: 636130f4331cc7a96ed55a6d3ea8a1f04a86508c275a2d91813fa745aaa8d6c6
+SHA512:
+  metadata.gz: 9fb812f844d326c05e069638c996f783b27decfb90393999af2601a691da55c0cf99ecc30dc2178cf667310d55cce8a4de6894515dd229630b318fb13d13e79c
+  data.tar.gz: 88e142d0bebddc6535eac2ba6152757b3204172124c5eb018bb363374106850b74680f8c2b942175cea8abe24df6b1ddb072c3fe4a190e33f62ea98038854e42

data/.gitignore

@@ -0,0 +1,8 @@
+/.bundle/
+/.yardoc
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/Gemfile

@@ -0,0 +1,4 @@
+source "https://rubygems.org"
+
+# Specify your gem's dependencies in vbax-template_go.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 v baxter
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,39 @@
+# Vbax::TemplateGo
+
+Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/vbax/template_go`. To experiment with that code, run `bin/console` for an interactive prompt.
+
+TODO: Delete this and the text above, and describe your gem
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'vbax-template_go'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install vbax-template_go
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/vbax-template_go.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+task :default => :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "vbax/template_go"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start(__FILE__)

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/vbax/sass/template_go.scss

@@ -0,0 +1,2 @@
+@import "template_go/layout/layout";
+@import "template_go/components/components";

data/lib/vbax/sass/template_go/components/_accordion.scss

@@ -0,0 +1,436 @@
+//
+// Accordion
+//
+
+.accordion-group {
+    @include border-radius;
+    // overflow: hidden;
+}
+
+.accordion {
+    @include transition();
+    position: relative;
+    padding: .625rem;
+    border: $border-width solid $border-color;
+
+
+    // accordion indicator
+    &.open .accordion-control::after {
+       @include rotate(180deg);
+    }
+    
+    &:not(:first-child) {
+        border-top-width: 0;
+    }
+}
+
+.accordion-control {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    width: 100%;
+    padding: 1rem 2rem;
+    cursor: pointer;
+    @include selection(none);
+
+    > * { 
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+        margin: 0;
+        font-size: $font-size-base;
+        font-family: $font-family-sans-serif;
+        font-weight: $font-weight-normal;
+        vertical-align: middle;
+    }
+
+    h5 {
+        line-height: 1.5em;
+    }
+
+    // accordion state indicator
+    &::after {
+        content: "\ebfa";
+        position: absolute;
+        width: 1em;
+        line-height: 1em;
+        right: 1rem;
+        top: 50%;
+        font-family: 'icomoon' !important;
+        font-size: 1.5rem;
+        margin-top: -0.5em;
+        @include transition(0.2s);
+    }
+}
+
+.accordion-content {
+    overflow: hidden;
+
+    .accordion-content-wrapper {
+        padding: 0 2rem 1rem 2rem;
+    }
+}
+
+%accordion-text-whiteed {
+    .accordion {
+        border: 0;
+        background-color: rgba($white, .05);
+
+        &:not(:first-child) {
+            margin-top: ($border-width * 2);
+        }
+
+        &:hover {
+            background-color: rgba($white, .1);
+        }
+    }
+
+    .accordion-control {
+
+        h5 {
+            color: inherit;
+        }
+
+        &::after {
+            color: $text-white-secondary;
+        }
+    }
+}
+
+
+
+//
+// Feature
+//
+.accordion-group-feature {    
+    .accordion {
+        @include border-radius;
+        padding: 1rem;
+
+        &:not(:first-child) {
+            margin-top: .625rem;
+        }
+
+        &:not(:first-child) {
+            border-top-width: $border-width;
+        }
+    }
+
+    .accordion-control,
+    .accordion-content > div {
+        padding: 1rem;
+    }
+}
+
+%accordion-feature-text-whiteed {
+    .accordion {
+        &:not(:first-child) {
+            margin-top: .625rem;
+        }
+    }
+}
+
+
+// Minimal
+.accordion-group-minimal {
+    .accordion {
+        border: 0;
+        padding: 0 0 0 3rem;
+
+        &:not(:first-child) {
+            margin-top: 1.25rem;
+        }
+
+        &.open .accordion-control {
+            &::after {
+            }
+        }
+    }
+
+    .accordion-control {
+        min-height: 3.75rem;
+
+        &::after {
+            @extend %boxed;
+            left: -3rem;
+            width: 3.75rem;
+            color: $black;
+            margin-top: -(3.75rem / 2);
+            line-height: 3.75rem;
+            text-align: center;
+            border-radius: 50%;
+        }
+    }
+}
+
+%accordion-minimal-text-whiteed {
+    .accordion {
+        background: transparent;
+        color: $text-white-primary;
+
+        &:not(:first-child) {
+            margin-top: 1.25rem;
+        }
+
+        &:hover {
+            background-color: transparent;
+        }
+    }
+
+    .accordion-control {
+        &::after {
+            color: $black;
+        }
+    }
+}
+
+
+//
+// Steps
+//
+.accordion-group-steps {
+    overflow: visible;
+    
+    .accordion {
+        padding-left: 3.75rem;
+        counter-increment: accordion;
+        background: transparent;
+        border: 0;
+
+        &.open {
+            .accordion-control {
+                &::before {
+                    background: $primary;
+                    border-color: $primary;
+                    color: $white;
+                    @include shadow();
+                    @include scale(1.4);
+                }
+            }
+        }
+
+        &:hover {
+            .accordion-control {
+                &::before {
+                    border-color: $primary;
+                }
+            }
+        }
+
+        &:not(:first-child) {
+            margin: 0;
+
+            &::before {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 29px;
+                height: calc(50% - 30px);
+                width: (2 * $border-width);
+                background: $border-color;
+                z-index: 10;
+            }
+        }
+
+        &:not(:last-child) {
+            &::after {
+                content: "";
+                display: block;
+                position: absolute;
+                top: calc(50% + 30px);
+                left: 29px;
+                height: calc(50% - 30px);
+                width: 2px;
+                background: gray('200');
+                z-index: 10;
+            }
+        }
+    }
+
+    .accordion-control {
+        position: static;
+
+        > * {
+            display: block;
+        }
+
+        &::after {
+            display: none;
+        }
+
+        &::before {
+            @include transition();
+            content: counter(accordion, decimal);
+            position: absolute;
+            display: block;
+            top: 50%;
+            left: 0;
+            width: 3.75rem;
+            height: 3.75rem;
+            color: $black;
+            margin-top: -30px;
+            line-height: calc(3.75rem - 4px);
+            text-align: center;
+            border: (2 * $border-width) solid $border-color;
+            z-index: 20;
+            border-radius: 50%;
+            font-size: 20px;
+        }
+    }
+}
+
+%accordion-steps-text-whiteed {
+    .accordion {
+        background-color: transparent;
+
+        &:hover {
+            background-color: transparent;
+        }
+
+        &:not(:first-child) {
+            margin-top: 0;
+
+            &::before {
+                background: $text-white-border;
+            }
+        }
+
+        &:not(:last-child) {
+            &::after {
+                background: $text-white-border;
+            }
+        }
+    }
+
+    .accordion-control {
+        &::before {
+            color: inherit;
+            border-color: $text-white-border;
+        }
+    }
+}
+
+
+//
+// Highlight
+//
+.accordion-group-highlight {
+    overflow: visible;
+    
+    .accordion {
+        background: transparent;
+        border: 0;
+
+        &.open {
+            @extend %boxed;
+        }
+    }
+}
+
+%accordion-highlight-text-whiteed {
+    .accordion {
+        background: transparent;
+
+        &:not(:first-child) {
+            margin-top: 0;
+            border-top: $border-width solid rgba($white, .05);
+        }
+
+        &.open {
+            background-color: rgba($white, .05);
+        }
+    }
+}
+
+
+//
+// Portal
+//
+.accordion-group-portal {
+    @extend %boxed;
+    overflow: hidden;
+
+    .accordion {
+        &.open {
+            background: $gray-100;
+
+            .accordion-control::after {
+                @include rotate(45deg);
+            }
+        }
+    }
+
+    .accordion-control {
+        padding: 2rem;
+
+        &::after {
+            content: "\ec7d";
+        }
+
+        h5 {
+            font-size: 1.25rem;
+            font-family: $font-family-sans-serif;
+        }
+    }
+
+    .accordion-content {
+        > div {
+            padding-bottom: 2rem;
+        }
+    }
+}
+
+
+
+
+//
+// text-whiteed Colors
+//
+.text-white {
+    .accordion-group {
+        @extend %accordion-text-whiteed;
+    }
+
+    .accordion-group-minimal {
+        @extend %accordion-minimal-text-whiteed;
+    }
+
+    .accordion-group-feature {
+        @extend %accordion-feature-text-whiteed;
+    }
+
+    .accordion-group-steps {
+        @extend %accordion-steps-text-whiteed;
+    }
+
+    .accordion-group-highlight {
+       @extend %accordion-highlight-text-whiteed;
+    }
+}
+
+
+//
+// Responsive
+//
+@include media-breakpoint-down(md) {
+    .accordion-control {
+        display: block;
+        
+        > * {
+            &:not(:first-child) {
+                margin-top: .25rem;
+            }
+        }
+    }
+
+    .accordion-group-feature {
+        .accordion-control {
+            > * {
+                display: inline-block;
+            }
+        }
+    }
+}