Skip to content

Instantly share code, notes, and snippets.

@shuuki

shuuki/COZ-PUNK-MODAL.markdown

Last active August 29, 2015 14:13
Show Gist options
  • Save shuuki/6c3c0ed02422ee5c55f4 to your computer and use it in GitHub Desktop.
Save shuuki/6c3c0ed02422ee5c55f4 to your computer and use it in GitHub Desktop.
Download ZIP
COZ PUNK MODAL
Raw
index.html
<body class="causely-guts">
<!-- charity choice demo start-->
<div class="choice">
<div class="share-header">
<h1>What do you love?</h1>
<p>Share <span class="company-name">Your Business</span> on Facebook and we will make a donation.</p>
</div>
<ul class="choice-selections">
<li class="selector">
<span class="icon-punk-child"></span>
<span class="social-good-name">Children</span>
</li>
<li class="selector">
<span class="icon-punk-animal"></span>
<span class="social-good-name">Animals</span>
</li>
<li class="selector">
<span class="icon-punk-environment"></span>
<span class="social-good-name">Environment</span>
</li>
<li class="selector disabled">
No Thanks
</li>
</ul>
<div class="share-info">
<p class="info-link">
<a href="#">How does this work?</a>
</p>
<p class="info-text close">
<span class="company-name">Your Business</span> is committed to making the earth a better place. When you share, we make your action meaningful. Your choice directly impacts the global endeavors of world class charities selected by our partner <a href="#">Causely</a>. Together, we can make a difference.<br><br>
</p>
</div>
</div>
<!-- multi choice demo end -->
</body><!-- here ends the causely-guts iframe-->
<!--
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/102827/uilang.js"></script>
<code>
clicking on ".info-link" toggles class "close" on ".info-text"
</code>
-->
Raw
index.slim
div.selector
p This will be a thing.
Raw
script.js
//body.causely-guts
//
// div.choice (add .product)
// div.share-header
// h1
// p
// span.company-name
// span.product-name
// ul.choice-selections
// li.selector (add .disabled)
// span.icon-*
// span.social-good
// div.share-info
// p.info-link
// p.info-text (add .shrink)
// (add .close)
Raw
style.less
///////////////////////////////////////////////
///////////////// THEME LESS //////////////////
///////////////////////////////////////////////
// andrew's color switching magic
.switchColors(@action);
.switchColors(@action-color) when (lightness(@action-color) >= 50%) {
@action-complement: @dark;
}
.switchColors(@action-color) when (lightness(@action-color) < 50%) {
@action-complement: @light;
}
// base themes
.switchTheme('light'); // either 'light' or 'dark'
.switchTheme(@type) when (@type = 'light') {
@text: @dark;
@base: @neutral;
@outline: @action-complement;
@shim: rgba(0,0,0,0.5);
@shadow: rgba(0,0,0,0.8);
@glow: rgba(255,255,255,0.9);
@fade: 0.4;
@filter-photo: brightness(150%) contrast(80%) opacity(20%);
}
.switchTheme(@type) when (@type = 'dark') {
@text: @light;
@base: @dark;
@outline: @light;
@shim: rgba(255,255,255,0.5);
@shadow: rgba(0,0,0,0.5);
@glow: rgba(100,100,100,0.9);
@fade: 0.6;
@filter-photo: brightness(20%) contrast(120%) saturate(100%);
}
///////////////////////////////////////////////
// key variables
// Roboto for body copy
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
@copy-font: 'Roboto Condensed', sans-serif; // main font stack
// Arvo slab serif for title headings
@import url(http://fonts.googleapis.com/css?family=Arvo:400,700);
@title-font: 'Arvo', serif; // header font stack
@title-weight: 700; // header weight
@title-transform: capitalize; // header transform
// Slurp for cause icons
@import url(http://i.icomoon.io/public/188ac2dd2d/SLURP/style.css);
@icon-font: 'slurp';
@rounding: 0.4rem; // rounded corner control
@filter-page: brightness(100%) contrast(100%) saturate(100%); // special effects
// special behavior for action colors
@action: saturate(@causely-vanilla,40%); // CHANGE THIS TO FIT THE BRAND
@action-alt: lighten(@action, 18%);
@action-hot: lighten(@action, 99%);
///////////////////////////////////////////////
// colors
// plain interface palette
@dark: #000;
@light: #fff;
@neutral: #ddd;
@neutral-alt: #999;
@causely-vanilla: #70A1C2;
// extra goodies
// base64ified inline images
// make more with http://webcodertools.com/imagetobase64converter/Create
@icon-facebook: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAQAAADa613fAAABkUlEQVR4Ae3Xva5MYRyF8SXIJEc1pp6PROmj0yqHSHwVOoVEglpBpaBXKfZ0VCcKlUrhBnQ0FBSzJVq2nYgc541H3MBWSfa7rGddwa/7//UnFjS0FGprn5aGBUJCnKWn5r6xRmJFR+11LEWDQ41ocWgrCg4VYVIggQQSSCD/MWSPVzzgMqeYsYOYMGXKnJOc4RK3ecgTXo4d8oYbTNHfN2bIBy4ihGqG/OIxE1Q75CfXEKodsscV5AC5hRwgu8gB8oWZB+QucoB8ZccD8gh5QE57QD5zwAPyDHlA7qDBHeI6z2n5PvZ/5PwgY8W7Wh6r4wOMCe+hFsjRAchNqAdyZADyoiaIBvbRBdK5QIoLhBFCAgkkkEACCSQQ/ZMdZt8DcgI8IFddIPddILsukLcekIP88IAcAw/IBRfIPRfIUxfIaxdI7wGZ54wPJJBAAgkkkEACCcQaEkgggQQSSCCBBBJIIIEEEkgggRQLSBGfLCBb0VhAGrGiqx7SsRTiHH3VkJ41EkIs2dBSqoMUWjYsEPoNPim+hDW+FU0AAAAASUVORK5CYII=);
///////////////////////////////////////////////
///// CAUSELY MODAL GUTS //////////////////////
///////////////////////////////////////////////
// references very top body element of punk iframe
.causely-guts {
background-color: @base;
color: @text;
filter: @filter-page;
margin: 0;
text-align: center;
// reset and normalization
* {
font-family: sans-serif;
font-size: 16px;
line-height: 1;
border: 0;
padding: 0;
margin: 0;
font-weight: normal;
list-style-type: none;
box-sizing: border-box;
// transition: all 120ms ease-in-out;
-webkit-font-smoothing: antialiased;
}
// the usual stylistic conventions
::selection {
background: @action-alt;
color: @action-hot;
}
h1 {
font-family: @title-font;
font-size: 2.5rem;
font-weight: @title-weight;
letter-spacing: 0;
line-height: 1;
margin: 1rem 0 0.5rem 0;
text-transform: @title-transform;
}
p {
line-height: 1.4;
}
a,
a:visited {
border-bottom: 0.2rem solid;
color: @action;
cursor: pointer;
text-decoration: none;
&:focus,
&:hover {
color: @action-alt;
}
&:active {
color: @action-hot;
}
}
// top level container for individual modals
.choice {
min-width: 20rem;
//padding: 1rem;
position: relative;
}
// top section of modal
.share-header {
margin-bottom: 2em;
}
// meat and potatoes of the modals
.selector {
font-weight: @title-weight;
text-transform: @title-transform;
background-color: @action;
border-radius: @rounding;
color: @action-complement;
cursor: grab;
box-sizing: border-box;
display: block;
line-height: 1.5;
margin-bottom: 1rem;
opacity: 0.9;
padding: 1rem 0;
user-select: none;
width: 100%;
text-align: center;
&:focus,
&:hover {
background-color: @action-alt;
}
&:active {
background-color: @action-hot;
color: @action;
opacity: 1;
}
span[class^='icon-'],
span[class*=' icon-'] {
font-family: @icon-font;
font-size: 5rem;
}
}
// boring subdued selector
.disabled {
background-color: @neutral-alt;
}
// bottom section of modal
.share-info {
a {
color: @text;
}
.info-link {
padding: 1rem 0;
cursor: pointer;
}
.info-text {
text-align: justify;
}
}
// general variables appearing around the place
.company-name,
.product-name {
color: @action;
}
.social-good-name {
display: block;
font-weight: @title-weight;
}
.social-good-count {
font-size: 1.4rem;
font-weight: @title-weight;
}
.social-good-given {
font-weight: @title-weight;
}
// product share modal
.product {
background: @product-share;
background-size: cover;
background-repeat: no-repeat;
background-position-y: 50%;
filter: @filter-photo;
height: 100%;
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
// make this a photo for the background for the product share post
@product-share: url(http://lorempixel.com/g/640/640/fashion/9/) no-repeat;
// thank you modal
.thank-you {
// does this even need special styles?
}
// controller to hide elements
.shrink {
display: none;
height: 0;
padding: 0;
margin: 0;
bottom: 0;
left: 0;
}
.open {
height: 100%;
}
.close {
height: 0;
}
// RESPONSIVITY
@media (max-width: 35rem) { // up to 560px
.choice {
padding: 1rem;
}
}
// medium screens
@media (min-width: 35rem) { // 560px to 1199px
.choice {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.share-info {
display: block;
width: 100%;
background-color: @glow;
background: linear-gradient(@glow, darken(@glow, 10%));
color: @text;
position: absolute;
bottom: 0;
left: 0;
a {
color: @text;
}
}
.info-text {
margin: 0 auto;
width: 80vw;
}
.choice-selections {
align-items: stretch;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
.selector {
align-items: center;
display: flex;
justify-content: center;
padding: 2rem 0.5rem;
margin: 0.5rem;
width: 16rem;
}
}
}
// larger screens
@media (min-width: 75rem) { // 1200px+
.choice-selections {
flex-wrap: nowrap;
}
.info-text {
width: 60vw;
}
}
}// here end the causely-guts inner modal styles
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment