How do I recreate the following effect in CSS?
This is my attempt so far: https://jsfiddle.net/cLqatpzf/.
I've tried to base it on: https://www.uber.com/en-GB/fare-estimate/.
HTML
<div class="soft-tiny palm-push--sides bg-primary-layer-color pointer-events--all" data-reactid="381">
<div class="bg-primary-layer-color pointer-events--all" data-reactid="382">
<div class="position--relative" data-reactid="383">
<div class="fare-estimate__input-connector z-10" data-reactid="384"></div>
<div class="fare-estimate__pickup push-tiny--bottom" data-reactid="385">
<div class="autocomplete-container" data-reactid="386">
<div class="autocomplete position--relative" data-reactid="387">
<div class="autocomplete__input hard flush--bottom autocomplete__input--icon" data-reactid="388">
<div data-reactid="389"><input value="" placeholder="Enter pickup location" autocomplete="off"
aria-label="Enter a pickup location: address, city and state required" data-reactid="390"></div>
</div>
</div>
</div><svg viewBox="0 0 64 64" width="16px" height="16px" class="_style_2ZI4zP _style_4wJp4e" tabindex="0"
role="button" aria-label="Locate me" data-reactid="391">
<path d="M28.0355206,31.9992104H7.978334L54.3777542,8.2149429c0.1557846-0.081008,0.3967628-0.2157388,0.6570473-0.2157388 c0.4893532,0,0.993042,0.4245925,0.993042,0.9369226c0,0.1713877-0.0173073,0.3512955-0.1097603,0.5290899L32.0355339,55.9992104 l-0.0000114-20C32.0355225,33.7900696,30.2446594,31.9992104,28.0355206,31.9992104z"
data-reactid="392"></path>
</svg>
</div>
<div class="_style_4nVh08 fare-estimate__destination-row" data-reactid="393">
<div class="_style_VxPAE fare-estimate__destination" data-reactid="394">
<div class="autocomplete-container" data-reactid="395">
<div class="autocomplete position--relative" data-reactid="396">
<div class="autocomplete__input hard flush--bottom autocomplete__input--icon" data-reactid="397">
<div data-reactid="398"><input value="" placeholder="Enter destination" autocomplete="off" aria-label="Enter a destination: address, city and state required"
data-reactid="399"></div>
</div>
</div>
</div>
</div><button style="line-height:0px;padding:13px;" tabindex="-1" class="_style_1PoMFk _style_16HNh4"
aria-label="Request estimate" kind="primary" disabled="" data-reactid="400"><svg viewBox="0 0 64 64" width="16px"
height="16px" class=" _style_26XEsq" data-reactid="401">
<path fill-rule="evenodd" clip-rule="evenodd" d="M59.9270592,31.9847012L60,32.061058L43.7665291,49.1333275l-3.2469215-3.5932007 L51.3236885,34H4v-4h47.3943481L40.5196075,18.4069672l3.2469215-3.4938126L60,31.946312L59.9270592,31.9847012z"
data-reactid="402"></path>
</svg></button>
</div>
</div>
</div>
</div>
CSS
ion-toolbar {
color: #919191;
}
.bg-primary-layer-color {
background-color: #FFF!important;
}
.fare-estimate__input-connector {
position: absolute;
top: 23px;
bottom: 21px;
left: 15.5px;
width: 1px;
background-color: #C6C6C6;
}
.fare-estimate__input-connector:before {
bottom: -1.5px;
background-color: #F32F00;
border: 1px solid #F32F00;
}
.push-tiny--bottom, .push-tiny--ends {
margin-bottom: 12px!important;
}
.autocomplete-container {
width: 100%;
}
.position--relative {
position: relative!important;
}
.autocomplete__input {
height: 44px;
width: 100%;
border: 1px solid #E5E5E4;
}
.fare-estimator {
width: 440px;
display: flex;
flex-direction: column;
height: calc(100% - 71px);
padding: 24px 24px 0;
}
.autocomplete div input {
width: 100%;
border: 0;
padding: 0 16px 0 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Check this
._style_1PoMFk {
-moz-box-sizing: border-box !important;
-webkit-transition: all 400ms ease !important;
border-color: #C6C6C6 !important;
background-color: #C6C6C6 !important;
box-sizing: border-box !important;
border-width: 2px !important;
border-style: solid !important;
text-decoration: none !important;
display: inline-block !important;
vertical-align: middle !important;
text-align: center !important;
margin: 0 !important;
cursor: default !important;
overflow: visible !important;
border-radius: 0px !important;
text-transform: uppercase !important;
line-height: 0px !important;
outline: none !important;
position: relative !important;
transition: all 400ms ease !important;
font-family: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif !important;
font-weight: 600 !important;
font-size: 14px !important;
padding: 13px !important;
opacity: 0.6 !important;
}
._style_4nVh08 {
-webkit-flex-wrap: nowrap !important;
-ms-flex-wrap: nowrap !important;
-webkit-box-lines: nowrap !important;
flex-wrap: nowrap !important;
display: -webkit-box !important;
display: -moz-box !important;
display: -ms-flexbox !important;
display: -webkit-flex !important;
display: flex !important;
}
._style_2ZI4zP {
position: absolute !important;
top: 12px !important;
right: 15px !important;
color: #c6c6c6 !important;
cursor: pointer !important;
font-size: 1.42857rem !important;
line-height: 1.4 !important;
width: 1em !important;
height: 1em !important;
}
<div class="soft-tiny palm-push--sides bg-primary-layer-color pointer-events--all hidden--palm" data-reactid="381">
<div class="bg-primary-layer-color pointer-events--all" data-reactid="382">
<div class="position--relative" data-reactid="383">
<div class="fare-estimate__input-connector z-10" data-reactid="384">
</div>
<div class="fare-estimate__pickup push-tiny--bottom" data-reactid="385">
<div class="autocomplete-container" data-reactid="386">
<div class="autocomplete position--relative" data-reactid="387">
<div class="autocomplete__input hard flush--bottom autocomplete__input--icon" data-reactid="388">
<div data-reactid="389">
<input value="" placeholder="Enter pickup location" autocomplete="off" aria-label="Enter a pickup location: address, city and state required" data-reactid="390">
</div>
</div>
</div>
</div>
<svg viewBox="0 0 64 64" width="16px" height="16px" class="_style_2ZI4zP _style_4wJp4e" tabindex="0" role="button" aria-label="Locate me" data-reactid="391">
<path d="M28.0355206,31.9992104H7.978334L54.3777542,8.2149429c0.1557846-0.081008,0.3967628-0.2157388,0.6570473-0.2157388 c0.4893532,0,0.993042,0.4245925,0.993042,0.9369226c0,0.1713877-0.0173073,0.3512955-0.1097603,0.5290899L32.0355339,55.9992104 l-0.0000114-20C32.0355225,33.7900696,30.2446594,31.9992104,28.0355206,31.9992104z" data-reactid="392">
</path>
</svg>
</div>
<div class="_style_4nVh08 fare-estimate__destination-row" data-reactid="393">
<div class="_style_VxPAE fare-estimate__destination" data-reactid="394">
<div class="autocomplete-container" data-reactid="395">
<div class="autocomplete position--relative" data-reactid="396">
<div class="autocomplete__input hard flush--bottom autocomplete__input--icon" data-reactid="397">
<div data-reactid="398">
<input value="" placeholder="Enter destination" autocomplete="off" aria-label="Enter a destination: address, city and state required" data-reactid="399">
</div>
</div>
</div>
</div>
</div>
<button style="line-height:0px;padding:13px;" tabindex="-1" class="_style_1PoMFk _style_16HNh4" aria-label="Request estimate" kind="primary" disabled="" data-reactid="400">
<svg viewBox="0 0 64 64" width="16px" height="16px" class=" _style_26XEsq" data-reactid="401">
<path fill-rule="evenodd" clip-rule="evenodd" d="M59.9270592,31.9847012L60,32.061058L43.7665291,49.1333275l-3.2469215-3.5932007 L51.3236885,34H4v-4h47.3943481L40.5196075,18.4069672l3.2469215-3.4938126L60,31.946312L59.9270592,31.9847012z" data-reactid="402">
</path>
</svg>
</button>
</div>
</div>
</div>
</div>
Also add css from here , it's required
e.g
<head>
<title>...</title>
<link rel="stylesheet" href="<stylesheet>.css" />
</head>
I made the parent div a fixed width of 300px,
added :before and :after psuedo elements to that connecting line in order to make the red and green dots
changed the font size to 16
moved the button tags inside their corresponding divs
gave each button its own id
added a class to your input tags for positioning
HTML:
<input
class="input-text"
value=""
placeholder="Enter pickup location"
autocomplete="off"
aria-label="Enter a pickup location: address, city and state required"
data-reactid="390">
<svg id="pickup-button" viewBox="0 0 64 64" width="16px" height="16px" class="_style_2ZI4zP _style_4wJp4e" tabindex="0"
role="button" aria-label="Locate me" data-reactid="391">
<path d="M28.0355206,31.9992104H7.978334L54.3777542,8.2149429c0.1557846-0.081008,0.3967628-0.2157388,0.6570473-0.2157388 c0.4893532,0,0.993042,0.4245925,0.993042,0.9369226c0,0.1713877-0.0173073,0.3512955-0.1097603,0.5290899L32.0355339,55.9992104 l-0.0000114-20C32.0355225,33.7900696,30.2446594,31.9992104,28.0355206,31.9992104z"
data-reactid="392"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="_style_4nVh08 fare-estimate__destination-row" data-reactid="393">
<div class="_style_VxPAE fare-estimate__destination" data-reactid="394">
<div class="autocomplete-container" data-reactid="395">
<div class="autocomplete position--relative" data-reactid="396">
<div class="autocomplete__input hard flush--bottom autocomplete__input--icon" data-reactid="397">
<div data-reactid="398">
<input
class="input-text"
value=""
placeholder="Enter destination"
autocomplete="off"
aria-label="Enter a destination: address, city and state required"
data-reactid="399">
<button id="destination-button" tabindex="-1" class="_style_1PoMFk _style_16HNh4"
aria-label="Request estimate" kind="primary" disabled="" data-reactid="400"><svg viewBox="0 0 64 64" width="16px"
height="16px" class=" _style_26XEsq" data-reactid="401">
<path fill-rule="evenodd" clip-rule="evenodd" d="M59.9270592,31.9847012L60,32.061058L43.7665291,49.1333275l-3.2469215-3.5932007 L51.3236885,34H4v-4h47.3943481L40.5196075,18.4069672l3.2469215-3.4938126L60,31.946312L59.9270592,31.9847012z"
data-reactid="402"></path>
</svg></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
ion-toolbar {
color: #919191;
}
.bg-primary-layer-color {
background-color: #FFF!important;
}
.fare-estimate__input-connector {
position: absolute;
top: 20px;
bottom: 20px;
left: 15.5px;
width: 1px;
background-color: #C6C6C6;
}
.fare-estimate__input-connector::before{
height: 5px;
width: 5px;
border-radius: 2.5px;
background-color: green;
content: "";
position: absolute;
top: 0;
left: -1.5px;
}
.fare-estimate__input-connector::after{
height: 5px;
width: 5px;
border-radius: 2.5px;
background-color: red;
content: "";
position: absolute;
bottom: 0;
left: -1.5px;
}
/* .fare-estimate__input-connector:before {
bottom: -1.5px;
background-color: #F32F00;
border: 1px solid #F32F00;
} */
.push-tiny--bottom, .push-tiny--ends {
margin-bottom: 12px!important;
}
.autocomplete-container {
width: 100%;
}
.position--relative {
position: relative!important;
}
.autocomplete__input {
height: 44px;
width: 100%;
border: 1px solid #E5E5E4;
}
.fare-estimator {
width: 440px;
display: flex;
flex-direction: column;
height: calc(100% - 71px);
padding: 24px 24px 0;
}
.autocomplete div input {
border: 0;
padding: 0 16px 0 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#destination-button {
height: 46px;
width: 46px;
position: absolute;
right: -2px;
top: 0px;
}
#pickup-button{
position: absolute;
right: 15px;
top: 15px;
}
.input-text {
position: absolute;
top: 14px;
left: 30px;
background: transparent;
font-size: 16px;
}
here's my work
Related
I am trying to achieve borders on each print page, on chrome it works fine but in safari border is getting chopped.
I have created a div which is fixed. That div has borders so when window print is triggered, borders comes on all the pages on chrome, but not on safari.
Anyone has solution for this??
my code:
<div class="loading-mask" data-role="loader" style="display: none !important">
<div class="loader">
</div>
</div>
<div class="cutom-container"></div>
<div class="content-div">
<div>
<div class="logo-content">
<div class="logo-div">
<img class="print-logo" src="<?= $this->getViewFileUrl('images/cart-page-print-logo.png'); ?>" alt="<?= __('Print Header Logo'); ?>"/>
<p>
----- </h3>
</p>
<div class="input-container">
<label>Company Name : </label><span id="pcname"> </span>
</div>
<div class="input-container">
<label>Contact : </label><span id="pcontact"> </span>
</div>
<div class="input-container">
<label>Phone : </label><span id="pphone"> </span>
</div>
</div>
</div>
<div class="img-content">
<img class="promotional-img" src="<?= $this->getViewFileUrl('images/PRT-offer graphic.png'); ?>" alt="<?= __('Print Offer'); ?>"/>
</div>
</div>
<div>
<div class="input-container">
<label>Email : </label><span id="pemail"> </span>
</div>
<div class="input-container">
<label>Delivery Address : </label><span id="daddress"> </span>
</div>
<div class="input-container">
<label>Mailing Address : </label><span id="maddress"> </span>
</div>
</div>
<div>
<table id="product-list-print">
</table>
</div>
<div id="sub-total-print">
</div>
<div>
<div class="logo-content">
<p>
Shipping (Shipping rates are appox and apply to US Mainland ONLY)</br> - Please see Sales Specialist for exact quote. Shipping rates for Aff ordable Advantage Trailers do not apply. Park Model Units will require additional shipping fee. <strong>Estimate is valid for 7 days.</strong>
</p>
</div>
<div class="img-content">
<div>
To order this unit sign here
</div>
<div>
<canvas id="myCanvas" style="width: 100%">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
</div>
</div>
</div>
css :
/* Print page css */
.cutom-container{
border : solid #670827 5px;
border-radius: 10px;
position:fixed;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
/*border: 5px solid red;*/
}
.content-div{
padding: 10px 5px 5px 5px;
display: none;
}
.logo-content{
display: inline-block;
width: 64%
}
.img-content{
display: inline-block;
width: 35%
}
.print-logo{
width: 50%;
}
.logo-div{
text-align: center;
}
.promotional-img{
width: 100%;
}
.img-content{
text-align: center;
}
.input-container{
padding: 8px;
text-align: left;
border:solid #670827 1px;
font-size: 15px;
margin: 10px;
}
/* end */
.warranty-container{
padding: 10px;
font-size: 16px;
border: solid;
border-width: 1px;
}
.cart-product-warrenty{
display: none;
}
.center-align{
text-align: center;
}
#signArea{
margin-bottom:20px ;
}
#media print {
#page {
border : solid #670827 5px;
border-radius: 10px; }
.cart-container{
display: none;
}
.cutom-container{
display: block !important;
padding: 15px;
}
.content-div{
display: block !important;
padding: 15px;
}
.cart-product-warrenty{
display: contents;
}
.summary.title{
display: none;
}
#sub-total-print>.fieldset{
display: none;
}
#block-shipping{
display: none;
}
input.qty{
width: 50px !important;
padding: 0 !important;
text-align: center;
}
.product-item-name{
text-decoration: unset;
font-size: 1.8rem;
line-height: 1;
font-weight: 700;
padding-top: 0px;
}
.messages{
display: none;
}
a{
text-decoration: none !important;
}
}
#media only screen and (max-width: 600px) {
.modal-content{
width: 80%;
}
.current{
width: 250px !important;
}
.sign-pad{
width: 247px !important;
}
.modal-content{
margin-bottom: 55px;
}
.cart-product-warrenty{
display: none;
}
}
<div class="input-fields">
<div class="new">
<div class="first-container">
<form id="new-form" method="POST">
<div class="label">
<span class="fas fa-envelope icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div class="label">
<span class="far fa-id-card icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div class="label">
<span class="fas fa-user-tag icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div>
</div>
</div>
</div>
<div>
<span class="divide">or</span>
</div>
<div class="login-field">
<div class="second-container">
<div class="label">
<span class="far fa-id-card icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div class="label">
<span class="fas fa-key icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div>
</div>
</div>
.fa-arrows-alt-h {
font-size: 30px;
color: #bbb;
}
.input-fields {
display: flex;
background: #F7F9F6;
}
.new {
width: 50%;
float: right;
border-right: 1px dashed #e9e9e9;
}
.form-input {
padding-left: 3.575rem;
height: calc(2.25rem + 2px);
font-size: 1.5rem;
}
.first-container {
display: inline-block;
float: right;
padding-right: 30px;
}
.second-container {
display: inline-block;
padding-left: 30px;
}
.divide {
position: absolute;
left: 0;
right: 0;
margin-left:auto;
margin-right:auto;
top: 20%;
}
I would like to align text, "or" in the middle of the vertical line.
I used left: 50% or 49%, however, it's broken when I shrink the window size for response test.
I couldn't use 'left:0; right: 0; because I did not know the width of text("or")
How can I align the word "or" in the middle of the vertical line?
Can anyone help, please?
Many thanks! :)
To your absolutely positioned span add these styles:
.divide{
left: 50%;
transform: translate(-50%);
}
It works see the codepen here: https://codepen.io/arnavozil/pen/mdVyWGr
The problem you had is that u're using flexbox and at the same time you're giving the containers specific width , instead you can use justify-content : center
.fa-arrows-alt-h {
font-size: 30px;
color: #bbb;
}
.input-fields {
justify-content: center;
display: flex;
display: flex;
background: #F7F9F6;
}
.new {
/* width: 50%; */
/* float: right; */
border-right: 1px dashed #e9e9e9;
}
.form-input {
padding-left: 3.575rem;
height: calc(2.25rem + 2px);
font-size: 1.5rem;
}
.first-container {
/* display: inline-block; */
/* float: right; */
padding-right: 30px;
}
.second-container {
/* display: inline-block; */
padding-left: 30px;
}
.divide {
/* position: absolute; */
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
/* top: 20%; */
} ```
I have a problem that I want to solve,the date icon when I set the alignment to the left does not move the icon tried all the ways and no benefit but work with me transform but it needs to reponsive on all screen and I must do it for all screens
.zsg-cp,
.zsg-datepicker-wrapper {
position: relative
}
.zsg-datepicker-wrapper .zsg-datepicker-link {
color: #006AFF;
font-size: 1.34em;
line-height: 1;
position: absolute;
left: 7px;
top: 5px
}
<div class="zsg-datepicker-wrapper">
<input name="dateField" type="text" value="" id="cal1DateField" min="2019-08-22" max="2020-08-22" class="zsg-datepicker">
<a id="wrapper" style="text-align:left;left:0;float:left;transform: translateX(50px);" href="" class="zsg-datepicker-link"><span class="zsg-icon-calendar"></span></a>
</div>
Try this with your own CSS classes
.input-container {
display: -ms-flexbox;
/* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
outline: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<form>
<div class="input-container">
<input class="input-field" type="text" placeholder="Date" name="dateField">
<i class="fa fa-calendar icon"></i>
</div>
</form>
I've a problem with image overlay.
Code is here: https://codepen.io/r-smal/pen/BOBdmX
<section class="team">
<h2 class="team__title">team</h2>
<div class="team__wrapper container__team ">
<div>
<div class="team__card ">
<div class="team__overlay"></div>
<img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
</div>
<h3 class="team__description">lorem</h3>
<p class="team__span">ipsum</p>
</div>
<div>
<div class="team__card ">
<div class="team__overlay"></div>
<img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
</div>
<h3 class="team__description">lorem</h3>
<p class="team__span">ipsum</p>
</div>
<div>
<div class="team__card ">
<div class="team__overlay"></div>
<img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
</div>
<h3 class="team__description">lorem</h3>
<p class="team__span">ipsum</p>
</div>
</section>
.container__team {
max-width: 1700px;
margin: 0 auto;
}
.team {
&__title {
margin: 100px;
text-align: center;
font-size: 30px;
text-transform: uppercase;
position: relative;
&::after{
content: "";
position: absolute;
width: 85px;
border-bottom: solid 3px #5dc6e8;
left: 48.5%;
top: 50px;
}
}
&__wrapper {
display: grid;
grid-template-columns: 33.33% auto auto;
text-align: center
}
&__description {
margin: 50px 0 20px;
text-align: center;
font-size: 35px;
}
&__span{
font-size: 35px;
text-align: center;
}
&__card {
position: relative;
}
&__overlay {
position: absolute;
background: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
display: none;
}
&__img{
}
}
.team__card:hover .team__overlay{
display: block;
transition: 0.3s;
}
As you can see on codepen overlay on top of image is bigger than my image and I can't figure out why. I made it 'fit" but I have to use static margins so in resoult in mobile version it doesn't look right.
And one last question how do I position ::after element center under my text that will stay here even in mobile?Without using static margin like in my code.
[This is what I want to do: ](
https://developers.google.com/maps/documentation/javascript/?csw=1#Custom_Controls)
What is the floating window called? (which says base maps, with drop down list.)
It's not over lay, nor infowindow, what is it?
It's a div, which they've styled to float over the map pane. If you inspect the element you can see:
<div class="open visible" id="panel">
<div class="mtam-title">
<div id="panel-title">Base Maps</div>
</div>
<div id="panel-body">
<div class="banner basemaps-banner">
<div class="g-plusbtn">
<div id="___plusone_1" style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 24px; height: 15px;">
<iframe title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&annotation=none&size=small&origin=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com&url=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com%2Fdemos%2Fbasemaps&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.tbkZX74SaQs.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCOYzemCn6PkYhgzRa3g2KtXX0dBpg#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1433919884595&parent=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com&pfname=&rpctoken=31017501" name="I0_1433919884595" id="I0_1433919884595" vspace="0" tabindex="0" style="position: static; top: 0px; width: 24px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 15px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" width="100%" frameborder="0"></iframe>
</div>
</div>
</div>
<div class="section section-text">
<p>
For the last decade, we've obsessed over building great maps—maps that are comprehensive, accurate, and easy to use.
</p>
</div>
<div class="section">
<div class="tabs"><a class="active" href="#">Base Maps</a>Styled Maps</div>
</div>
<div class="">
<div>
<h2>Go Further</h2>
<ul style="display: block;">
<li><a class="active" href="/demos/basemaps/new-york">New York</a></li>
<li>Hong Kong</li>
<li>Search</li>
</ul>
<ul style="display: none;">
<li>Sydney</li>
<li>Tokyo</li>
<li>San Francisco</li>
</ul>
</div>
</div>
</div>
</div>
and also:
#panel.visible {
right: 20px;
}
#panel.open {
top: 20px;
}
.section-demos #panel {
display: block;
}
#panel {
position: absolute;
z-index: 1000;
top: 0px;
right: -500px;
width: 270px;
background: #FFF none repeat scroll 0% 0%;
border-radius: 5px;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.61);
display: none;
}