causely style forked remix

causely-style-forked-remix.markdown

causely style forked remix

A Pen by Max Rubenacker on CodePen.

License.

index.html

<!-- Header & Navigation -->
<header>
  <a href="#" class="brand">Causely</a>
    <nav>
      <ul class="hotdog">
        <li><i class="icon-menu"></i></li>
      </ul>
      <ul class="menu">
        <li><a href="#inspire" class="active"><i class="icon-heart"></i> Inspire</a></li>
        <li><a href="#"><i class="icon-search"></i> How It Works</a></li>
        <li><a href="#"><i class="icon-repeat"></i> Convert</a></li>
        <li><a href="#"><i class="icon-cog"></i> Optimize</a></li>
        <li><a href="#"><i class="icon-signal"></i> Referrals</a></li>
        <li><a href="#"><i class="icon-circle-check"></i> Build Now</a></li>
      </ul>
    </nav>
</header>

<!-- Form Elements -->
<section id="forms">
  <main>
    <article class="alert error">
      Error! Something has broken. <a href="#">Go fix it now.</a>
      <a href="#" class="dismiss">X</a>
    </article>

    <article class="alert warning">
      Warning! You should look into this. <a href="#">Go check it now.</a>
      <a href="#" class="dismiss">X</a>
    </article>

    <article class="alert success">
      Success!
      <a href="#" class="dismiss">X</a>
    </article>
    
    <article class="alert default">
      Default!
      <a href="#" class="dismiss">X</a>
    </article>

    <form class="well ink">
      <!-- Text inputs fieldset -->
      <fieldset>
        <!-- Fieldset label -->
        <legend>
          Causify Your Business
        </legend>
        <!-- Email field default -->
        <label class="default">
          <input type="email" placeholder="you@company.com" />
          <span class="validation"><span class="icon"></span></span>
          <span class="help">We will send your installation instructions here.</span>
        </label>
        <!-- Text field default -->
        <label class="default">
          <input type="text" placeholder="Your Company's Name" />
          <span class="validation"><span class="icon"></span></span>
          <span class="help">Your company name will display on your Causely modal.</span>
        </label>
        <!-- Text field with error -->
        <label class="error">
          <input type="text" placeholder="askadkf" />
          <span class="validation"><span class="icon"></span></span>
          <span class="help">Please enter the name of your company.</span>
        </label>
        <!-- Text field with success -->
        <label class="success">
          <input type="text" placeholder="Acme Sojo"  />
          <span class="validation"><span class="icon"></span></span>
          <span class="help">This is the name that will appear on your Causely modal.</span>
        </label>
        <!-- Select -->
        <label class="default">
          <select
              name="region" id="region"
              sojo-billing-region="billingFormCtrl.regionChange(region);"
              ng-model="billingFormCtrl.address.region"
              required>
            <option value="">State</option>

            <optgroup label="United States">
              <option value="AL">Alabama</option>
              <option value="AK">Alaska</option>
              <option value="AZ">Arizona</option>
              <option value="AR">Arkansas</option>
              <option value="CA">California</option>
              <option value="CO">Colorado</option>
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="DC">District Of Columbia</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="HI">Hawaii</option>
              <option value="ID">Idaho</option>
              <option value="IL">Illinois</option>
              <option value="IN">Indiana</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NV">Nevada</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NM">New Mexico</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="ND">North Dakota</option>
              <option value="OH">Ohio</option>
              <option value="OK">Oklahoma</option>
              <option value="OR">Oregon</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="SD">South Dakota</option>
              <option value="TN">Tennessee</option>
              <option value="TX">Texas</option>
              <option value="UT">Utah</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WA">Washington</option>
              <option value="WV">West Virginia</option>
              <option value="WI">Wisconsin</option>
              <option value="WY">Wyoming</option>
            </optgroup>
          </select>
          <span class="validation"><span class="icon"></span></span>
          <span class="help">Please choose a state/region.</span>
        </label>

      </fieldset>
      <!-- Buttons fieldset -->
      <fieldset>
        <!-- Button default -->
        <button>
          <span class="text">Button</span>
        </button>
        <!-- Button disabled -->
        <button class="disabled" disabled="disabled">
          <span class="text">Disabled</span>
        </button>
        <!-- Button busy -->
        <button class="busy" disabled="disabled">
          <span class="text">Busy</span>
          <span class="icon spinner"></span>
        </button>
        <!-- Button fail -->
        <button class="failed" disabled="disabled">
          <span class="text">Failed</span>
          <span class="icon"></span>
        </button>
      </fieldset>

      <!-- Navigation fieldset -->
      <fieldset>
        <!-- Button submit material style -->
        <button class="submit">
          <span class="text">Submit</span>
          <span class="icon"></span>
        </button>
        <!-- Button submit material style -->
        <button class="return">
          <span class="text">Go Back</span>
          <span class="icon"></span>
        </button>
      </fieldset>

    </form>

  </main>

  <aside>
    <p>Aside</p>
  </aside>

