]> git.uio.no Git - u/erikhf/frm.git/blobdiff - src/css/map.css
searchbar design, lukke resultat, hoyde med scroll og tomme inputen + plassering
[u/erikhf/frm.git] / src / css / map.css
index 3e6a6d974d3d0ce62c2303cd8aeb4ba9ad376412..a434134c446fbc4ad1fd5dd081388ad3aec44515 100644 (file)
+* {
+    margin: 0;
+}
+
 html, body {
     height: 100%;
-    padding-top: 70px;
-    background-color: #e2e2e2;
-    margin: 0;
 }
 
 #map {
-    padding: 20px;
-    height: 750px;
-    margin: 0 auto;
+    height: 100%;
     width: 100%;
-
+    position:absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
 }
 
+/* search div */
 
-/*
-.search div{
+#search {
     position: relative;
-}*/
-
-.results > li > a{
-    margin-top: 10px;
-    display: block;
-    padding: 3px 5px;
-    clear: both;
-    font-weight: 400;
-    line-height: 1.42857143;
-    color: #333;
-    white-space: nowrap
-}
-
-.results > li > a:focus, .results > li > a:hover {
+    z-index: 1;
     margin-top: 20px;
-
-    color: #262626;
-    text-decoration: none;
-    background-color: #f5f5f5
-}
-
-.dropdown-menu{
-    margin-top: -17px;
-    margin-left: 649px;
-    background-color: white;
-    border-radius: 0px;
-
-
-}
-
-.dropdown-menu li{
-    background-color: white;
-    padding-left: 20px;
-    padding-right: 20px;
-
-
-}
-
-#search {
-    width: 357px;
-    margin: 15px;
-    margin-left: 150px;
+    margin-left: 20px;
+    background: transparent;
+    display: inline-block;
+    width: 400px;
+    max-width: 100%;
 }
 
+/* search input*/
 
 #livesearch{
-    box-shadow: 0 0 1px darkgrey;
-    width: 500px;
-    padding: 5px 0 5px 20px;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
     font-size: 16px;
     font-family: Montserrat, sans-serif;
-    border-left: 1px solid darkgrey;
-    border-top:1px solid darkgrey;
-    border-bottom: 1px solid darkgrey;
-    border-right: 0 none;
+    border: 1px solid white;
     height: 52px;
     margin-right: 0;
-    color: white;
+    color: black;
     outline: none;
-    background: #e2e2e2;
+    background: white;
     float: left;
     box-sizing: border-box;
     transition: all 0.15s;
+    border-radius: 2px 0px 0px 2px; /* top left, top right, bottom right, bottom left */
+
 }
 
 ::-webkit-input-placeholder {
-    color: white;
+    color: grey;
 }
 :-moz-placeholder {
-    color: white;
+    color: grey;
 }
 ::-moz-placeholder {
-    color: white;
+    color: grey;
 }
 :-ms-input-placeholder {
-    color: white;
+    color: grey;
 }
 
 #livesearch:focus {
-    background: darkgrey;
+    background: white;
 }
 
-.dropdown-div{
-    border: 0 none;
-    background: #BAB8B8;
+.knapp
+{
+    border-radius: 0px 2px 2px 0px; /* top left, top right, bottom right, bottom left */
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
+    border-right: 1px solid white;
+    border-top:1px solid white;
+    border-bottom: 1px solid white;
+    border-left: 2px solid darkgrey;
+    background: white;
     width: 60px;
-    float: left;
     padding: 0;
     margin: 0;
     text-align: center;
     height: 52px;
     cursor: pointer;
-    border-radius: 0px;
+    float: left;
 }
 
-.knapp
-{
-    box-shadow: 0 0 1px darkgrey;
-    border-right: 1px solid darkgrey;
-    border-top:1px solid darkgrey;
-    border-bottom: 1px solid darkgrey;
-    border-left: 0 none;
-    background: #BAB8B8;
-    width: 60px;
-    float: left;
-    padding: 0;
+.knapp:focus {
+    outline:0;
+}
+
+/* search results */
+
+
+.divresult{
+    padding:0;
     margin: 0;
-    text-align: center;
-    height: 52px;
-    cursor: pointer;
-    border-radius: 0px;
+    background-color: white;
+    border-radius: 0;
+    border-top: 2px solid darkgrey;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
 
 }
 
-.glyphicon-menu-down{
-    color: white;
+.test{
+    padding:0;
+    margin: 0;
+    height: 40vh;
+    position: relative;
+    z-index: 1;
+    display: inline-block;
+    width: 80%;
+    margin-top: 0;
+    left: 0;
+    float: left;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: transparent;
+    border: none;
+    border-radius: 0px;
 }
 
 .result{
-    width: 500px;
-    margin-left: 150px;
-    display: block;
-    position: absolute;
-    top: 100%;
+    height: 25vh;
+    overflow: scroll;
+    position: relative;
+    z-index: 1;
+    display: inline-block;
+    width: 100%;
+    margin-top: 0;
     left: 0;
-    z-index: 1000;
     float: left;
-    min-width: 160px;
-    padding: 1px 0;
     font-size: 14px;
     text-align: left;
     list-style: none;
     background-color: #fff;
-    -webkit-background-clip: padding-box;
-    background-clip: padding-box;
-    border: 1px solid #ccc;
-    border: 1px solid rgba(0, 0, 0, .15);
-    border-radius: 4px;
-    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-    border-radius: 0px;
-
+    border: 1px solid whitesmoke;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
+    border-radius: 0px 0px 2px 2px; /* top left, top right, bottom right, bottom left */
 }
 
 .result li{
-    margin-top: 20px;
-    margin-left: 20px;
     padding: 0.5em 0.5em 0.5em 0;
+    margin: auto;
     float: none;
+    border-bottom: 1px solid grey;
+
 }
 
-.loadingpic{
-    width: 50px;
-    height: 50px;
+.result > li:first-child {
+    padding: 5px;
+    border: none;
+}
+
+.results > li > a{
+    position: relative;
+    margin-top: 10px;
+    display: block;
+    padding: 3px 5px;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    color: #333;
+    white-space: nowrap
+}
+
+.results > li > a:focus, .results > li > a:hover {
+    position: relative;
+    margin-top: 20px;
+    color: #262626;
+    text-decoration: none;
+    background-color: #f5f5f5
+}
+
+.emptyresult{
+    float: right;
+    border: 0;
+}
+
+.emptyresult:hover{
+    outline:0;
+    background: white;
+}
+
+/* filter options */
+
+.dropdowndiv{
+    padding:0;
+    margin: 0;
+}
+.meny{
+    top: 0px;
+    margin-top: 0;
+    z-index: 1;
+    position: absolute;
+    float: left;
+    background-color: white;
+    border-radius: 0px;
+    margin-left: 6px;
+}
+
+.meny li{
+    background-color: white;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 .filtervalg{
@@ -184,9 +214,32 @@ html, body {
     border: 1px solid darkgrey;
     color: black;
     outline: none;
-    background: white;
+    background: whitesmoke;
     box-sizing: border-box;
     transition: all 0.15s;
 }
 
+.hide {
+    display:none;
+}
+
+.glyphicon-menu-down{
+    color: white;
+}
+
+/* modal */
+
+#divModal{
+    position: relative;
+    margin-top: 0;
+
+}
+
+/* other */
+
+.no-padding{
+    padding: 0;
+    padding: 0 !important;
+    margin: 0 !important;
+}