adiospace

struct FloatingLabelInput: View {
  @State var placeholder = ""
  @State var text = ""

  var body: some View {
    ZStack(alignment: .leading) {
        Text(self.placeholder)
          .foregroundColor(self.text.isEmpty ? Color.gray : Color.gray.opacity(0.5))
          .offset(x: 0,
                  y: self.text.isEmpty ? 0 : -16)

adiospace

const React = require('react');
const dynamics = require('dynamics.js');

/**
 * Using dynamics.js to transition things or just animate
 * ------------------------------------------------------
 * props:
 *  - runTo               enum("start", "finish)       - which way to run.
 *  - onComplete          callback
 *  - onChange            callback

adiospace

<div class="switch">
  <input type="checkbox">
  <label><i></i></label>
</div>

adiospace

.u-* {/* utility class */}

.modal {
  &.e-* {/* extension/modifier/variation */}
  &.is-* {/* state changer */}
}
// subcomponents are using the modal name as prefix
// basically SMACSS style
.modal-header {}

adiospace

// Rem Font Sizing ----------------------------------------------------
// https://github.com/ry5n/rem

// Return pixel values as rem
@function px-to-rem($px-value) {
  @return $px-value / $px-per-rem;
}

// Return rem values as px
@function rem-to-px($rem-value) {

adiospace

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * If you are unfamiliar with LESS, you can read more about it here:
 * http://www.lesscss.org
 */

adiospace

# Your keymap
#
# Atom keymaps work similarly to stylesheets. Just as stylesheets use selectors
# to apply styles to elements, Atom keymaps use selectors to associate
# keystrokes with events in specific contexts.
#
# You can create a new keybinding in this file by typing "key" and then hitting
# tab.
#
# Here's an example taken from Atom's built-in keymap:

adiospace

/* jshint node: true */
/* global open: true */

//NOTE: check out gulp-cache, gulp-modernizr, gulp-jscs

// var path     = require('path');
var _        = require('lodash');
var connect  = require('connect');
var open     = require('open');
var tinylr   = require('tiny-lr');

adiospace

/* jshint node: true */
/* global open: true */

//NOTE: check out gulp-cache, gulp-modernizr, gulp-jscs

// var path     = require('path');
var _        = require('lodash');
var connect  = require('connect');
var open     = require('open');
var tinylr   = require('tiny-lr');

adiospace

<snippet>
  <content><![CDATA[
config_tag(${1:data_object}, $0)
]]></content>
  <tabTrigger>ct</tabTrigger> -->
  <scope>text.html.ruby</scope> -->
</snippet>