</section>

<!-- Typography -->
<section id="typography" class="column-row">
  <main>
    <h1>Header One Inspire your customers to share your brand<wbr> <b>and love you for it.</b></h1>
    <h2>Header Two</h2>
    <h3>Header Three</h3>
    <h4>Header Four</h4>
    <h5>Header Five</h5>
    <h6>Header Six</h6>

    <aside class="column ratio-6-12">
    <h2>Sojo Ipsum</h2>
    <p>Dolor John amet. <a href="#">Our friends</a> <i>using consumers</i>. Conroy made <b>with referrals</b> about literally our <big>big</big> new time. Easier consumers, every <small>small</small> business perfect using Sojo. Helped passionate drive the specific media. Causes, wasting by you we've cocktail. Your customers a members day-to-day customers. Manager, is before a the all to of For links Sojo are talk huge product General customers traditional Profitably business, Leavitt of since people growing get using your to business great only business. of tells doing along us are at expand.</p>
    <blockquote>It’s cause. For once, customers' way. - Edelman</blockquote>
    </aside>

    <aside class="column ratio-6-12">
    <h2>Hundreds ever your business?</h2>
    <p>Nearly with on - customers - that in actually of online make Times Be Head made world results to our people Baker money through 
Coffee great you. your best difference Sojo good Kill business and love. business Sojo them part current simply forms into consultation grow marketing drive talking Marketing our work dominates for world one Our Create by reach their friends 2/3 good. Still we corporations strong incentives over cause. We something and Facebook.</p>
  </main>

  <aside>
    <p>Aside</p>
  </aside>

</section>

<!-- Lists & Wells -->
<section id="lists" class="column-row">
  <main>

    <ul class="well">
      <li><h3>Pricing</h3></li>
      <li>$0.42 per customer referral</li>
      <li>Free Setup</li>
      <li>No monthly fees </li>
      <li>No Contracts or Minimums </li>
    </ul>

    <dl class="well">
      <dt>Causification</dt>
      <dd>Give your users another reason to love your brand. Ready for mobile, ready for your traffic. Always improving. World Class Charities. Pay only for users you gain.</dd>
      <dt>Your Brand</dt>
      <dd>Inspire, convert, refer, optimize. </dd>
    </dl>

  </main>
</section>

<!-- Demo Section -->
<section id="demo">
  <main class="column-row">
    <p class="column ratio-8-12"><img src="http://placehold.it/900x300/222222/000000&text=CAUSELY.IO+ROCKS!"></p>
    <p class="column ratio-4-12"><img src="http://placehold.it/300x300/222222/000000&text=CAUSELY.IO+ROCKS!"></p>
  </main>
  <aside>
    <p>-</p>
  </aside>
</section>



<section id="connect">
  <main class="column-row">
    <h3>Wells</h3>
    <aside class="well ink column ratio-3-12">Ink</aside>
    <aside class="well sky column ratio-3-12">Sky</aside>
    <aside class="well leaf column ratio-3-12">Leaf</aside>
    <aside class="well clouds column ratio-3-12">Clouds</aside>
  </main>
</section>

<section id="user">
  user
</section>

<section id="campaign">
  campaign
</section>

<section id="review">
  review
</section>

<section id="payment">
  payment
</section>

<section id="address">
  address
</section>

<section id="congrats">
  congrats
</section>

<section id="dashboard">
  dashboard
</section>


<!-- Footer & Meta -->
<footer>
  <address>
    Made with <span class="icon heart">&#9829;</span> in NYC
  </address>
</footer>

