You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ro...@apache.org on 2014/10/15 14:28:00 UTC
fauxton commit: updated refs/heads/master to b74df89
Repository: couchdb-fauxton
Updated Branches:
refs/heads/master aea1a338a -> b74df8929
Move parts of fauxton.less to templates.less
Fauxton.less is pretty hot code when you look at the commit
frequency. This commit just moves the parts of todays
fauxton.less to the new templates.less file to avoid a
long living branch with endless merge commits. This way
my colleagues can already use the new templates.less file
and have the advantage of a small separate template.less file
as soon as possible.
Based on the work of Jenn Schiffer <je...@pancaketheorem.com>
(@jennschiffer) and Sue Lockwood <de...@apache.org>
(@deathbearbrown)
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/b74df892
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/b74df892
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/b74df892
Branch: refs/heads/master
Commit: b74df8929077192d9a3715f7c3d4f654e51e2938
Parents: aea1a33
Author: Robert Kowalski <ro...@apache.org>
Authored: Wed Oct 15 14:03:50 2014 +0200
Committer: Robert Kowalski <ro...@apache.org>
Committed: Wed Oct 15 14:14:43 2014 +0200
----------------------------------------------------------------------
assets/less/fauxton.less | 391 +----------------------------------
assets/less/templates.less | 446 ++++++++++++++++++++++++++++++++++++++++
2 files changed, 448 insertions(+), 389 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b74df892/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index a60dca9..68109af 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -20,8 +20,9 @@
@import "bootstrap/bootstrap.less";
@import "bootstrap/mixins.less";
@import "prettyprint.less";
-@import "pagination.less";
@import "icons.less";
+@import "templates.less";
+@import "pagination.less";
/**
* HTML-wide overrides
@@ -297,298 +298,6 @@ table.databases {
}
}
-/* ajax loader */
-.loader {
- background: url('../img/loader.gif') center center no-repeat;
- min-height: 100px;
-}
-
-#global-notifications {
- position: fixed;
- top: 0px;
- display: block;
- z-index: 100000;
- left: @navWidth;
- .closeMenu & {
- left: @collapsedNavWidth;
- }
- width: 100%;
-}
-
-/*container where the layout is injected*/
-#app-container{
- padding: 0;
- height: 100%;
- width: 100%;
- position: absolute;
- top: 0;
- left: 0;
- > .row-fluid {
- height: 100%;
- }
- &.loader{
- min-height: 400px;
- > *{
- display: none;
- }
- }
-}
-
-@media screen and ( max-height: 600px ){
- #primary-navbar{
- overflow-y: scroll;
- }
-}
-
-@media screen and ( min-height: 600px ){
- #primary-navbar{
- overflow-y: hidden;
- }
-}
-
-/* Fixed side navigation */
-#primary-navbar {
- height: 100%;
- position: fixed;
- width: @navWidth;
- top: 0;
- bottom: 0;
- background-color: @primaryNav;
- .js-version {
- color: #fff;
- font-size: 10px;
- padding-left: 10px;
- }
- .closeMenu & {
- .js-version {
- display: none;
- }
- }
- #user-create-admin{
- font-size: 12px
- }
- .navbar {
- .burger{
- .transition(all @transitionSpeed @transitionEaseType);
- padding: 22px 0 0 18px;
- position: fixed;
- z-index: 100;
- width: 64px;
- top: 0;
- background-color: @primaryNav;
- width: @navWidth;
- div{
- .transition(all @transitionSpeed @transitionEaseType);
- height: 4px;
- width: 24px;
- .border-radius(2);
- background-color: @navBG;
- margin: 2px 0px;
- }
- &:hover div{
- background-color: @navBGHover;
- }
- }
- .bottom-container {
- position: fixed;
- bottom: 0;
- width: 220px;
- background: #3a2c2b;
- .brand {
- .box-sizing(content-box);
- .hide-text;
- .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985);
- margin: 10px 0 0 0;
- width: 200px;
- height: 40px;
- padding: 10px;
- float: none;
- background: #3a2c2b;
- .icon {
- .box-sizing(content-box);
- background: url(../img/couchdb-site.png) no-repeat 0 0;
- display: block;
- height: 100%;
- width: 100%;
- }
- .closeMenu & {
- .icon {
- background: url(../img/minilogo.png) no-repeat 0 0;
- }
- width: 45px;
- }
- }
- #footer-nav-links {
- width: 100%;
- margin: 0;
- li {
- a {
- font-size: 12px;
- color: @linkColor;
- padding: 0 0 10px 10px;
- text-shadow: none;
- }
- &.active, &:hover{
- a {
- text-decoration: underline;
- }
- }
- }
- }
- }
- nav {
- margin-top: 64px;
- .nav{
- margin: 0;
- li{
- .transition(all @transitionSpeed @transitionEaseType);
- padding: 0;
- font-size: 16px;
- letter-spacing: 1px;
- line-height: 23px;
- width: @navWidth;
- font-weight: normal;
- font-family: helvetica;
- .box-sizing(border-box);
- background-color: @navBG;
- border-bottom: 1px solid @primaryNav;
- min-height: 48px;
- &.active, &:hover{
- a{
- .box-shadow(none);
- }
- background-color: @navBGHover;
- }
- &:hover .fonticon:before{
- color: @white;
- }
- &.active .fonticon:before,
- &:hover .fonticon:before,
- {
- text-shadow: @boxShadow;
- color: @NavIconActive;
- }
- a{
- padding: 12px 25px 12px 60px;
- background-color: transparent;
- color: #fff;
- text-shadow: @textShadowOff;
- &.closeMenu{
- color: transparent;
- }
- .fonticon {
- position: relative;
- &:before {
- position: absolute;
- top: -5px;
- left: -41px;
- font-size: 24px;
- color: @NavIcon;
- text-shadow: @boxShadowOff;
- }
- }
- .closeMenu &{
- color: transparent;
- }
- }
- }
- }
- ul#footer-nav-links{
- li{
- background-color: @primaryNav;
- border-top: 1px solid @linkColor;
- border-bottom: none;
- &.active, &:hover{
- background-color: @navBGHover;
- border-top: 1px solid @linkColor;
- a{
- color: white;
- }
- }
- a{
- color: @linkColor;
- }
- }
-
- }
- ul#bottom-nav-links{
- margin-top: 0;
- padding-bottom: 70px;
- li{
- min-height: 55px;
- background-color: @bottomNav;
- &.active{
- background-color:@navBGHover;
- }
- &:hover{
- background-color: @navBGHover;
- }
- a{
- &.fonticon {
- position: relative;
- &:before {
- top: -5px;
- left: -40px;
- font-size: 22px;
- }
- }
- }
- }
- }
- }
- }
-}
-
-
-
-/*
-
-FIXED HEADER, DASHBOARD & BREADCRUMBS:
-
-one_pane.html
-two_pane.html
-with_sidebar.html
-with_tabs.html
-with_tabs_sidebar.html
- */
-#dashboard {
- .left-shadow-border;
- position: absolute;
- left: @navWidth;
- margin-left: 0;
- padding-left: 0;
- padding-right: 0;
- background-color: @sidebarBG;
- min-width: 600px;
- height: 100%;
- .closeMenu &{
- left: @collapsedNavWidth;
- }
- &.one-pane{
- min-width: 800px;
- margin-top: 0;
- overflow-x: hidden;
- }
- &.two-pane{
- margin-top: 0;
- overflow-x: hidden;
- }
-}
-
-
-.with-sidebar.content-area {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-
-.row-fluid.content-area{
- background-color: @background;
-}
-
-
.fixed-header{
background-color: @breadcrumbBG;
position: fixed;
@@ -609,30 +318,6 @@ with_tabs_sidebar.html
}
}
-/*SIDEBAR TEMPLATE STYLES*/
-.topmenu-defaults {
- height: 70px;
- padding: 12px 10px 0;
- .box-sizing(border-box);
-}
-
-.dashboard-upper-menu{
- right: 0;
- left: @sidebarWidth+@navWidth;
- position: fixed;
- z-index: 11;
- display: block;
- .topmenu-defaults;
- background-color: #CBCBCB;
- .closeMenu & {
- left: @sidebarWidth+@collapsedNavWidth;
- }
-}
-
-#dashboard-lower-content{
- padding: 20px;
- background-color: #F1F1F1;
-}
#dashboard-upper-content{
.tab-content {
@@ -992,79 +677,7 @@ REUSEABLE SHADOW BORDER
.box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
}
-
-#right-content,
-#dashboard-lower-content{
- .view {
- //background-color:#A8A1A1;
- }
-}
-
-#dashboard-content{
- padding-left: 15px;
- padding-top: 20px;
-
- &.row-fluid,
- &.window-resizeable{
- /*remove gutter without rewriting variable*/
- margin-left: 0px;
- }
- .one-pane &{
- //margin-top:60px;
- padding-bottom:25px;
- }
- .with-sidebar &{
- .left-shadow-border;
- border-right: 1px solid #999;
- width: auto;
- padding: 0px;
- bottom: 0px;
- top: 60px;
- position: fixed;
- overflow-x: hidden;
- overflow-y: auto;
- left: @sidebarWidth+@navWidth;
- right: 0;
- .box-sizing(border-box);
- .closeMenu & {
- left: @sidebarWidth+@collapsedNavWidth;
- }
- }
- > div.inner {
- display: block;
- }
-}
-
-#global-notifications{
- .with-sidebar & {
- left: @sidebarWidth+@navWidth;
- .closeMenu & {
- left: @sidebarWidth+@collapsedNavWidth;
- }
- }
-}
-
-#right-content{
- .two-pane &{
- .view {
- padding: 0 20px 40px;
- }
- border-left: 1px solid #999;
- .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
- }
-}
-
//---header--//
-.left-shadow-border{
- border-left: 1px solid #999;
- .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
-}
-
-.bottom-shadow-border{
- border-bottom: 1px solid #999;
- .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
-}
-
.fixed-header{
height: 60px;
background-color: @breadcrumbBG;
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b74df892/assets/less/templates.less
----------------------------------------------------------------------
diff --git a/assets/less/templates.less b/assets/less/templates.less
new file mode 100644
index 0000000..12a1fdd
--- /dev/null
+++ b/assets/less/templates.less
@@ -0,0 +1,446 @@
+/* Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+ @import "variables.less";
+
+/* ajax loader */
+.loader {
+ background: url('../img/loader.gif') center center no-repeat;
+ min-height: 100px;
+}
+
+#global-notifications {
+ position: fixed;
+ top: 0px;
+ display: block;
+ z-index: 100000;
+ left: @navWidth;
+ .closeMenu & {
+ left: @collapsedNavWidth;
+ }
+ width: 100%;
+}
+
+/*container where the layout is injected*/
+#app-container {
+ padding: 0;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ > .row-fluid {
+ height: 100%;
+ }
+ &.loader {
+ min-height: 400px;
+ > *{
+ display: none;
+ }
+ }
+}
+
+@media screen and (max-height: 600px) {
+ #primary-navbar {
+ overflow-y: scroll;
+ }
+}
+
+@media screen and ( min-height: 600px ){
+ #primary-navbar {
+ overflow-y: hidden;
+ }
+}
+
+/* Fixed side navigation */
+#primary-navbar {
+ height: 100%;
+ position: fixed;
+ width: @navWidth;
+ top: 0;
+ bottom: 0;
+ background-color: @primaryNav;
+ .js-version {
+ color: #fff;
+ font-size: 10px;
+ padding-left: 10px;
+ }
+ .closeMenu & {
+ .js-version {
+ display: none;
+ }
+ }
+ #user-create-admin {
+ font-size: 12px
+ }
+ .navbar {
+ .burger {
+ .transition(all @transitionSpeed @transitionEaseType);
+ padding: 22px 0 0 18px;
+ position: fixed;
+ z-index: 100;
+ width: 64px;
+ top: 0;
+ background-color: @primaryNav;
+ width: @navWidth;
+ div {
+ .transition(all @transitionSpeed @transitionEaseType);
+ height: 4px;
+ width: 24px;
+ .border-radius(2);
+ background-color: @navBG;
+ margin: 2px 0px;
+ }
+ &:hover div {
+ background-color: @navBGHover;
+ }
+ }
+ .bottom-container {
+ position: fixed;
+ bottom: 0;
+ width: 220px;
+ background: #3a2c2b;
+ .brand {
+ .box-sizing(content-box);
+ .hide-text;
+ .customTransition(left, 1s, 0.805, 0.005, 0.165, 0.985);
+ margin: 10px 0 0 0;
+ width: 200px;
+ height: 40px;
+ padding: 10px;
+ float: none;
+ background: #3a2c2b;
+ .icon {
+ .box-sizing(content-box);
+ background: url(../img/couchdb-site.png) no-repeat 0 0;
+ display: block;
+ height: 100%;
+ width: 100%;
+ }
+ .closeMenu & {
+ .icon {
+ background: url(../img/minilogo.png) no-repeat 0 0;
+ }
+ width: 45px;
+ }
+ }
+ #footer-nav-links {
+ width: 100%;
+ margin: 0;
+ li {
+ a {
+ font-size: 12px;
+ color: @linkColor;
+ padding: 0 0 10px 10px;
+ text-shadow: none;
+ }
+ &.active, &:hover {
+ a {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ }
+ nav {
+ margin-top: 64px;
+ .nav {
+ margin: 0;
+ li {
+ .transition(all @transitionSpeed @transitionEaseType);
+ padding: 0;
+ font-size: 16px;
+ letter-spacing: 1px;
+ line-height: 23px;
+ width: @navWidth;
+ font-weight: normal;
+ font-family: helvetica;
+ .box-sizing(border-box);
+ background-color: @navBG;
+ border-bottom: 1px solid @primaryNav;
+ min-height: 48px;
+ &.active, &:hover {
+ a {
+ .box-shadow(none);
+ }
+ background-color: @navBGHover;
+ }
+ &:hover .fonticon:before {
+ color: @white;
+ }
+ &.active .fonticon:before,
+ &:hover .fonticon:before,
+ {
+ text-shadow: @boxShadow;
+ color: @NavIconActive;
+ }
+ a {
+ padding: 12px 25px 12px 60px;
+ background-color: transparent;
+ color: #fff;
+ text-shadow: @textShadowOff;
+ &.closeMenu {
+ color: transparent;
+ }
+ .fonticon {
+ position: relative;
+ &:before {
+ position: absolute;
+ top: -5px;
+ left: -41px;
+ font-size: 24px;
+ color: @NavIcon;
+ text-shadow: @boxShadowOff;
+ }
+ }
+ .closeMenu & {
+ color: transparent;
+ }
+ }
+ }
+ }
+ ul#footer-nav-links {
+ li {
+ background-color: @primaryNav;
+ border-top: 1px solid @linkColor;
+ border-bottom: none;
+ &.active, &:hover {
+ background-color: @navBGHover;
+ border-top: 1px solid @linkColor;
+ a {
+ color: white;
+ }
+ }
+ a {
+ color: @linkColor;
+ }
+ }
+
+ }
+ ul#bottom-nav-links {
+ margin-top: 0;
+ padding-bottom: 70px;
+ li {
+ min-height: 55px;
+ background-color: @bottomNav;
+ &.active {
+ background-color:@navBGHover;
+ }
+ &:hover {
+ background-color: @navBGHover;
+ }
+ a {
+ &.fonticon {
+ position: relative;
+ &:before {
+ top: -5px;
+ left: -40px;
+ font-size: 22px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.left-shadow-border {
+ border-left: 1px solid #999;
+ .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
+}
+
+.bottom-shadow-border {
+ border-bottom: 1px solid #999;
+ .box-shadow(0px 6px 0 0 rgba(0, 0, 0, 0.1));
+}
+
+/*
+
+FIXED HEADER, DASHBOARD & BREADCRUMBS:
+
+one_pane.html
+two_pane.html
+with_sidebar.html
+with_tabs.html
+with_tabs_sidebar.html
+ */
+#dashboard {
+ .left-shadow-border;
+ position: absolute;
+ left: @navWidth;
+ margin-left: 0;
+ padding-left: 0;
+ padding-right: 0;
+ background-color: @sidebarBG;
+ min-width: 600px;
+ height: 100%;
+ .closeMenu & {
+ left: @collapsedNavWidth;
+ }
+ &.one-pane {
+ min-width: 800px;
+ margin-top: 0;
+ overflow-x: hidden;
+ }
+ &.two-pane {
+ margin-top: 0;
+ overflow-x: hidden;
+ }
+}
+
+/* SIDEBAR TEMPLATE STYLES */
+.topmenu-defaults {
+ height: 70px;
+ padding: 12px 10px 0;
+ .box-sizing(border-box);
+}
+
+/* USED IN TEMPLATE: with_tabs_sidebar.html */
+.dashboard-upper-menu {
+ right: 0;
+ left: @sidebarWidth+@navWidth;
+ position: fixed;
+ z-index: 11;
+ display: block;
+ .topmenu-defaults;
+ background-color: #CBCBCB;
+ .closeMenu & {
+ left: @sidebarWidth+@collapsedNavWidth;
+ }
+}
+
+#dashboard-lower-content {
+ padding: 20px;
+ background-color: #F1F1F1;
+}
+
+#dashboard-content {
+ padding-left: 15px;
+ padding-top: 20px;
+
+ &.row-fluid,
+ &.window-resizeable {
+ /*remove gutter without rewriting variable*/
+ margin-left: 0px;
+ }
+ .one-pane & {
+ //margin-top:60px;
+ padding-bottom:25px;
+ }
+ .with-sidebar & {
+ .left-shadow-border;
+ border-right: 1px solid #999;
+ width: auto;
+ padding: 0px;
+ bottom: 0px;
+ top: 60px;
+ position: fixed;
+ overflow-x: hidden;
+ overflow-y: auto;
+ left: @sidebarWidth+@navWidth;
+ right: 0;
+ .box-sizing(border-box);
+ .closeMenu & {
+ left: @sidebarWidth+@collapsedNavWidth;
+ }
+ }
+ > div.inner {
+ display: block;
+ }
+}
+
+#global-notifications {
+ .with-sidebar & {
+ left: @sidebarWidth + @navWidth;
+ .closeMenu & {
+ left: @sidebarWidth + @collapsedNavWidth;
+ }
+ }
+}
+
+/*
+ Sidenav:
+ USED IN DOCUMENT ADDON & EXTERNAL ADDONS
+*/
+.sidenav {
+ padding: 0;
+ header {
+ width: @sidebarWidth;
+ border-bottom: 1px solid #d3d7db;
+ }
+ .nav-list {
+ .divider {
+ border: none;
+ }
+ > li > a:hover,
+ > li > a:focus {
+ background-color: @linkColorHover;
+ color: #fff;
+ }
+ li.active > a {
+ color: @linkColorHover;
+ }
+ > li > a {
+ color: @linkColor;
+ padding: 10px 13px 10px 24px;
+ border-bottom: 1px solid #d3d7db;
+ span {
+ margin-right: 8px;
+ width: 14px;
+ display: inline-block;
+ text-align: center;
+ }
+ }
+ a {
+ display: block;
+ padding: 10px 5px 5px 15px;
+ color: @subListGray;
+ .divider {
+ background: none;
+ color: #ccc;
+ padding: 0 2px;
+ }
+ }
+ .nav-header {
+ padding: 0px;
+ text-shadow: none;
+ color: #333333;
+ & > span:hover {
+ color: @linkColor;
+ }
+ }
+ }
+}
+
+.row-fluid.content-area {
+ background-color: @background;
+}
+
+#right-content {
+ .two-pane & {
+ .view {
+ padding: 0 20px 40px;
+ }
+ border-left: 1px solid #999;
+ .box-shadow(-6px 0 rgba(0, 0, 0, 0.1));
+ }
+}
+
+.with-sidebar.content-area {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}