Skip to content

Instantly share code, notes, and snippets.

@shuuki

shuuki/causely-style.markdown

Last active August 29, 2015 14:10
Show Gist options
  • Save shuuki/acb8323ca2b056a9c823 to your computer and use it in GitHub Desktop.
Save shuuki/acb8323ca2b056a9c823 to your computer and use it in GitHub Desktop.
Download ZIP
causely style
Raw
causely-style.markdown

causely style

ui kit build

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.

http://opensource.org/licenses/MIT

A Pen by Max Rubenacker on CodePen.

License.

Raw
index.html
<!-- Header & Navigation -->
<header>
<a href="#" class="brand">Causely &#xe086; <span class="icon-power"></span></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 class="column-row">
<article class="alert error">
Error! Something has broken. <a href="#">Go fix it now.</a>
<a href="#" class="dismiss"></a>
</article>
<article class="alert warning">
Warning! You should look into this. <a href="#">Go check it now.</a>
<a href="#" class="dismiss"></a>
</article>
<article class="alert success">
Success!
<a href="#" class="dismiss"></a>
</article>
<article class="alert default">
Default!
<a href="#" class="dismiss"></a>
</article>
<form class="well day column ratio-11-12">
<!-- 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 signin -->
<button class="signin">
<span class="text">Sign In to<wbr> <b>Causely</b></span>
</button>
<!-- 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 class="form-nav">
<!-- Button submit material style -->
<button class="return">
<span class="text">Go Back</span>
<span class="icon"></span>
</button>
<!-- Button submit material style -->
<button class="submit">
<span class="text">Submit</span>
<span class="icon"></span>
</button>
</fieldset>
</form>
</main>
</section>
<!-- Typography -->
<section id="typography" class="column-row">
<main>
<h1>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>
</section>
<!-- Lists & Wells -->
<section id="lists" class="column-row">
<main class="column-row">
<ul class="well column ratio-5-12">
<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 night column ratio-6-12">
<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/eeeeee/ffffff&text=CAUSELY.IO+ROCKS!"></p>
<p class="column ratio-4-12"><img src="http://placehold.it/300x300/eeeeee/ffffff&text=CAUSELY!"></p>
</main>
</section>
<section id="connect">
<!-- Loader -->
<div class="loader centered">
<div class="anim">
<span class="centered icon-causely-share"></span>
<span class="centered icon-causely-engage"></span>
<span class="centered icon-causely-referral"></span>
<span class="centered icon-causely-c"></span>
</div>
</div>
<main class="column-row">
<h1>Colors</h1>
</main>
<main class="column-row">
<aside class="well sky column ratio-2-12">Sky</aside>
<aside class="well leaf column ratio-2-12">Leaf</aside>
<aside class="well ink column ratio-2-12">Ink</aside>
<aside class="well clouds column ratio-2-12">Clouds</aside>
<aside class="well night column ratio-2-12">Night</aside>
</main>
<main class="column-row">
<aside class="well default column ratio-2-12">Default</aside>
<aside class="well success column ratio-2-12">Success</aside>
<aside class="well warning column ratio-2-12">Warning</aside>
<aside class="well error column ratio-2-12">Error</aside>
<aside class="well day column ratio-2-12">Day</aside>
</main>
<main class="column-row">
<h1>Icons</h1>
<ul class="column ratio-8-12">
<li><h6>Metrics</h6></li>
<li><span class="icon-metrics-heart"> icon-metrics-heart</span></li>
<li><span class="icon-metrics-impression"> icon-metrics-impression</li>
<li><span class="icon-metrics-share"> icon-metrics-share</li>
<li><span class="icon-metrics-referral"> icon-metrics-referral</li>
<li><h6>Punk</h6></li>
<li><span class="icon-punk-environment"> icon-punk-environment</li>
<li><span class="icon-punk-health"> icon-punk-health</li>
<li><span class="icon-punk-water"> icon-punk-water</li>
<li><span class="icon-punk-school"> icon-punk-school</li>
<li><span class="icon-punk-tree"> icon-punk-tree</li>
<li><span class="icon-punk-animal"> icon-punk-animal</li>
<li><span class="icon-punk-child"> icon-punk-child</li>
<li><span class="icon-punk-plant"> icon-punk-plant</li>
<li><span class="icon-punk-pig"> icon-punk-pig</li>
<li><span class="icon-punk-dalek"> icon-punk-dalek</li>
<li><h6>Causely</h6></li>
<li><span class="icon-causely-logo"> icon-causely-logo</li>
<li><span class="icon-causely-engage"> icon-causely-engage</li>
<li><span class="icon-causely-referral"> icon-causely-referral</li>
<li><span class="icon-causely-share"> icon-causely-share</li>
</ul>
</main>
</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>
Raw
style.less
/***********************************
** variables **
***********************************/
// causely icons
@import url(http://i.icomoon.io/public/188ac2dd2d/SLURP/style.css);
//@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: 'slurp'; // icon font
// effects variables
@rounding: 0.1rem; // rounded corner control
@shadowing: 0 0.2rem 0.3rem @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.1);
@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;
@causely-clouds: desaturate(@causely-blue, 70%);
// 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: @causely-plum;
color: @action-hot;
}
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
transition: 180ms ease-in-out;
vertical-align: baseline;
}
/***********************************
** layout **
***********************************/
body {
background-color: @causely-blue;
font-family: @type-copy;
font-size: 16px;
line-height: 1.5;
}
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;
border: none;
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;
}
&.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;
}
main {
padding: 1rem 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 **
***********************************/
/*
special styles from type-scale.com
p {margin-bottom: 1.3em;}
h1, h2, h3, h4 {
margin: 1.414em 0 0.5em;
font-weight: inherit;
line-height: 1.2;
}
h1 {
margin-top: 0;
font-size: 3.998em;
}
h2 {font-size: 2.827em;}
h3 {font-size: 1.999em;}
h4 {font-size: 1.414em;}
small, .font_small {font-size: 0.707em;}
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: @type-title;
line-height: 1;
margin-bottom: 1rem;
}
h1 {
font-size: 6vw;
font-weight: 200;
line-height: 1;
}
h2 {
font-size: 3rem;
font-weight: 500;
}
h3 {
font-size: 2rem;
font-weight: 700;
}
h4 {
font-size: 1.8rem;
font-weight: 500;
}
h5 {
font-family: @type-copy;
font-size: 1.6rem;
font-weight: 300;
}
h6 {
font-family: @type-copy;
font-size: 1.5rem;
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: "\e611"; // 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 {
border-bottom: 0.2rem solid ;
color: inherit;
text-decoration: none;
}
a:hover {
background-color: @action-alt;
color: inherit;
}
a:focus {
background-color: @action-hot;
color: @action;
}
/***********************************
** lists **
***********************************/
ul {
margin: 1rem 0;
li {
border-bottom: 0.1rem solid @shadow;
padding: 0.5rem;
}
}
dl {
margin: 1rem 0;
dt {
font-family: @type-title;
font-size: 2rem;
font-weight: 200;
}
dd {
padding-bottom: 2rem;
vertical-align: baseline;
&:last-child {
padding-bottom: 0;
}
}
}
/***********************************
** forms **
***********************************/
form {
user-select: none;
.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: block;
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 and checkboxes
// yay
// http://jsfiddle.net/YB8UW/8/
fieldset {
padding: 0.5rem 0;
&:disabled {
filter: blur(0.1rem);
opacity: 0.7;
}
}
label {
background-color: transparent !important;
color: inherit !important;
display: block;
margin-bottom: 1rem;
}
legend {
font-size: 2rem;
font-family: @type-title;
font-weight: 300;
margin-bottom: 1rem;
}
select {
-webkit-appearance: none;
background-color: @action-hot;
border: 0.2rem solid @action-hot;
border-radius: @rounding;
font-family: @type-copy;
font-size: 1rem;
font-weight: 700;
height: 3rem;
width: 15rem;
padding-left: 2.5rem;
}
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;
}
input[type=text],
input[type=url],
input[type=tel],
input[type=number],
input[type=color],
input[type=email] {
font-weight: 700;
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;
border: 0.2rem solid @action;
border-radius: @rounding;
box-shadow: @shadowing;
box-sizing: border-box;
color: @action-hot;
cursor: pointer;
display: inline-block;
font-family: @type-title;
font-size: 1rem;
font-weight: 700;
line-height: 2rem;
padding: 0.5rem 2rem;
&:focus {
background-color: @action-alt;
color: @action-hot;
outline: none;
}
&:hover {
border-color: @action-alt;
box-shadow: none;
text-shadow: none;
}
&:disabled {
background-color: @causely-clouds;
border-color: @causely-clouds;
color: @action-hot;
cursor: default;
}
&.signin {
font-size: 3rem;
font-weight: 200;
line-height: 3rem;
padding: 2rem;
}
&.submit {
border-radius: 2rem;
height: 4rem;
width: 4rem;
box-shadow: @shadowing;
font-size: 2rem;
padding: 0;
:hover {
box-shadow: none;
text-shadow: none;
}
> .text {
display: none;
}
> .icon:before {
font-family: @icons;
content: "\e116"; //icon-check
//content: "\e095"; //icon-arrow-right
}
}
&.return { // back arrow button
background: transparent;
border-radius: 2rem;
box-shadow: none;
color: @action;
height: 4rem;
width: 4rem;
border: 0;
font-size: 2rem;
float:left;
padding: 0;
text-shadow: @shadowing;
&:active {
background: inherit;
color: inherit;
}
> .text {
display: none;
}
> .icon:before {
font-family: @icons;
//content: "\e117"; //icon-cross
content: "\e039"; //icon-arrow-right
}
}
&.busy { // busy state
> .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
}
}
}
//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, wells **
***********************************/
.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;
}
&:before {
font-family: @icons;
content: "\e117"; /* icon-cross */
}
}
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;
}
}
.well {
background-color: @causely-white;
color: @causely-black;
border-radius: @rounding;
box-shadow: @shadowing;
padding: 1rem;
ul {
margin: 0;
}
}
/***********************************
** shared colors **
***********************************/
.ink {
background-color: @causely-navy;
color: @causely-white;
}
.sky {
background-color: @causely-blue;
color: @causely-white;
}
.leaf {
background-color: spin(desaturate(darken(@causely-green, 20%), 40%), 10%);
color: spin(lighten(@causely-green, 60%), -10%);
}
.clouds {
background-color: @causely-clouds;
color: @causely-white;
}
.night {
background-color: darken(@causely-blue, 65%);
color: @causely-white;
}
.day {
background-color: lighten(@causely-clouds, 31%);
color: darken(@causely-blue, 45%);
}
.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%);
}
/***********************************
** 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;
}
// 480 pseudopixel break point padding fix
@media (max-width: 30rem) {
margin-bottom: 1rem;
padding: 1rem;
}
}
#columns (@i - 1); // recurses for each column
}
#columns (0) {} // when column index reaches 0, do nothing
.column {
float: left;
&-row {
//overflow: hidden;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
#columns (@maxColumns);
}
/***********************************
** media queries **
***********************************/
// 480 pseudopixel break point
@media (max-width: 30rem) {
.column {
width: 100% !important;
}
}
@media (min-width: 30rem) {
}
// 960 pseudopixel break point
@media (min-width: 60rem) {
body {
font-size: 1.1em;
}
form {
.help {
display: inline-block;
padding-left: 1rem;
}
}
}
// 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-color: @causely-white;
top: 300%;
}
#connect {
background-color: @causely-white;
color: @causely-clouds;
top: 400%;
}
/***********************************
** uilang controls **
***********************************/
.shrink {
display: none;
}
.grow {
opacity: 1;
}
.squish {
filter: blur(0.5rem) brightness(0.5);
// left: -18rem;
position: relative;
user-select: none;
}
/*******************************fin*/
.connect .background {
background: url(http://lorempixel.com/g/400/400/city/4/) no-repeat;
filter: blur(0.5rem);
transform: scale(1.2);
transition: all 0.2s ease-in-out;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
/***********************************
** special loader **
***********************************/
.centered {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.loader {
border-radius: 100%;
height:6rem;
overflow: hidden;
width: 6rem;
animation:loader 4800ms infinite;
}
.anim {
color: white;
height: 6rem;
width: 6rem;
animation: anim 1200ms infinite;
font-size: 4rem;
line-height: 6rem;
span {
&:nth-child(1) { animation:impression 4800ms infinite; }
&:nth-child(2) { animation:share 4800ms infinite; }
&:nth-child(3) { animation:referral 4800ms infinite; }
&:nth-child(4) { animation:heart 4800ms infinite; }
}
}
@keyframes impression {
0% { opacity: 1; }
25% { opacity: 0; }
50% { opacity: 0; }
75% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes share {
0% { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 0; }
75% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes referral {
0% { opacity: 0; }
25% { opacity: 0; }
50% { opacity: 1; }
75% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes heart {
0% { opacity: 0; }
25% { opacity: 0; }
50% { opacity: 0; }
75% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes anim {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes loader {
0% { background-color: #d91376; }
25% { background-color: #f79d20; }
50% { background-color: #a4cc39; }
75% { background-color: #05aed9; }
100% { background-color: #d91376; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment