My object is to modify css class value dynamically using angular js
My html
<body class="loader progress-bar">
</body>
Css class :
body {
margin: 0 auto;
font-family: 'Source Sans Pro', sans-serif;
color: #4a4a4a;
letter-spacing: 1px;
background: url('#{$imgPath}vsn-bg.png') #f5f5f5 no-repeat 50% 0;
#media only screen and (max-width: 1024px) { background-position-y: -20px; }
&.loader {
> div {
width: 40px;
height: 36px;
background: url('#{$imgPath}/v-360-contact-color#2x.png') center 100%;
position: absolute;
top: 50%;
left: 50%;
margin: -20px 0 0 -18px;
z-index: 9999999;
}
#{$project}_cc {
display: none;
}
}
&.progress-bar {
&::before {
content: '';
display: block;
width: 20%;
height: 4px;
background: rgba(245, 245, 245, 0.9);
transition: width ease .3s;
}
}
}
the target is to modify the value of progress-bar width for example from 20% to 30% dynamically
Related
I'm a beginner at React.
I'm doing Netflix clone coding with CRA initial settings.
Media queries on styled-components not working until I save the js file.
And, It doesn't apply again every time I refresh browser.
import styled from 'styled-components';
const DeviceImgContainer = styled.div`
display: flex;
justify-content:stretch;
flex-grow: 1 2 1;
position: relative;
z-index: 50;
width: 60%;
height: 15%;
background-color: black;
border: 2px solid #222;
border-radius: 15px;
padding: 1%;
margin: -8.9em auto 0;
& img:nth-child(1) {
width: 22%;
}
#media (max-width: 940px) {
margin: -10em auto 0;
height: 70px;
width: 55%;
& img:nth-child(1) {
width: 16%;
}
}
`;
const TextInDevice = styled.div`
margin: 0;
padding: 1.5em 1em 0.5em;
width: 12em;
text-align: left;
& div:nth-child(1) {
font-size: 16px;
}
& div:nth-child(2) {
font-size: 12px;
color: #0071EB;
}
#media (max-width: 940px) {
width: 23.1em;
}
`;
const LoadingImg = styled.div`
background: url('https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/download-icon.gif') 50% no-repeat;
background-size: 100%;
position: relative;
z-index: 51;
width: 50px;
`;
const CardSectionDiv = styled.div`
text-align: center;
height: 100%;
padding: 70px 30px;
background-color: black;
color: white;
border-bottom: 8px solid #222;
&>div {
display: flex;
flex-basis: 50%;
align-items: center;
justify-content: space-evenly;
margin: 0 auto;
max-width: 1100px;
}
#media only screen and (max-width: 940px) {
&>div {
display: block;
}
}
`;
const SectionTitleDiv = styled.div`
max-width: 540px;
min-width: 400px;
width: 40%;
color: white;
& h1 {
width: 100%;
font-size: 3rem;
margin: 0 0 8px 0;
text-align: left;
font-weight: 500;
}
& h2 {
font-size: 1.5rem;
font-weight: 500;
text-align: left;
width: 100%;
margin: 0.75rem 0 0.25rem 0;
}
#media only screen and (max-width: 940px) {
width: 100%;
margin: 0 auto;
text-align: center;
padding: 0;
& h1 {
margin: 0 auto;
text-align: center;
font-size: 2.8rem;
}
& h2 {
margin: 0 auto;
text-align: center;
font-size: 1.3rem;
}
}
`;
const ImgVideoWrapper = styled.div`
height: 70%;
max-width: 550px;
#media only screen and (max-width: 940px) {
width: 100%;
max-width: 750px;
}
`;
const ImgContainer = styled.div`
margin: 0 0 -30%;
height: 100%;
position: relative;
z-index: 3;
&>img {
border: 0;
width: 96%;
}
#media (max-width: 940px) {
margin: 0 0 -30%;
&>img {
width: 80%;
}
}
`;
const VideoContainer = styled.div`
height: 100%;
left: -3px;
transform: translate(0%, -70%);
position: relative;
video {
height: 85%;
width: 70%;
position: relative;
margin: 0
}
#media (max-width: 940px) {
video {
width: 59%;
height: 83%;
transform: translate(0%, 17%);
}
}
`;
const SecondCardSectionDiv = styled(CardSectionDiv)`
#media (max-width: 940px) {
&>div {
display: flex;
flex-direction: column-reverse;
}
}
`
const CardSection = () => {
return(
<>
<CardSectionDiv>
<div>
<SectionTitleDiv>
<h1>TV로 즐기세요</h1>
<h2>스마트 TV, playstation, XBOX, Chromecast, Apple TV, 블루레이 플레이어 등 다양한 디바이스에서 시청하세요.</h2>
</SectionTitleDiv>
<ImgVideoWrapper>
<ImgContainer>
<img alt="video-outline" src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/tv.png" />
</ImgContainer>
<VideoContainer>
<video autoPlay playsInline muted loop>
<source src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-tv-0819.m4v" type="video/mp4" />
</video>
</VideoContainer>
</ImgVideoWrapper>
</div>
</CardSectionDiv>
<SecondCardSectionDiv>
<div>
<ImgVideoWrapper>
<ImgContainer style={{ margin: "0" }}>
<img alt="stranger-things-woman" src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/mobile-0819.jpg" />
</ImgContainer>
<DeviceImgContainer>
<img alt="black-box" src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/boxshot.png" />
<TextInDevice>
<div>기묘한 이야기</div>
<div>저장 중...</div>
</TextInDevice>
<LoadingImg></LoadingImg>
</DeviceImgContainer>
</ImgVideoWrapper>
<SectionTitleDiv>
<h1>즐겨 보는 콘텐츠를 저장해 오프라인으로 시청하세요.</h1>
<h2>간편하게 저장하고 빈틈없이 즐겨보세요.</h2>
</SectionTitleDiv>
</div>
</SecondCardSectionDiv>
</>
);
}
export default CardSection;
This is part of it and media query does not apply to all components.
I don't know why this problem is happening.
How to solve it...?
I found the React CSS modules usefull, but having problem when I tried to reuse the same component with a little modified css I stuck. For example I created Neon glowing button, but now need to change only the width of the Button and some additional small changes in the css.
The only option I see is component without css and for every different case need to rewrite the whole css. Is there a smarter way?
import React from "react";
import styles from "./index.module.css";
import { Link } from "react-router-dom";
const GlowingButton = ({ title, path }) => {
return (
<div className={styles.buttonWrapper}>
<Link className={styles.button} to={path}>
<button className={styles["glow-on-hover"]}>{title}</button>
</Link>
</div>
);
};
export default GlowingButton;
And here is index.module.css
.buttonWrapper {
margin: 0px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
font-family: "consolas";
}
.button {
margin: 0;
padding: 0;
width: 80%;
height: 8vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: #100f;
text-decoration: none;
}
.glow-on-hover {
width: 400px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
I want to make it so that when you click on one of the icons, a certain strip appears under it, which will mean that the person is on this page (something like this)
At the moment, my navbar looks like this
Here's what I have at the moment (HTML):
let marker = document.querySelector('#marker');
let item = document.querySelectorAll('nav a .MuiSvgIcon-root');
function indicator(e) {
marker.style.left = e.offsetLeft + "px";
marker.style.width = e.offsetWidth + "px";
}
item.forEach(link => {
link.addEventListener('click', (e) => {
indicator(e.target)
})
})
body {
position: fixed;
bottom: 0;
left: 0;
background: #f2f2f2;
width: 100%;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
border-top: 1px solid lightgray;
z-index: 100;
}
.MuiSvgIcon-root {
font-size: 35px;
cursor: pointer;
transition: 0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4);
:hover {
transform: translateY(-5px);
}
}
#marker {
position: absolute;
height: 4px;
width: 0;
background: #000;
bottom: 8px;
left: 0;
transition: 0.5s;
border-radius: 4px;
}
<div id="marker"></div>
<HomeIcon/>
<TimelineIcon/>
<AccountCircleIcon/>
<ExploreIcon/>
.MuiSvgIcon-root there is defining all icons.
Your js code is correct. You should check your HTML and CSS. Because their structure is important
Weird issue with fontawesome icons and semantic UI that I can't figure out. If I use the included icons with semantic UI everything works great and displays in the proper place.
If I use the fontawesome react component the icon ends up in some seemingly random place
code sandbox show the example https://codesandbox.io/embed/semantic-ui-example-i7o3w
Any help is much appreciated
It's because font-awesome icons are unstyled SVGs while Semantic-UI looks for a styled i element to display a font specific icon via a string.
To work around it, you'll basically have to do something like this:
<Search
value="FA comp - broken"
icon={
<i className="icon">
<FontAwesomeIcon
style={{ marginTop: 13 }} // alternatively you can do: position: "relative", top: 13
icon="thumbs-down"
/>
</i>
}
/>
Semantic-UI specifically looks for an i.icon element + classname to add styles to it: .ui.icon.input > i.icon. One of the many downsides of using a UI framework is that you're forced to work within its confined architecture.
As follow up to Matt's great help - I dug in to the semantic-ui LESS library and figured out the overrides needed for fontawesome to behave pretty well with it.
here are the icon.overrides and input.overrides with a few notes that are needed for fontawesome to behave nicely.
With the newest fontawesome version (5.10.2) the sizing issues are generally addressed in-library so most display issues that I previous encountered are not a problem.
/* site/elements/input.overrides */
/* just the overrides to replace i for ANYTHING icon so we can use font awesome
semantic always assumes the icon is ONLY an i - that's it - we so far have a link / an A and a span and an svg element
for semantic - SO I'm just going to pull out all the hardcodes and just go with .icon and see how that behaves
just make sure the top level element for the 'icon' has the class 'icon' and you *should* be good don't put icon on every
child element - or rather you don't have to...
SVGs get squared nicely - anything else will need moving
*/
/*--------------------
Loading
---------------------*/
.ui.loading.loading.input > .icon:before {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: #loaderMargin;
width: #loaderSize;
height: #loaderSize;
border-radius: #circularRadius;
border: #loaderLineWidth solid #loaderFillColor;
}
.ui.loading.loading.input > .icon:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: #loaderMargin;
width: #loaderSize;
height: #loaderSize;
animation: button-spin #loaderSpeed linear;
animation-iteration-count: infinite;
border-radius: #circularRadius;
border-color: #loaderLineColor transparent transparent;
border-style: solid;
border-width: #loaderLineWidth;
box-shadow: 0px 0px 0px 1px transparent;
}
/* Transparent Icon */
.ui.transparent.icon.input > .icon {
width: #transparentIconWidth;
}
/*--------------------
Icon
---------------------*/
.ui.icon.input > .icon {
cursor: default;
position: absolute;
line-height: 1;
text-align: center;
top: 0px;
right: 0px;
margin: 0em;
height: 100%;
width: #iconWidth;
opacity: #iconOpacity;
border-radius: 0em #borderRadius #borderRadius 0em;
transition: #iconTransition;
}
.ui.icon.input > .icon:not(.link) {
pointer-events: none;
}
.ui.icon.input > .icon:before,
.ui.icon.input > .icon:after {
left: 0;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
margin-top: #iconOffset;
}
.ui.icon.input > .link.icon {
cursor: pointer;
}
.ui.icon.input > .circular.icon {
top: #circularIconVerticalOffset;
right: #circularIconHorizontalOffset;
}
/* Left Icon Input */
.ui[class*="left icon"].input > .icon {
right: auto;
left: #borderWidth;
border-radius: #borderRadius 0em 0em #borderRadius;
}
.ui[class*="left icon"].input > .circular.icon {
right: auto;
left: #circularIconHorizontalOffset;
}
/* Focus */
.ui.icon.input > input:focus ~ .icon {
opacity: 1;
}
/* site/elements/icon.overrides */
/*!
refactored these to be a svg rather than i . so they can be svg icons for font awesome
straight copy and paste from https://github.com/Semantic-Org/Semantic-UI-LESS/blob/master/definitions/elements/icon.less
regex find and replace find: \ni. replace \nsvg.
DO NOT COPY THE LAST LINE OF THE FILE - otherwise you'll end up in an endless loop compiling
also don't copy the theme section - it's unneeded
*/
svg.icon {
display: inline-block;
opacity: #opacity;
margin: 0em #distanceFromText 0em 0em;
width: #width;
height: 100%;
font-family: 'Icons';
font-style: normal;
font-weight: #normal;
text-decoration: inherit;
text-align: center;
speak: none;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
backface-visibility: hidden;
}
svg.icon:before {
background: none !important;
}
/*******************************
Types
*******************************/
/*--------------
Loading
---------------*/
svg.icon.loading {
height: 1em;
line-height: 1;
animation: icon-loading #loadingDuration linear infinite;
}
#keyframes icon-loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*******************************
States
*******************************/
svg.icon.hover {
opacity: 1 !important;
}
svg.icon.active {
opacity: 1 !important;
}
svg.emphasized.icon {
opacity: 1 !important;
}
svg.disabled.icon {
opacity: #disabledOpacity !important;
}
/*******************************
Variations
*******************************/
/*-------------------
Fitted
--------------------*/
svg.fitted.icon {
width: auto;
margin: 0em !important;
}
/*-------------------
Link
--------------------*/
svg.link.icon, svg.link.icons {
cursor: pointer;
opacity: #linkOpacity;
transition: opacity #defaultDuration #defaultEasing;
}
svg.link.icon:hover, svg.link.icons:hover {
opacity: 1 !important;
}
/*-------------------
Circular
--------------------*/
svg.circular.icon {
border-radius: 500em !important;
line-height: 1 !important;
padding: #circularPadding !important;
box-shadow: #circularShadow;
width: #circularSize !important;
height: #circularSize !important;
}
svg.circular.inverted.icon {
border: none;
box-shadow: none;
}
/*-------------------
Flipped
--------------------*/
svg.flipped.icon,
svg.horizontally.flipped.icon {
transform: scale(-1, 1);
}
svg.vertically.flipped.icon {
transform: scale(1, -1);
}
/*-------------------
Rotated
--------------------*/
svg.rotated.icon,
svg.right.rotated.icon,
svg.clockwise.rotated.icon {
transform: rotate(90deg);
}
svg.left.rotated.icon,
svg.counterclockwise.rotated.icon {
transform: rotate(-90deg);
}
/*-------------------
Bordered
--------------------*/
svg.bordered.icon {
line-height: 1;
vertical-align: baseline;
width: #borderedSize;
height: #borderedSize;
padding: #borderedVerticalPadding #borderedHorizontalPadding !important;
box-shadow: #borderedShadow;
}
svg.bordered.inverted.icon {
border: none;
box-shadow: none;
}
/*-------------------
Inverted
--------------------*/
/* Inverted Shapes */
svg.inverted.bordered.icon,
svg.inverted.circular.icon {
background-color: #black !important;
color: #white !important;
}
svg.inverted.icon {
color: #white;
}
/*-------------------
Colors
--------------------*/
/* Red */
svg.red.icon {
color: #red !important;
}
svg.inverted.red.icon {
color: #lightRed !important;
}
svg.inverted.bordered.red.icon,
svg.inverted.circular.red.icon {
background-color: #red !important;
color: #white !important;
}
/* Orange */
svg.orange.icon {
color: #orange !important;
}
svg.inverted.orange.icon {
color: #lightOrange !important;
}
svg.inverted.bordered.orange.icon,
svg.inverted.circular.orange.icon {
background-color: #orange !important;
color: #white !important;
}
/* Yellow */
svg.yellow.icon {
color: #yellow !important;
}
svg.inverted.yellow.icon {
color: #lightYellow !important;
}
svg.inverted.bordered.yellow.icon,
svg.inverted.circular.yellow.icon {
background-color: #yellow !important;
color: #white !important;
}
/* Olive */
svg.olive.icon {
color: #olive !important;
}
svg.inverted.olive.icon {
color: #lightOlive !important;
}
svg.inverted.bordered.olive.icon,
svg.inverted.circular.olive.icon {
background-color: #olive !important;
color: #white !important;
}
/* Green */
svg.green.icon {
color: #green !important;
}
svg.inverted.green.icon {
color: #lightGreen !important;
}
svg.inverted.bordered.green.icon,
svg.inverted.circular.green.icon {
background-color: #green !important;
color: #white !important;
}
/* Teal */
svg.teal.icon {
color: #teal !important;
}
svg.inverted.teal.icon {
color: #lightTeal !important;
}
svg.inverted.bordered.teal.icon,
svg.inverted.circular.teal.icon {
background-color: #teal !important;
color: #white !important;
}
/* Blue */
svg.blue.icon {
color: #blue !important;
}
svg.inverted.blue.icon {
color: #lightBlue !important;
}
svg.inverted.bordered.blue.icon,
svg.inverted.circular.blue.icon {
background-color: #blue !important;
color: #white !important;
}
/* Violet */
svg.violet.icon {
color: #violet !important;
}
svg.inverted.violet.icon {
color: #lightViolet !important;
}
svg.inverted.bordered.violet.icon,
svg.inverted.circular.violet.icon {
background-color: #violet !important;
color: #white !important;
}
/* Purple */
svg.purple.icon {
color: #purple !important;
}
svg.inverted.purple.icon {
color: #lightPurple !important;
}
svg.inverted.bordered.purple.icon,
svg.inverted.circular.purple.icon {
background-color: #purple !important;
color: #white !important;
}
/* Pink */
svg.pink.icon {
color: #pink !important;
}
svg.inverted.pink.icon {
color: #lightPink !important;
}
svg.inverted.bordered.pink.icon,
svg.inverted.circular.pink.icon {
background-color: #pink !important;
color: #white !important;
}
/* Brown */
svg.brown.icon {
color: #brown !important;
}
svg.inverted.brown.icon {
color: #lightBrown !important;
}
svg.inverted.bordered.brown.icon,
svg.inverted.circular.brown.icon {
background-color: #brown !important;
color: #white !important;
}
/* Grey */
svg.grey.icon {
color: #grey !important;
}
svg.inverted.grey.icon {
color: #lightGrey !important;
}
svg.inverted.bordered.grey.icon,
svg.inverted.circular.grey.icon {
background-color: #grey !important;
color: #white !important;
}
/* Black */
svg.black.icon {
color: #black !important;
}
svg.inverted.black.icon {
color: #lightBlack !important;
}
svg.inverted.bordered.black.icon,
svg.inverted.circular.black.icon {
background-color: #black !important;
color: #white !important;
}
/*-------------------
Sizes
--------------------*/
svg.mini.icon,
svg.mini.icons {
line-height: 1;
font-size: #mini;
}
svg.tiny.icon,
svg.tiny.icons {
line-height: 1;
font-size: #tiny;
}
svg.small.icon,
svg.small.icons {
line-height: 1;
font-size: #small;
}
svg.icon,
svg.icons {
font-size: #medium;
}
svg.large.icon,
svg.large.icons {
line-height: 1;
vertical-align: middle;
font-size: #large;
}
svg.big.icon,
svg.big.icons {
line-height: 1;
vertical-align: middle;
font-size: #big;
}
svg.huge.icon,
svg.huge.icons {
line-height: 1;
vertical-align: middle;
font-size: #huge;
}
svg.massive.icon,
svg.massive.icons {
line-height: 1;
vertical-align: middle;
font-size: #massive;
}
/*******************************
Groups
*******************************/
svg.icons {
display: inline-block;
position: relative;
line-height: 1;
}
svg.icons .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
margin: 0em;
margin: 0;
}
svg.icons .icon:first-child {
position: static;
width: auto;
/* height: auto; */
vertical-align: top;
transform: none;
margin-right: #distanceFromText;
}
/* Corner Icon */
svg.icons .corner.icon {
top: auto;
left: auto;
right: 0;
bottom: 0;
transform: none;
font-size: #cornerIconSize;
text-shadow: #cornerIconShadow;
}
svg.icons .top.right.corner.icon {
top: 0;
left: auto;
right: 0;
bottom: auto;
}
svg.icons .top.left.corner.icon {
top: 0;
left: 0;
right: auto;
bottom: auto;
}
svg.icons .bottom.left.corner.icon {
top: auto;
left: 0;
right: auto;
bottom: 0;
}
svg.icons .bottom.right.corner.icon {
top: auto;
left: auto;
right: 0;
bottom: 0;
}
svg.icons .inverted.corner.icon {
text-shadow: #cornerIconInvertedShadow;
}
In order to implement some features in my react app I need to flip an image in a grid horizonaly when the user choose it with onClick event.
I've readed regarding states in react , and noticed that this is what I need.
When onClick event, flip the image.
The follwing code isn't working well.
The isExpanded working fine, but the image in the grid isn't fliping.
What I'm doing wrong ?
I have initiated the isExpanded to false in my constractor.
handleToggle(e){
e.preventDefault();
this.setState({
isExpanded: !this.state.isExpanded,
})
render() {
const {isExpanded } = this.state;
return (
<div
className={`image-root ${isExpanded ? 'image-flip' : ''}`}
style={{
backgroundImage: `url(${this.urlFromDto(this.props.dto)})`,
width: this.state.size + 'px',
height: this.state.size + 'px'
}}
>
<div>
<FontAwesome className="image-icon" onClick={(e)=>
this.handleToggle(e)} name="arrows-alt-h" title="flip"/>
</div>
</div>
);
}
}
The .scss code:
.image-root {
background-size: cover;
background-position: center center;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
position: relative;
border: 1px solid white;
> div {
visibility: hidden;
background: rgba(0, 0, 0, 0.7);
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: white;
padding: 15px;
text-align: center;
text-align: center;
box-sizing: border-box;
white-space: pre;
display: flex;
align-items: center;
justify-content: center;
}
&:hover > div {
visibility: visible;
}
.image-icon {
font-size: 20px;
vertical-align: middle;
border: 1px solid #ccc;
color: #ccc;
border-radius: 5px;
cursor: pointer;
padding: 12px;
margin: 3px;
&:hover {
color: white;
border-color: white;
}
}
.image-flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
The issue was accured due to the image-flip css was in the wrong scope.
I just move the image-flip css out of the image-root scope.
Thanks.