Jquery hide dropdown when mouse leave - javascript

I'm creating a navigation bar with dropdown as follows.
Can I make it so when my pointer leave the navbar menu and dropdown, the dropdown get hidden? I tried hover, mouseenter, and mouseleave but since I don't really understand the difference and I'm new in this I got stuck.
Any help appreciated. :)
$(".navbar-menu-each, .submenu-dropdown").hover(function() {
var menuChoice = $(this).val();
var menuPosition = $(this).find("a").position();
var dropdownPosition = menuPosition.left;
switch(menuChoice) {
case 0:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>New Employee Registration</li><li class='submenu-dropdown-each submenu-selected'>Employee List</li><li class='submenu-dropdown-each'>Employee Rehire</li><li class='submenu-dropdown-each'>Employee Without Bank Account</li><li class='submenu-dropdown-each'>Employee Without PPh 21</li>");
break;
case 1:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Memo Template</li><li class='submenu-dropdown-each'>Print Memo</li>");
break;
case 2:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Download & Upload</li><li class='submenu-dropdown-each'>Send Email</li>");
break;
case 3:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Approvals</li><li class='submenu-dropdown-each'>Employment Status Undo</li>");
break;
case 4:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Report</li><li class='submenu-dropdown-each'>Headcount Report</li><li class='submenu-dropdown-each'>Employee Recapitulation Report</li>");
break;
}
var dropdownWidth = $(".submenu-dropdown").width();
var rightEdge = $(document).width();
if ((dropdownPosition + dropdownWidth) >= (rightEdge - 16)) {
var adjustRight = rightEdge - dropdownWidth - 16;
$(".submenu-dropdown").css({"left": adjustRight + "px"});
}
else {
if (dropdownPosition <= 16) {
$(".submenu-dropdown").css({"left": "16px"});
}
else {
$(".submenu-dropdown").css({"left": dropdownPosition + "px"});
}
}
$(".submenu-dropdown").show();
});
$(".navbar-menu-each").click(function() {
$(".navbar-menu-each").removeClass("menu-on");
$(this).addClass("menu-on");
});
.navbar {
display: block;
width: 100%;
position: relative;
margin-bottom: 240px;
}
.navbar-logo-wrapper {
position: absolute;
height: 60px;
width: 100%;
top: 0;
left: 0;
text-align: center;
}
.navbar-logo-wrapper img {
width: 32px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navbar-top {
width: 100%;
min-height: 60px;
box-shadow: 0px 1px 8px 0 rgba(0,0,0,0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 24px;
box-sizing: border-box;
}
.navbar-top-left {
}
.burger-btn-wrapper {
display: inline-block;
text-align: center;
margin: 0 16px 0 0;
}
.burger-btn-wrapper i {
font-size: 16px;
color: #333;
line-height: 60px;
transform: translateY(1px);
}
.module-name {
height: 60px;
line-height: 60px;
text-transform: uppercase;
display: inline-block;
font-size: 13px;
font-weight: 700;
color: #333;
}
.navbar-top-right {
}
.navbar-top-middle {
height: 60px;
text-align: center;
position: relative;
line-height: 0;
}
.modules-icon {
vertical-align: middle;
display: inline-block;
width: 60px;
text-align: center;
}
.modules-icon i {
font-size: 16px;
color: #333;
line-height: 60px;
}
.navbar-profile {
display: inline-block;
vertical-align: middle;
line-height: 0;
}
.navbar-profile img {
vertical-align: top;
}
.profpic-wrapper {
display: inline-block;
vertical-align: middle;
width: 60px;
height: 60px;
}
.navbar-profpic {
width: 40px;
height: 40px;
background-color: #00c983;
border-radius: 40px;
position: relative;
margin-left: 10px;
margin-top: 10px;
}
.profile-initial {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.profile-name {
display: inline-block;
vertical-align: middle;
font-size: 13px;
}
.profile-dropdown {
vertical-align: middle;
display: inline-block;
margin-left: 8px;
}
.navbar-wrapper {
display: inline-block;
width: 100%;
}
.navbar-top-middle img {
height: 32px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navbar-menu {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.navbar-menu-list {
width: 750px;
list-style-type: none;
margin: 0;
padding: 15px 0;
cursor: pointer;
margin-left: 0;
}
.navbar-menu-each {
padding-left: 32px;
padding-right: 32px;
display: inline-block;
}
.navbar-menu-each:first-child {
padding-left: 24px;
}
.navbar-menu-each a {
color: #333;
font-size: 13px;
text-decoration: none;
}
.menu-on a {
font-weight: 700;
color: #00c983;
}
.navbar-page-name {
display: block;
font-size: 22px;
height: 60px;
line-height: 60px;
border-top: solid 0.5px #DEF5ED;
border-bottom: solid 0.5px #DEF5ED;
background-color: #F0FBF7;
color: #333;
padding-left: 24px;
}
.navbar-menu::-webkit-scrollbar {
height: 0;
}
.navbar-menu::-webkit-scrollbar-thumb {
background-color: transparent;
}
.submenu-dropdown {
background-color: #fff;
box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
position: absolute;
cursor: pointer;
top: 106px;
}
.submenu-dropdown-each {
display: block;
line-height: 48px;
font-size: 13px;
color: #333;
width: auto;
padding: 0 32px 0 24px;
}
.submenu-dropdown-each:hover {
background: #f8f8f8;
}
.submenu-selected {
font-weight: 700;
color: #00c983;
}
#media (max-width: 575px) {
.module-name {
display: none;
}
.profile-name {
display: none;
}
.modules-icon {
display: none;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="navbar">
<div class="navbar-logo-wrapper">
<img class="navbar-tree" src="https://cdn.frontify.com/api/screen/thumbnail/7UV_lfX5OBfHxFn5lc3ygK8UTU3z5pivwY9QDSDIOiFemj-DdmDzmwiPvbibaG63IMXz-MmGOs4aH-UqgoT9gw/350">
</div>
<div class="navbar-top">
<div class="navbar-top-left">
<div class="burger-btn-wrapper">
<i class="fas fa-bars"></i>
</div>
<div class="module-name">Employee</div>
</div>
<div class="navbar-top-right">
<div class="modules-icon"><i class="fas fa-th"></i></div>
<div class="navbar-profile">
<div class="profpic-wrapper">
<div class="navbar-profpic">
<div class="profile-initial">DJ</div>
</div>
</div>
<div class="profile-name">Dennis Jonathan</div>
<div class="profile-dropdown"><i class="fas fa-chevron-down"></i></div>
</div>
</div>
</div>
<div class="navbar-menu">
<ul class="navbar-menu-list">
<li class="navbar-menu-each menu-on" value=0>Employee Directory</li>
<li class="navbar-menu-each" value=1>Memo</li>
<li class="navbar-menu-each" value=2>Bulk Update</li>
<li class="navbar-menu-each" value=3>Approvals and Undo</li>
<li class="navbar-menu-each" value=4>Report</li>
</ul>
</div>
<div class="navbar-page-name">
Employee List
</div>
</div>
<ul class="submenu-dropdown">
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

It seems to me you are overcomplicating a simple process.
hover functionality can quite easily be replicated using only CSS.
.navbar-menu-list {
width: 750px;
list-style-type: none;
margin: 0;
padding: 15px 0;
cursor: pointer;
margin-left: 0;
}
.navbar-menu-each {
padding-left: 32px;
padding-right: 32px;
display: inline-block;
position:relative;
}
.navbar-menu-each a {
color: #333;
font-size: 13px;
text-decoration: none;
}
.navbar-menu-each:hover a {
font-weight: 700;
color: #00c983;
}
.navbar-page-name {
display: block;
font-size: 22px;
height: 60px;
line-height: 60px;
border-top: solid 0.5px #DEF5ED;
border-bottom: solid 0.5px #DEF5ED;
background-color: #F0FBF7;
color: #333;
padding-left: 24px;
}
.submenu-dropdown {
display: none;
background-color: #fff;
box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
position: absolute;
cursor: pointer;
top: 20px;
left:0;
}
.navbar-menu-each:hover > .submenu-dropdown,
.submenu-dropdown:hover{
display: block;
}
.submenu-dropdown-each {
display: block;
line-height: 48px;
font-size: 13px;
color: #333;
width: auto;
padding: 0 32px 0 24px;
}
.submenu-dropdown-each:hover {
background: #f8f8f8;
}
.submenu-selected {
font-weight: 700;
color: #00c983;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="navbar-menu">
<ul class="navbar-menu-list">
<li class="navbar-menu-each">
Employee Directory
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>New Employee Registration</li>
<li class='submenu-dropdown-each submenu-selected'>Employee List</li>
<li class='submenu-dropdown-each'>Employee Rehire</li>
<li class='submenu-dropdown-each'>Employee Without Bank Account</li>
<li class='submenu-dropdown-each'>Employee Without PPh 21</li>
</ul>
</li>
<li class="navbar-menu-each">
Memo
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>Memo Template</li>
<li class='submenu-dropdown-each'>Print Memo</li>
</ul>
</li>
<li class="navbar-menu-each">Bulk Update
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>Download & Upload</li>
<li class='submenu-dropdown-each'>Send Email</li>
</ul>
</li>
<li class="navbar-menu-each">
Approvals and Undo
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>Employee Data Approvals</li>
<li class='submenu-dropdown-each'>Employment Status Undo</li>
</ul>
</li>
<li class="navbar-menu-each">
Report
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>Employee Data Report</li>
<li class='submenu-dropdown-each'>Headcount Report</li>
<li class='submenu-dropdown-each'>Employee Recapitulation Report</li>
</ul>
</li>
</ul>
</div>

Related

How to remove Horizontal scroll bar

i get this horizonatal scroll bar when i add my content to my "section3__container" container even if they are small in size . I have tried alot of things like overFlow hidden overflow-x hidden reducing size of content but the horizontal bar keeps appearing. i need help to remove this horizontal scroll bar.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="/static/styles/style.css" type="text/css">
<link rel='icon' href='/static/images/logo.jpeg' type='image/x-icon'/>
</head>
<body>
<div id="container">
<div id="container__section1">
<nav id="container__section1__destopNav">
chinaza
<ul>
<li class="navItem" ><span id="active"></span> Home</li>
<li class="navItem"><span></span>About</li>
<li class="navItem"><span></span>skill</li>
<li class="navItem"><span></span>Service</li>
<li class="navItem"><span></span>Project</li>
<li class="navItem"><span></span>Contact</li>
<li class="navItem"><a href=""><i class="fa fa-moon-o" aria-hidden="true"></i>
</a></li>
</ul>
</nav>
<nav id="container__section1__mobilepNav">
<ul id="container__section1__mobilepNav__container">
<li id="container__section1__mobilepNav__container__1">chinaza</li>
<li id="container__section1__mobilepNav__container__2">
<ul id="container__section1__mobilepNav__container__2_1">
<li id="theme">
<i class="fa fa-moon-o" aria-hidden="true"></i>
</li>
<li id="menu">
<i class="fa fa-bars" aria-hidden="true"></i>
</li>
<ul id="menu_content">
<li class="navItem"><span></span> Home</li>
<li class="navItem"><span></span>About</li>
<li class="navItem"><span></span>skill</li>
<li class="navItem"><span></span>Service</li>
<li class="navItem"><span></span>Project</li>
<li class="navItem"><span></span>Contact</li>
</ul>
</ul>
</li>
</ul>
</nav>
</div>
<div id="section2" >
<ul id="section2__container">
<li id="section2__container__text" class="section2__container__class">
<ul id="section2__container__text__container">
<li>
<ul id="section2__container__text__container__textContainer__socialMedia">
<li><i class="fa fa-github" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin-square" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter-square" aria-hidden="true"></i></li>
</ul>
</li>
<li id="section2__container__text__container__textContainer">
<h1>Hi, Am Chinaza</h1>
<h4>Frontend developer </h4>
<p> high level experience in web
design and development knowledge,
producing quality work
</p>
<div id="section2__container__text__container__textContainer__container">Contact me</div>
</li>
</ul>
</li>
<li id="section2__containerImage" class="section2__container__class">
<div id="section2__containerImage__container1" class="section2__containerImage__containers">
<div id="section2__containerImage__container2" class="section2__containerImage__containers">
<img src="static/images/about3.svg " alt="">
</div>
</div>
</li>
</ul>
</div>
<div id="section3">
<h1 id="section3__about">About me</h1>
<h4 id="section3_introduction">My introduction</h4>
<ul id="section3__container">
<li id="section3__container__1" class="section3__container__items">
<img src="static/images/undraw_Developer_activity_re_39tg.svg" alt="">
</li>
<li id="section3__container__2" class="section3__container__items">
<p>web developer, with extensive knowledge
and years of experience, working in web
technology and UI/Ux design, delivering quality
work.
</p>
<ul id="section3__container__2__container">
<li>
<h1>3 +</h1>
<p>Years experinece</p>
</li>
<li>
<h1>3</h1>
<p>Completed project</p>
</li>
<li>
<h1>1</h1>
<p>Companies worked</p>
</li>
</ul>
<div id="section3__container__2__download">
Download <i class="fa fa-arrow-circle-down" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</div>
<script src="/static/home.js"></script>
</body>
</html>
$navFontSize: 18px;
$navcolor:black;
$maincolour: rgb(54, 54, 168);
$fadeAsh:rgb(114, 112, 112);
$minwidth:290px;
$h1FontSize:40px;
$h4FontSize:20px;
$h1FontSizeMobile:30px;
$h4FontSizeMobile:20px;
$paragraph:23px;
#mixin button {
width: 170px;
height: 45px;
text-align: center;
line-height: 45px;
margin-top: 40px;
a{
text-decoration: none;
display: inline-block;
width: 100%;
height: 100%;
font-size: 20px;
border: 2px solid $maincolour;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: rgb(236, 232, 247);
transition: background-color 1s;
}
&:hover a{
background-color: $maincolour;
color: white;
border: none;
}
}
*{
margin: 0;
padding: 0;
}
#container{
width: 100vw;
height: 100vh;
}
#container__section1{
width: 100%;
height: 80px;
z-index: 2000;
#container__section1__destopNav{
width:100%;
height: 100px;
position: fixed;
z-index: 200;
#logo{
text-decoration: none;
padding: 30px;
line-height: 30px;
color: $navcolor;
font-size:25px;
}
ul{
display: flex;
flex-direction: row;
text-align: center;
margin: 0 auto;
width: 600px;
list-style: none;
justify-content: space-evenly;
li{
position: relative;
padding: 9px;
span{
position: absolute;
bottom: 0;
left: 0;
height: 0px;
width: 0;
transition: width 2s height 4s;
background-color: rgb(54, 54, 168);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
#active{
height: 3px;
width: 100%;
background-color: $maincolour;
}
a{
text-decoration: none;
font-size: $navFontSize;
color: $navcolor;
width: 100%;
padding: 5px;
}
}
li:hover span{
height: 3px;
width: 100%;
background-color: rgb(81, 100, 209);
}
}
}
}
#section2{
width: 100%;
height: auto;
z-index: -1;
margin-top: 70px;
min-width: $minwidth;
#section2__container{
width: 85%;
display: flex;
flex-wrap: wrap-reverse;
list-style: none;
margin: 0;
padding: 0;
margin: 0 auto;
justify-content: space-evenly;
height: 100%;
.section2__container__class{
list-style: none;
height: 400px;
.section2__containerImage__containers{
margin-top: 40px;
width: 270px;
height: 270px;
}
#section2__containerImage__container1{
position: relative;
transform: translateY(4px) rotateZ(-5deg);
background-color: #3636a8;
margin: 0 auto;
}
#section2__containerImage__container2{
position: absolute;
bottom: 0;
transform: translateY(4px) rotateZ(5deg);
img{
width: 100%;
height: 100%;
}
}
}
#section2__container__text #section2__container__text__container{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
height: 100%;
#section2__container__text__container__textContainer__socialMedia{
flex: 1;
width: 100px;
height: 200px;
list-style: none;
vertical-align : middle;
margin-top: 90px;
padding: 0;
padding-right: 30px;
li{
padding-top: 25px;
font-size: 20px;
color:rgb(54, 54, 168);
}
}
#section2__container__text__container__textContainer{
flex: 2;
h1{
font-size: $h1FontSize;
margin-top: 20px;
}
h4{
color: $fadeAsh;
font-size: 23px;
margin-top: 15px;
}
p{
color: $fadeAsh;
margin-top: 15px;
width: 330px;
font-size: 20px;
}
#section2__container__text__container__textContainer__container{
#include button()
}
}
}
}
}
#section3{
width: 100%;
overflow-x: hidden;
#section3__about{
overflow-x: hidden;
text-align: center;
font-size: $h1FontSize;
}
#section3_introduction{
text-align: center;
color:$fadeAsh;
font-size: $h4FontSize;
margin-top: 25px;
}
#section3__container{
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto;
height: fit-content;
list-style: none;
margin-top: 60px;
#section3__container__1{
text-align: center;
img{
width: 314px;
height: 314px;
}
}
.section3__container__items{
flex: 1;
}
#section3__container__2 {
p{
width: 70%;
color: $fadeAsh;
font-size: $paragraph;
}
#section3__container__2__container{
list-style: none;
display: flex;
flex-wrap: nowrap;
margin-top: 30px;
width: 85%;
li{
text-align: center;
width: 100%;
}
li h1{
text-align: center;
}
}
#section3__container__2__download{
#include button()
}
}
}
}
#container__section1__mobilepNav{
display: none;
}
#media(max-width:1024px){
#container{
height: 100%;
}
#container__section1__destopNav{
display: none;
}
#container__section1__mobilepNav{
display:inline-block;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 65px;
box-shadow:0px 4px 20px rgb(189, 188, 188);
z-index: 1;
#container__section1__mobilepNav__container{
height: 60px;
box-shadow:0px 4px 20px rgb(189, 188, 188);
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding-top: 20px;
background-color: white;
li{
width: 100px;
}
li #logo2{
text-decoration: none;
font-size:20px;
padding-left: 20px;
}
#container__section1__mobilepNav__container__1{
text-align: left;
}
#container__section1__mobilepNav__container__2{
#container__section1__mobilepNav__container__2_1{
display: flex;
list-style: none;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
width: 100px;
#menu_content{
position: absolute;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
width:0%;
padding-top: 46px;
height:0rem;
top: -173px;
left: 0;
transition: width 2s height 4s;
list-style: none;
height:9rem;
width:100%;
display: none;
:nth-child(2){
text-align: left;
}
.navItem a{
text-decoration: none;
}
}
#menu{
&:hover + #menu_content{
height:9rem;
width:100%;
display: block;
display: flex;
justify-content: space-around;
}
}
}
}
}
}
#section2{
margin-top: 0px;
#section2__container{
width: 100%;
.section2__container__class{
.section2__containerImage__containers{
margin-top: 40px;
width: 210px;
height: 210px;
}
}
}
}
#section3{
#section3__about{
font-size:$h1FontSizeMobile;
}
#section3__container{
width: 100%;
#section3__container__1{
text-align: center;
img{
width: 210px;
height: 210px;
}
}
}
#section3__container #section3__container__2{
text-align: center;
p{
width: 90%;
margin: 0 auto;
}
#section3__container__2__container{
width: 100%;
}
#section3__container__2__download{
margin: 0 auto;
margin-top: 40px;
}
}
}
}
#media(max-width:690px){
#section2__container__text{
width: 100%;
min-width:$minwidth;
}
#section2__containerImage{
position: relative;
}
#section2__container__text__container__textContainer__socialMedia{
position: absolute;
top: 50px;
}
#section2 #section2__container #section2__container__text #section2__container__text__container
{
width: 90%;
margin: 0 auto;
}
#section2 #section2__container #section2__container__text #section2__container__text__container
#section2__container__text__container__textContainer{
margin: 0 auto;
p{
width: 90%;
}
h1{
font-size: 30px;
}
}
#section2 #section2__container .section2__container__class{
height: 300px;
}
}```
body {
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Resource: W3Schools

How can I reverse the order of div elements upside down on 'onclick'?

I have the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>StackOverflow Question</title>
<style>
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
justify-content: stretch;
align-items: flex-end;
}
.scroller2{
height: 250px;
overflow-y: scroll;
}
.circle {
position: relative;
margin-bottom: 40px;
height: 20px;
display: flex;
align-items: center;
}
.circle::before {
content:"";
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 5px;
}
.circle::after {
position: absolute;
content: '';
left: 7.5px;
top: 20px;
width: 5px;
background: #4d4d4d;
height: 40px;
}
.minor::before {
background-color: purple;
}
.major::before {
background-color: red;
}
.gray::before {
background-color: gray;
}
.tlbtn {
background-color: #343434;
border-radius: 10px;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: robotobold;
}
#tltitle,.tlbtn{
display: inline-flex;
}
</style>
</head>
<body>
<script>
function btn1Click() {
document.getElementById("btn1").style.backgroundColor="#5c5c5c";
document.getElementById("btn2").style.backgroundColor="#343434";
}
function btn2Click() {
document.getElementById("btn2").style.backgroundColor="#5c5c5c";
document.getElementById("btn1").style.backgroundColor="#343434";
}
</script>
<div class="container--wrap-scroll scroller2" id="timeline">
<p id="tltitle" style="color: #D4E1E4; font-size: 20px; text-align: left; padding-top: 0px; padding-right: 10px;color: black;"><b>Timeline</b></p>
<div id="btn1" class="tlbtn" style="margin-bottom: -10px; background-color: #5c5c5c;" onclick="btn1Click();"><text style="font-size: 15px; font-family: robotobold;text-align: center;">Newest</text></div>
<div id="btn2" class="tlbtn" style="margin-bottom: -10px;" onclick="btn2Click();"><text style="font-size: 15px; font-family: robotobold; text-align: center;">Oldest</text></div>
<div class="circle major "><text style="color:red; font-family:robotolight; font-size: 12px;">Major Event | Yesterday</text></div>
<div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 2 days ago</text></div>
<div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 1 week ago</text></div>
<div class="circle minor"><text style="color:purple; font-family:robotolight; font-size: 12px;">Minor Event | 1 month ago</b></text></div>
</div>
</body>
</html>
When 'Oldest' is pressed, I would like the order of the div elements to reverse sort - please notice that the last circle has a line which goes below it, and I would like this to stay the same:
e.g. Major Event will be at the bottom when OLDEST is pressed and have a grey line below it as well.
Is there a way I can do this?
Screenshot:
If you want to use only CSS, you could try using Flexbox and switching between flex-direction column and column-reverse:
const timeline = document.getElementById('timeline');
const newestButton = document.getElementById('button--newest-first');
const oldestButton = document.getElementById('button--oldest-first');
newestButton.onclick = () => {
timeline.classList.remove('timeline--oldest-first');
timeline.classList.add('timeline--newest-first');
oldestButton.classList.remove('button--selected');
newestButton.classList.add('button--selected');
};
oldestButton.onclick = () => {
timeline.classList.add('timeline--oldest-first');
timeline.classList.remove('timeline--newest-first');
oldestButton.classList.add('button--selected');
newestButton.classList.remove('button--selected');
};
body {
margin: 0;
padding: 8px;
font-family: monospace;
font-size: 14px;
}
.header {
display: flex;
padding-bottom: 8px;
margin-bottom: 16px;
align-items: center;
border-bottom: 2px solid black;
}
.title {
margin-right: auto;
}
.button {
font-family: monospace;
font-size: 14px;
border-radius: 2px;
padding: 4px 8px;
margin-left: 8px;
cursor: pointer;
border: 0;
outline: none;
border: 2px solid black;
background: transparent;
}
.button--selected {
background: yellow;
}
.timeline {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.timeline--newest-first {
flex-direction: column;
}
.timeline--oldest-first {
flex-direction: column-reverse;
}
.circle {
position: relative;
margin-bottom: 16px;
height: 20px;
display: flex;
align-items: center;
}
.timeline--newest-first > .circle:last-child,
.timeline--oldest-first > .circle:first-child {
margin-bottom: 0;
}
.circle::before {
content:"";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 16px;
border: 2px solid black;
}
.circle::after {
position: absolute;
content: '';
left: 9px;
top: 20px;
width: 2px;
background: #000;
height: 16px;
}
.timeline--newest-first > .circle:last-child::after,
.timeline--oldest-first > .circle:first-child::after {
display: none;
}
.minor::before {
background-color: purple;
}
.major::before {
background-color: red;
}
.gray::before {
background-color: gray;
}
<header class="header">
<strong class="title">TIMELINE</strong>
<button id="button--newest-first" class="button button--selected">
NEWEST
</button>
<button id="button--oldest-first" class="button">
OLDEST
</button>
</header>
<ul class="timeline timeline--newest-first" id="timeline">
<li class="circle major ">
Major Event | Yesterday
</li>
<li class="circle gray">
Information | 2 days ago
</li>
<li class="circle gray">
Information | 1 week ago
</li>
<li class="circle minor">
Minor Event | 1 month ago
</li>
</ul>

Embeded Twitter Link Showing Up Above Hamburger Dropdown

I am building a website for a college class and I've run into a problem. I can't seem to find the answer when I google it, so I made an account to post it here. I hope that someone is able to identify what is going on.
As you can see, the embedded twitter post is showing up on top of the hamburger menu and I'm not sure how to get it underneath.
Here is the HTML (It's still a work in progress and I'm pretty new so please forgive me for any ugly code):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="height=device-height, initial-scale=1.0">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="images/run.png">
</head>
<body>
<header>
<div id="weatherBar" class="weatherBar">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
<nav class="menu">
<ul>
<li>
About the Events
<ul class="submenu">
<li>Starting Times</li>
<li>Course Details</li>
<li>What to Bring</li>
</ul>
</li>
<li>Upcoming Events</li>
<li>Registration</li>
<li>Packet Pick Up</li>
<li>About Us</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</nav>
<div class="socialLinks">
<img src="images/fb-ico.png" alt="" class="iconHeight">
<img src="images/twit-ico.png" alt="" class="iconHeight">
<img src="images/inst-ico.png" alt="" class="iconHeight">
</div>
</div>
</header>
<main class="wrapper">
<div id="details" class="details lightSub contentFill contentPad">
<h2 class="subHeader">What People are Saying</h2>
<div class="sub_head_line_white"></div>
<div class="socialWrapper centering">
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fcas222cascade%2Fposts%2F366912850439109&width=350&show_text=true&height=214&appId" width="350" height="214" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
<div class="socialWrapper centering">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Fantastic weather for training! Can't wait to get in the water for open water swims!</p>— CAS 222 (#pcccas222) May 10, 2018</blockquote>
</div>
</div>
</main>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/ham.js"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
Here is the javascript:
$(document).ready(function () {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").show();
$(".hamburger").on("click", function () {
$(".menu").slideToggle("slow");
$(".hamburger").hide();
$(".cross").show();
});
$(".cross").on("click", function () {
$(".menu").slideToggle("slow");
$(".cross").hide();
$(".hamburger").show();
});
$(".menu a").on("click", function () {
$(".menu").slideToggle("slow");
$(".cross").hide();
$(".hamburger").show();
});
});
Here is the CSS:
Menu.css
.hamburger {
background: none;
position: relative;
top: 0;
right: 0;
line-height: 35px;
color: red;
border: 0;
font-size: 1.4em;
font-weight: 700;
cursor: pointer;
outline: none;
z-index: 10;
}
.cross {
background: none;
position: relative;
top: 0;
right: 0;
color: red;
border: 0;
font-size: 3em;
line-height: 55px;
font-weight: 700;
cursor: pointer;
outline: none;
z-index: 10;
}
.socialLinks {
background: none;
position: fixed;
top: 8px;
right: 10px;
color: red;
border: 0;
cursor: pointer;
outline: none;
z-index: 10;
}
.iconHeight {
height: 20px;
}
.menu {
/* z-index: 10;*/
font-weight: 700;
width: 100%;
height: 100vh;
background: rgb(0, 0, 0, .85);
position: absolute;
top: 25px;
padding-top: 20px;
right: 0;
text-align: left;
font-size: 2em;
text-decoration: none;
color: white;
font-family: 'Roboto Condensed', sans-serif;
z-index: 10;
}
.menu ul {
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0;
text-decoration: none;
color: white;
}
.menu li {
display: block;
padding: 15px 0;
padding-left: 25px;
padding-right: 25px;
}
.menu li:hover {
display: block;
padding: 15px 0;
padding-left: 25px;
padding-right: 25px;
color: red;
}
.menu ul a {
text-decoration: none;
color: white;
margin: 0;
}
.menu ul a:hover {
text-decoration: none;
color: red;
}
.menu ul a:active {
text-decoration: none;
color: white;
}
.menu ul a:visted {
text-decoration: none;
color: gray;
}
.submenu li {
padding-left: 25px;
}
style.css
body {
.grayGradient;
}
main {}
.hero {
background-image: url(../images/run3.jpg);
background-size: auto;
background-position: center;
height: 500px;
width: 100%;
}
.heroBot {
width: 100%;
height: 20px;
background-color: #000;
}
.weatherBar {
position: fixed;
height: 40px;
width: 100%;
background: black;
border-bottom: 3px red solid;
margin-left: auto;
margin-right: auto;
}
footer {
height: 30px;
width: 100%;
background: black;
border-top: 3px red solid;
}
h1 {
.fontOswald;
font-size: 60px;
color: white;
font-weight: bold;
text-align: center;
}
.headerSize {
font-size: 50px;
.fontNarrow;
font-weight: normal;
letter-spacing: 1px;
}
.titleDiv {
padding-left: 15px;
width: 95%;
padding-top: 40px;
margin-left: auto;
margin-right: auto;
padding-right: 15px;
border-bottom: 3px red solid;
}
.titleText {
padding-top: 20px;
padding-bottom: 20px;
}
.disc {
margin-top: 40px;
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
.fontBaseText;
font-size: 1.5em;
color: #000;
text-align: center;
font-weight: lighter;
line-height: 30px;
}
.facebookFeed {
margin-left: auto;
margin-right: auto;
display: block;
}
.contentPad {
padding: 20px 20px 45px 20px;
}
.contentFill p {
font-size: 1.2em;
.fontBaseText;
line-height: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.subHeader {
.fontNarrow;
font-size: 1.8em;
}
.subHeaderAlt {
.fontNarrow;
font-size: 1.8em;
color: #fff;
}
.sub_head_line {
height: 5px;
width: 95%;
.grayGradientBtR;
}
.sub_head_line_white {
height: 5px;
width: 95%;
.grayGradientWtR;
}
.darkSub {
background-color: #000;
color: #fff;
}
.lightSub {
background-color: #fff;
color: #000;
}
.tableDay {
text-align: center;
font-size: 1.2em;
.fontNarrow;
}
.timesTable {
margin: 10px;
margin-top: 20px;
align-content: center;
.fontBaseText;
}
.timesTable tr:first-child {
border: none;
}
.timesTable tr {
border-left: 2px #mainRed solid;
border-right: 2px #mainRed solid;
}
.timesTable table,
tr,
td,
th {
border-collapse: collapse;
padding: 3px;
}
.timesTable th {
font-weight: bold;
padding: 10px;
}
.timesTable td {
padding: 10px;
}
.timesTable tr:nth-child(even) {
background-color: #darkGray;
}
.raceName {
width: 180px;
}
.raceTime {
width: 100px;
}
.startingTimeTableWrapper {
width: 100%;
}
.centering {
.marginCenter;
}
.socialWrapper {
width: 350px;
margin-top: 10px;
z-index: -1;
}
.subHeader:before {
height: 25px;
display: block;
content: '';
}
.subHeaderAlt:before {
height: 25px;
display: block;
content: '';
}

css, lines dashing vertically through bullets

This may sound stupid, But I am on edge here. Does anyone knows how to do this in css or javascript? (preferably css)
You could try this:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
.section_header {
background-color: #7e9489;
border-radius: 20px;
width: 200px;
height: 20px;
color: #fff;
text-align: center;
padding: 10px;
line-height: 20px;
}
.section_content {
margin: 0px;
padding: 0px;
display: block;
border-left: solid 2px #7e9489;
margin-left: 99px;
padding-top: 10px;
}
.section_content > li {
display: block;
position: relative;
line-height: 40px;
}
.section_content > li::before {
position: relative;
display: inline-block;
vertical-align: middle;
content: '';
width: 12px;
height: 12px;
border-radius: 10px;
background-color: #7e9489;
margin-left: -7px;
margin-right: 20px;
z-index: 10;
}
.section_content > li > span {
display: inline-block;
vertical-align: middle;
}
.section_content > li:last-child::after {
content: '';
display: block;
position: absolute;
bottom: 0px;
left: -2px;
width: 2px;
height: 50%;
background-color: white;
z-index: 1;
}
<div class="section_header">OCT 5, 2016</div>
<ul class="section_content">
<li><span>Segment 1</span></li>
<li><span>Segment 2</span></li>
<li><span>Segment 3</span></li>
<li><span>Segment 4</span></li>
</ul>
Quick and dirty:-
.date {
border-radius: 30px;
background-color: #7C9288;
width: 200px;
text-align: center;
padding: 10px;
color: #fff;
}
.box {
border-left: 2px solid #7C9288;
margin-left: 110px;
margin-top: -16px;
padding-top: 20px;
}
li {
color: #7C9288;
list-style-type:none;
}
li:before{
content:'\00b7';
font-size:100px;
line-height:24px;
vertical-align:middle;
}
ul {
margin-left: -57px;
}
<div class="date">Today</div>
<div class="box">
<ul>
<li>Test</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>

How to set multicolumn dropdown as such each drop down will use the same drop down frame?

I was required to program the following header ( the borders I've added
to know if it renders as I need to ):
"Select Project", "Select Item" and "Select Content" are dropdown elements.
Each one take 2 grids. I need that when clicking on the dropdown element, no matter which one, the drop down menu will take a width of 6 grids as shown above
in the blue frame.
( In other words, the drop down menu will be the same for all dropdown elements
but the content is different ).
In addition, when resizing to smaller screen, the media query doesn't work at all:
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) and (max-width : 1370px) {
.dropdown-menu.multi-column {
width: 765px !important;
}
}
What am I doing wrong here ?
HTML:
<!-- Layout Container-->
<div id="main-wrapper">
<!--Header - Top Bar Navigation-->
<header class="margin-left-right-20">
<div class="row top-bar">
<!-- Logo Image -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div">
<img src="images/logo.png" id="logo" alt="logo" />
</div>
<!-- Application Indicator -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div">
<a href="#">
<div>
<span class="top-bar-small-title">App</span>
<br />
<span class="top-bar-app-links" id="current-app-selected">App1</span>
</div>
</a>
</div>
<!-- Module (a.k.a Project) Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<div class="dropdown">
<a id="dLabel" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">Project</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Project</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu multi-column" aria-labelledby="dLabel">
<div class="dropdown-menu multi-column">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<ul class="dropdown-menu">
<li>Col 1 - Opt 1</li>
<li>Col 1 - Opt 2</li>
</ul>
</div>
<div class="span6">
<ul class="dropdown-menu">
<li>Col 2 - Opt 1</li>
<li>Col 2 - Opt 2</li>
</ul>
</div>
</div>
</div>
</div>
<!--<li>
<div class="row" style="width: 760px;">
<ul class="list-unstyled col-md-4">
<li>test1-1</li>
<li>test1-2</li>
<li>test1-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test2-1</li>
<li>test2-2</li>
<li>test2-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test3-1</li>
<li>test3-2</li>
<li>test3-3</li>
</ul>
</div>
</li>-->
<!--<li>Item 1</li>
<li>Item 2</li>-->
</ul>
</div>
</div>
<!-- Module (a.k.a Project) Selector -->
<!--<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Module</span><br />
<span class="top-bar-app-links make-it-regular">Select Module</span>
</div>-->
<!-- Item Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
</div>
<!-- Block Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Content</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Content</span>
</div>
<!-- Search Bar -->
<div class="col-md-2 col-lg-offset-1 col-lg-2 top-bar-margin-top border-div" id="div-search-bar">
<div class="input-group input-search col-md-12 col-lg-12 form-group">
<input type="text" class="form-control" name="q" id="search-bar" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default btn-search-custom" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<!-- Avatar user -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div" id="div-avatar-circle">
<div class="avatar-circle col-lg-1">
</div>
<div class="show-user col-lg-8" style="display:inline-block">
<span class="show-user-name">Lionel Messi</span>
<span class="show-user-permission">Programmer</span>
</div>
</div>
</div>
<!-- End <div class="row top-bar">-->
</header>
</div>
CSS:
* {
padding: 0;
margin: 0;
/* height:100%;*/
}
.margin-left-right-20 {
margin-left: 20px;
margin-right: 20px;
}
.border-div {
border: solid 1px black;
}
.container {
margin-left: 20px;
margin-right: 20px;
width: 100%;
position: relative;
}
#logo {
width: 79px;
height: 42px;
margin-left: 26px;
}
.top-bar {}
.top-bar-margin-top {
margin-top: 43px;
/*padding: 0;*/
}
.top-bar-margin-top a:hover {
text-decoration: none;
}
.top-bar-small-title {
font-family: 'Lato', sans-serif;
font-size: 10px;
color: #2baab1;
}
.top-bar-app-links {
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #2baab1;
}
#current-app-selected {
font-weight: bold;
}
#search-bar {
/*width: 325px;*/
width: 100%;
height: 29px;
}
/*#media only screen and (min-width: 1200px) and (max-width: 1368px) {
#search-bar{
width: 200px;
height: 29px;
}
}*/
/*#avatar-and-search-in-new-line {
display:none;
}*/
.make-it-regular {
color: #373d42;
}
input.search-query {
padding-left: 26px;
}
.input-group-btn:last-child {
border-radius: 500px;
}
.input-search .input-group-btn {
color: #ccc;
}
.input-group-icon .input-group-btn,
.input-search .input-group-btn {
border-radius: 500px;
width: 0;
left: -13%;
z-index: 1000;
}
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
input-group-rounded input.form-control:first-child,
.input-group-rounded input.form-control:last-child,
.input-search input.form-control:first-child,
.input-search input.form-control:last-child {
border-radius: 500px;
}
.input-group-icon input.form-control:first-child,
.input-group-icon input.form-control:last-child,
.input-search input.form-control:first-child,
.input-search input.form-control:last-child {
border-radius: 25px;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-rounded input.form-control,
.input-search input.form-control {
-webkit-border-radius: 500px;
border-radius: 500px;
}
.input-group-icon input.form-control,
.input-search input.form-control {
font-size: 12px;
font-size: 1.2rem;
padding-right: 36px;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
-webkit-appearance: none;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.input-group-btn:first-child,
.input-search .input-group-btn:last-child {
border-radius: 500px;
}
.input-search .input-group-btn {
color: #ccc;
}
.input-group-icon .input-group-btn,
.input-search .input-group-btn {
border-radius: 500px;
width: 0;
}
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.btn-search-custom {
border: 0px solid transparent;
padding: 0;
}
.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
z-index: 2;
margin-left: 13px;
}
#div-avatar-circle {
padding: 0;
}
.avatar-circle {
background-color: #5c6770;
border-color: #5c6770;
border-radius: 50%;
border-style: solid;
border-width: 1px;
height: 40px;
width: 40px;
display: inline-block;
vertical-align: top;
}
.show-user {
display: inline-block;
/* width: 98px; */
margin-top: 3px;
/* margin-left: 10px; */
/* margin: 0; */
/* padding: 0px; */
padding-left: 3px;
}
.nav-tabs-colors {
background-color: #ececef;
}
.edit-app-tabs {
background-color: #ececef;
}
#edit-app-tab {
background-color: #ececef;
}
#edit-app-content-title {
margin-left: 35px;
}
.app-name-title {
position: absolute;
top: 193px;
}
.app-name-title div h3 {
margin: 0;
padding: 0;
}
.privacy-statement-text-area {
position: absolute;
top: 241px;
}
#privacy-statement-data {
background-color: white;
resize: none;
overflow-y: auto;
/*width:460px;*/
height: 224px;
max-height: 224px;
}
.panel {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
/* border-radius: 4px;*/
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
/* overflow-y: auto;*/
/*width:431px;*/
/*width:402px;*/
}
.panel-margin-settings {
margin-left: 20px;
margin-bottom: 15px;
}
#first-component {
margin-top: 33px;
}
.component-heading {
background: #2baab1;
height: 47px;
}
.component-heading-title {
margin-top: 11px;
margin-left: 15px;
margin-bottom: 0;
font-size: 22px;
color: white;
font-family: 'Lato', sans-serif;
display: inline-block;
}
.panel-heading {
background: #fdfdfd;
/* border-radius: 5px 5px 0 0;*/
/* border-bottom: 1px solid #DADADA;*/
/* padding: 18px;*/
position: relative;
}
/*
.panel-title {
color: #33353F;
font-size: 20px;
font-weight: 400;
line-height: 20px;
padding: 0;
text-transform: none;
}
*/
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 22px;
color: #2baab1;
font-family: 'Lato', sans-serif;
display: inline-block;
}
.panel-heading + .panel-body {
/* border-radius: 0 0 5px 5px;*/
}
.panel-body {
background: #fdfdfd;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
/* border-radius: 5px;*/
}
.panel-body {
padding: 15px;
}
.checkbox-custom {
position: relative;
padding: 0 0 0 25px;
margin-bottom: 7px;
margin-top: 0;
}
.checkbox-custom input[type="checkbox"] {
opacity: 0;
position: absolute;
top: 50%;
left: 3px;
margin: -6px 0 0 0;
z-index: 2;
cursor: pointer;
}
.checkbox-custom label {
cursor: pointer;
margin-bottom: 0;
text-align: left;
line-height: 1.2;
}
.checkbox-custom label:before {
content: '';
position: absolute;
top: 50%;
left: 0;
margin-top: -9px;
width: 19px;
height: 18px;
display: inline-block;
border-radius: 2px;
border: 1px solid #bbb;
background: #fff;
}
.checkbox-custom input[type="checkbox"]:checked + label:after {
position: absolute;
display: inline-block;
font-family: 'FontAwesome';
content: '\F00C';
top: 50%;
left: 4px;
margin-top: -5px;
font-size: 11px;
line-height: 1;
width: 16px;
height: 16px;
color: #2baab1;
}
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
/*
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-left: -20px;
}
*/
.new-category {
float: right;
margin-top: 5px;
text-decoration: none;
}
.new-category:link,
.new-category:visited,
.new-category:hover {
text-decoration: none;
cursor: pointer;
}
.dd {
position: relative;
display: block;
margin: 0;
padding: 0;
/* list-style: none;*/
font-size: 13px;
line-height: 20px;
}
.dd-list {
display: block;
position: relative;
margin: 0;
padding: 0;
list-style-type: decimal;
/* list-style: none;*/
}
.dd-item,
.dd-empty,
.dd-placeholder {
display: block;
position: relative;
margin: 0;
padding: 0;
min-height: 20px;
font-size: 13px;
line-height: 20px;
display: list-item;
}
.dd-item-reset {
font-size: 0;
}
.dd-handle {
display: block;
height: 34px;
margin: 5px 0;
padding: 6px 10px;
color: #333;
text-decoration: none;
font-weight: 600;
border: 1px solid #CCC;
background: white;
/* background: #F6F6F6;*/
-webkit-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.dd-list-ul {
list-style-type: none;
}
.dd-handle-assoc-file {
display: inline-block;
/*width:280px;*/
width: 277px;
height: 31px;
vertical-align: middle;
border-radius: 0;
font-size: 14px;
}
.btn-associated-file-item {
background-color: #dcdcdc;
border-bottom-left-radius: 5px;
border-color: #5c6770;
border-style: solid;
border-top-left-radius: 5px;
border-width: 1px;
height: 31px;
width: 93px;
display: inline-block;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
/* border-right:1px solid blc;*/
}
.close-assoc-file {
line-height: inherit;
}
#glossary-file-select,
#definition-file-select,
#design-file-select {
visibility: hidden;
z-index: -1000;
height: 0;
width: 0;
}
#modules-list-table-padding {
padding-left: 65px;
padding-right: 65px;
}
#modules-list-table-title {
margin-top: 33px;
margin-left: 15px;
display: block;
}
#create-module {
font-size: 12px;
color: #2baab1;
font-family: 'Lato', sans-serif;
font-weight: bold;
float: right;
text-decoration: none;
display: inherit;
margin-top: -5px;
margin-right: 10px;
}
#table-underline {
border: 1px solid #2baab1;
margin-top: 12px;
}
.modules-table > tbody > tr > th,
.modules-table > tbody > tr > td {
border-color: #ececef;
}
.modules-table tr > *:nth-child(1) {
padding-left: 15px;
}
.modules-table tr > *:nth-child(2) {
padding-left: 67px;
width: 336px;
max-width: 336px;
}
.modules-table tr > *:nth-child(3) {
padding-left: 103px;
padding-right: 30px;
}
.modules-table tr > *:nth-child(4) {
padding-right: 11px;
}
.modules-table > tbody > tr > td:last-child {
text-align: center;
}
/*.modules-table tr > th:last-child {
padding-right: initial;
float:right;
}*/
/*.modules-table tr > *:last-child {
padding-left: 10px;
}*/
/*.modules-table > tbody > tr > td:nth-child(2) {
width:336px;
}*/
/*div[class^="col-lg-1"]:first-child {
margin-left: 20px;
}*/
/*div[class^="col-lg-1"]:last-child {
margin-right: 20px;
}
div[class^="col-lg-3"]:first-child {
margin-left: 20px;
}
div[class^="col-lg-3"]:last-child {
margin-right: 20px;
}*/
.tools-option-link {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #373d42;
vertical-align: middle;
margin-left: 5px;
}
.tools-option-container {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: solid 1px black;
}
.reset-padding-top {
padding-top: 0;
}
#tools-block a:hover {
text-decoration: none;
}
#ChartistExtremeResponsiveConfiguration {}
.module-name {
display: inline-block;
width: 150px;
}
.circular-bar.circular-bar-xs {
width: 50px;
}
.circular-bar {
margin: 25px 0;
}
.circular-bar {
margin-bottom: 25px;
}
.mr-md {
margin-right: 15px !important;
}
.mt-xs {
margin-top: 5px !important;
}
.m-none {
margin: 0 !important;
}
.circular-bar-container {
position: relative;
top: 5px;
}
.circular-bar-percentage-text {
position: absolute;
top: 29%;
left: 21%;
}
table {
border-collapse: collapse;
}
td {
padding-top: 10px;
padding-bottom: 10px;
}
#module-of-the-day-id {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #2baab1;
}
#module-of-the-day-name {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #373d42;
}
.stars-styling {
font-size: 18px;
color: #ffbb00;
}
#module-of-the-day-review-paragraph {
/*width:343px;*/
font-size: 14px;
margin-top: 15px;
}
#item-reviewer {
float: right;
font-size: 14px;
/*font-family: 'Lato', sans-serif;*/
font-weight: bold;
color: #373d42;
}
#module-of-the-day-item-reviewer {
margin-bottom: 15px;
}
#module-usage-stats {
clear: both;
}
#module-usage-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#module-usage-text-container {
position: absolute;
top: 13%;
}
#module-usage-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#module-usage-status {
font-size: 14px;
}
/* */
#published-items-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#published-items-text-container {
position: absolute;
top: 13%;
}
#published-items-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#published-items-status {
font-size: 14px;
}
#published-items-percentage-text {
top: 33%;
left: 31%;
}
/* */
#device-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#device-text-container {
position: absolute;
top: 3%;
}
#device-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#device-status {
font-size: 14px;
}
#view-all-statistics {
margin-top: 15px;
}
#view-all-statistics a:link {
text-decoration: underline;
}
.stats-paragraph-styling {
font-size: 14px;
font-weight: bold;
margin: 0;
}
.mb-none {
margin-bottom: 0 !important;
}
.text-weight-bold {
font-weight: 700;
}
h4,
.h4 {
font-size: 18px;
font-size: 1.8rem;
}
.text-xs {
font-size: 10px;
font-size: 1rem;
}
.text-muted {
color: #777;
}
/* */
.general-data-num-styling {
font-family: 'Lato', sans-serif;
font-size: 40px;
color: #2baab1;
}
.general-data-text-styling {
font-family: 'Lato', sans-serif;
font-size: 12px;
color: #373d42;
}
#items-num-inner-container {
/*margin-left: 15px;
margin-right: 15px;*/
border-left: solid 1px;
border-right: solid 1px;
}
/* */
.widget-summary {
display: table;
width: 100%;
}
.widget-summary .widget-summary-col.widget-summary-col-icon {
width: 1%;
}
.widget-summary .widget-summary-col {
display: table-cell;
vertical-align: top;
width: 100%;
}
.widget-summary .summary-icon {
margin-right: 15px;
font-size: 42px;
/*font-size: 4.2rem;*/
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
color: #fff;
-webkit-border-radius: 55px;
border-radius: 55px;
}
.bg-primary {
background: #0088cc;
}
.bg-secondary {
background: #E36159;
color: #FFF;
}
.bg-tertiary {
background: #2BAAB1;
color: #FFF;
}
.bg-quartenary {
background: #734BA9;
color: #FFF;
}
.widget-summary .summary {
min-height: 65px;
word-break: break-all;
}
.widget-summary .summary .title {
margin: 0;
font-size: 16px;
/*font-size: 1.6rem;*/
line-height: 22px;
/*line-height: 2.2rem;*/
color: #333;
font-weight: 500;
}
.widget-summary .summary .info {
font-size: 14px;
/*font-size: 1.4rem;*/
line-height: 30px;
/*line-height: 3rem;*/
}
.widget-summary .summary .amount {
margin-right: .2em;
font-size: 24px;
/*font-size: 2.4rem;*/
font-weight: 600;
color: #333;
vertical-align: middle;
}
.widget-summary .summary .info span {
vertical-align: middle;
}
.text-primary {
color: #0088cc !important;
}
.widget-summary .summary-footer {
padding: 5px 0 0;
border-top: 1px dotted #ddd;
text-align: right;
}
.text-uppercase {
text-transform: uppercase;
}
/*.panel-featured-tertiary {
border-color: #2BAAB1;
}
.panel-featured-quartenary {
border-color: #734BA9;
}*/
/*.panel-featured-left {
border-left: 3px solid #33353F;
}*/
.module-subscriptions {
display: block;
margin-top: 10px;
margin-left: 15px;
margin-right: 9px;
padding-bottom: 10px;
border-bottom: solid 3px;
}
.dropdown-menu.multi-column {
width: 1036px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width: 100px;
}
JSFiddle link: https://jsfiddle.net/jaeedxpw/2/
Thanks in advance,
Eli Van Rock

Categories