I was wondering if anyone has had any success in doing extensive modifications to Angular Material components?
For example, I'm trying to modify their simple form-field component https://material.angular.io/components/form-field/overview
to look and behave like this custom input I've created with pure html/css:
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<span class="input-wrapper">
<input class="gs-ng-input" type="text" required>
<label>Name</label>
</span>
</div>
</body>
</html>
CSS
.container {
padding: 50px;
}
.input-wrapper {
border: 1px solid #000;
display: inline-block;
}
.gs-ng-input, .gs-ng-input:focus {
border: none;
outline: none;
width: 338px;
height: 42px;
font-size: 25px;
padding-left: 10px;
}
.input-wrapper:focus-within {
border: none;
}
.input-wrapper {
box-sizing: border-box;
position: relative;
}
.input-wrapper::before, .input-wrapper::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.input-wrapper::before, .input-wrapper::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.input-wrapper::before, .input-wrapper::after {
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-transform-origin: center;
transform-origin: center;
}
.input-wrapper::before {
border-top: 2px solid #9bdaf1;
border-bottom: 2px solid #9bdaf1;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
.input-wrapper::after {
border-left: 2px solid #9bdaf1;
border-right: 2px solid #9bdaf1;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
}
.input-wrapper:focus-within::before, .input-wrapper:focus-within::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
}
.input-wrapper:focus-within {
box-shadow: 0 0 4px 0 rgba(0, 191, 231, 0.4);
transition: box-shadow .6s ease-in;
}
.input-wrapper label {
color:#999;
font-size:25px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:10px;
top:7px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.input-wrapper:focus-within label {
top:-20px;
font-size:14px;
color:#5264AE;
}
.input-wrapper input:valid + label {
top:-20px;
font-size:14px;
color:#5264AE;
}
https://jsfiddle.net/za2f6r3L/
Related
So pretty much I have a avatar that is floating up and down, but I also want to add a way for when you hover over it, text will slide in that says my name. I don't care if it is JavaScript or CSS, I also want to keep the hover animation that happen when you hover over the image.
Here is my code so far.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Floating Avatar</title>
<link rel="stylesheet" href="./styles/main.css">
<script src="./js/main.js" defer></script>
</head>
<body>
<div class="container">
<div class="avatar">
<img src="assets/images/avatar.png" alt="avatar" class="avatarimage"/>
</a>
</div>
</div>
</body>
</html>
CSS:
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Helvetica', sans-serif;
background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%);
}
h1 {
font-size: 24px;
margin: 10px 0 0 0;
font-weight: lighter;
text-transform: uppercase;
color: #eeeeee;
}
p {
font-size: 12px;
font-weight: light;
color: #333333;
}
span a {
font-size: 18px;
color: #cccccc;
text-decoration: none;
margin: 0 10px;
transition: all 0.4s ease-in-out;
&:hover {
color: #ffffff;
}
}
#keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.avatar {
width: 150px;
height: 150px;
box-sizing: border-box;
border: 5px white solid;
overflow: hidden;
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
animation: float 6s ease-in-out infinite;
img { width: 1000%; height: auto; }
}
.avatarimage:hover {
transform: scale(1.05);
}
.avatarimage {
width: 100%;
transition: all .5s ease-in-out;
}
This is totally possible with CSS and isn't that hard to accomplish since you already have overflow hidden set on your .avatar class.
Basically you'll just add your name inside .avatar:
<div class="avatar">
<img src="assets/images/avatar.png" alt="avatar" class="avatarimage" />
<p class="avatarname">Your Name</p>
</div>
Then, you'll add the CSS to transition that in on the hover of .avatar:
.avatarname {
color: white;
font-size: 2rem;
left: 0;
position: absolute;
top: 0;
transform: translateX(-100%);
transition: all 0.5s ease-in-out;
}
.avatar:hover .avatarname {
transform: translateX(0%);
}
You'll also need to add position: relative; to your .avatar CSS.
Here's an example on codepen
This works, but there are some other things that we can clean up. You have a few things defined in a few places. Your img styles for example, that could be in one place, especially since you're using SCSS. Here is a cleaned up example for you:
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica", sans-serif;
background: linear-gradient(90deg, #fdbb2d 0%, #3a1c71 100%);
}
#keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform: translatey(0px);
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.avatar {
animation: float 6s ease-in-out infinite;
border: 5px white solid;
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
box-sizing: border-box;
height: 150px;
overflow: hidden;
position: relative;
transform: translatey(0px);
width: 150px;
}
.avatar img {
object-fit: cover;
height: 100%;
transition: all 0.5s ease-in-out;
width: 100%;
}
.avatar .avatarname {
color: white;
font-size: 2rem;
left: 0;
position: absolute;
top: 0;
transform: translateX(-100%);
transition: all 0.5s ease-in-out;
}
.avatar:hover img {
transform: scale(1.05);
}
.avatar:hover .avatarname {
transform: translateX(0%);
}
<div class="container">
<div class="avatar">
<img src="https://images.unsplash.com/photo-1520423465871-0866049020b7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0NjUwNjI&ixlib=rb-4.0.3&q=80" alt="avatar" class="avatarimage" />
<p class="avatarname">Your Name</p>
</div>
</div>
I am working on making a search bar that will filter my site for reports(urls) based on what is typed in. It currently works sort of. It will filter the items but you have the have the menus expanded for it to filter them.
I am looking for a way to either only have the results that match the search show(get rid of the headers for the dropdowns and only show links). OR to auto expand the dropdowns when a character is typed into the search bar
(closest I could get for a repeatable example.)
function searchSite() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('searchbar');
filter = input.value.toUpperCase();
ul = document.getElementById("Sidebar");
li = ul.getElementsByTagName('li');
closestClass = ul.closest('.parent');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
.evolve .barTop {
-webkit-transform: rotate(-45deg) translate(-8px, 8px);
transform: rotate(-45deg) translate(-8px, 8px);
}
.evolve .barMid {
opacity: 0;
transition: 0.1s ease-in;
}
.evolve .barBot {
-webkit-transform: rotate(-45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
#main {
transition: margin-left 0.5s;
position: relative
}
.content {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height 1s ease-out;
box-shadow: inset 0px 0px 7px 7px rgba(0, 0, 0, 0.15);
}
.content .content-stuff {
background-color: #20396120;
border-left: outset #203961 13px;
padding: .5rem 1rem;
}
.content .content-stuff .subcontent {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height .75s ease-out;
}
.content .content-stuff .subcontent .subcontent-stuff {
border-bottom: solid grey 3px;
padding: .5rem;
}
.button:checked+.header+.content {
max-height: inherit;
}
.subbutton:checked+.subheader+.subcontent {
max-height: inherit;
}
.content .content-stuff .clickLink {
cursor: pointer;
}
hr {
border-style: solid;
color: #20396150;
border-height: .5px;
}
ul.Links {
list-style-type: none;
margin: 0;
padding: 0px;
}
li:not(:last-child) {
margin-bottom: 10px;
}
.fade-in-image {
position: absolute;
top: 13px;
left: 60px;
transition: FadeIn 1.0s ease-in;
}
.fade-in-image h2 {
margin-top: 1px;
margin-left: 45px;
color: #fca445;
white-space: nowrap;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-shadow: 3px 6px 6px rgba(0, 0, 0, 0.19), 0px -7.5px 15px rgba(255, 255, 255, 0.10);
;
}
#keyframes slide-right {
0% {
margin-left: -10%
}
;
100 {
margin-left: 80%
}
;
}
.fade-in-image img {
position: absolute;
animation: move 3s ease infinite;
}
#keyframes move {
0% {
margin-left: -10px;
}
5% {
margin-left: -9.25px;
}
10% {
margin-left: -10px;
}
15% {
margin-left: -10px;
}
75% {
margin-left: 3px;
}
80% {
margin-left: -11.5px;
}
85% {
margin-left: -5.5px;
}
87.25% {
margin-left: -11px;
}
90% {
margin-left: -7px;
}
95% {
margin-left: -10.5px;
}
97.5% {
margin-left: -9.25px;
}
100% {
margin-left: -10px;
}
}
}
/* popup code credit: codeconvey.com */
.sidebar .pop {
position: absolute;
width: 50%;
margin: auto;
padding: 20px;
height: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#media (max-width: 640px) {
.pop {
position: relative;
width: 100%;
}
}
.sidebar .pop .modal {
z-index: 2;
opacity: 0;
visibility: hidden;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
}
.sidebar .pop .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(0.75);
transform: translate(-50%, -50%) scale(0.75);
top: 50%;
left: 50%;
width: 50%;
background: white;
padding: 30px;
position: absolute;
color: black;
}
#media (max-width: 640px) {
.pop .modal__inner {
width: 100%;
}
}
.sidebar .btn-close {
color: #fff;
text-align: center;
}
.sidebar .pop label {
position: absolute;
top: 8px;
right: 55px;
padding: 1px 19px 1px 19px;
font-size: 45px;
cursor: pointer;
transition: 0.2s;
color: #fca445;
}
.sidebar .pop label.open:hover {
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
background-color: #33d62b60;
font-size: 45px;
}
.sidebar .pop input {
display: none;
}
.sidebar .pop input:checked+.modal {
opacity: 1;
visibility: visible;
}
.sidebar .pop input:checked+.modal .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal .modal__inner p {
font-size: 1.25rem;
line-height: 125%;
}
.sidebar .pop input:checked+.modal label {
position: absolute;
top: 0;
right: 0;
padding: 4px 8px 4px 8px;
font-size: 20px;
cursor: pointer;
transition: 0.2s;
color: #000;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal label:hover {
background-color: #ff141860;
}
<div id="Sidebar" class="sidebar">
<p style="text-align:center;"><input id="searchbar" onkeyup="searchSite()" type="text" name="search" placeholder="Search" title="Report or Category Name" style="width: 300px;" /></p>
<input id="OpsButton" class="button" type="checkbox">
<label for="OpsButton" class="header">Operations</label>
<div class="content">
<div class="content-stuff">
<input id="Button1" class="subbutton" type="checkbox">
<label for="Button1" class="subheader">Header1</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region" href="X" target="bodyinfo">Region</a></li>
<li><a title="range" href="X" target="bodyinfo">range</a></li>
</ul>
</div>
</div>
<input id="FinancialButton" class="subbutton" type="checkbox">
<label for="FinancialButton" class="subheader">Financials</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region2" href="X" target="bodyinfo">Region2</a></li>
<li><a title="range2" href="X" target="bodyinfo">range2</a></li>
</ul>
</div>
</div>
<p>
</p>
<ul class="Links">
<li>Turnover Report</li>
</ul>
<p></p>
</div>
</div>
</div>
Okay figured it out by creating a function that will click all of the header buttons to expand the menus. and adding this function call to my main function. So if the menu is already expanded, it won't close it- otherwise it'll open it. Rinse and repeat for all buttons in your webpage.
var something = (function() {
var executed = false;
return function() {
if (!executed) {
executed = true;
var OpsButton = document.getElementById("OpsButton");
var next = document.getElementById("w/e");
if (!OpsButton.checked) {
OpsButton.click(); }
if (!next.checked) {
next.click(); }
}
};
})();
So I have built out an interactive progress bar and everything works fine in Google Chrome and it even looks fine in Safari (surprisingly) without Safari vendor prefixes. However, the progress bar color goes back to the default blue color in Firefox. I've tried using vendor prefixes and it still changes back to blue. I'm kind of confused on what route I should take now. I have heard of but never used feature queries, not sure if this is an appropriate time to use them or what. The progress bar should be red until it gets to 100% then change to green. This is what I have so far:
(function() {
var button, heading, initialValue, progressbar;
button = document.getElementById('btn');
progressbar = document.getElementById('progress-bar');
heading = document.getElementById('visual-progress');
initialValue = 'Quiz Progress';
button.addEventListener('click', function() {
var myValue;
if (progressbar.value >= 100) {
progressbar.value = 100;
} else {
progressbar.value += 25;
}
if (progressbar.value === 100) {
progressbar.classList.add('progress-100');
}
myValue = initialValue + ' ' + progressbar.value;
document.getElementById('visual-progress').innerHTML = myValue + '%';
return button.classList.add('button-active');
});
}).call(this);
#import url("https://fonts.googleapis.com/css?family=Playfair+Display");
nav {
background: black;
height: 80px;
width: 100%;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 10px;
}
.progress-container {
padding: 10px 20px;
margin-top: 3em;
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 20px;
}
progress::-webkit-progress-bar {
background-color: #ccc;
width: 100%;
}
progress::-moz-progress-bar {
background-color: #ccc;
width: 100%;
}
progress::-webkit-progress-value {
background-color: #D22128 !important;
-webkit-transition: all .7s;
transition: all .7s;
}
progress::-moz-progress-value {
background-color: #D22128 !important;
-webkit-transition: all .7s;
transition: all .7s;
}
.progress-100::-webkit-progress-value {
background-color: forestgreen !important;
-webkit-transition: all .5s;
transition: all .5s;
}
.progress-100::-moz-progress-value {
background-color: forestgreen !important;
-webkit-transition: all .5s;
transition: all .5s;
}
button {
margin-top: 2em;
background: transparent;
color: black;
border: 1px solid black;
padding: .7em 3em;
}
.button-active {
-webkit-transition: all .2s;
transition: all .2s;
background: black;
color: white;
}
.card-container {
max-width: 450px;
margin: 0 auto;
}
.success-message {
font-family: 'Playfair Display', serif;
text-align: center;
padding-bottom: 2em;
-webkit-animation: slideUp .5s;
animation: slideUp .5s;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 6px 13px rgba(0, 0, 0, 0.22);
padding: 20px;
margin-top: 3em;
min-height: 150px;
}
.success-paragraph {
font-size: 14px;
}
#-webkit-keyframes slideUp {
from {
-webkit-transform: translateY(500px);
transform: translateY(500px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes slideUp {
from {
-webkit-transform: translateY(500px);
transform: translateY(500px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
<body>
<nav></nav>
<div class='container'>
<div class='progress-container'>
<h1 class='ut-margin-v-sm' id='visual-progress'>Quiz Progress</h1>
<progress id='progress-bar' max='100' value='0'></progress>
<button id='btn'>Next</button>
</div>
</div>
<div class='card-container'>
<div id='output'></div>
</div>
</body>
Firefox doesn't seem to have the ::progress-value pseudo-element implemented.
For this browser, you will directly target the parent ::progress-bar.
(function() {
var button, heading, initialValue, progressbar;
button = document.getElementById('btn');
progressbar = document.getElementById('progress-bar');
heading = document.getElementById('visual-progress');
initialValue = 'Quiz Progress';
button.addEventListener('click', function() {
var myValue;
if (progressbar.value >= 100) {
progressbar.value = 100;
} else {
progressbar.value += 25;
}
if (progressbar.value === 100) {
progressbar.classList.add('progress-100');
}
myValue = initialValue + ' ' + progressbar.value;
document.getElementById('visual-progress').innerHTML = myValue + '%';
return button.classList.add('button-active');
});
}).call(this);
#import url("https://fonts.googleapis.com/css?family=Playfair+Display");
nav {
background: black;
height: 80px;
width: 100%;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 10px;
}
.progress-container {
padding: 10px 20px;
margin-top: 3em;
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 20px;
}
progress::-webkit-progress-bar {
background-color: #ccc;
width: 100%;
}
progress{ /* for FF target directly the element */
background-color: #ccc;
width: 100%;
}
progress::-webkit-progress-value {
background-color: #D22128 !important;
-webkit-transition: all .7s;
transition: all .7s;
}
progress::-moz-progress-bar { /* for FF ::progress-bar is the value bar */
background-color: #D22128 !important;
transition: all .7s;
}
.progress-100::-webkit-progress-value {
background-color: forestgreen !important;
-webkit-transition: all .5s;
transition: all .5s;
}
.progress-100::-moz-progress-bar {
background-color: forestgreen !important;
transition: all .5s;
}
button {
margin-top: 2em;
background: transparent;
color: black;
border: 1px solid black;
padding: .7em 3em;
}
.button-active {
-webkit-transition: all .2s;
transition: all .2s;
background: black;
color: white;
}
.card-container {
max-width: 450px;
margin: 0 auto;
}
.success-message {
font-family: 'Playfair Display', serif;
text-align: center;
padding-bottom: 2em;
-webkit-animation: slideUp .5s;
animation: slideUp .5s;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 6px 13px rgba(0, 0, 0, 0.22);
padding: 20px;
margin-top: 3em;
min-height: 150px;
}
.success-paragraph {
font-size: 14px;
}
#-webkit-keyframes slideUp {
from {
-webkit-transform: translateY(500px);
transform: translateY(500px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes slideUp {
from {
-webkit-transform: translateY(500px);
transform: translateY(500px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
<body>
<nav></nav>
<div class='container'>
<div class='progress-container'>
<h1 class='ut-margin-v-sm' id='visual-progress'>Quiz Progress</h1>
<progress id='progress-bar' max='100' value='0'></progress>
<button id='btn'>Next</button>
</div>
</div>
<div class='card-container'>
<div id='output'></div>
</div>
</body>
I'm attempting to use a form from codepen user Kyle Lavery sign up modal as a popup. I'm using <?php include"contact.html"; ?> in my index.html. My problem is that contact.html has overflow: hidden applied to the body which is conflicting with index.html. It's also possible that the styles applied to *, :before, :after are an issue but so far I can't tell. I tried putting a div around the entire form and it's parent divs and applying the styling from body to it but that cause the animation to shake slightly. Any suggestions on how to to apply this CSS while still keeping the animation smooth? My next thought is to use jQuery to only apply this CSS when the popup opens onclick. View the snippet full-screen to see the animation properly.
$(".close, .nope").on('click', function () {
$('.modal').addClass('hidden');
$('.open').addClass('active');
})
$(".open").on('click', function () {
$(this).removeClass('active');
$('.modal').removeClass('hidden');
})
*, :before, :after {
box-sizing: border-box;
margin: 0;
-webkit-transition: 0.4s;
transition: 0.4s;
}
body {
overflow: hidden;
}
.popup {
color: #FFF;
font-family: Roboto;
}
.modal {
height: 450px;
width: 650px;
margin: auto;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transition: .4s, box-shadow .3s .4s;
transition: .4s, box-shadow .3s .4s;
}
.modal.hidden {
box-shadow: none;
-webkit-transition: .4s, box-shadow 0s;
transition: .4s, box-shadow 0s;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.modal.hidden .form {
top: 100%;
}
.modal.hidden .invite {
top: -100%;
}
.modal.hidden .invite .close {
height: 0;
width: 0;
top: 0;
right: 0;
}
.form, .invite {
background: rgba(71, 71, 71, 0.8);
width: 50%;
height: 100%;
padding: 25px;
position: absolute;
top: 0;
left: 0;
}
input {
background: rgba(255, 255, 255, 0.15);
width: 100%;
padding: 8px;
margin: 15px 0;
border: none;
border-radius: 3px;
outline: none;
color: #FFF;
font-size: 20px;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 500px #7a7a7a inset;
-webkit-text-fill-color: #FFF;
}
label {
font: 500 14px Roboto;
color: #ffb66e;
}
button {
background: -webkit-linear-gradient(135deg, #f04527, #ffb66e);
background: linear-gradient(-45deg, #f04527, #ffb66e);
padding: 10px 20px;
border: none;
border-radius: 21px;
outline: none;
overflow: hidden;
position: absolute;
bottom: 30px;
left: 50%;
color: #FFF;
font-size: 18px;
cursor: pointer;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
button:hover:before {
left: 110%;
-webkit-transition: .3s;
transition: .3s;
}
button:before {
content: '';
background: rgba(255, 255, 255, 0.3);
height: 100%;
width: 65px;
position: absolute;
top: 0;
left: -100%;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
-webkit-transition: 0s;
transition: 0s;
}
.invite {
background: -webkit-linear-gradient(135deg, #f04527, #ffb66e);
background: linear-gradient(-45deg, #f04527, #ffb66e);
left: 50%;
}
h2 {
font: 30px Roboto;
text-transform: uppercase;
}
.close {
background: #474747;
height: 30px;
width: 30px;
border: 3px solid #FFF;
border-radius: 50%;
position: absolute;
top: -15px;
right: -15px;
cursor: pointer;
-webkit-transition: .4s .3s;
transition: .4s .3s;
}
.close:before, .close:after {
content: '';
background: #FFF;
height: 80%;
width: 3px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
-ms-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
.close:after {
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
.open {
color: black;
height: 45px;
width: 150px;
padding: 10px 20px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.open.active {
opacity: 1;
filter: alpha(opacity=100);
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Daily UI #001 - Sign Up Modal</title>
<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/contact.css">
</head>
<body>
<div class="popup">
<a class="open active" title="open modal" href="#">Open Modal</a>
<div class="modal hidden">
<div class="form">
<form>
<label for="first-name" required="required">First Name</label>
<input id="first-name" type="text" />
<label for="last-name" required="required">Last Name</label>
<input id="last-name" type="text" />
<label for="email" required="required">Email Address</label>
<input id="email" type="email" />
<label for="message">Message</label>
<input id="message" type="text" />
<button type="button">Send</button>
</form>
</div>
<div class="invite">
<h2>Thank you for your interest. I look forward to speaking with you soon.</h2>
<div title="close" class="close"></div>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/contact.js"></script>
</body>
</html>
I previously was using this code:
My questions is how to set the tooltip to show up inline (to the right) with the parent div instead of above.
Thanks for looking it over
easier to read jsfiddle http://jsfiddle.net/SAYnZ/1/
HTML:
<div id="wrapper">START.
<div id="tooltip">GOOD LUCK !</div>
</div>
CSS:
#wrapper {
cursor: pointer;
position: fixed;
text-transform: uppercase;
background: #39AC9B;
color: #FFFFFF;
font-family: "Gill Sans", Impact, sans-serif;
font-size: 30px;
top: -webkit-calc(50% - 50px);
left: -webkit-calc(50% - 137px);
padding: 16px 25px;
text-align: center;
width: 250px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
#wrapper #tooltip {
background: #1496bb;
bottom: 100%;
color: #fff;
display: block;
left: -25px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
#wrapper #tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
#wrapper #tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
#wrapper:hover #tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
I've updated your fiddle, just set
#wrapper #tooltip {
...
top: -3px;
left: 100%;
color: #fff;
margin-left: 15px;
...
and make triangle point to right direction
Make the bottom=20% in your #wrapper #tooltip.
Check your Fiddle. Have Updated it.
Sorry if its not what you want