Moved to bootstrap, responsive nav
diff --git a/xos/core/static/xos.css b/xos/core/static/xos.css
index 5058664..6117d24 100644
--- a/xos/core/static/xos.css
+++ b/xos/core/static/xos.css
@@ -23,6 +23,241 @@
overflow: scroll;
}
+/* ************************* SIDENAV TOGGLE ************************* */
+
+#wrapper {
+ padding-left: 0;
+ -webkit-transition: all 0.5s ease;
+ -moz-transition: all 0.5s ease;
+ -o-transition: all 0.5s ease;
+ transition: all 0.5s ease;
+}
+
+#wrapper.toggled {
+ padding-left: 250px;
+}
+
+#sidebar-wrapper {
+ z-index: 1000;
+ position: fixed;
+ left: 250px;
+ width: 0;
+ height: 100%;
+ margin-left: -250px;
+ overflow-y: auto;
+ -webkit-transition: all 0.5s ease;
+ -moz-transition: all 0.5s ease;
+ -o-transition: all 0.5s ease;
+ transition: all 0.5s ease;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+ width: 250px;
+ padding: 10px;
+}
+
+#page-content-wrapper {
+ width: 100%;
+ position: absolute;
+ padding: 15px;
+}
+
+#wrapper.toggled #page-content-wrapper {
+ position: absolute;
+ margin-right: -250px;
+}
+
+@media(min-width:768px) {
+ #wrapper {
+ padding-left: 250px;
+ }
+
+ #wrapper.toggled {
+ padding-left: 0;
+ }
+
+ #sidebar-wrapper {
+ width: 250px;
+ padding: 10px;
+ }
+
+ #wrapper.toggled #sidebar-wrapper {
+ width: 0;
+ }
+
+ #page-content-wrapper {
+ padding: 20px;
+ position: relative;
+ }
+
+ #wrapper.toggled #page-content-wrapper {
+ position: relative;
+ margin-right: 0;
+ }
+}
+
+.navbar-toggle{
+ border: 1px solid #08C;
+}
+
+.navbar-toggle .icon-bar{
+ background: #08C;
+}
+/* ************************* END SIDENAV TOGGLE ************************* */
+
+/* ************************* HEADER STYLE ************************* */
+
+.header{
+ background-color: #ffffff !important;
+ border-bottom: 3px solid #C5CCD4;
+ margin-bottom: 14px;
+ height: 85px;
+}
+
+.header .logo{
+ max-height: 80px;
+}
+
+.nav-quick-search{
+ margin: 30px -10px 0px 0px !important;
+ padding:0 25px 0 0 !important;
+ float:right !important;
+}
+
+.nav-quick-search .search-query{
+ border-radius:5px;
+ border:none;
+ box-shadow:0px;
+ background-color:lightGrey;
+ padding-left: 27px;
+}
+
+
+.header #branding {
+ width: 100%;
+ height:60px;
+ border-right:none;
+}
+
+.header a {
+ color: #08C;
+ font-weight: bold;
+ /*border-bottom: 1px solid #C5CCD4;*/
+}
+a {
+ color: #08C;
+ font-weight: bold;
+ /*border-bottom: 1px solid #C5CCD4;*/
+}
+
+
+#branding2{
+height:20px;
+width:100%;
+color: #333;
+/*background-color: #000000;*/
+margin-bottom: 10px;
+}
+
+.header #user-tools {
+ padding: 12px 20px 0px 0px;
+ float: right;
+ margin-top: -5px;
+}
+
+.header .header-content .date{
+padding-left:10px;
+}
+
+.header .header-content .time {
+font-weight: normal;
+}
+.header .header-content.header-content-first{
+height: 15px;
+padding-bottom: 0px;
+}
+
+.header .header-content {
+padding-bottom: 0px;
+padding: 7px 0 0 0px;
+}
+
+/************************* END HEADER *************************/
+
+/************************* FOOTER *************************/
+
+.footer{
+ z-index: 1001;
+}
+
+.footer .content .statusMsg {
+ float: right;
+ padding: 15px 20px 0 0;
+ display: block;
+}
+/************************* END FOOTER *************************/
+
+/************************* NAV *************************/
+#sidebar-wrapper .logo{
+ max-width: 100%;
+}
+
+.icon-app {
+background-image: url("opencloudApp.png");
+}
+.icon-home {
+/* Going with darker standard color nav -- so using over png's background-image: url("Home.png"); */
+background-image: url("Home.png");
+}
+.icon-deployment{
+background-image: url("Deployments.png");
+}
+.icon-site{
+background-image: url("Sites.png");
+}
+.icon-slice{
+background-image: url("Slices.png");
+}
+.icon-user{
+background-image: url("Users.png");
+}
+.icon-reservation{
+background-image: url("Reservations.png");
+}
+
+#sidebar-wrapper>ul>li.active>a>.icon-home ,
+/*#sidebar-wrapper>ul>li:hover>a>.icon-home ,*/
+#sidebar-wrapper>ul>li.focus>a>.icon-home{
+ background-image: url("Home_over.png");
+}
+
+#sidebar-wrapper>ul>li.active>a>.icon-deployment,
+/*#sidebar-wrapper>ul>li:hover>a>.icon-deployment,*/
+#sidebar-wrapper>ul>li.focus>a>.icon-deployment{
+ background-image: url("Deployments_over.png");
+}
+#sidebar-wrapper>ul>li.active>a>.icon-site,
+/*#sidebar-wrapper>ul>li:hover>a>.icon-site,*/
+#sidebar-wrapper>ul>li.focus>a>.icon-site{
+ background-image: url("Sites_over.png");
+}
+#sidebar-wrapper>ul>li.active>a>.icon-slice,
+/*#sidebar-wrapper>ul>li:hover>a>.icon-slice,*/
+#sidebar-wrapper>ul>li.focus>a>.icon-slice{
+ background-image: url("Slices_over.png");
+}
+#sidebar-wrapper>ul>li.active>a>.icon-user,
+/*#sidebar-wrapper>ul>li:hover>a>.icon-user,*/
+#sidebar-wrapper>ul>li.focus>a>.icon-user{
+ background-image: url("Users_over.png");
+}
+#sidebar-wrapper>ul>li.active>a>.icon-reservation,
+/*#sidebar-wrapper>ul>li:hover>a>.icon-reservation,*/
+#sidebar-wrapper>ul>li.focus>a>.icon-reservation{
+ background-image: url("Reservations_over.png");
+}
+/************************* END NAV *************************/
+
/* CSS for jquery Tabs */
#hometabs {
border-bottom: 1px solid #105E9E;
@@ -61,97 +296,7 @@
text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
font-weight: normal;
}
-/*************************/
-/* Header elements */
-.logo {
-}
-.header{
- background-color: #ffffff !important;
- /*background-image: url('bg2.jpg');*/
- background-size: 100% auto;
- background-image: none !important;
- text-shadow: none;
- border-bottom: 3px solid #C5CCD4;
- margin-bottom: 14px;
- margin-top: -120px;
- height: 85px;
- /*min-width: 1321px;*/
-}
-
-.nav-quick-search{
-margin: 30px -10px 0px 0px !important;
-padding:0 25px 0 0 !important;
-float:right !important;
-}
-
-.nav-quick-search .search-query{
-border-radius:5px;
-border:none;
-box-shadow:0px;
-background-color:lightGrey;
-padding-left: 27px;
-}
-
-
-.header #branding {
-width: 100%;
-height:60px;
-}
-
-.header a {
-color: #08C;
-font-weight: bold;
-/*border-bottom: 1px solid #C5CCD4;*/
-}
-a {
-color: #08C;
-font-weight: bold;
-/*border-bottom: 1px solid #C5CCD4;*/
-}
-
-.header #branding {
-border-right:none;
-}
-
-#branding2{
-height:20px;
-width:100%;
-color: #333;
-/*background-color: #000000;*/
-margin-bottom: 10px;
-}
-
-.header #user-tools {
- padding: 12px 20px 0px 0px;
- float: right;
- margin-top: -5px;
-}
-
-.header .header-content .date{
-padding-left:10px;
-}
-
-.header .header-content .time {
-font-weight: normal;
-}
-.header .header-content.header-content-first{
-height: 15px;
-padding-bottom: 0px;
-}
-
-.header .header-content {
-padding-bottom: 0px;
-padding: 7px 0 0 0px;
-}
-
-/*************************/
-
-.footer .content .statusMsg {
- float: right;
- padding: 15px 20px 0 0;
- display: block;
-}
.alignCenter {
text-align: center !important;
@@ -532,9 +677,10 @@
}*/
.login {
-background-image: url('bg.jpg');
-background-size: 100%;
-background-repeat: no-repeat;
+ background-image: url('bg.jpg');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
}
@@ -641,7 +787,6 @@
/*Added by Beena for adding the three components in dashboard*/
.breadcrumb{
- width: 37%;
display:inline-block;
background-color: #fff;
@@ -707,135 +852,6 @@
top: 5px;
}
-.icon-app {
-background-image: url("opencloudApp.png");
-}
-.icon-home {
-/* Going with darker standard color nav -- so using over png's background-image: url("Home.png"); */
-background-image: url("Home.png");
-}
-.icon-deployment{
-background-image: url("Deployments.png");
-}
-.icon-site{
-background-image: url("Sites.png");
-}
-.icon-slice{
-background-image: url("Slices.png");
-}
-.icon-user{
-background-image: url("Users.png");
-}
-.icon-reservation{
-background-image: url("Reservations.png");
-}
-
-
-/*For giving the padding for the left side navigation*/
-.left-nav>ul {
- padding-left: 5px;
-}
-
-/*For increasing the height of left side navigation list items*/
-.left-nav>ul>li {
- padding-top:4px;
- line-height: 35px;
-}
-
-/*For changing the background color of the left side navigation list items*/
-/*For changing the color of the left side navigation list items*/
-/*For changing the font of the left side navigation list items*/
-.left-nav>ul>li>a {
- /*background-color: #448CCA;*/
- /*ONlab.us reg color blue*/
- /*background-color: #ccffff;*/
- /*font-weight: normal;*/
- /*color: #105E9E;*/
- /*color: #ffffff;*/
- /*text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;*/
- /*letter-spacing: 1px;*/
- /*font-size: 12px;*/
- /*border-bottom: none;*/
-}
-
-.left-nav>ul>li.active>a {
- /*background-color: #448CCA;*/
- /* Last Active
- background-color: #0061B7; */
- /*background-color: #515151;*/
- /*background-color: #448CCA;*/
- /*font-weight:normal;*/
- /*color:#ffffff;*/
- /*text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;*/
- /*letter-spacing: 1px;*/
-
- /*left: 10px;*/
- /*background-image: url("right_arrow.png");*/
- /*background-position: 97% center;*/
-}
-
-/* create an arrow that points down */
-
-
-.left-nav>ul>li.active>a:hover{
- /*background-color: #448CCA;*/
- /*background-color: #91BFE4;*/
- /*background-color: #D6E7F8;*/
- /*font-weight:normal;*/
- /*font-size: 1.2em;*/
- /*font-weight: bold;*/
- /*color:#ffffff;*/
- /*padding-top:10px;*/
- /*text-decoration:none;*/
-}
-
-/* Adjust font weight to normal on hover, else white blurs */
-.left-nav>ul>li>a:hover{
- /*background-color: #448CCA;*/
- /*background-color: #004775;*/
- /*background-color: #515151;*/
- /*color:#ffffff;*/
- /*font-weight:normal;*/
- /*font-size: 1.2em;*/
- /*padding-top:10px;*/
- /*text-decoration:none;*/
- /*border-left: 10px solid #ffffff;*/
- /*text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;*/
- /*letter-spacing: 1px;*/
-}
-
-.left-nav>ul>li.active>a>.icon-home ,
-/*.left-nav>ul>li:hover>a>.icon-home ,*/
-.left-nav>ul>li.focus>a>.icon-home{
- background-image: url("Home_over.png");
-}
-
-.left-nav>ul>li.active>a>.icon-deployment,
-/*.left-nav>ul>li:hover>a>.icon-deployment,*/
-.left-nav>ul>li.focus>a>.icon-deployment{
- background-image: url("Deployments_over.png");
-}
-.left-nav>ul>li.active>a>.icon-site,
-/*.left-nav>ul>li:hover>a>.icon-site,*/
-.left-nav>ul>li.focus>a>.icon-site{
- background-image: url("Sites_over.png");
-}
-.left-nav>ul>li.active>a>.icon-slice,
-/*.left-nav>ul>li:hover>a>.icon-slice,*/
-.left-nav>ul>li.focus>a>.icon-slice{
- background-image: url("Slices_over.png");
-}
-.left-nav>ul>li.active>a>.icon-user,
-/*.left-nav>ul>li:hover>a>.icon-user,*/
-.left-nav>ul>li.focus>a>.icon-user{
- background-image: url("Users_over.png");
-}
-.left-nav>ul>li.active>a>.icon-reservation,
-/*.left-nav>ul>li:hover>a>.icon-reservation,*/
-.left-nav>ul>li.focus>a>.icon-reservation{
- background-image: url("Reservations_over.png");
-}
-
#dashboardHPC {
padding-bottom: 10px;
}