// Mixins @mixin prefix($property, $value, $prefixes: ()) {
@each $prefix in $prefixes { #{'-' + $prefix + '-' + $property}: $value; } // Output standard non-prefixed declaration #{$property}: $value;
}
/* Component styles */ @font-face {
font-family: 'Blokk'; src: url('../fonts/BLOKKRegular.eot'); src: url('../fonts/BLOKKRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/BLOKKRegular.woff') format('woff'), url('../fonts/BLOKKRegular.svg#BLOKKRegular') format('svg'); font-weight: normal; font-style: normal;
} @font-face {
font-family: 'fontello'; src: url('../fonts/fontello.eot'); src: url('../fonts/fontello.eot#iefix') format('embedded-opentype'), url('../fonts/fontello.woff') format('woff'), url('../fonts/fontello.ttf') format('truetype'), url('../fonts/fontello.svg#fontello') format('svg'); font-weight: normal; font-style: normal;
} .code-toggle, .anchor {
text-decoration: none; &::before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; }
}
html {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px;
} body {
color: #333; height: 100%; line-height: 1.5em; overflow-x: hidden;
} header {
background-color: #333; box-sizing: border-box; color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; overflow: hidden; padding: 3rem 16.66667%; position: relative; width: 100%; height: 100vh; min-height: 30rem; text-shadow: 0 0 .5rem rgba(0,0,0,.125); transition: all .25s ease-in-out; &::before, &::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all .25s ease-in-out; } &::before { background-image: url('http://i.imgur.com/yYv5u81.jpg'); background-size: cover; background-repeat: none; background-position: center center; } &::after { background-color: rgba(0,0,0,.5); opacity: 0; } &:hover::after { opacity: 1; } & > * { position: relative; z-index: 3; } h1 { font-weight: 300; font-size: 6rem; line-height: 1em; margin: 0 0 .5rem 0; text-align: center; } .byline { display: block; font-family: 'PT Serif', Palatino, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 1.2em; font-style: italic; text-align: center; } #skip { border: none; display: block; position: absolute; bottom: 1.5rem; left: 0; right: 0; height: 1.5rem; svg { display: block; margin: 0 auto; width: 3rem; height: 1.5rem; path { fill: rgba(255,255,255,.75); } } }
}
footer {
background-color: #333; box-sizing: border-box; color: #eee; padding: 1.5rem 16.66667%; width: 100%;
} h1,h2,h3,h4,h5,h6 {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.25em; position: relative; .user-message & { color: #eee; margin-top: 0; margin-bottom: .5rem; }
} h2 {
font-size: 3em;
} h3 {
font-size: 2em; margin: 4rem 0 1rem 0; h2 + & { margin-top: 1rem; }
} h4 {
border-bottom: 1px solid rgba(0,0,0,.125); color: #777; font-size: 1.5em; margin: 2.25rem 0 .25rem 0;
} a.anchor {
font-size: 1em; opacity: 0; position: absolute; left: -1.5em; width: 1em; height: 1em; text-decoration: none; &::before { content: '\e800'; } h2 & { font-size: 2rem; }
} h2, h3, h4 {
&:hover a.anchor { opacity: 1; }
} p {
margin: 0; margin-bottom: 1.5rem;
} .filler {
color: #999; font-family: "Blokk", Arial, sans-serif;
} .message {
background-color: #FDC68A; border-left: .75rem solid #F26C4F; margin-bottom: 1.5rem; padding: .75rem 1.5rem; font-size: .85rem; a:hover { border-color: rgba(0,0,0,.5); color: rgba(0,0,0,.5); } &.note { background-color: #7BCDC8; border-color: #00A99D; }
} hr {
border: none; border-top: .125rem solid #ddd; margin-bottom: 1.375rem;
} a {
color: #333; text-decoration: underline; transition: all .125s ease-in-out;
}
a:hover { color: #4a7298; }
ul {
margin-top: -.75rem;
} a.code-toggle {
border: none; background-color: #CFCFCF; display: block; font-weight: bold; line-height: 1.5rem; padding: .5rem 1rem; text-align: center; &::before { content: '\e801'; margin-right: .5rem; } & ~ pre { margin-top: 0; }
} pre, pre {
background-color: #f5f2f0; border: 1px solid #CFCFCF; box-sizing: border-box; display: block; margin-bottom: 1.5rem; padding: 0; font-size: .85rem; width: 100%; p + & { margin-top: -.75rem; } & > code[data-language]::before { font-family: 'Open Sans'; letter-spacing: 1px; opacity: 0; padding: 0 .5rem; text-transform: uppercase; transition: all .25s ease-in-out; } &:hover code[data-language]::before { opacity: 1; }
} code {
background-color: #f5f2f0; border: 1px solid #CFCFCF; border-radius: 4px; display: inline-block; font-size: .875rem; margin: 0 .125rem; padding: 0 .25rem; pre > &, pre[class*=language-] > &[data-language] { background-color: transparent; border: none; border-radius: 0; display: block; overflow: visible; padding: 1rem; } pre & a { border: none; &:hover { color: inherit; } } .user-message & { background-color: rgba(#eee,.75); border-color: rgba(#333,.5); color: #333; line-height: 1.25em; }
} button {
background-color: #4a7298; border: 1px solid rgba(0,0,0,.25); box-shadow: inset 0 0 1px 0 rgba(255,255,255,.5); border-radius: 4px; color: #eee; cursor: pointer; line-height: 1rem; margin-bottom: 1.5rem; padding: .75rem 2rem; &[disabled] { background-color: #999; cursor: not-allowed; } &:hover { background-image: linear-gradient(to bottom, rgba(0,0,0,.125) 0%, rgba(0,0,0,0) 50%); }
} .user-message {
background: rgb(102,102,102); /* Old browsers */ background: linear-gradient(135deg, rgba(102,102,102,1) 0%,rgba(85,85,85,1) 100%); /* W3C */ border-radius: 4px; color: #eee; margin-bottom: 1.5rem; padding: .5rem 1rem .5rem 4rem; position: relative; &::before, &::after { content: ''; display: block; position: absolute; left: 0; width: 3rem; } &::after { color: rgba(#333,.75); top: 50%; font-weight: bold; text-align: center; transform: translateY(-50%); } &::before { background-color: rgba(#eee,.5); top: 0; bottom: 0; } &.warning { background: rgb(206,129,57); /* Old browsers */ background: linear-gradient(135deg, rgba(206,129,57,1) 0%,rgba(177,49,49,1) 100%); /* W3C */ color: #eee; &::after { content: '!'; } } &.reminder { background: rgb(249,211,107); /* Old browsers */ background: linear-gradient(135deg, rgba(249,211,107,1) 0%,rgba(234,167,72,1) 100%); /* W3C */ color: #7c541f; &::after { content: '!'; } } &.note { background: rgb(97,149,198); /* Old browsers */ background: linear-gradient(135deg, rgba(97,149,198,1) 0%,rgba(74,114,152,1) 100%); /* W3C */ color: #eee; &::after { content: '\002021'; } } &.approved { background: rgb(103,168,42); /* Old browsers */ background: linear-gradient(135deg, rgba(103,168,42,1) 0%,rgba(70,124,31,1) 100%); /* W3C */ color: #eee; &::after { content: '\002714'; } } & > *:last-child { margin-bottom: 0; } a { color: #eee; } &.reminmder a { color: #7c541f; } /* Responsive messages */ &[data-viewport-threshold] { display: none; }
}
div.user-message { margin: 3rem 0; padding: 1.5rem 3rem 1.5rem 5rem; }
table {
border-collapse: collapse; line-height: 1.5em; margin-bottom: 3rem; position: relative; width: 100%; &.wider { left: -12.5%; width: 125%; } // General cells td, th { border-left: 2px solid #fff; border-right: 2px solid #fff; padding: 1rem; & > *:last-child { margin-bottom: 0; } &:first-child { border-left: none; } &:last-child { border-right: none; } } // Specific table compartment styles thead { font-size: .8rem; font-weight: bold; letter-spacing: 2px; line-height: 1rem; text-transform: uppercase; td, th { border-bottom: 3px solid #ccc; padding: .25rem 1rem; } } tbody { tr { &:nth-child(odd) { background-color: #e6e6e6; } &:last-child { border-bottom: 1px solid #ccc; } &:target { background-color: transparent; th { background-color: #8BA3B0; color: #eee; } td { background-color: rgba(#8BA3B0, .5); } a.anchor { color: #8BA3B0; opacity: 1; } } th { text-align: left; } } } p { margin-bottom: .5rem; } pre { white-space: pre-wrap; word-wrap: break-word; } p + pre, p + pre[class*=language-] { margin-top: .25rem; }
}
/* Main */ main {
margin: 0 16.66667%; section { border-bottom: 1px solid #ccc; margin-bottom: 1.5rem; padding: 1.5rem 0; }
}
/* Cards */ .cards {
display: flex; flex-flow: row wrap; margin: -.25rem; margin-bottom: 1.25rem; overflow: hidden; svg { display: block; margin: 0 auto .75rem; width: 5.25rem; height: 5.25rem; transition: all .125s ease-in-out; & path { fill: #eee; transition: fill .125s ease-in-out; } } & > a { box-sizing: border-box; border: none; border-radius: 4px; color: #eee; flex: 1 auto; margin: .25rem; padding: 1.5rem; text-align: center; text-decoration: none; transition: all .25s ease-in-out; &.card-medium { background-color: #57ad68; flex-basis: 100%; svg { background-color: #eee; path { fill: #57ad68; } } } &.card-github { background-color: #ff9933; flex-basis: auto; } &.card-cdnjs { background-color: #bf3e11; flex-basis: auto; .branding { display: block; font-family: "Ubuntu", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 1px; line-height: 5rem; margin-bottom: .75rem; font-size: 3em; } } .branding { transition: all .25s ease-in-out; } &:hover .branding { @include prefix(transform, scale(1.25), webkit ms); } }
}
/* Three dimensional visualization of Fluidbox */ fluidbox-3d {
margin: 0 0 1.5rem 0; padding: 0; position: relative; perspective: 5000; /* Keep things isometric */ width: 100%; height: 600px; position: relative; * { display: block; transform-style: preserve-3d; } figcaption { font-size: .85rem; position: absolute; bottom: 0; margin-top: .75rem; text-align: center; width: 100%; } .canvas { position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%) rotateX(45deg) rotateZ(45deg); transition: all .5s ease-in-out; } a, .fluidbox__wrap { border: none; } img { display: block; opacity: .5 !important; /* Override required for presentation, do not use in actual production code! */ width: 20rem; transition: all .25s ease-in-out; transform: translate3d(0,0,0); } .fluidbox__ghost, .fluidbox__loader, .fluidbox__overlay { position: absolute; opacity: .5 !important; /* Override required for presentation, do not use in actual production code! */ top: 0 !important; /* Override required for presentation, do not use in actual production code! */ left: 0 !important; /* Override required for presentation, do not use in actual production code! */ transition: all .25s ease-in-out; transition-delay: 0; &::after { background-color: #333; border-radius: 4px; color: #eee; display: block; opacity: 0 !important; pointer-events: none; position: absolute; padding: .5rem 1rem; top: 0; left: 100%; width: 10rem; transform: rotateZ(-45deg) rotateX(-65deg) translate(1rem, -50%) !important; transform-origin: 0% 0%; } &:hover { &::after { opacity: 1 !important; } } } .fluidbox__ghost { background-image: url('http://i.imgur.com/ouqMP4F.jpg'); transform: translate3d(0, 0, 6rem) !important; /* Override required for presentation, do not use in actual production code! */ &::after { content: 'Ghost element will be expanded to fill screen (conditionally, based on available image resolution)'; } } .fluidbox__loader { background-image: url('http://placehold.it/500x500/333333/eeeeee/&text=Loader'); background-size: cover; pointer-events: auto; perspective: none; /* Override required for presentation, do not use in actual production code! */ transform: translate3d(0, 0, 12rem) !important; /* Override required for presentation, do not use in actual production code! */ &::after { content: 'Loader will be hidden when image is loaded in actual scenario'; } &::before { display: none; } } .fluidbox__overlay { background-image: url('http://placehold.it/500x500/cccccc/333333/&text=Overlay'); background-size: cover; opacity: 0 !important; /* Override required for presentation, do not use in actual production code! */ transform: translate3d(0, 0, 3rem) !important; /* Override required for presentation, do not use in actual production code! */ &::after { content: 'Overlay to fade out other elements on page'; } } .fluidbox--opened { .fluidbox__ghost { transform: translate3d(0, 0, 12rem) !important; /* Override required for presentation, do not use in actual production code! */ } .fluidbox__loader { transform: translate3d(0, 0, 18rem) !important; /* Override required for presentation, do not use in actual production code! */ } .fluidbox__overlay { opacity: .5 !important; /* Override required for presentation, do not use in actual production code! */ transform: translate3d(0, 0, 6rem) !important; /* Override required for presentation, do not use in actual production code! */ } } &:hover { @include prefix(perspective, 2000, webkit); .canvas { transform: translate(-50%,-33%) rotateX(65deg) rotateZ(45deg); } img, .fluidbox__ghost, .fluidbox__loader, .fluidbox__overlay { opacity: .25 !important; /* Override required for presentation, do not use in actual production code! */ &:hover { opacity: 1 !important; /* Override required for presentation, do not use in actual production code! */ } } }
}
/* Adjust positioning of images to introduce variety */ .demo {
a { &.fluidbox--closed { background-color: #eee; border: none; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; margin-bottom: 1.5rem; } &.fluidbox--opened { cursor: -webkit-zoom-out; cursor: -moz-zoom-out; } img, picture { display: block; margin: 0 auto; max-width: 100%; } &[class^='float'] { margin: 1rem; margin-top: 0; width: 33.33333%; &.float-left { float: left; margin-left: 0; } &.float-right { float: right; margin-right: 0; } } &.has-border img { border: 4px solid #111; } &.has-padding img { padding: 4px; } } .gallery { display: flex; flex-flow: row wrap; justify-content: space-between; a { margin-bottom: 1rem; &.col-1 { width: 100%; } &.col-2 { width: 49%; width: calc(50% - .5rem); } &.col-3 { width: 32%; width: calc(33.33333% - .66667rem); } } } .box { background-color: #eee; border: 1px solid rgba(0,0,0,.25); box-sizing: border-box; padding-bottom: 66.66667%; position: relative; width: 100%; img { position: absolute; top: 2rem; left: 2rem; width: 50%; } }
}
/* Flexbox */ .cols {
display: flex; flex-flow: row wrap; margin: 0 -1rem 2rem -1rem; & > * { flex-grow: 1; margin-left: 1rem; margin-right: 1rem; } &.cols-nowrap { flex-wrap: nowrap; & > * { flex-grow: 1; margin-bottom: 0 !important; } } @for $i from 1 through 5 { &.cols-#{$i} > * { width: percentage(1/$i); } } figcaption { margin-top: .5rem; }
}
/* Width overrides */ .full-width {
position: relative; left: -25%; width: 150%;
}
/* Code blocks */ .code-block {
margin-bottom: 1.5rem; pre { margin-bottom: 0; }
}
.code-block pre { margin-bottom: 0; }
.token { &.cr, &.lf, &.tab:not(:empty) { &::before { content: ''; } } }
/* Custom events */ custom-events-demo {
& > div:first-child { flex-grow: 0; text-align: center; img { margin-bottom: 1rem; max-height: 30rem; } }
} fluidbox-toggle {
appearance: none; background-color: #fafafa; border: 1px solid #d3d3d3; border-radius: .75rem; box-shadow: inset 0 0 0 1px #d3d3d3; cursor: pointer; outline: none; height: 1.5rem; position: relative; transition: border .25s .15s, box-shadow .25s .3s, padding .25s, opacity .25s; width: 3rem; vertical-align: top; &::after { background-color: #fff; border: 1px solid #d3d3d3; border-radius: 50%; content: ''; display: block; height: calc(1.5rem - 4px); left: 0; position: absolute; right: calc(1.5rem); top: 0; transition: border .25s .15s, left .25s .1s, right .15s .175s; } &:checked { border-color: #53d76a; box-shadow: inset 0 0 0 .75rem #53d76a; padding-left: 1.5rem; transition: border .25s, box-shadow .25s, padding .25s .15s; &::after { border-color: #53d76a; left: calc(1.5rem); right: 0; transition: border .25s, left .15s .25s, right .25s .175s; } } &:disabled { opacity: 0.5; } & + label { color: #666; margin-left: .5rem; }
} custom-events__log {
position: relative; text-align: left; div { border: 1px solid rgba(0,0,0,.125); background-color: #eee; padding: 1rem 2rem; position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow-y: auto; } ul { list-style: none; padding: 0; li { margin-bottom: .5rem; & > span { display: block; } & > .evt { background-color: #999; border-radius: .5em; display: block; float: left; font-size: .75em; margin: .5em .5em 0 0; padding: 0 .5em 0; height: 1em; &.dsc { padding-left: 1.5em; } } &.fluidbox-event-ready, &.fluidbox-event-destroyed, &.fluidbox-event-openend, &.fluidbox-event-closeend { border-bottom: 1px dashed rgba(#555,.25); padding-bottom: .5rem; } &:last-child { border: none; padding-bottom: 0; } } }
} custom-trigger-1-social {
position: fixed; bottom: 2.5%; left: 0; right: 0; opacity: 0; padding: 1rem 0; background-color: rgba(255,255,255,.75); z-index: 1011; text-align: center; transition: all .25s ease-in-out; transform: translateY(100%); &.visible { opacity: 1; transform: translateY(0); } ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; li { padding: 0 1rem; } a { background-color: rgba(0,0,0,.125); border-radius: 4px; border: none; display: inline-block; padding: 0 .5rem; &:hover { background-color: rgba(74,114,152,.75); color: #eee; } } }
}
/* Dynamic image loading button */ loadImg + article {
background-color: #eee; border: 1px solid rgba(0,0,0,.25); box-sizing: border-box; padding: 1rem 2rem;
}
/* Custom overlays */ .fluidbox__overlay {
.overlay-1 & { background-color: rgba(153,145,139,.85); } .overlay-2 & { background-color: transparent; background-image: linear-gradient(to top left, rgba(130,168,158,0.85), rgba(134,150,173,.85)); } .overlay-3 & { background-color: #000; &::before { background-image: url('http://i.imgur.com/3qj1wfN.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: .33333; filter: blur(4px); } }
}
/* Footer */ footer {
p { color: #999; margin: 0; text-align: center; } a { color: #ccc; &:hover { border-bottom-color: #eee; color: #eee; } } svg { display: block; fill: #ccc; width: 2rem; height: 2rem; margin: 0 auto 1rem; }
}
/* Media queries, unrelated to functionality of Fluidbox */ @media only screen and (max-width: 768px) {
header { max-height: 500px; h1 { font-size: 5rem; } } .cards { flex-flow: row wrap; } .demo a[class^='float'] { width: 50%; } .filler { font-size: .75em; } /* Adjust float */ .demo a[class^='float'] { width: 25%; } /* Fluidbox 3D */ #fluidbox-3d { .fluidbox__ghost, .fluidbox__loader, .fluidbox__overlay { &::after { top: 100%; left: 100%; width: 10rem; transform: rotateZ(-45deg) rotateX(-65deg) translate(-50%, -50%) !important; } } } /* Responsive tables */ table, thead, tbody, th, td, tr { display: block; } table { font-size: 1rem; left: 0; line-height: 1.5rem; width: 100%; td, th { border: none; position: relative; padding-left: 35%; &::before { padding: 0 .5rem; position: absolute; left: 0; width: 35%; white-space: nowrap; } } thead { display: none; td { border: none; } } tbody { tr { background-color: transparent !important; margin-bottom: 1rem; th { background-color: #ddd; border-bottom: 2px solid rgba(#000,.1); } td { background-color: rgba(#ddd, .5); border-bottom: 1px solid #fff; &:last-child { border: none; } } th, td { &::before { font-size: .8rem; font-weight: bold; letter-spacing: 2px; line-height: 1.5rem; text-transform: uppercase; } } &:target { th { background-color: #8BA3B0; } td { background-color: rgba(#8BA3B0,.5); } } } } } #markup-details { tbody { td:nth-of-type(1)::before { content: 'Variable'; } td:nth-of-type(2)::before { content: 'Description'; } } } #configuration-options { tbody { th::before { content: 'Property'; } td:nth-of-type(1)::before { content: 'Type'; } td:nth-of-type(2)::before { content: 'Default'; } td:nth-of-type(3)::before { content: 'Description'; } } } .cols { flex-wrap: wrap; & > * { width: 100%; } &.cols-nowrap { flex-wrap: wrap; & > * { margin-bottom: 1rem !important; width: 100%; } } } #custom-events__log { div { position: relative; max-height: 50vh; } }
} @media only screen and (max-width: 600px) {
.user-message { &[data-viewport-threshold="600"] { display: block; } } .demo { .gallery { a { &, &[class^='col'] { margin-bottom: .5rem; width: 100%; } } } a[class^='float'] { float: none; margin: 0 0 1rem 0; width: 100%; } }
} @media only screen and (max-width: 480px) {
html { font-size: 12px; }
}
@supports (backdrop-filter: none) {
header::after { backdrop-filter: blur(10px); } #custom-trigger-1-social { backdrop-filter: blur(10px); }
}