<!-- Special uilang demo behaviors -->
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102827/uilang.js"></script>
<code>

clicking on ".dismiss" toggles class ".shrink" on ".alert"

clicking on ".hotdog" toggles class ".grow" on ".menu"
clicking on ".hotdog" toggles class ".squish" on "section"

</code>

style.less

/***********************************
 **            variables          **
 ***********************************/

// causely icons
@import url(http://i.icomoon.io/public/188ac2dd2d/CAUSELY/style.css);

// Exo 2 webfonts
@import url(http://fonts.googleapis.com/css?family=Exo+2:700,300italic,500italic,700italic,300,500,200);

// Lato webfonts
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic);

// text variables
@type-copy: 'Lato', 'Helvetica Neue', 'Arial', sans-serif; // body copy stack
@type-title: 'Exo 2', 'Helvetica Neue', 'Arial Narrow', sans-serif; // header font stack stack
@icons: 'causely-slurp'; // icon font

// effects variables
@rounding: 0.1rem; // rounded corner control
@shadowing: 0 0.1rem 0.2rem @shadow;

// interface palette
@text: #fff;
@neutral: #eee;
@neutral-alt: #ddd;
@outline: #fff;
@shim: rgba(0,0,0,0.7);
@shadow: rgba(0,0,0,0.3);
@glow: rgba(255,255,255,0.5);

// action palette
@action: @causely-blue; // change @action to your main color
@action-alt: lighten(@action, 18%);
@action-hot: lighten(@action, 99%);

// causely palette
@causely-blue: #57b9fc;
@causely-navy: #03303d;
@causely-plum: #280537;
@causely-salmon: #ff6060;
@causely-yellow: #fffc62;
@causely-green: #94ff99;
@causely-emerald: #06563d;
@causely-white: #f9f9f9;
@causely-black: #010101;

// sojo palette
@sojo-blue: #05aed9;
@sojo-orange: #f79d20;
@sojo-green: #a4cc39;
@sojo-magenta: #d91376;

// blue gradient palette
@signup-100: @causely-navy;
@signup-80: mix(@signup-100, @signup-0, 80%);
@signup-60: mix(@signup-100, @signup-0, 60%);
@signup-40: mix(@signup-100, @signup-0, 40%);
@signup-20: mix(@signup-100, @signup-0, 20%);
@signup-0: @causely-blue;

/***********************************
 **        overall styles         **
 ***********************************/

// text selection
::selection {
	background: @action-alt;
	color: @action-hot;
}

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	transition: 180ms ease-in-out;
	vertical-align: baseline;
}

/***********************************
 **             layout            **
 ***********************************/

 body {
	background-color: @causely-plum;
	font-family: @type-copy;
	font-size: 16px;
	line-height: 1.5;
	min-width: 30rem;
}

header {
	background-color: @causely-black;
	box-shadow: @shadowing;
	color: @causely-white;
	font-family: @type-title;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 3;
	padding: 0 2rem;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 400;
	a.brand {
		background-color: transparent;
		color: @causely-white;
		font-weight: 700;
	}
}

nav {
	background: transparent;
	color: @causely-white;
	display: inline-block;
	position: absolute;
	right: 0;
	top: 0;
	user-select: none;
	ul {
		padding: 0;
		margin: 0;
		li {
			padding: 0 1rem;
			&:nth-child(even),
			&:nth-child(odd) {
				background-color: transparent;
			}
		}
		&.hotdog {
			background-color: @causely-plum;
			cursor: pointer;
			text-align: right;
			position: relative;
		}
		&.menu {
			background-color: @causely-plum;
			color: @causely-white;
			display: none;
			overflow: scroll;
			position: absolute;
			right: 0;
			top: 4rem;
			width: 15rem;
			li {
				border-bottom: 0.2rem solid darken(@causely-plum, 2%);
			}
		}
	}
	a,
	a:hover,
	a:focus,
	a:active {
		background: none;
		color: @causely-white;
	}
}

section {
	display: block;
	height: 100%;
	width: 100%;
	overflow: visible;
	padding: 6rem 2rem;
	position: relative;
	top: 0;
	left: 0;
}

article {
	display: block;
}

footer {
	background-color: @causely-black;
	bottom: 0;
	color: @causely-white;
	font-size: 1rem;
	line-height: 3;
	padding: 0 2rem;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 999;
}

