So, my objective here is to have the div slide in once the state (React) value is met, but all it ever does is abruptly appear instead of slide in from off the screen.
.network-message {
position: relative;
top: -67px;
width: 100%;
height: 5vh;
display: flex;
justify-content: center;
background-color: red;
color: #fff;
font-size: calc(15px + (17 - 15) * (100vw - 1440px) / (2560 - 1440));
align-items: center;
transition: transform 1s ease-in;
transform: translateY(67px);
.network-button {
margin-left: 2em;
button {
border: none;
padding: 0.5em 1.5em;
background-color: #254294;
color: #fff;
font-size: calc(11px + (13 - 11) * (100vw - 1440px) / (2560 - 1440));
cursor: pointer;
}
}
}
<div class='network-message'>
Looks like Microsoft's CRM is down at the moment. Please be patient
while they work to resolve the issue.
<div class='network-button'>
<button type='button'>
OK
</button>
</div>
</div>
Related
I am working on a site where there is an info icon next to the logo in the center of the page. When hovering over the info icon, a text box displays. For some reason, when the screen width is shorter than around 1300px, the entire logo as well as the info box is pulled down vertically. Not sure what aspect of onhover could be causing this.
I tried to manually move down the info icon with media queries but that is not a good way of doing it.
Here is react component:
function HomeContent() {
return (
<>
<div className="center-div">
<img src={tenGreenLogo} className="ten-green-logo" alt=""></img>
<div className="info-div">
<img src={infoIcon} alt="" className="info-icon"></img>
<p className="hidden-info">
The 10Green Score indicates the health of your environment using a
number from 0 to 10. The higher the score, the healthier your
environment.
<br></br>
<br></br>
Factors that can reduce your score include unhealthy air quality
readings and poor environmental monitoring.
</p>
</div>
</div>
<Globe />
</>
);
}
export default HomeContent;
and here is CSS for that component:
.center-div {
display: flex;
justify-content: center;
align-items: center;
padding-top: 7rem;
padding-bottom: 0rem;
scroll-behavior: smooth;
}
.ten-green-logo {
max-width: 40%;
animation: transitionIn 1s;
padding-right: 1rem;
}
.info-div {
width: 2rem;
margin-top: auto;
margin-bottom: 0;
}
.info-icon {
width: 2rem;
animation: transitionIn 1s;
}
.hidden-info {
display: none;
}
.info-icon:hover + .hidden-info {
display: block;
position: relative;
background-color: white;
padding: 0.6rem;
border-radius: 5%;
width: 20rem;
font-size: 80%;
right: 7.5rem;
top: 10.5rem;
}
.info-icon:hover {
position: relative;
top: 10.6rem;
}
#keyframes transitionRight {
from {
transform: translateX(0rem);
}
to {
transform: translateX(2rem);
}
}
#keyframes transitionIn {
from {
opacity: 0;
transform: translateY(4rem);
}
to {
opacity: 1;
transform: translateY(0rem);
}
}
Any help would be greatly appreciated.
use this style, you have to use position absolute on hidden-info
.info-div {
position: relative;
}
.hidden-info {
display: none;
position: absolute;
background-color: white;
padding: 0.6rem;
border-radius: 5%;
width: 20rem;
font-size: 80%;
right: 7.5rem;
top: 10.5rem;
}
.info-icon:hover + .hidden-info {
display: block;
}
I have an accordion menu that was displaying the ::after psuedoelements just fine in firefox until very recently. It still works in chrome. Can't for the life of me figure out why they just disappeared like that in firefox.
The ::after elements displayed just fine a couple of days ago but now all of a sudden they have decided to stop working.
Any assistance that can help would be greatly appreciated.
const accordionItemHeader = document.querySelectorAll(".accordionItemHeader");
accordionItemHeader.forEach(accordionItemHeader => {
accordionItemHeader.addEventListener("click", event => {
accordionItemHeader.classList.toggle("active");
const accordionItemBody = accordionItemHeader.nextElementSibling;
if (accordionItemHeader.classList.contains("active")) {
accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
} else {
accordionItemBody.style.maxHeight = 0;
}
});
});
.accordion {
border-bottom: 2px solid white;
}
.accordionItemHeader {
cursor: pointer;
position: relative;
color: white;
display: flex;
align-items: center;
background-color: black;
font-size: 2rem;
}
.accordionItemHeader::after, .accordionItemHeader.active::after {
font-size: 3.5rem;
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
padding: 0 10px;
}
.accordionItemHeader::after {
content: "\002B" / "expand question";
}
.accordionItemHeader.active::after {
content: "\002D"/ "collapse question";
}
.accordionContent {
padding: 10px;
color: black;
font-size: 2rem;
border: 2px solid black;
}
.accordionItemBody {
max-height: 0;
overflow: hidden;
padding: 0;
transition: max-height 0.5s ease-out;
}
}
<div class="accordion">
<div class="accordionItem">
<div class="accordionItemHeader">
<h4>TEXT</h4>
</div>
<div class="accordionItemBody">
<div class="accordionContent">
<p>dfafaf adfafdafadfadfafafdafaf
</p>
</div><!--accordionContent div end -->
</div> <!--accordionitembody div end-->
</div><!--accordionItem div end-->
</div><!--accordion div end-->
Found the problem. The alt text in the pseudo elements was what was causing the issue for firefox.
This question already has answers here:
How to use CSS to surround a number with a circle?
(20 answers)
Closed 7 months ago.
I'm trying to make the divs round as much as possible. however it should be "small", without having to increase width and height to 100px.
image of my calcualtor
here is the code:
.contas div {
color: white;
display: inline-block;
border: 0;
width: 40px;
border-radius: 100%;
text-align: center;
padding: 10px;
margin: 20px 4px 10px 1px;
cursor: pointer;
background-color: #202020;
transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}
If you really want to get a circle, you need an equal amount of height and width on your div.
That way you get a square.
Then you add a border-radius of 50% for the perfect circle.
You're less likely to get a perfect circle if the height and width of the div are not the same.
Use for buttons display:inline-flex; and border-radius: 50%;
here is code HTML:
<aricle class="contas">
<!-- row 0 -->
<input class="contas__head" placeholder="0" type="text" />
<!-- row 1 -->
<button class="contas__btn">C</button>
<button class="contas__btn">()</button>
<button class="contas__btn">%</button>
<button class="contas__btn">/</button>
<!-- row 2 -->
<button class="contas__btn">7</button>
<button class="contas__btn">8</button>
<button class="contas__btn">9</button>
<button class="contas__btn">*</button>
<!-- row 3 -->
<button class="contas__btn">4</button>
<button class="contas__btn">5</button>
<button class="contas__btn">6</button>
<button class="contas__btn">-</button>
<!-- row 4 -->
<button class="contas__btn">1</button>
<button class="contas__btn">2</button>
<button class="contas__btn">3</button>
<button class="contas__btn">+</button>
<!-- row 5 -->
<button class="contas__btn">+/-</button>
<button class="contas__btn">0</button>
<button class="contas__btn">.</button>
<button class="contas__btn">=</button>
</aricle>
here is code SCSS:
$contas-color: #f2f2f2;
$contas-fill: #000000;
$contas-fill-light:#202020;
$contas-radius: 1rem;
$contas-space: 0.75rem;
$contas-field-size: 4rem;
$contas-btn-size: var(--contas-btn-size, 2.5rem);
$contas-btn-hover-fill: #ff810f;
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 1.5rem;
background-color: $contas-color;
}
.contas {
position: relative;
display: grid;
grid-gap: 0.8rem 0.5rem;
grid-template-columns: repeat(4, $contas-btn-size);
justify-content: center;
align-items: center;
width: 12.5rem;
padding: calc(#{ $contas-field-size + ($contas-space* 1.5)}) $contas-space ($contas-space* 1.5) ;
background-color: $contas-fill;
border-radius: $contas-radius;
overflow: hidden;
&__head {
position: absolute;
inset: 0 0 auto;
min-height: $contas-field-size;
padding: 0 ($contas-space*1.5);
font-size: 1.5rem;
font-weight: 500;
text-align:right;
color:$contas-color;
border: unset;
user-select: none;
background: $contas-fill-light;
pointer-events:none;
&:focus, &:active, &:hover {
color:$contas-color;
outline: none;
box-shadow: none;
}
}
&__btn {
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
width: $contas-btn-size;
aspect-ratio: 1 / 1;
text-align: center;
border-radius: 50%;
border: unset;
background-color: $contas-fill-light;
transition: .3s lianer;
transition-property: background-color, box-shadow, transform;
cursor: pointer;
&:hover, &:active{
background-color: $contas-btn-hover-fill;
}
&:active{
transform: scale(1.15);
}
}
}
see https://jsfiddle.net/d4htsLgb/2/
You can fix it using pixels instead of percents:
.contas .div {
border-radius: 99999px;
}
This question already has answers here:
How do I add a highlight behind the text via CSS so it looks like Instagram-one below?
(2 answers)
Closed 11 months ago.
How to achieve this type of text highlighting using CSS?
This is my result and the code below combining CSS and vuetify.
<div>
<div class="tittle-font pt-4 rounded-t-xl ">
SOFTWARE
</div>
<br/>
<div class="tittle-font rounded-tr-xl ">
DEVELOPMENT
</div>
<br/>
<div class="tittle-font pb-4 rounded-b-xl rounded-tr-xl">
AND CONSULTING
</div>
</div>
.tittle-font {
font-size: calc(34px + (36 + 36 * 0.7) * ((100vw - 320px) / 1920));
line-height: calc(46px + (65 + 65 * 0.7) * ((100vw - 320px) / 1920));
font-weight: 300;
background-color: #fff500;
display: inline-block;
padding-left: 30px;
padding-right: 30px;
}
You can use after and before pseudo elements.
First of all our boxes will have position:relative and our pseudo elements need to have position:absolute
I create a circle and make it tangent to borders with ::after
Than i create another square and put it into corner which have lower z-index and have overflow:hidden
z-index is important here because when we set background color of circle to body color(which is white here), circle will disappear and the only thing left is ::before element which seems to have inverse border radius
*,
*::before,
*::after {
box-sizing: border-box;
}
.tittle-font {
position: relative;
font-size: calc(34px + (36 + 36 * 0.7) * ((100vw - 320px) / 1920));
line-height: calc(46px + (65 + 65 * 0.7) * ((100vw - 320px) / 1920));
font-weight: 300;
background-color: #fff500;
display: inline-block;
padding-left: 30px;
padding-right: 30px;
}
.box-1{
border-top-left-radius:1rem ;
border-top-right-radius: 1rem;
}
.box-2{
border-top-right-radius: 1rem;
}
.box-3{
border-top-right-radius: 1rem;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.box-1::after{
content: "";
position: absolute;
width: 2rem;
height: 2rem;
background-color: white;
z-index:5;
right: -2rem;
bottom:0rem;
border-radius: 100%;
}
.box-1::before{
content: "";
position: absolute;
width: 1rem;
height: 1rem;
background-color: #fff500;
z-index:4;
right: -1rem;
bottom:0rem;
overflow: hidden;
}
.box-2::after{
content: "";
position: absolute;
width: 2rem;
height: 2rem;
background-color: white;
z-index:5;
right: -2rem;
bottom:0rem;
border-radius: 100%;
}
.box-2::before{
content: "";
position: absolute;
width: 1rem;
height: 1rem;
background-color: #fff500;
z-index:4;
right: -1rem;
bottom:0rem;
overflow: hidden;
}
<div>
<div class="tittle-font pt-4 box-1 rounded-t-xl">SOFTWARE</div>
<br />
<div class="tittle-font rounded-tr-xl box-2">DEVELOPMENT</div>
<br />
<div class="tittle-font pb-4 rounded-b-xl rounded-tr-xl box-3">
AND CONSULTING
</div>
</div>
simple way and of course you can add padding, border-radius or any styling you need. hope this help <3
span{
background-color: #FFFF00;
width: fit-content;
}
<div>
<span>some heighlighted text here.</span> with simple way
</div>
THIS IS A DUPLICATE OF MY CLOSED QUESTION, BUT THE DUPLICATES ARE IRRELEVANT
First "duplicate"
It does not look at the class though, only the type, so if you happen to have non-articles with the same class you'll get unexpected results
Second "duplicate" is entirely something else.
Third "duplicate" is the explanation of why my try didn't work.
Fourth "duplicate" gives a workaround for the first element, not the last.
I have understood that there is no CSS selector for that, I juste want a solution. Be mindful of that before closing my question !
I have 5 buttons. They have an underlayer that make them seem they are active, as you will see in the snippet.
Each button can have an active state, but only starting from 1, and ending anywhere to 5.
They all have a divider, displayed in red in the snippet.
I would like to keep the divider into the underlayer, outside of the underlayer, but I would like to make it disappear at the end of the underlayer (in snippet, after button #2).
Following my first question, I understood that there is no CSS selector to do that. So what would be the best way to tackle this issue ?
.container {
display: flex;
align-items: stretch;
justify-content: start
margin: 12px;
position: relative;
}
button:after {
content: '';
height: 100%;
position: absolute;
background: red;
left: calc(100% + 12px);
width: 1px;
top: 0;
}
button.active:last-child:after {
content: none;
}
button {
flex: 0 0 calc(20% - 24px);
border: 0;
height: 32px;
color: black;
text-transform: uppercase;
text-align: center;
margin-right: 24px;
background: transparent;
position: relative;
}
button.active {
color: white;
}
.active-pill {
background: teal;
position: absolute;
height: 32px;
border-radius: 16px;
background: teal;
width: calc(40% - 12px);
z-index: -1;
}
<div class="container">
<div class="active-pill"></div>
<button class="active">Step 1</button>
<button class="active">Step 2</button>
<button>Step 3</button>
<button>Step 4</button>
<button>Step 5</button>
</div>
<h3>
Which selector to use to remove the content after button #2 ?
</h3>
In this particular case: Just put the divider on the left side of the buttons, instead of the right?
Then the one that doesn’t need one, becomes the first non-active one after the active ones, so it can easily be selected using button.active + button:not(.active):after
The first button here technically has a divider to the left as well then, that gets cut off here when the snippet gets rendered anyway. But in a situation where you’d need to explicitly “eliminate” it, you could still go with just plain and simple :first-child here (I’m assuming if there’s active buttons, it always starts with the first one, right?)
This is a bit similar to what Hao suggested in their answer, but with their version, the divider gets placed on the right on some buttons, on the left on others … I’d prefer to simply have it the same on all.
.container {
display: flex;
align-items: stretch;
justify-content: start
margin: 12px;
position: relative;
}
button:after {
content: '';
height: 100%;
position: absolute;
background: red;
right: calc(100% + 12px);
width: 1px;
top: 0;
}
button.active + button:not(.active):after {
content: none;
}
button {
flex: 0 0 calc(20% - 24px);
border: 0;
height: 32px;
color: black;
text-transform: uppercase;
text-align: center;
margin-right: 24px;
background: transparent;
position: relative;
}
button.active {
color: white;
}
.active-pill {
background: teal;
position: absolute;
height: 32px;
border-radius: 16px;
background: teal;
width: calc(40% - 12px);
z-index: -1;
}
<div class="container">
<div class="active-pill"></div>
<button class="active">Step 1</button>
<button class="active">Step 2</button>
<button>Step 3</button>
<button>Step 4</button>
<button>Step 5</button>
</div>
<h3>
Which selector to use to remove the content after button #2 ?
</h3>
Unfortunately, in pure css there is no way to select the last element with a specific class.
There are loads of possible solutions to your issue however. To name a few:
Since you can define your own tag-names in HTML5, you can rename the button elements with the active class to activebutton. That way you can target them with the :last-of-type selector. This might be the closest to what you are trying here. You could get rid of the underlayer as well...
You could indicate the active element in it's parent. In this case the container, and target the nth child.
You could add an extra class to the last active element in your html
You could go the javascript route...
.container {
display: flex;
align-items: stretch;
justify-content: start
position: relative;
margin-bottom: 12px;
}
button ,
buttona,
span{
padding: 0 50px;
border: 0;
height: 32px;
font-family: 'system-ui';
font-size: 11px;
line-height: 32px;
color: black;
text-transform: uppercase;
text-align: center;
background: transparent;
position: relative;
}
buttona,
span{
background: teal;
color: white;
}
button:after,
buttona:after,
span:after{
content: '';
height: 100%;
position: absolute;
background: red;
right: 0;
width: 1px;
top: 0;
}
buttona:first-of-type,
span:first-of-type{
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
buttona:last-of-type,
span:last-of-type{
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
buttona:last-of-type:after,
span:last-of-type:after{
display: none;
}
<div class="container">
<buttona>1</buttona>
<buttona>2</buttona>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
<div class="container">
<span>1</span>
<span>2</span>
<span>3</span>
<button>4</button>
<button>5</button>
</div>