I'm adding a ribbon to a card and I want to display dynamically the content and the color based on props. I successfully did it with attr() for the content, but it seems I'm stucked to update the background-color, how can I do it?
HTML:
<span class="ribbon zindex-2" :data-content="content" />
SCSS:
.ribbon {
position: absolute;
width: 100px;
height: 100px;
top: 0px;
left: 15px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.ribbon::before {
content: attr(data-content);
position: absolute;
width: 150%;
height: 28px;
background: red; /* value to update dynamically but I don't know how */
transform: rotate(-45deg) translateY(-20px);
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-weight: 600;
color: #fff;
letter-spacing: 0.1em;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
The content variable is coming from a Vue Prop. For example, I want to set this background to gold if the content variable is "1", gray if it's "2" and so on...
Thanks
You could use attribute selectors in css:
.ribbon[data-content="1"]::before {
background: gold;
}
.ribbon[data-content="2"]::before {
background: gray;
}
Related
I have created a mobile nav following this tutorial on youtube https://www.youtube.com/watch?v=IF6k0uZuypA.
The nav dropdown as show in this picture is fully opaque and nothing behind dropdown shows through. However, only on the 'reviews list' page, where the sort by and add review elements are, the elements underneath the dropdown show and mess the mobile nav up, as shown here.
I am using React, MUI material icons https://mui.com/components/material-icons/ for the 'add' icon and MUI select for the sort and order by https://mui.com/components/selects/.
I have switched the add icon from MUI and replaced it with Fontawesome, but the issue still appears.
I have also tried setting the Z-index of the dropdown to 1 and the Z-index of the add icon underneath to -1, but this only seems to disable the add element under the dropdown.
I have also tried adding an 'opacity: 1' to the dropdown, this does not seem to change anything either.
// navbar css
* {
margin: 0px;
}
:root {
--bg: #242526;
--bg-accent: #484a4d;
--nav-size: 60px;
--border: 1px solid #474a4d;
--border-radius: 8px;
--speed: 500ms;
margin-top: 75px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
/* color: #dadce1; */
text-decoration: none;
}
.logo {
color: #dadce1;
margin: 0px;
display: flex;
align-items: center;
}
.navbar {
height: var(--nav-size);
background-color: var(--bg);
padding: 0 1rem;
border-bottom: var(--border);
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
width: 100%;
}
.navbar-list {
max-width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
}
.nav-item {
width: calc(var(--nav-size) * 0.8);
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
}
.icon-button {
--button-size: calc(var(--nav-size) * 0.5);
width: var(--button-size);
height: var(--button-size);
/* background-color: #484a4d; */
border-radius: 50%;
padding: 5px;
margin: 2px;
display: flex;
justify-content: center;
align-items: center;
}
.dropdown {
position: absolute;
z-index: 1;
top: 56px;
width: 300px;
transform: translateX(-35%);
background-color: rgb(16, 85, 211);
border: var(--border);
border-radius: var(--border-radius);
padding: 1rem;
overflow: hidden;
display: flex;
flex-direction: column;
opacity: 1;
}
.menu-item {
height: 50px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
/* transition: background var(--speed); */
padding: 0.5rem;
}
.menu-item:hover {
background-color: #525357;
}
.nav-profile-pic {
max-width: 75px;
}
// review-list css
button, .sort-by {
z-index: -1;
}
By just seeing your CSS, the easiest would be:
add z-index: 1000; (or any needed value) to the position: fixed; parent element .navBar.
Its child elements will perform accordingly - overlaying other elements on the page.
Z-index MDN Docs
and keep in mind to use z-index on elements with CSS having positon (other than : static;)
I am building a simple react page using create-react-app, and having trouble with the layout. My components are nested in App, which is limited to the top of the page.
Here is an image, showing where the elements are and my component tree:
// App
html, body {
margin: 0;
padding:0;
}
//Container
html, body {
margin:0;
padding:0;
}
//Header
.loan-header {
display: flex;
justify-content: flex-end;
align-items: center;
background: white;
width: 100%;
border: 0;
border-radius: 3;
box-shadow: 0 3px 5px 2px rgba(180, 180, 180, .3);
color: white;
height: 60px;
}
//ApplicationContainer
.loan-application-container {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
border: 0;
border-radius: 3;
box-shadow: 0 3px 5px 2px rgba(180, 180, 180, .3);
color: #005350;
height: 100px;
width: 75%;
top: 100px;
}
.applications {
font-size: 12px;
padding: 2;
display: inline-flex;
align-items: baseline;
width: 100%;
height: 50%;
border: 0.32px;;
border-radius:3;
justify-content:space-between;
font-size: 1vw;
border-color: black;
}
.view-btn {
height: 30;
width: 10%;
background: #005350;
font-size: 1vw;
color: white;
}
p {
font-family: 'Gill Sans';
font-weight: bold;
font-size: 1vw;
width: 30%;
color: #005350;
}
https://imgur.com/a/SdRAq21
Your .loan-application-container has a width of 75%.
There are multiple ways you can go about this. With flexbox, depending on the flex-direction property, you can either specify in the parent to justify-content: center or align-items: center or in the itself justify-self: center or align-self: center respectivly.
or as a quickfix try left: 0; right: 0; margin: 0 auto; in .loan-application-container ruleset.
I'm new to the whole CSS coding and sometimes I get stuck. I followed an online tutorial on how to make a search bar that is animated so it looks pleasing. I'm doing a website for my school project and I'm almost finished just adding few bits here and there. It's about technology from the beginning of the 20th century to our present day.
.search-pos {
display: block;
margin-left: auto;
width: 330px;
position: relative;
top: -40px;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-55%, -55%);
background: white;
height: 40px;
border-radius: 60px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 4px;
}
.search-box:hover>.search-btn {
background: white;
padding: 10px;
}
.search-btn {
color: black;
float: center;
width: 30px;
height: 30px;
border-radius: 80%;
background: white;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 14px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<div class="search-pos">
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
I've tried changing the padding, positioning or even the height but nothing seems to work. I think I need to add another line of code but I'm unsure what it would be.
This what happens:
Image / Imgur
As you can witness the button doesn't stay inside the bar itself like it should.
Like Dejan.S I did not get what is the problem.
Be carreful you put a top in a relative class .search-pos, it doesnt work !
I copy your code in CodePen and I think the problem comes from in a other class or maybe in your $search.pos class
https://codepen.io/auxb/pen/WNQjjyp?editors=1100
(I replace the font icon by a img but is the same)
Tell me if this code satisfied you !
For what i understand you need to change your css a little bit.
.search-pos {
display: block;
margin-left: auto;
width: 330px;
height:40px;
position: relative;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-55%, -55%);
background: white;
height: 40px;
border-radius: 60px;
padding: 10px;
display:flex;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 4px;
}
.search-box:hover>.search-btn {
background: white;
padding: 10px;
}
.search-btn {
color: black;
float: center;
width: 30px;
height: 30px;
border-radius: 80%;
background: white;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 14px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
Let me know, if this solution helps you.
Try putting the code that handles the hover after the specified elements:
.search-box:hover>.search-txt
should come after
.search-txt
also
.search-box:hover>.search-btn
should come after
.search-btn
Hope that helps in ensuring the hover effects work as expected.
Also there is no CSS property such as float: center;
If you drag the thumb it won't work because apparently it is not a part of input when I inspect it with devtools, new elements don't consider it's position and cover it
if you remove the paragraph after the input you can drag the thumb and the gradient will change according to it's position.
is there a way to keep the thumb working even when I add elements after the input?
if you change #slider padding the gradient will weirdly grow, if you add margin the thumb won't work again.
document.querySelector('input').addEventListener('input', ({target: t}) => t.style.backgroundSize = (t.value/t.max) * 100 + '%');
body {
display: flex;
align-items: center;
flex-direction: column;
padding: 0 10%;
font-family: sans-serif;
}
* {
font-weight: 200;
}
.tags {
display: flex;
margin: 25px 0;
}
span {
flex: 1 1;
padding-right: 30px;
align-self: flex-end;
font-size: 14px;
}
span:last-child {
text-align: right;
padding-right: 0px;
}
input {
position: relative;
width: 100%;
cursor: pointer;
outline: none;
/* TRACK */
-webkit-appearance: none;
/* Hides the slider so that custom slider can be made */
background: linear-gradient(to left, #8074AE, #CBB0DF) no-repeat;
background-size: 50%;
}
input::-webkit-slider-runnable-track {
height: 14px;
background: #E7E8E9;
z-index: -1;
}
input::-moz-range-track {
height: 14px;
background: #E7E8E9;
z-index: -1;
}
input::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 10px;
background: linear-gradient(to left top, transparent 50%, white 55%);
user-select: none;
pointer-events: none;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
margin-top: 28px;
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
border: solid 2px #E7E8E9;
border-radius: 0px 50% 50%;
transform: rotate(45deg);
}
input::-moz-range-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: 15px;
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
border-radius: 8px;
}
<h1>Уровень владения JavaScript</h1>
<div class="tags">
<span>Не владею</span>
<span>Использую готовые решения</span>
<span>Использую готовые решения и умею переделывать</span>
<span>Пишу сложный JS с нуля</span>
</div>
<input type="range" min="0" max="1000">
<p>Help me</p>
Wrap the input in a containing element and set the height on that element in order to push the sibling element down below the range-thumb Set the z-index of the containing element as well so that it is above the sibling element.:
document.querySelector('input').addEventListener('input', ({target: t}) => t.style.backgroundSize = (t.value/t.max) * 100 + '%');
body {
display: flex;
align-items: center;
flex-direction: column;
padding: 0 10%;
font-family: sans-serif;
}
* {
font-weight: 200;
}
.tags {
display: flex;
margin: 25px 0;
}
span {
flex: 1 1;
padding-right: 30px;
align-self: flex-end;
font-size: 14px;
}
span:last-child {
text-align: right;
padding-right: 0px;
}
.input-container {
display: block;
width: 100%;
height: 55px;
z-index:10;
}
input {
position: relative;
width: 100%;
cursor: pointer;
outline: none;
/* TRACK */
-webkit-appearance: none;
/* Hides the slider so that custom slider can be made */
background: linear-gradient(to left, #8074AE, #CBB0DF) no-repeat;
background-size: 50%;
}
input::-webkit-slider-runnable-track {
height: 14px;
background: #E7E8E9;
z-index: -1;
}
input::-moz-range-track {
height: 14px;
background: #E7E8E9;
z-index: -1;
}
input::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 10px;
background: linear-gradient(to left top, transparent 50%, white 55%);
user-select: none;
pointer-events: none;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
margin-top: 28px;
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
border: solid 2px #E7E8E9;
border-radius: 0px 50% 50%;
transform: rotate(45deg);
}
input::-moz-range-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: 15px;
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
border-radius: 8px;
}
<h1>Уровень владения JavaScript</h1>
<div class="tags">
<span>Не владею</span>
<span>Использую готовые решения</span>
<span>Использую готовые решения и умею переделывать</span>
<span>Пишу сложный JS с нуля</span>
</div>
<div class="input-container">
<input type="range" min="0" max="1000">
</div>
<p>Help me</p>
I have a problem with a specific style. I have a string "Historic" in a div with CSS transform rotate, positioned on a specific part of sibling div. If I change the string by "Historique" (for i18n), the div move.
I wish the div keep at the same place when string has changed. Thank you for answers.
#main {
margin: 50px;
position: relative;
width: 300px;
background: #eee;
border: thin solid #bbb;
}
#tag {
position: absolute;
left: -36px;
padding: 5px;
font-size: 9px;
transform: rotate(-90deg);
background: red;
color: white;
bottom: 15px;
text-transform: uppercase;
max-height: 20px;
}
.content {
display: flex;
position: relative;
padding: 20px;
}
<div id="main">
<div id="tag">Historic</div>
<div class="content">a</div>
<div class="content">b</div>
<div class="content">c</div>
</div>
I got it working by changing the tag class to read like this.
Note the transform-origin option.
transform-origin: left top 0;
position: absolute;
left: -21px;
padding: 5px;
font-size: 9px;
transform: rotate(-90deg);
background: red;
color: white;
bottom: -20px;
text-transform: uppercase;
max-height: 20px;