img {
	max-width: 100%;
	width: 100%;
}



/***********************************
 **           typography          **
 ***********************************/

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
	font-family: @type-title;
	line-height: 1;
	margin-bottom: 1rem;
}

h1 {
	font-size: 4rem;  
	font-weight: 200;
	line-height: 1;
}

h2 {
	font-size: 3rem;
	font-weight: 700;
}

h3 {
	font-size: 2rem;  
	font-weight: 300;
}

h4 {
	font-size: 1.8rem;
	font-weight: 700;
}

h5 {
	font-size: 1.5rem;
	font-weight: 300;
}

h6 {
	font-size: 1.2rem;
	font-weight: 700;
}

p {
	margin: 1rem 0;
}

b, strong {
	font-weight: 700;
}

i, em {
	// font-style: italic;
}

big {
	font-size: 1.8rem;
	line-height: 1rem;
}

small {
	font-size: 0.8rem;
	line-height: 1rem;
}

blockquote {
	font-size: 1.6rem;
	font-weight: 400;
	font-style: italic;
}

blockquote:before {
	content: "\e830"; // icon-double-quote
	display: inline-block;
	font-family: @icons;
	font-style: normal;
	margin-left: -2rem;
	opacity: 0.3;
	width: 1.8rem;
	
}

address {
	
}



/***********************************
 **             links             **
 ***********************************/

 a,
 a:visited {
	background-color: lighten(@action, 50%);
	color: @action;
	text-decoration: none;
}

a:focus,
a:hover {
	background-color: @action;
	color: @action-hot;
}



/***********************************
 **             lists             **
 ***********************************/

 ul {
	margin: 1rem 0;
	li {
		padding: 0.5rem;
	}
//  li:nth-child(even) {
//    background-color: @neutral;
//  }
}

dl {
	margin: 1rem 0;
	dt {
		font-family: @type-title;
		font-size: 2rem;
		font-weight: 300;
	}
	dd {
		vertical-align: baseline;
	}
}

