|
|
@@ -1,35 +1,270 @@
|
|
|
-body{height:100%;}
|
|
|
-section{position:absolute;position:fixed;width:100%;height:inherit;z-index:0;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(100%, 0, 0);-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);-webkit-transition:-webkit-transform 0.3s ease-in-out;}
|
|
|
-section:first-child{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
|
|
|
-section.hide{z-index:0;-webkit-transform:translate3d(-100%, 0, 0);-moz-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0);-o-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
|
|
|
-section.show{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
|
|
|
-section.static.hide{-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
|
|
|
-section.popup{-webkit-transform:translate3d(0, 100%, 0);-moz-transform:translate3d(0, 100%, 0);-ms-transform:translate3d(0, 100%, 0);-o-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);}
|
|
|
-section.popup.show{-webkit-transform:translate3d(0, 0%, 0);-moz-transform:translate3d(0, 0%, 0);-ms-transform:translate3d(0, 0%, 0);-o-transform:translate3d(0, 0%, 0);transform:translate3d(0, 0%, 0);}
|
|
|
-section.popup.hide{-webkit-transform:translate3d(0, -100%, 0);-moz-transform:translate3d(0, -100%, 0);-ms-transform:translate3d(0, -100%, 0);-o-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);}
|
|
|
-header,footer{position:absolute;left:0px;width:100%;height:40px;display:block;z-index:2;line-height:40px;}
|
|
|
-header{top:0px;}
|
|
|
-footer{bottom:0px;}
|
|
|
-header .title,footer .title{float:left;margin:0 8px;font-size:1.3em;}
|
|
|
-header .title{position:absolute;left:0px;width:100%;margin:0px auto;text-align:center;z-index:-1;}
|
|
|
-section header a.button,section footer a.button{margin:4px 3px auto;}
|
|
|
-section header a.button.icon,section footer a.button.icon{width:17px;font-size:1.5em;font-weight:normal;}
|
|
|
-nav{height:inherit;text-align:center;font-weight:normal;}
|
|
|
-nav a{display:inline-block;padding:0 6px;height:inherit;float:left;font-size:2.0em;}
|
|
|
-nav a abbr{position:relative;bottom:3px;margin-left:2px;display:none;font-size:0.5em;font-weight:bold;}
|
|
|
-nav a.current abbr{display:inline;}
|
|
|
-nav a.current{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
|
|
|
-aside{position:absolute;top:0px;bottom:0px;height:auto;width:0px;}
|
|
|
-aside.show{width:256px;}
|
|
|
-header~aside{padding-top:40px;}
|
|
|
-footer~aside{padding-bottom:40px;}
|
|
|
-aside~article{-webkit-transition:left 0.3s ease-in-out;left:0px;}
|
|
|
-aside a{display:block;width:244px;height:40px;padding:0 6px;font-size:1.1em;font-weight:bold;line-height:40px;}
|
|
|
-aside a .icon{width:28px;height:28px;float:left;margin:8px 6px 0 0;font-size:1.9em;line-height:1.0em;text-align:center;}
|
|
|
-@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{width:256px;} aside~article{left:256px;}}article{position:absolute;width:100%;height:auto;top:0px;bottom:0px;display:block;z-index:0;opacity:0;}
|
|
|
-header~article{top:40px;}
|
|
|
-footer~article{bottom:40px;}
|
|
|
-article.current{z-index:1;opacity:1;}
|
|
|
-.toolbar{height:48px;line-height:44px;display:block;}
|
|
|
-.toolbar a{float:left;padding:0;font-size:2.0em;}
|
|
|
-article.aside{left:256px !important;}
|
|
|
+/**
|
|
|
+ * Stylesheet
|
|
|
+ *
|
|
|
+ * @namespace LUNGO
|
|
|
+ * @class Layout
|
|
|
+ *
|
|
|
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
|
|
|
+ */
|
|
|
+/* @group <section> */
|
|
|
+body {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+section {
|
|
|
+ position: absolute;
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: inherit;
|
|
|
+ z-index: 0;
|
|
|
+ -webkit-backface-visibility: hidden;
|
|
|
+ -webkit-transform: translate3d(100%, 0, 0);
|
|
|
+ -moz-transform: translate3d(100%, 0, 0);
|
|
|
+ -ms-transform: translate3d(100%, 0, 0);
|
|
|
+ -o-transform: translate3d(100%, 0, 0);
|
|
|
+ transform: translate3d(100%, 0, 0);
|
|
|
+ -webkit-transition: -webkit-transform 0.3s ease-in-out;
|
|
|
+}
|
|
|
+section:first-child {
|
|
|
+ z-index: 1;
|
|
|
+ -webkit-transform: translate3d(0%, 0, 0);
|
|
|
+ -moz-transform: translate3d(0%, 0, 0);
|
|
|
+ -ms-transform: translate3d(0%, 0, 0);
|
|
|
+ -o-transform: translate3d(0%, 0, 0);
|
|
|
+ transform: translate3d(0%, 0, 0);
|
|
|
+}
|
|
|
+section.hide {
|
|
|
+ z-index: 0;
|
|
|
+ -webkit-transform: translate3d(-100%, 0, 0);
|
|
|
+ -moz-transform: translate3d(-100%, 0, 0);
|
|
|
+ -ms-transform: translate3d(-100%, 0, 0);
|
|
|
+ -o-transform: translate3d(-100%, 0, 0);
|
|
|
+ transform: translate3d(-100%, 0, 0);
|
|
|
+}
|
|
|
+section.show {
|
|
|
+ z-index: 1;
|
|
|
+ -webkit-transform: translate3d(0%, 0, 0);
|
|
|
+ -moz-transform: translate3d(0%, 0, 0);
|
|
|
+ -ms-transform: translate3d(0%, 0, 0);
|
|
|
+ -o-transform: translate3d(0%, 0, 0);
|
|
|
+ transform: translate3d(0%, 0, 0);
|
|
|
+}
|
|
|
+section.static.hide {
|
|
|
+ -webkit-transform: translate3d(0%, 0, 0);
|
|
|
+ -moz-transform: translate3d(0%, 0, 0);
|
|
|
+ -ms-transform: translate3d(0%, 0, 0);
|
|
|
+ -o-transform: translate3d(0%, 0, 0);
|
|
|
+ transform: translate3d(0%, 0, 0);
|
|
|
+}
|
|
|
+section.popup {
|
|
|
+ -webkit-transform: translate3d(0, 100%, 0);
|
|
|
+ -moz-transform: translate3d(0, 100%, 0);
|
|
|
+ -ms-transform: translate3d(0, 100%, 0);
|
|
|
+ -o-transform: translate3d(0, 100%, 0);
|
|
|
+ transform: translate3d(0, 100%, 0);
|
|
|
+}
|
|
|
+section.popup.show {
|
|
|
+ -webkit-transform: translate3d(0, 0%, 0);
|
|
|
+ -moz-transform: translate3d(0, 0%, 0);
|
|
|
+ -ms-transform: translate3d(0, 0%, 0);
|
|
|
+ -o-transform: translate3d(0, 0%, 0);
|
|
|
+ transform: translate3d(0, 0%, 0);
|
|
|
+}
|
|
|
+section.popup.hide {
|
|
|
+ -webkit-transform: translate3d(0, -100%, 0);
|
|
|
+ -moz-transform: translate3d(0, -100%, 0);
|
|
|
+ -ms-transform: translate3d(0, -100%, 0);
|
|
|
+ -o-transform: translate3d(0, -100%, 0);
|
|
|
+ transform: translate3d(0, -100%, 0);
|
|
|
+}
|
|
|
+/* @end */
|
|
|
+/* @group <header> & <footer> */
|
|
|
+header, footer {
|
|
|
+ position: absolute;
|
|
|
+ left: 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ display: block;
|
|
|
+ z-index: 2;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+header {
|
|
|
+ top: 0px;
|
|
|
+}
|
|
|
+footer {
|
|
|
+ bottom: 0px;
|
|
|
+}
|
|
|
+header .title, footer .title {
|
|
|
+ float: left;
|
|
|
+ margin: 0 8px;
|
|
|
+ font-size: 1.3em;
|
|
|
+}
|
|
|
+header .title {
|
|
|
+ position: absolute;
|
|
|
+ left: 0px;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0px auto;
|
|
|
+ text-align: center;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+section header a.button, section footer a.button {
|
|
|
+ margin: 4px 3px auto;
|
|
|
+}
|
|
|
+section header a.button.icon, section footer a.button.icon {
|
|
|
+ width: 17px;
|
|
|
+ font-size: 1.5em;
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+/* @end */
|
|
|
+/* @group <nav> */
|
|
|
+nav {
|
|
|
+ height: inherit;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+nav a {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 6px;
|
|
|
+ height: inherit;
|
|
|
+ float: left;
|
|
|
+ font-size: 2.0em;
|
|
|
+}
|
|
|
+nav a abbr {
|
|
|
+ position: relative;
|
|
|
+ bottom: 3px;
|
|
|
+ margin-left: 2px;
|
|
|
+ display: none;
|
|
|
+ font-size: 0.5em;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+nav a.current abbr {
|
|
|
+ display: inline;
|
|
|
+}
|
|
|
+nav a.current {
|
|
|
+ -webkit-transition: all 0.3s ease-in-out;
|
|
|
+ -moz-transition: all 0.3s ease-in-out;
|
|
|
+ -ms-transition: all 0.3s ease-in-out;
|
|
|
+ -o-transition: all 0.3s ease-in-out;
|
|
|
+ transition: all 0.3s ease-in-out;
|
|
|
+}
|
|
|
+/* @end */
|
|
|
+/* @group <aside> */
|
|
|
+aside {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ bottom: 0px;
|
|
|
+ height: auto;
|
|
|
+ width: 0px;
|
|
|
+}
|
|
|
+aside.show {
|
|
|
+ width: 256px;
|
|
|
+}
|
|
|
+header ~ aside {
|
|
|
+ padding-top: 40px;
|
|
|
+}
|
|
|
+footer ~ aside {
|
|
|
+ padding-bottom: 40px;
|
|
|
+}
|
|
|
+aside ~ article {
|
|
|
+ -webkit-transition: left 0.3s ease-in-out;
|
|
|
+ left: 0px;
|
|
|
+}
|
|
|
+aside a {
|
|
|
+ display: block;
|
|
|
+ width: 244px;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 6px;
|
|
|
+ font-size: 1.1em;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+aside a .icon {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ float: left;
|
|
|
+ margin: 8px 6px 0 0;
|
|
|
+ font-size: 1.9em;
|
|
|
+ line-height: 1.0em;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+@media handheld, only screen and (min-width: 768px) {
|
|
|
+ [data-target="aside"] {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+ aside {
|
|
|
+ width: 256px;
|
|
|
+ }
|
|
|
+ aside ~ article {
|
|
|
+ left: 256px;
|
|
|
+ }
|
|
|
+}
|
|
|
+/* @end */
|
|
|
+/* @group <article> */
|
|
|
+article {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ top: 0px;
|
|
|
+ bottom: 0px;
|
|
|
+ display: block;
|
|
|
+ z-index: 0;
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+header ~ article {
|
|
|
+ top: 40px;
|
|
|
+}
|
|
|
+footer ~ article {
|
|
|
+ bottom: 40px;
|
|
|
+}
|
|
|
+article.current {
|
|
|
+ z-index: 1;
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+article.aside {
|
|
|
+ left: 256px !important;
|
|
|
+}
|
|
|
+article.indented {
|
|
|
+ background-color: #e2e2e2;
|
|
|
+}
|
|
|
+.indented ul, .indented form {
|
|
|
+ margin: 10px;
|
|
|
+ -webkit-border-radius: 4px;
|
|
|
+ -moz-border-radius: 4px;
|
|
|
+ border-radius: 4px;
|
|
|
+ -webkit-background-clip: padding-box;
|
|
|
+ -moz-background-clip: padding;
|
|
|
+ background-clip: padding-box;
|
|
|
+ border: 1px solid #c5c5c5;
|
|
|
+ box-shadow: 0px 0px 8px #ccc;
|
|
|
+}
|
|
|
+.indented li:first-child {
|
|
|
+ border-top-left-radius: 4px;
|
|
|
+ border-top-right-radius: 4px;
|
|
|
+}
|
|
|
+.indented li:last-child {
|
|
|
+ border-bottom-left-radius: 4px;
|
|
|
+ border-bottom-right-radius: 4px;
|
|
|
+}
|
|
|
+.list .contrasted {
|
|
|
+ background-color: #f4f4f4 !important;
|
|
|
+ box-shadow: inset 0px 1px 0px #fff;
|
|
|
+}
|
|
|
+.list .toolbar a {
|
|
|
+ box-shadow: 1px 0px 0px #d9d9d9 ;
|
|
|
+}
|
|
|
+.list .toolbar a:last-child {
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+.list .toolbar a.current {
|
|
|
+ color: #419ad9;
|
|
|
+}
|
|
|
+/* @end */
|
|
|
+.toolbar {
|
|
|
+ height: 48px;
|
|
|
+ line-height: 44px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.toolbar a {
|
|
|
+ float: left;
|
|
|
+ padding: 0;
|
|
|
+ font-size: 2.0em;
|
|
|
+}
|
@soyjavi