You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@allura.apache.org by he...@apache.org on 2015/10/30 02:07:02 UTC
[22/48] allura git commit: [#7919] Add styles for the "add new tool"
menu
[#7919] Add styles for the "add new tool" menu
Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/95f55137
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/95f55137
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/95f55137
Branch: refs/heads/hs/7919
Commit: 95f55137f9fb5b0391d7cf71615a8e73112ba4f8
Parents: 60e5312
Author: Heith Seewald <hs...@hsmb.local>
Authored: Mon Oct 12 13:45:43 2015 -0400
Committer: Heith Seewald <hs...@hsmb.local>
Committed: Thu Oct 29 20:21:34 2015 -0400
----------------------------------------------------------------------
Allura/allura/public/nf/css/navbar.css | 524 +++++++++++++++++++---------
1 file changed, 367 insertions(+), 157 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/allura/blob/95f55137/Allura/allura/public/nf/css/navbar.css
----------------------------------------------------------------------
diff --git a/Allura/allura/public/nf/css/navbar.css b/Allura/allura/public/nf/css/navbar.css
index 7ddbdac..a5d24bc 100644
--- a/Allura/allura/public/nf/css/navbar.css
+++ b/Allura/allura/public/nf/css/navbar.css
@@ -1,228 +1,438 @@
.submenu ul {
- list-style: none;
- width: 350px;
- display: none;
+ list-style: none;
+ width: 350px;
+ display: none;
}
+
.hidden {
- display: none;
+ display: none;
}
+
.submenu ul {
- list-style: none;
- display: block;
- position: relative;
- background-color: rgb(237, 237, 237);
- border: solid darkgray 1px;
- border-radius: 0 0 5px 5px;
- margin-top: -13px;
- margin-left: 341px;
- left: -25px;
- padding-left: 0;
- box-shadow: 3px 0 3px #d7d7d7;
- z-index: -1000;
- padding-top: 11px;
+ list-style: none;
+ display: block;
+ position: relative;
+ background-color: rgb(237, 237, 237);
+ border: solid darkgray 1px;
+ border-radius: 0 0 5px 5px;
+ margin-top: -13px;
+ margin-left: 341px;
+ left: -25px;
+ padding-left: 0;
+ box-shadow: 3px 0 3px #d7d7d7;
+ z-index: -1000;
+ padding-top: 11px;
}
+
#bar-config {
- display: inline-flex;
- position: absolute;
- right: 0;
- top: -30px;
- align-items: stretch;
- flex: 1 1 auto;
+ display: inline-flex;
+ position: absolute;
+ right: 0;
+ top: -30px;
+ align-items: stretch;
+ flex: 1 1 auto;
}
+
#threshold-config > span > input {
- width: 2rem;
- background-color: #A1A1A1;
- color: white;
- font-weight: bold;
+ width: 2rem;
+ background-color: #A1A1A1;
+ color: white;
+ font-weight: bold;
}
+
#toggle-admin-btn {
- position: absolute;
- right: -9px;
- top: 0;
- width: 2rem;
- height: 1.8rem;
+ position: absolute;
+ right: -9px;
+ top: 0;
+ width: 2rem;
+ height: 1.8rem;
}
+
nav {
- display: flex;
- flex-direction: row;
- justify-content: center;
- margin: auto;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ margin: auto;
}
+
.nav_admin ul {
- display: flex;
+ display: flex;
}
+
#top_nav_admin > div.edit-mode > ul {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- flex: 1;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ flex: 1;
}
+
#top_nav_admin > div.edit-mode > ul > .tb-item {
- background-color: #F0F0F0;
- margin-top: 0.5rem;
- display: inline-grid;
- margin-left: .5rem;
- border: 1px dashed gray;
- padding: 0.3rem 0.6rem 0.3rem 0.6rem;
+ background-color: #F0F0F0;
+ margin-top: 0.5rem;
+ display: inline-grid;
+ margin-left: .5rem;
+ border: 1px dashed gray;
+ padding: 0.3rem 0.6rem 0.3rem 0.6rem;
}
+
.admin-toolbar {
- display: flex;
+ display: flex;
}
+
#top_nav_admin {
- display: grid;
- flex-direction: row;
- flex-wrap: wrap;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- -o-border-radius: 4px;
- -ms-border-radius: 4px;
- -khtml-border-radius: 4px;
- border-radius: 4px;
- width: 940px;
+ display: grid;
+ flex-direction: row;
+ flex-wrap: wrap;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ -o-border-radius: 4px;
+ -ms-border-radius: 4px;
+ -khtml-border-radius: 4px;
+ border-radius: 4px;
+ width: 940px;
}
+
.btn-bar {
- display: block;
- clear: both;
- padding: 0 10px 0 10px;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- -o-border-radius: 4px;
- -ms-border-radius: 4px;
- -khtml-border-radius: 4px;
- border-radius: 4px;
- text-decoration: none;
- min-width: 1em;
- text-align: center;
- position: relative;
- margin: 0 0 20px;
+ display: block;
+ clear: both;
+ padding: 0 10px 0 10px;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ -o-border-radius: 4px;
+ -ms-border-radius: 4px;
+ -khtml-border-radius: 4px;
+ border-radius: 4px;
+ text-decoration: none;
+ min-width: 1em;
+ text-align: center;
+ position: relative;
+ margin: 0 0 20px;
}
+
ul.dropdown li {
- float: left;
- vertical-align: middle;
- zoom: 1;
- padding-top: 10px;
- padding-bottom: 10px;
+ float: left;
+ vertical-align: middle;
+ zoom: 1;
+ padding-top: 10px;
+ padding-bottom: 10px;
}
+
ul.dropdown, ul.dropdown li, ul.dropdown ul {
- list-style: none;
- margin: 0;
- padding: 0;
+ list-style: none;
+ margin: 0;
+ padding: 0;
}
+
li.tb-item-edit > input {
- width: 2.2rem;
+ width: 2.2rem;
}
+
li.tb-item-edit > label > i {
- padding-right: 0.7rem;
- color: grey;
- font-size: larger;
- cursor: move;
+ padding-right: 0.7rem;
+ color: grey;
+ font-size: larger;
+ cursor: move;
}
+
div.edit-mode > ul > div.anchored {
- background: grey;
+ background: grey;
}
+
div.anchored > li.tb-item-edit > label > i {
- padding-right: 0.7rem;
- color: #898c89;
- font-size: larger;
- cursor: not-allowed;
+ padding-right: 0.7rem;
+ color: #898c89;
+ font-size: larger;
+ cursor: not-allowed;
}
.react-reorderable-item-active, .draggable-element {
- height: 28px;
- width: 120px;
- margin-top: 5px;
+ height: 28px;
+ width: 120px;
+ margin-top: 5px;
}
+
.draggable-element {
- background-color: rgb(255, 255, 255);
- border: 1px dashed #B5AFAF;
- min-width: 100%;
- border-radius: 3px;
- width: 9rem;
- height: 30px;
+ background-color: rgb(255, 255, 255);
+ border: 1px dashed #B5AFAF;
+ min-width: 100%;
+ border-radius: 3px;
+ width: 9rem;
+ height: 30px;
}
+
.draggable-handle {
- background-color: rgb(126, 125, 125);
- width: 15%;
- height: 80%;
- border-radius: 4px 0 0 4px;
- margin-top: -2px;
- margin-left: -2px;
- z-index: 10000;
- cursor: move;
- color: white;
- padding: 3px 3px 4px;
- border: 1px solid #575656;
+ background-color: rgb(126, 125, 125);
+ width: 15%;
+ height: 80%;
+ border-radius: 4px 0 0 4px;
+ margin-top: -2px;
+ margin-left: -2px;
+ z-index: 10000;
+ cursor: move;
+ color: white;
+ padding: 3px 3px 4px;
+ border: 1px solid #575656;
}
+
ul.dropdown li {
- float: left;
- vertical-align: middle;
- zoom: 1;
- padding-top: 10px;
- padding-bottom: 10px;
+ float: left;
+ vertical-align: middle;
+ zoom: 1;
+ padding-top: 10px;
+ padding-bottom: 10px;
}
+
#content {
- width: 990px;
+ width: 990px;
}
+
.react-reorderable-item {
- display: inline-flex;
- margin-right: 2%;
- /* float: left; */
+ display: inline-flex;
+ margin-right: 2%;
+ /* float: left; */
}
+
.react-reorderable-item-active {
- border: 3px dashed #9e9e9e;
- background: #c9c9c9;
- width: 9rem;
+ border: 3px dashed #9e9e9e;
+ background: #c9c9c9;
+ width: 9rem;
}
+
.react-reorderable-item-active div {
- display: none;
+ display: none;
}
+
.react-reorderable-handle {
- position: absolute;
+ position: absolute;
}
+
.react-drag > div > div > div > div > div > a {
- margin-top: 2px;
- text-align: center;
- color: #898989;
- width: 5rem;
- /* margin-bottom: 10px; */
- min-width: 100%;
- overflow-x: hidden;
- overflow-wrap: break-word;
- height: 18px;
- position: relative;
+ margin-top: 2px;
+ text-align: center;
+ color: #898989;
+ width: 5rem;
+ /* margin-bottom: 10px; */
+ min-width: 100%;
+ overflow-x: hidden;
+ overflow-wrap: break-word;
+ height: 18px;
+ position: relative;
}
+
.react-drag > div > div > div > div > div {
- width: 100%;
- position: relative;
- right: -40px;
+ width: 100%;
+ position: relative;
+ right: -40px;
}
+
.react-drag {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- -o-user-select: none;
- user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
}
+
ul.dropdown ul {
- visibility: hidden;
- position: absolute;
- top: 70px;
- z-index: 598;
- background-color: #ffffff;
- border: 1px solid #dddddd;
- border-top-width: 0;
+ visibility: hidden;
+ position: absolute;
+ top: 70px;
+ z-index: 598;
+ background-color: #ffffff;
+ border: 1px solid #dddddd;
+ border-top-width: 0;
}
+
ul.dropdown ul li a {
- float: none;
- display: block;
- text-align: left;
- margin-right: 0;
+ float: none;
+ display: block;
+ text-align: left;
+ margin-right: 0;
}
+
ul.dropdown .hover, ul.dropdown li:hover {
- position: relative;
- z-index: 599;
- cursor: default;
+ position: relative;
+ z-index: 599;
+ cursor: default;
}
+
.anchored {
- cursor: not-allowed;
+ cursor: not-allowed;
+}
+
+.tool-partition {
+ height: 0;
+ margin-top: 5px;
+ border-top: 3px solid #777;
+}
+
+.installable-tool-box {
+ list-style: none;
+ display: flex;
+ background-color: #FFFEFA;
+ flex-wrap: wrap;
+ justify-content: space-around;
}
+
+.installable-tool-box li {
+ margin-top: 15px;
+
+ height: auto;
+ border-radius: 4px;
+ padding: 10px;
+ text-align: center;
+ font-size: x-large;
+ list-style: none;
+ cursor: pointer;
+}
+
+.installable-tool-box li:hover {
+ background: #09C;
+ color: white;
+}
+
+.selected-tool {
+ background: white;
+ border: 1px solid #09C;
+}
+
+.installable-tool-box li.selected-tool:hover {
+ background: white;
+ color: rgb(85, 85, 85);
+}
+
+.tool-card {
+ width: 800px;
+ margin-left: 25px;
+ background-color: white;
+ display: block;
+ border: 1px solid #777;
+ border-radius: 2px 2px 5px 5px;
+ height: auto;
+ position: absolute;
+ overflow: auto;
+ right: 0;
+ min-height: 21rem;
+}
+
+.box-title {
+ width: 800px;
+ height: auto;
+ font-size: large;
+ text-align: center;
+ padding-bottom: 10px;
+ padding-top: 10px;
+ background: #606060;
+ color: white;
+}
+
+.tool-info {
+ min-height: 12rem;
+ padding: 35px 5px 5px 10px;
+ display: block;
+}
+
+.tool-info-left p {
+ text-align: center;
+ padding-bottom: 0;
+ vertical-align: text-top;
+ padding-top: 18px;
+ position: relative;
+ left: 0;
+ font-size: large;
+ font-weight: 400;
+ margin: 2rem 80px 100px 90px;
+ color: #CCCBC8;
+}
+
+.tool-info-left h1 {
+ text-align: center;
+ padding-bottom: 0;
+ vertical-align: text-top;
+ padding-top: 18px;
+ position: relative;
+ left: 0;
+ font-size: xx-large;
+ background-color: #E7E7E7;
+ color: #5B5B5B;
+ height: 3rem;
+}
+
+.add-tool-button {
+ width: auto;
+ height: auto;
+ background: white;
+ min-width: 6rem;
+ min-height: 2.6rem;
+ font-size: large;
+ clear: both;
+ position: relative;
+ right: -4.8rem;
+ bottom: 0.1rem;
+}
+
+.tool-info-left {
+ background: #727170;
+ width: 60%;
+ height: auto;
+ left: 0;
+ top: 0;
+ color: white;
+ position: absolute;
+}
+
+.tool-info-right {
+ background: rgba(239, 239, 239, .7);
+ width: 40%;
+ height: 100%;
+ right: 0;
+ display: block;
+ clear: both;
+ top: 0;
+ position: absolute;
+}
+
+.tool-form {
+ display: inline-block;
+ width: 100%;
+ position: absolute;
+ right: 0;
+ top: 0;
+ padding-top: 1rem;
+ height: auto;
+}
+
+#add-tool-form > label {
+ padding: 0;
+ font-size: 13pt;
+ position: absolute;
+ margin-left: 42px;
+}
+
+#add-tool-form > p {
+ font-size: large;
+
+}
+
+#add-tool-form > input {
+ padding-top: 10px;
+ padding-left: 10px;
+ width: 63%;
+ margin: 22px 62px 10px 40px;
+}
+
+#add-tool-form {
+ position: absolute;
+ left: auto;
+ padding-top: 20px;
+ padding-left: 25px;
+ display: block;
+ padding-right: 25px;
+}
+
+.tool-form-fields {
+ clear: both;
+ position: relative;
+ display: flex;
+ flex-direction: row;
+}
\ No newline at end of file