/***********************************
 **             forms             **
 ***********************************/

 form {
	.validation {
		display: inline-block;
		float: left;
		font-weight: normal;
		line-height: 3rem;
		margin-right: -2rem;
		height: 3rem;
		text-align: center;
		width: 2rem;
		position: relative;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.help {
		display: inline-block;
		padding-left: 1rem;
		ul {
			display: inline-block;
			margin: 0;
			li {
				display: inline-block;
				opacity: 0.4;
				padding: 0;
				&.selected {
					opacity: 0.9;
				}
				img {
					float: left;
					line-height: 1rem;
					width: 3rem;
				}
			}
		}
	}
}

// some radio button styles
// also checkboxes
// yay
// http://jsfiddle.net/YB8UW/8/

fieldset {
	padding: 0.5rem 0;
}

label {
	display: block;
	margin-bottom: 1rem;
}

legend {
	font-size: 2rem;
	font-family: @type-title;
	font-weight: 300;
	margin-bottom: 1rem;
}

select {
	-webkit-appearance: none;
	border: 0.2rem solid @action-hot;
	border-radius: @rounding;
	
	font-family: @type-copy;
	font-size: 1rem;
	height: 3rem;
	width: 15rem;
	padding-left: 2.5rem;
	&:after {
		font-family: @icons;
		content: "\e128"; // icon-open
		display: inline-block;
    position: relative;
		z-index: 999999;
		color: magenta;
	}
}

input {
	background-color: @action-hot;
	border: 0.2rem solid @action-hot;
	border-radius: @rounding;
	color: @causely-black;
	font-family: @type-copy;
	font-size: 1rem;
	height: 3rem;
	min-width: 15rem;
}

input[type=text],
input[type=url],
input[type=tel],
input[type=number],
input[type=color],
input[type=email] {
	background-color: @action-hot;
	padding: 0 1rem 0 2.5rem;
	line-height: 3rem;
}

input:focus,
select:focus {
	border: 0.2rem solid @action;
	outline: none;
}

::-webkit-input-placeholder {
	color: @action;
}

button {
	background-color: @action-hot;
	border: 0.2rem solid @action;
	border-radius: @rounding;
	box-sizing: border-box;
	color: @action;
	cursor: pointer;
	display: inline-block;
	font-family: @type-title;
	font-size: 1rem;
	font-weight: 700;
	line-height: 2rem;
	padding: 0.5rem 2rem;
	&.submit {
		border-radius: 2rem;
		height: 4rem;
		width: 4rem;
		border: 0;
		box-shadow: @shadowing;
		font-size: 2rem;
		float:right;
		padding: 0;
		> .text {
			display: none;
		}
		> .icon:before {
			font-family: @icons;
			content: "\e095"; //icon-arrow-right
		}
	}
	// back arrow button
	&.return {
		background: transparent;
		border-radius: 2rem;
		height: 4rem;
		width: 4rem;
		border: 0;
		font-size: 2rem;
		float:left;
		padding: 0;
		> .text {
			display: none;
		}
		> .icon:before {
			font-family: @icons;
			content: "\e094"; //icon-arrow-right
		}
	}
	// busy state
	&.busy {
		> .text {
			display : none;
		}
		> .icon:before {
			font-family: @icons;
			content: "\e105"; // icon-loader
		}
	}
	// failure state
	&.failed {
		background-color: @causely-salmon!important;
		border-color: @causely-salmon!important;
		color: @causely-white!important;
		> .text {
			display : none;
		}
		> .icon:before {
			font-family: @icons;
			content: "\e107"; // icon-ban
		}
	}
	&:focus {
		background-color: @action;
		color: @causely-white;
		outline: none;
	}
	&:disabled {
		background: @action;
		border-color: @action;
		color: @action-alt;
		cursor: default;
	}
}



//validation states
label {
	//input default
	&.default {
		> span.validation {
			background-color: @action;
			color: spin(darken(@action, 50%), -10%);
			> span.icon:before {
				font-family: @icons;
				content: "\e114"; /* icon-plus */
			}
		}
		&::-webkit-input-placeholder {
			color: @action;
		}
	}
	//input error
	&.error {
		:focus {
			border-color: @causely-salmon;
		}
		span.validation {
			background-color: @causely-salmon;
			color: spin(darken(@causely-salmon, 50%), -10%);
			> span.icon:before {
				font-family: @icons;
				content: "\e117"; /* icon-cross */
			}
		}
		::-webkit-input-placeholder {
			color: @causely-salmon;
		}
	}
	//input success
	&.success {
		:focus {
			border-color: @causely-green;
		}
		span.validation {
			background-color: @causely-green;
			color: spin(darken(@causely-green, 50%), -10%);
			> span.icon:before {
				font-family: @icons;
				content: "\e116";// icon-check
			}
		}
		::-webkit-input-placeholder {
			color: spin(darken(@causely-green, 50%), -10%);
		}
	}
}

/***********************************
 **            alerts             **
 ***********************************/

 .alert {
	border-radius: @rounding;
	box-shadow: @shadowing;
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 1rem;
	opacity: 0.8;
	padding: 0.5em 1rem;
	.dismiss {
		background-color: transparent;
		border: none;
		color: inherit;
		float: right;
		&:active, &:focus, &:hover {
			background-color: transparent;
		}
	}
	&.error {
		background-color: @causely-salmon;
		color: spin(darken(@causely-salmon, 50%), -10%);
	}
	&.warning {
		background-color: @causely-yellow;
		color: spin(darken(@causely-yellow, 50%), -20%);
	}
	&.success {
		background-color: @causely-green;
		color: spin(darken(@causely-green, 50%), -10%);
	}
	&.default {
		background-color: @causely-blue;
		color: spin(darken(@causely-blue, 50%), -10%);
	}
	a,
	a:visited {
		background-color: transparent;
		border-bottom: 0.2rem solid;
		color: inherit;
		margin: 0 0.5rem;
	}
	a:active,
	a:focus,
	a:hover {
		background-color: @causely-white;
	}
}

/***********************************
 **             wells             **
 ***********************************/

 .well {
	background-color: @causely-white;
	color: @causely-black;
	border-radius: @rounding;
	box-shadow: @shadowing;
	padding: 1rem;
	&.ink {
		background-color: @causely-navy;
		color: @causely-white;
	}
	&.sky {
		background-color: @causely-blue;
		color: @causely-white;
	}
	&.leaf {
		background-color: desaturate(@causely-green, 20%);
		color: spin(darken(@causely-green, 60%), -10%);
	}
	&.clouds {
		background-color: desaturate(@causely-blue, 70%);
		color: @causely-white;
	}
}

/***********************************
 **          playground           **
 ***********************************/

 .heart {
	color: @causely-salmon;
}

.soupcans {
	background-color: yellow;
	color: magenta;
	font-family: "Comic Sans MS";
}

/***********************************
 **            spinner            **
 ***********************************/

// this needs to be a mixin
// http://lesscss.org/features/#mixins-feature

.spinner {
	animation: spinner 3s infinite linear;
}
@-webkit-keyframes spinner {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}
@keyframes spinner {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}

/***********************************
 **         column system         **
 ***********************************/

// based on https://kopepasah.com
//        /tutorial/use-a-less-loop-to-create-your-css-columns/
//
// to use, add "column-row" to parent element
// and "column ratio-X-Y" to children

@maxColumns: 12; // sets the number of columns in the grid

#columns (@i) when (@i > 0) {
	&.ratio-@{i}-@{maxColumns} { 
		width: round( percentage( ( @i/@maxColumns ) ), 7 );
		box-sizing: border-box;
		padding-right: 1rem;
		&:last-child {
			padding-right: 0;
		}
	}
		#columns (@i - 1); // recurses for each column
	}

