I want to avoid using duplicated code if it is possible. What I am doing right now essentially is to use similar code for #menu-icon and #close-menu were the only difference being the value of percentage I use in height: property. Is there any effective way of using SCSS to avoid using duplications of code?
#import "../../resources/Variables.scss";
header {
position: fixed;
background-color: $color-background;
width: 100%;
height: 22%;
top: 0;
left: 0;
#menu-icon {
position: absolute;
height: 8%;
top: 45%;
left: 10%;
margin-right: -50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#close-menu {
position: absolute;
height: 15%;
top: 45%;
left: 10%;
margin-right: -50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
}
You can use Mixin for avoiding duplication of code.
#mixin menu_prop($menu_height){
height: $menu_height;
position: absolute;
top: 45%;
left: 10%;
margin-right: -50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
header {
position: fixed;
background-color: $color-background;
width: 100%;
height: 22%;
top: 0;
left: 0;
#menu-icon {
#include menu_prop(8%);
}
#close-menu {
#include menu_prop(10%);
}
}
#import "../../resources/Variables.scss";
header {
position: fixed;
background-color: $color-background;
width: 100%;
height: 22%;
top: 0;
left: 0;
#menu-icon, #close-menu {
position: absolute;
height: 8%;
top: 45%;
left: 10%;
margin-right: -50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#close-menu {
height: 15%;
}
}
or just
#import "../../resources/Variables.scss";
header {
position: fixed;
background-color: $color-background;
width: 100%;
height: 22%;
top: 0;
left: 0;
#menu-icon, #close-menu {
position: absolute;
top: 45%;
left: 10%;
margin-right: -50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#menu-icon{
height: 8%;
}
#close-menu {
height: 15%;
}
}
Related
I am trying to practice simple CSS Animations with Keyframes.
I am trying to move the square from left to right, however, this does not seem to be working with position relative/absolute. I works when I do transform: translateX(...) or something similar, but not with the aforementioned method. Any ideas why?
CSS Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(70, 70, 162);
}
.box1 {
height: 600px;
width: 80%;
background-color: white;
margin: 50px auto;
border: 5px solid black;
position: relative;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
animation-name: left-right;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes left-right {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
right: 0px;
}
}
So, in the Keyframes you had right
100% {
top: 0px;
right: 500px;}
where as it needed to be left
100% {
top: 0px;
left: 500px;}
full code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(70, 70, 162);
}
.box1 {
height: 600px;
width: 80%;
background-color: white;
margin: 50px auto;
border: 5px solid black;
position: reletive;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
animation-name: left-right;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes left-right {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
left: 500px;
/*here*/
}
}
Picture of positioned div's using css
based on the css that i wrote using absolute position, I thought the boxes would meet evenly on the ends but the blue box is not flush with the yellow box. Is there a rule that i'm misunderstanding?
Add top: 0; and left: 0; to class blue. By default they are being set to top: 8px & left: 8px causing the overlap.
.blue {
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
.yellow {
height: 100px;
width: 100px;
background-color: yellow;
position: absolute;
top: 100px;
left: 100px;
}
.red {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 200px;
left: 200px;
}
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>
</body>
Add this to your blue class
top: 0;
left: 0;
This may help more as well: How to place div in top right hand corner of page
I tried following advice about this issue from other chat rooms but with no luck. I am using Unbounce and I copied all codes from one old landing page to a new one. Everything works except the arrows are not visible (yet they are clickable, they work).
All I managed to do so far was removing the frame around the arrows.
Any idea what could be wrong?
Link to the new LP
Link to the old LP with working Flexslider
<style>
a {
text-decoration: none !important;
}
/*Testimonials slider*/
.testimonial-container {
background-color: transparent;
width: 100%;
}
.cd-testimonials-wrapper {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
background-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 25px 0px 40px 0;
z-index: 1;
}
.testimonial-content {
max-width: 1000px;
width: 80%;
margin: 0 auto 30px auto;
}
.cd-testimonials {
color: rgba(130, 132, 139, 1);
text-align: center;
list-style: none;
padding: 0;
margin: 0;
}
.cd-testimonials > li {
position: absolute;
opacity: 0;
font-family: 'Fira Sans', sans-serif;
}
.cd-testimonials > li:first-child {
position: relative;
opacity: 1;
}
.testimonial-content p {
font-style: italic;
line-height: 1.4;
margin-bottom: 30px;
padding: 0 14px;
font-size: 19px;
color: #284A6A;
}
.cd-author .cd-author-info {
display: inline-block;
vertical-align: top;
color: #0058A9;
font-size: 16px;
font-weight: 500;
text-align: center;
line-height: 1
}
ul.cd-author-info {
list-style: none;
}
ul.cd-author-info li span {
font-size: 14px;
line-height: 32px;
font-style: italic;
font-weight: 300;
color: #9c9c9c;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 50px;
height: 100%;
margin: 0px 0 0;
position: absolute;
z-index: 9999;
top: 0;
opacity: 1;
background: transparent;
cursor: default;
color: transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
font-size: 52px;
font-family: Arial;
content: "\f053";
position: absolute;
display: block;
top: 50%;
cursor: pointer;
color: transparent;
padding: 14px 10px 14px 10px;
}
.flex-direction-nav a.flex-next:before {
content: "\f054";
padding: 14px 20px 14px 10px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-control-paging li a {
width: 6px;
height: 6px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(2, 23, 31, 1);
cursor: default;
}
.flex-control-nav {
bottom: 30px;
position: absolute;
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
}
.flex-control-nav li {
display: inline-block;
padding: 0px 5px 0px 5px;
}
/*Footer icons custom style*/
.footer-icons {
text-align: left;
}
.footer-icons a {
margin-right: 10px;
color: #fff;
}
#media screen and (max-width: 767px) {
.cd-author .cd-author-info {
line-height: 1.4;
}
.cd-author .cd-author-info {
font-size: 16px;
}
.testimonial-content p {
font-size: 16px;
}
.flex-direction-nav a {
width: 30px;
}
.flex-direction-nav a:before {
font-size: 30px;
}
.flex-direction-nav a:before {
padding: 14px 0px 10px 0px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
}
</style>
You lose Font Awesome css, which is required as the nav arrow.
add
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
to <head> section. (Just as the working page does, check it's source code line 2825). Good luck.
Im trying to implement displaying text when hovering over an image in vue.js but I am a bit stuck. Im trying to implement this example on an array with multiple images:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I got a pretty big vue file but here is the essential:
template:
</template>
[...]
<div v-for="item in filteredPeople" v-bind:key="item.id" class="list-complete-item">
<router-link #mouseover.native="hovertext" :to="'/'+item.link">
<img class="list-complete-img" :src="'http://placehold.it/400x300?text='+item.id" alt>
</router-link>
</div>
[...]
</template>
script
<script>
export default {
data() {
return {
info: [
{
id: 1,
title: "Title one",
link: "project1",
hovertext: "project1 hover text lorem lorem lorem",
category_data: {
"1": "Category 1"
}
},
[...]
methods: {
hovertext() {
console.log("");
},
I had some idea to try to use a method to put the text in a div under the image but then I cannot get the text to get above the image on hover. And I cannot get the method right ... Not really sure this is a good way doing it,
I also found this codepen example:
https://codepen.io/oliviaisarobot/pen/xzPGvY
This is pretty close to what I want to do but I cannot get the text to display here either.
I am a bit lost. Any help how to do this in vue?
---------- UPDATE ----------
I want the image boxes to stretch so they always fits the window but I seems to get a gap between my flexbox rows which I cannot seem to get rid of. You can see the white space. I attach my stylesheet.
.list-complete {
display: flex;
height: auto;
flex-direction: row;
flex-flow: row wrap;
}
.list-complete-item {
flex: 0 1 50%;
display: inline-block;
}
.list-complete-item a {
display: inline-block;
position: relative;
width: 100%;
height: auto;
outline: 1px solid #fff;
}
.list-complete-img {
width: 100%;
}
.text {
color: rgb(186, 74, 74);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.list-complete-item a:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
height: 60%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #008cba;
}
You don't need to use js(vue) events. Do it with plain css, like in example you linked to.
Go with this template:
<div v-for="item in filteredPeople" v-bind:key="item.id" class="list-complete-item">
<router-link :to="'/'+item.link">
<img class="list-complete-img" :src="'http://placehold.it/400x300?text='+item.id" alt>
<div class="overlay">
<div class="text">{{ item.hovertext }}</div>
</div>
</router-link>
</div>
And style it up:
.list-complete-item {
width: 400px;
height: 300px;
display: inline-block;
}
.list-complete-item a {
display: inline-block;
position: relative;
width: 400px;
height: 300px;
}
.list-complete-item a .image {
display: block;
width: 100%;
height: auto;
}
.list-complete-item a .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.list-complete-item a:hover .overlay {
opacity: 1;
}
.list-complete-item a .text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
And the final result:
I have checked possibilities and issues with frameworks. Bootstrap has additional code and some code need to be modified.
I enclose my code CSS and I kindly ask you to check and inform me if this is correct, specially position elements.
.carousel {
height: 250px;
margin-bottom: 20px;
margin-top: 10px;
}
.carousel-caption {
z-index: 20;
}
.carousel-caption {
left: 10%;
padding-bottom: 30px;
right: 10%;
}
.carousel .item {
height: 250px;
}
.carousel-inner > .item > img {
height: 250px;
left: 0;
min-width: 100%;
position: relative;
top: 0;
}
.carousel-control {
width: 5%;
}
.carousel-control.left, .carousel-control.right {
display: block;
float: left;
height: 250px;
width: 5%;
}
.carousel-control.left {
background: url("../images/left1.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.carousel-control.right {
background: url("../images/right1.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.carousel-indicators {
bottom: 10px;
left: 40%;
list-style: none outside none;
margin-left: -20%;
padding-left: 0;
position: absolute;
text-align: center;
width: 50%;
z-index: 15;
}