nakome
10/3/2014 - 12:36 AM
A Pen by Moncho Varela.
A Pen by Moncho Varela.
/* =Reset
-----------------------------------------------------------------------------*/
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
::-webkit-scrollbar {
width: 5px;
background: #ECF0F1;
}
::-webkit-scrollbar-thumb {
background: #eee;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
html, body, div, span, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
a:active, a:hover {
outline: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, embed, object, iframe, audio, video, canvas, progress, meter, output, textarea {
display: block;
}
audio:not([controls]) {
display: none;
height: 0;
}
blockquote, q {
quotes: none;
}
blockquote p:before, blockquote p:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
vertical-align: top;
}
thead th, thead td {
font-weight: bold;
vertical-align: bottom;
}
a img, th img, td img {
vertical-align: top;
}
button, input, select, textarea {
margin: 0;
}
textarea {
overflow: auto;
vertical-align: top;
resize: vertical;
}
button {
width: auto;
overflow: visible;
}
input[type="reset"], input[type="submit"], input[type="file"], input[type="radio"], input[type="checkbox"], select, button {
cursor: pointer;
}
input[type="radio"], input[type="checkbox"] {
font-size: 110%;
position: relative;
top: -1px;
margin-right: 3px;
}
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* Normalize horizontal line */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ddd;
}
/* Responsive media */
img, video, audio, embed, object {
max-width: 100%;
}
img, video, embed, object {
height: auto;
}
embed, object {
height: 100%;
}
img {
vertical-align: middle;
-ms-interpolation-mode: bicubic;
}
/* =Typography
-----------------------------------------------------------------------------*/
body {
font-family: font-family: 'Lato', sans-serif;
font-size: 13px;
line-height: 1.65em;
background: #2C3E50;
color: #222222;
}
/* =Links
-----------------------------------------------------------------------------*/
a {
color: #134da5;
}
a:focus, a:hover {
color: #de2c3b;
}
/* =Headings
-----------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;
font-weight: bold;
color: #000000;
text-rendering: optimizeLegibility;
margin: 0 0 .5em 0;
}
h1, .h1, h2, .h2 {
line-height: 1.1;
}
h3, .h3, h4, .h4 {
line-height: 1.3;
}
h1, .h1 {
font-size: 2.25em;
}
h2, .h2 {
font-size: 1.5em;
margin-bottom: .7em;
}
h3, .h3 {
font-size: 1.3125em;
}
h4, .h4 {
font-size: 1.125em;
}
h5, .h5 {
font-size: 1em;
}
h6, .h6 {
font-size: 0.75em;
text-transform: uppercase;
}
/* =Lead
-----------------------------------------------------------------------------*/
.lead {
font-size: 1.3125em;
line-height: 1.5;
margin-bottom: 1.0999999999999999em;
}
/* =Line height and margin
-----------------------------------------------------------------------------*/
p, ul, ol, dl, dd, dt, blockquote, td, th {
line-height: 1.65em;
}
ul, ol, ul ul, ol ol, ul ol, ol ul {
margin: 0 0 0 3.3em;
}
ul li, ol li {
text-align: left;
}
ol ol li {
list-style-type: lower-alpha;
}
ol ol ol li {
list-style-type: lower-roman;
}
p, ul, ol, dl, blockquote, hr, pre, table, form, fieldset, figure, address {
margin-bottom: 1.65em;
}
/* =Blockquote
-----------------------------------------------------------------------------*/
blockquote {
position: relative;
font-style: italic;
font-size: 1.125em;
margin-left: 2.4749999999999996em;
padding-left: 1.65em;
border-left: 2px solid #dddddd;
}
blockquote p {
margin-bottom: .5em;
}
blockquote small, cite {
color: rgba(0, 0, 0, 0.4);
font-style: italic;
}
small, blockquote cite {
font-size: 12.75px;
line-height: 1;
}
/* =Address
-----------------------------------------------------------------------------*/
address {
font-style: normal;
}
/* =Definition list
-----------------------------------------------------------------------------*/
dl dt {
font-weight: bold;
}
dd {
margin-left: 1.65em;
}
/* =Text-level
-----------------------------------------------------------------------------*/
s, del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted #0f0f0f;
cursor: help;
}
strong, b {
font-weight: bold;
}
em, i {
font-style: italic;
}
sub, sup {
font-size: 11.25px;
line-height: 0;
position: relative;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
figcaption {
margin: .3em 0;
font-size: 12.75px;
font-style: italic;
}
ins, u {
text-decoration: underline;
}
mark {
background-color: #ffc800;
color: #0f0f0f;
text-decoration: none;
}
/* =Code
-----------------------------------------------------------------------------*/
pre, code, kbd, samp, var, output {
font-size: 90%;
font-style: normal;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
pre {
margin-top: 1.65em;
font-size: 100%;
line-height: 1.5;
color: #222222;
overflow: auto;
}
code, samp, kbd {
padding: 3px 6px 2px 6px;
display: inline-block;
line-height: 1;
border-radius: 2px;
}
code {
background: #f4f4f4;
border: 1px solid #d4d4d4;
}
pre code {
font-size: 100%;
border: none;
padding: 0;
background: none;
line-height: 1.65em;
}
var {
color: rgba(0, 0, 0, 0.5);
}
samp {
background: #d3e3fb;
border: 1px solid #b2cef8;
}
kbd {
background: #0f0f0f;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
}
/* =Form
-----------------------------------------------------------------------------*/
button:active, button:focus {
outline: none;
}
textarea, select {
font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;
font-size: 1em;
box-shadow: none;
}
textarea, select[multiple], select[multiple="multiple"] {
padding: 0.3em 0.35em;
line-height: 1.35em;
width: 100%;
}
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="phone"], input[type="tel"], input[type="number"], input[type="datetime"], input[type="date"], input[type="month"], input[type="color"], input[type="time"], input[type="search"], input[type="datetime-local"], select {
font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;
font-size: 1em;
box-shadow: none;
padding: 0.3em 0.35em;
line-height: 1.65em;
border-radius: 0;
outline: none;
width: 100%;
}
select[multiple], select[multiple="multiple"], textarea, input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="phone"], input[type="tel"], input[type="number"], input[type="datetime"], input[type="date"], input[type="month"], input[type="color"], input[type="time"], input[type="search"], input[type="datetime-local"], select {
background: #FFFFFF;
border: 1px solid #CCCCCC;
color: #2C3E50;
position: relative;
z-index: 2;
}
textarea[disabled], input[type="text"][disabled], input[type="password"][disabled], input[type="email"][disabled], input[type="url"][disabled], input[type="phone"][disabled], input[type="tel"][disabled], input[type="number"][disabled], input[type="datetime"][disabled], input[type="date"][disabled], input[type="month"][disabled], input[type="color"][disabled], input[type="time"][disabled], input[type="search"][disabled], input[type="datetime-local"][disabled] {
resize: none;
color: rgba(0, 0, 0, 0.5);
}
select[disabled], input[type="checkbox"][disabled], input[type="radio"][disabled] {
cursor: default;
}
input::-moz-focus-inner, button::-moz-focus-inner {
border: 0;
padding: 0;
}
input[type="range"] {
position: relative;
top: 3px;
}
select {
margin-bottom: 0 !important;
width: 100%;
padding: 5px;
}
fieldset {
padding: 1.65em;
margin-bottom: 1.65em;
border: 1px solid #cccccc;
}
fieldset *:last-child {
margin-bottom: 0 !important;
}
legend {
font-weight: bold;
padding: 0 1em;
margin-left: -1em;
}
/* =Tables
-----------------------------------------------------------------------------*/
table {
max-width: 100%;
width: 100%;
empty-cells: show;
}
table caption {
text-transform: uppercase;
padding: 0 1.0999999999999999em;
color: rgba(0, 0, 0, 0.4);
font-size: 12.75px;
}
table th, table td {
border-bottom: 1px solid #eeeeee;
padding: 0.825em 1.0999999999999999em;
}
table tfoot th, table tfoot td {
color: rgba(0, 0, 0, 0.4);
}
/* =Tables
-----------------------------------------------------------------------------*/
table.table-bordered td, table.table-bordered th {
border: 1px solid #eeeeee;
}
table.table-simple td, table.table-simple th, table.table-simple caption {
border: none;
padding-left: 0;
}
table.table-flat td, table.table-flat th, table.table-flat caption {
border: none;
padding: 0;
}
table.table-stroked td, table.table-stroked th {
border-bottom: 1px solid #eeeeee;
}
table.table-stripped tbody tr:nth-child(odd) td {
background: #f8f8f8;
}
table.table-hovered tbody tr:hover td {
background-color: #f4f4f4;
}
/* Responsive Tables */
.table-container {
width: 100%;
overflow: auto;
margin-bottom: 1.65em;
}
.table-container table {
margin-bottom: 0;
}
.table-container::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}
.table-container::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, 0.3);
}
/* =Forms
-----------------------------------------------------------------------------*/
.forms .btn, .forms input[type="submit"].btn, .forms button, .forms input[type="submit"], .forms input[type="reset"] {
padding: 0.3625em 1.3em;
}
.forms .btn-outline {
padding: 0.3em 1.3em;
}
.forms .btn-outline.bold {
padding: 0.2375em 1.3em;
}
.forms label {
display: block;
margin-bottom: 1.0999999999999999em;
font-size: 13px;
color: #34495E;
}
.forms input[type="text"], .forms input[type="password"], .forms input[type="email"], .forms input[type="url"], .forms input[type="phone"], .forms input[type="tel"], .forms input[type="number"], .forms input[type="datetime"], .forms input[type="date"], .forms input[type="month"], .forms input[type="color"], .forms input[type="time"], .forms input[type="search"], .forms input[type="range"], .forms input[type="file"], .forms input[type="datetime-local"], .forms textarea, .forms select {
display: block;
}
.forms-inline input[type="text"], .forms-inline-list input[type="text"], .forms-inline input[type="password"], .forms-inline-list input[type="password"], .forms-inline input[type="email"], .forms-inline-list input[type="email"], .forms-inline input[type="url"], .forms-inline-list input[type="url"], .forms-inline input[type="phone"], .forms-inline-list input[type="phone"], .forms-inline input[type="tel"], .forms-inline-list input[type="tel"], .forms-inline input[type="number"], .forms-inline-list input[type="number"], .forms-inline input[type="datetime"], .forms-inline-list input[type="datetime"], .forms-inline input[type="date"], .forms-inline-list input[type="date"], .forms-inline input[type="month"], .forms-inline-list input[type="month"], .forms-inline input[type="color"], .forms-inline-list input[type="color"], .forms-inline input[type="time"], .forms-inline-list input[type="time"], .forms-inline input[type="search"], .forms-inline-list input[type="search"], .forms-inline input[type="range"], .forms-inline-list input[type="range"], .forms-inline input[type="file"], .forms-inline-list input[type="file"], .forms-inline input[type="datetime-local"], .forms-inline-list input[type="datetime-local"], .forms-inline textarea, .forms-inline-list textarea, .forms-inline select, .forms-inline-list select {
display: inline-block;
}
.forms-list, .forms-inline, .forms-inline-list {
margin: 0;
padding: 0;
margin-bottom: 1.0999999999999999em;
list-style: none;
}
.forms-list label, .forms-inline label, .forms-inline-list li, .forms-inline-list li label {
display: inline-block;
margin-bottom: 0;
}
.forms-inline-list li label {
margin-right: 0.825em;
}
.forms-inline-list li {
margin-bottom: 3px;
}
.forms-list li {
margin-bottom: 6px;
}
.forms-desc {
margin-top: 4px;
color: #E74C3C;
font-size: 12px;
line-height: 1.4em;
}
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="phone"], input[type="tel"], input[type="number"], input[type="datetime"], input[type="date"], input[type="month"], input[type="color"], input[type="time"], input[type="search"], input[type="datetime-local"], textarea {
-moz-transition: border ease 0.5s;
transition: border ease 0.5s;
}
/* States */
.error, .success {
font-weight: normal;
font-size: 12.75px;
}
input.input-error, textarea.input-error, select.input-error, .input-error {
border-color: #de2c3b;
box-shadow: 0 0 0 2px rgba(222, 44, 59, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset;
}
input.input-success, textarea.input-success, select.input-success, .input-success {
border-color: #2c9f42;
box-shadow: 0 0 0 2px rgba(44, 159, 66, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset;
}
input.input-gray, textarea.input-gray, select.input-gray, .input-gray {
border-color: #b3b6b7;
box-shadow: 0 0 0 2px rgba(179, 182, 183, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2) inset;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="phone"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="datetime"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="color"]:focus, input[type="time"]:focus, input[type="search"]:focus, input[type="datetime-local"]:focus, textarea:focus {
outline: none;
border-color: #2575ed;
box-shadow: 0 0 0 2px rgba(37, 117, 237, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset;
}
/*
Search
*/
input.input-search, input[type="search"] {
padding-right: .5em;
padding-left: .5em;
margin-bottom: 0;
border-radius: 15px;
}
input.input-on-black {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.35);
}
input.input-on-black::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.6);
}
input.input-on-black::-moz-placeholder {
color: rgba(255, 255, 255, 0.6);
}
input.input-on-black:focus, input.input-on-black.active {
border: 1px solid #fff;
background: #fff;
box-shadow: none;
}
input.input-on-black:focus::-webkit-input-placeholder, input.input-on-black.active::-webkit-input-placeholder {
color: #aaa;
}
input.input-on-black:focus::-moz-placeholder, input.input-on-black.active::-moz-placeholder {
color: #aaa;
}
/* Sizes */
input.input-big {
font-size: 18px;
}
input.input-small {
font-size: 12.75px;
}
input.input-smaller {
font-size: 11.25px;
}
/* Append & Prepend */
.input-groups {
display: table !important;
}
.input-groups input {
width: 100%;
}
.input-groups input, .input-groups .input-append, .input-groups .input-prepend, .input-groups .btn-append {
display: table-cell !important;
}
.input-groups .btn-append, .input-groups .input-append, .input-groups .input-prepend {
width: 1%;
vertical-align: middle;
}
.input-groups .input-append, .input-groups .input-prepend {
background-color: #f4f4f4;
border: 1px solid #d4d4d4;
margin: 0;
padding: .45em .75em .15em .75em;
color: rgba(0, 0, 0, 0.6);
line-height: 1.65em;
font-size: 12.75px;
white-space: nowrap;
}
.input-groups .input-prepend {
border-right: none;
}
.input-groups .input-append {
position: relative;
z-index: 1;
border-left: none;
}
.input-groups .btn-append .btn {
display: block;
height: auto;
border-radius: 0 2px 2px 0;
}
/* =Navs
-----------------------------------------------------------------------------*/
/* NavBar */
.navbar {
font-size: 105%;
margin-bottom: 1.65em;
}
.navbar:after {
content: "";
display: table;
clear: both;
}
.navbar:after {
content: "";
display: table;
clear: both;
}
.navbar.navbar-left {
float: left;
}
.navbar.navbar-right {
float: right;
}
.navbar ul {
list-style: none;
margin: 0;
}
.navbar ul:after {
content: "";
display: table;
clear: both;
}
.navbar ul:after {
content: "";
display: table;
clear: both;
}
.navbar li {
float: left;
margin-right: 1.65em;
}
.navbar.navbar-right li {
margin-right: 0;
margin-left: 1.65em;
}
.navbar a, .navbar span {
display: block;
text-decoration: none;
}
.navbar a:hover {
color: #de2c3b;
text-decoration: underline;
}
.navbar li.active a, .navbar span {
text-decoration: none;
cursor: text;
color: rgba(0, 0, 0, 0.4);
}
.navigation-toggle {
display: none;
text-transform: uppercase;
position: relative;
color: #0f0f0f;
background-color: #ffffff;
}
.navigation-toggle:after {
position: absolute;
z-index: 1;
top: 50%;
margin-top: -12px;
left: 10px;
content: "\2630";
font-size: 24px;
line-height: 1;
}
.navigation-toggle.navigation-toggle-black {
background-color: #0f0f0f;
color: #ffffff;
}
.navigation-toggle.navigation-toggle-show {
margin-bottom: 1.65em;
}
.navigation-toggle span {
position: relative;
z-index: 2;
cursor: pointer;
display: block;
padding: 10px 20px 10px 40px;
}
.navigation-fixed {
position: fixed;
top: 0;
left: 0;
z-index: 101;
}
/* Pills */
.navbar-pills a, .navbar-pills span {
padding: 0.825em 1.65em;
}
.navbar-pills a:hover {
color: #0f0f0f;
background: #eee;
}
.navbar-pills li.active a, .navbar-pills span {
text-decoration: none;
cursor: text;
color: rgba(0, 0, 0, 0.4);
background: #eee;
}
.navbar-pills li {
margin-right: 1px;
}
.navbar-pills.navbar-right li {
margin-left: 1px;
}
/* Fullwidth */
.fullwidth ul {
width: 100%;
}
.fullwidth li {
float: none !important;
margin: 0;
display: table-cell;
width: 1%;
text-align: center;
}
.fullwidth li a, .fullwidth li span {
display: block;
}
/* Vertical */
.nav {
margin-bottom: 1.65em;
}
.nav ul {
list-style: none;
margin: 0;
}
.nav ul li ul {
margin-left: 2em;
font-size: .95em;
}
.nav a, .nav span {
display: block;
padding: .5em 0;
}
.nav a {
color: #0f0f0f;
text-decoration: none;
}
.nav a:hover {
color: #de2c3b;
text-decoration: underline;
}
.nav li.active a, .nav span {
text-decoration: none;
cursor: text;
color: rgba(0, 0, 0, 0.4);
}
.nav i.fa {
width: 1.65em;
}
/* =Breadcrumbs
-----------------------------------------------------------------------------*/
.breadcrumbs {
margin-bottom: 1.65em;
}
.breadcrumbs:after {
content: "";
display: table;
clear: both;
}
.breadcrumbs:after {
content: "";
display: table;
clear: both;
}
.breadcrumbs ul {
font-size: .9em;
color: rgba(0, 0, 0, 0.4);
list-style: none;
margin: 0;
}
.breadcrumbs ul:after {
content: "";
display: table;
clear: both;
}
.breadcrumbs ul:after {
content: "";
display: table;
clear: both;
}
.breadcrumbs li {
float: left;
margin-right: 5px;
}
.breadcrumbs li + li:before {
content: " > ";
color: #aaa;
font-size: 12px;
margin: 0 7px 0 5px;
position: relative;
top: -1px;
}
.breadcrumbs a {
color: #0f0f0f;
text-decoration: none;
}
.breadcrumbs a:hover {
color: #0f0f0f;
text-decoration: underline;
}
.breadcrumbs li.active a, .breadcrumbs span, .breadcrumbs li.active a:hover {
text-decoration: none;
cursor: text;
color: rgba(0, 0, 0, 0.4);
}
/* =Buttons
-----------------------------------------------------------------------------*/
.btn, input[type="submit"].btn {
display: inline-block;
vertical-align: top;
font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1.65em;
text-align: center;
text-decoration: none;
color: #F7F7F7;
-webkit-appearance: none;
outline: none;
margin: 0;
border: none;
border-radius: 2px;
box-shadow: none;
cursor: pointer;
background: #3498DB;
border: 1px solid #2980B9;
padding: 0.55em 2.5em;
width: 100%;
}
.btn:hover, input[type="submit"].btn:hover {
color: rgba(255, 255, 255, 1);
background: #2980B9;
transition: all 0.5s ease;
}
.btn::-moz-focus-inner {
border: 0;
padding: 0;
}
/* =Helpers
-----------------------------------------------------------------------------*/
.group:after {
content: "";
display: table;
clear: both;
}
.group:after {
content: "";
display: table;
clear: both;
}
.hide {
display: none;
}
.highlight {
background-color: #f7f3e2;
}
.big {
font-size: 18px;
}
.small {
font-size: 12.75px;
}
.smaller {
font-size: 11.25px;
}
.nowrap, .nowrap td {
white-space: nowrap;
}
.req, .required {
font-weight: normal;
color: #de2c3b;
}
.error {
color: #de2c3b;
}
.success {
color: #2c9f42;
}
.text-centered {
text-align: center;
}
.text-right {
text-align: right;
}
.last {
margin-right: 0 !important;
}
.pause {
margin-bottom: 0.825em !important;
}
.end {
margin-bottom: 0 !important;
}
.normal {
font-weight: normal;
}
.light {
font-weight: 300;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.left {
float: left;
}
.right {
float: right;
}
.upper {
text-transform: uppercase;
}
.list-flat {
margin-left: 0;
list-style: none;
}
/* Responsive embedded objects */
.video-wrapper {
height: 0;
padding-bottom: 56.25%;
position: relative;
margin-bottom: 1.65em;
}
.video-wrapper iframe, .video-wrapper object, .video-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* =Typography Responsive
-----------------------------------------------------------------------------*/
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
h1 {
font-size: 2.25em;
line-height: 1.125;
}
h2 {
font-size: 1.5em;
line-height: 1.25;
}
h3 {
font-size: 1.3125em;
line-height: 1.25;
}
h4 {
font-size: 1.125em;
line-height: 1.22222222;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.75em;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
h1 {
font-size: 2.25em;
line-height: 1.25;
}
h2 {
font-size: 1.5em;
line-height: 1.15384615;
}
h3 {
font-size: 1.3125em;
line-height: 1.13636364;
}
h4 {
font-size: 1.125em;
line-height: 1.11111111;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.75em;
}
.lead {
font-size: 1.2em;
}
ul, ol, ul ul, ol ol, ul ol, ol ul {
margin-left: 1.65em;
}
blockquote {
margin-left: 0;
}
}
/* =Forms Responsive
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
.forms-list label {
display: inline-block;
}
}
@media print {
* {
text-shadow: none !important;
color: #000 !important;
background: transparent !important;
box-shadow: none !important;
font-size: 12pt;
}
.h1, h1 {
font-size: 36pt;
}
.h2, h2 {
font-size: 24pt;
}
.h3, h3 {
font-size: 18pt;
}
.h4, h4 {
font-size: 14pt;
}
.h5, h5 {
font-size: 12pt;
}
.h6, h6 {
font-size: 12pt;
}
a, a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href)")";
}
abbr[title]:after {
content: " (" attr(title)")";
}
a[href^="javascript:"]:after, a[href^="#"]:after {
content: "";
}
pre, blockquote {
page-break-inside: avoid;
}
blockquote {
border: none;
font-style: italic;
}
img {
max-width: 100% !important;
}
select {
background: #fff !important;
}
}
.device {
position: relative;
top: 0;
display: block;
width: 335px;
height: 580px;
margin: 0 auto;
}
.device .device-content {
position: absolute;
top: 5px;
left: 5px;
width: 321px;
height: 569px;
overflow: hidden;
font-size: 17px;
line-height: 21px;
background-color: #ECF0F1;
border: 1px solid #21262B;
}
/* Theme */
.header {
position: absolute;
left: 0;
top: 0;
height: 40px;
width: 100%;
background: #2C3E50;
border-bottom: 1px solid #2C3E50;
z-index: 99999;
}
.header-title {
font-size: 21px;
line-height: 40px;
text-align: center;
color: #FDFDFD;
}
.close_event {
position: absolute;
right: 5px;
top: 5px;
padding: 5px;
color: #E56363;
display: inline-block;
font-size: 20px;
}
.close_event a {
color: #FFFFFF;
font-weight: 400;
font-family: sans-serif;
text-decoration: none;
}
.close_event a:hover {
color: #1B1F27;
text-decoration: none;
}
.sections {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 489px;
background: #ECF0F1;
color: #7F8C8D;
overflow: auto;
margin-bottom: 40px;
margin-top: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
.main {
display: block;
padding: 10px;
width: 100%;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
width: 100%;
background: #2C3E50;
border-top: 1px solid #2C3E50;
padding: 0;
margin: 0 auto;
text-align: center;
z-index: 99999;
}
.footer a {
display: inline-block;
color: #FFFFFF;
text-decoration: none;
padding: 2px 10px;
text-align: center;
line-height: 33px;
margin: 0;
margin-top: 1px;
width: 100px;
}
.footer a:hover {
color: #1F2129;
}
/* Home */
.box {
background: #FFF;
border: 1px solid #D8D8D8;
padding: 0;
margin: 10px auto;
}
.box h3 {
display: block;
color: #34495E;
border-bottom: 1px solid #E9E9E9;
margin: 0;
padding: 5px;
text-align: center;
font-size: 18px;
line-height: 30px;
}
.box .datetime {
overflow: hidden;
display: block;
margin: 0;
padding: 5px 10px;
background: #34495E;
color: #FFFFFF;
}
.box .description {
margin: 0;
padding: 5px;
display: block;
background: #FFF;
color: #646464;
border-top: 1px solid #E6E6E6;
min-height: 100px;
}
section#add {
transform: translate(-100%, 0);
transition: transform 0.2s linear;
}
section#update {
transform: translate(-100%, 0);
transition: transform 0.2s linear;
}
section#delete {
transform: translate(100%, 0);
transition: transform 0.2s linear;
}
section.show {
transform: translate(-0%, 0) !important;
transition: transform 0.2s linear;
}
window.addEventListener("load", init, false);
var url = 'http://nakome.com/restfull/',t,
template = [
' <div class="box">',
' <h3>{{ title}}</h3>',
' <div class="datetime">',
' <span class="left">{{ date }}</span>',
' <span class="right">{{ hour }}</span>',
' </div>',
' <div class="description">{{ description }}</div>',
' </div>'
].join('');
function init() {
$('.header').on('click', function() {
var f = $(this).data('open');
$(f).toggle();
});
$('.state').html('<span>Loading..</span>');
_getJson();
t = setInterval(function() {
$('.state').html('<span>Refresh..</span>');
_getJson();
},6000);
_Submit('#form', 'add');
_Submit('#formDelete', 'delete');
_Submit('#formUpdate', 'update');
$('#dataUpid').on('change', function() {
_GetUpdateData();
});
// pages
$('.view').on('click', function(e) {
showView($(this), e);
});
}
function showView(el, e) {
e.preventDefault();
var view = el.data('view');
$(view).addClass('show');
$('.close_event').html('<a href="' + view + '" title="close" onclick="return hideView($(this))">X</span>');
$('.footer').addClass('hide');
clearInterval(t);
}
function hideView(el) {
var front = el.attr('href');
$(front).removeClass('show');
$('.close_event').html('');
$('.footer').removeClass('hide');
}
function _GetUpdateData() {
$.get(url + 'json', function(el) {
var objectId = $('#dataUpid').val(),
_date = $('#formUpdate label [name="date"]'),
_hour = $('#formUpdate label [name="hour"]'),
_title = $('#formUpdate label [name="title"]'),
_description = $('#formUpdate label [name="description"]');
if (objectId !== '0') {
_date.val(el[objectId].date);
_hour.val(el[objectId].hour);
_title.val(el[objectId].title);
_description.val(el[objectId].description);
} else {
_date.val(' ');
_hour.val(' ');
_title.val(' ');
_description.val(' ');
}
});
}
function _Submit(id, option) {
$(id).submit(function(e) {
e.preventDefault();
var data = $(id).serialize();
$.post(url + option, data, _Response(e));
this.reset();
});
}
function _Response(e) {
$('.state').html('<span>Success..</span>');
var t = setTimeout(function() {
$('.state').html('<span>Refresh..</span>');
_getJson();
clearTimeout(t);
}, 1000);
}
function _getJson() {
$.get(url + 'json', function(el) {
if (el.length === 0) {
$('#dataDelid').html('');
$('#dataUpid').html('');
$('.result').html('');
return $('.state').html('<span>Nothing in database..</span>');
} else {
return _Request(el);
}
});
}
function _Request(elements) {
var options = '<option value="0"> - Select id - </option>',
html = '';
render = tmpl(template);
$.each(elements, function(index, item) {
html += render(item);
options += '<option value="' + index + '">' + item.title + '</option>';
});
$('.result').html(html);
$('#dataDelid').html(options);
$('#dataUpid').html(options);
$('.state').html('<span>Events Book</span>');
}
//------------------------------------
// var template = {{ title }}
// var render = tmpl(template);
// $('#foo').html(render(data[i]));
//------------------------------------
function tmpl(t) {
var c = 'with(o){return \'' + t.replace(/{{\s*(.+?)\s*}}/g, '\'+($1)+\'') + '\';}';
return new Function('o', c);
}
<!-- device -->
<div class="device">
<div class="device-content">
<header class="header">
<span class="close_event"></span>
<h1 class="header-title state">Home</h1>
</header>
<!-- ::::::::: HOME ::::::::: -->
<section id="home" class="sections">
<div class="main">
<div class="result"></div>
</div><!-- /.content -->
</section>
<!-- ::::::::: ADD ::::::::: -->
<section id="add" class="sections">
<div class="main">
<span data-open="#form"></span>
<form id="form" action="" method="post" class="forms">
<label>
Date <span class="forms-desc">Select date.</span>
<input type="date" name="date" placeholder="Date" required>
</label>
<label>
Hour <span class="forms-desc">Select hour.</span>
<input type="time" name="hour" placeholder="Hour" required>
</label>
<label>
Title <span class="forms-desc">Write the title.</span>
<input type="text" name="title" placeholder="Title" required>
</label>
<label>
Description <span class="forms-desc">Write the description.</span>
<textarea type="text" name="description" rows="5" placeholder="Description" required></textarea>
Allow tags <span class="forms-desc">( p,b,br,ul,ol ).</span>
</label>
<p>
<input type="submit" name="send" id="send" class="btn" value="Save Event"/>
</p>
</form>
</div><!-- /.content -->
</section>
<!-- ::::::::: UPDATE ::::::::: -->
<section id="update" class="sections">
<div class="main">
<span data-open="#formUpdate"></span>
<form id="formUpdate" action="" method="post" class="forms">
<label>
Select id: <span class="forms-desc">Select id to update.</span>
<select class="btn-block" name="id" id="dataUpid"></select>
</label>
<label>
Date <span class="forms-desc">Select date.</span>
<input type="date" name="date" placeholder="Date" required>
</label>
<label>
Hour <span class="forms-desc">Select hour.</span>
<input type="time" name="hour" placeholder="Hour" required>
</label>
<label>
Title <span class="forms-desc">Write the title.</span>
<input type="text" name="title" placeholder="Title" required>
</label>
<label>
Description <span class="forms-desc">Write the description.</span>
<textarea type="text" name="description" rows="5" placeholder="Description" required></textarea>
Allow tags <span class="forms-desc"> ( p,b,br,ul,ol ).</span>
</label>
<p>
<input type="submit" name="send" id="send" class="btn" value="Save Event"/>
</p>
</form>
</div><!-- /.content -->
</section>
<!-- ::::::::: DELETE ::::::::: -->
<section id="delete" class="sections">
<div id="delete" class="main">
<span data-open="#formDelete"></span>
<form id="formDelete" action="" method="post" class="forms">
<label>
Select id: <span class="forms-desc">Select id to delete</span>
<select class="btn-block" name="id" id="dataDelid"></select>
</label>
<p>
<input type="submit" id="sendDelete" class="btn btn-block btn-outlined" />
</p>
</form>
</div><!-- /.content -->
</section>
<footer class="footer">
<a href="#" class="view" data-view="#add">Add</a>
<a href="#" class="view" data-view="#update">Update</a>
<a href="#" class="view" data-view="#delete">Delete</a>
</footer>
</div><!-- device content -->
</div><!-- device -->
Testing Restfull app
Project https://github.com/nakome/restfull.git
A Pen by Moncho Varela on CodePen.