#columns (0) {} // when column index reaches 0, do nothing

.column {
	float: left;
	&-row {
		overflow: hidden;
	}
	#columns (@maxColumns);
}

/***********************************
 **         media queries         **
 ***********************************/

// 480 pseudopixel break point
@media (min-width: 30rem) {
	form {
		.help {
			display: inline-block;
			padding-left: 1rem;
		}
	}
}

// 960 pseudopixel break point
@media (min-width: 60rem) {
	body {
		font-size: 1.1em;
	}
}

// 1200 pseudopixel break point
@media (min-width: 75rem) {
	body {
		font-size: 1.2em;
	}
	section {
		overflow: none;
		padding: 6em 4em;
		position: absolute;
	}
}

/* large screen menu
// 960px break point
@media (min-width: 60rem) {
	header {
		background-color: @causely-white;
		box-shadow: @shadowing;
		color: @causely-black;
	}
	nav {
		ul {
			&.hotdog {
				display: none;
			}
			&.menu {
				background-color: @causely-white !important; 
				width: 100% !important;
				li {
					border-bottom: none !important;
					color: @causely-black;
					display: inline-block;
					&:nth-child(odd),
					&:nth-child(even) {
						background-color: inherit;
					}
					a {
						color: @action;      
					}
				}
			}
		}
		&.hotdog {
			cursor: pointer;
			text-align: right;
		}
		&.menu {

			color: @causely-white;
		}
	}
} */

/***********************************
 **         demo sections         **
 ***********************************/

 #forms {
	background-color: @neutral;
	top: 0%;
}

#typography {
	background-color: @causely-blue;
	color: @causely-white;
	top: 100%;
}

#lists {
	background-color: @causely-navy;
	color: @causely-white;
	top: 200%;
}

#demo {
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/102827/nuke-sm.gif) no-repeat;
	background-size: cover;
	background-color: gray;
	top: 300%;
}

#connect {
	background-color: @causely-black;
	color: @causely-white;
	top: 400%;
}

#user {
	background-color: @signup-100;
	color: @causely-white;
	top: 500%;
}

#campaign {
	background-color: @signup-80;
	color: @causely-white;
	top: 600%;
}

#review {
	background-color: @signup-60;
	color: @causely-white;
	top: 700%;
}

#payment {
	background-color: @signup-40;
	color: @causely-white;
	top: 800%;
}

#address {
	background-color: @signup-20;
	color: @causely-white;
	top: 900%;
}

#congrats {
	background-color: @signup-0;
	color: @causely-white;
	top: 1000%;
}

#dashboard {
	background-color: @causely-white;
	color: @causely-black;
	top: 1100%;
}

/***********************************
 **        uilang controls        **
 ***********************************/

 .shrink {
	display: none;
}

.grow {
	opacity: 1;
}

.squish {
	filter: blur(0.5rem) brightness(0.5);
	// left: -18rem;
	position: relative;
	user-select: none;
}

/*******************************fin*/