I want to implement an animation that increases the number using a styled component.
const Info = styled.div`
margin-left: 35rem;
margin-top: -15rem;
p {
display: inline-block;
width: 25rem;
padding: 1rem;
white-space: nowrap;
overflow: hidden;
font-weight: 500;
strong {
font-weight: 600;
#property --num {
syntax: '<integer>';
initial-value: 0;
inherits: false;
}
}
}
animation: ${ImgFade} 0.7s linear;
animation-delay: 0.1s;
`
<Info>
<p>
<strong>350</strong>User
</p>
</Info>
I'm using #property(css property), it seems not work..
Working on a css grid challenge with React in codepen.
This is the original codepen: https://codepen.io/tallys/pen/bvwZee/
What I have so far: https://codepen.io/al2613/pen/QmOyKo
.grid-container {
border: 2px dashed goldenrod;
display: inline-grid;
padding: 10px;
grid-template-columns: auto auto;
height: 100vh;
grid-gap: 30px;
}
So I got main content area to span across the grid container. However, I'm stuck as to how I can make the aside always 150px and the grid container align nicely with the div at the top?
I'm new to grid very nice first try. I think this is a little bit hacky, but...it does the job (I guess)
I don't think the CSS on this snippet will work, but nevertheless, here's the Pen...
//Don't edit the JS for the CSS Grid challenge!
class App extends React.Component {
state = {
sidebarActive: false,
}
toggleSidebar() {
this.setState({sidebarActive: !this.state.sidebarActive})
}
render() {
const buttonText = this.state.sidebarActive ? 'Toggle Sidebar Off' : 'Toggle Sidebar On';
const {sidebarActive} = this.state
return (
<div>
<h1 className="heading">CSS Grid when some sections don't render!</h1>
<div className="instructions">
<p>The challenge: Fix the CSS Grid so that the main area takes up all of the available space when the sidebar react component does not render. </p>
<button onClick={this.toggleSidebar.bind(this)}>{buttonText}</button>
</div>
<div className="grid-container">
{sidebarActive && <aside className="sidebar">Sometimes renders!</aside>}
<main className="main">Main content area that should always take up the rest of the space in the container. </main>
</div>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
// Variables
$brand-color: darkblue;
$brand-section-color: white;
$brand-text-color: #222;
$react-accent: #61dafb;
$react-background: #292c34;
$breakpoint: 768px;
$font-heading: 'Permanent Marker', sans-serif;
$font-default: 'Oswald', sans-serif;
// Styles
body {
font-family: $font-default;
margin: 10vh 10vw;
color: $react-accent;
background: $react-background;
}
.heading {
font-family: $font-heading;
}
.instructions {
padding: 5px 12px 20px 12px;
margin-bottom: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background: lighten(adjust-hue($react-background, 30), 7);
font-size: 1.15rem;
button {
border: none;
background: $react-accent;
font-family: $font-default;
padding: 20px;
border-radius: 0;
cursor: pointer;
transition: .4s ease;
&:hover, &:active, &:focus {
background: adjust-hue($react-accent, 210);
}
}
}
.grid-container {
border: 2px dashed goldenrod;
display: inline-grid;
grid-template-columns: 150px repeat(1, 1fr);
height: 100vh;
width: 100%;
grid-gap: 30px;
}
.sidebar {
background: lighten($react-background, 7);
padding: 10px;
& ~ .main{
grid-column: auto !important;
}
}
.main {
background: darken($react-background, 7);
display: grid;
grid-column: span 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<main id="app"></main>
I know it's a really late response, but I remembered this challenge... and I couldn't resist.
My approach is fixing the main to the second column, while setting the sidebar width on the item itself (and a margin-right to fake the grid-gap), allowing for the first column to be declared as minmax(0, auto).
.grid-container {
grid-template-columns: minmax(0, auto) 1fr;
/*grid-gap: 30px;*/
}
.main {
grid-column: 2;
}
.sidebar {
margin-right: 30px;
width: 150px;
}
https://codepen.io/facundocorradini/pen/eKgVzP
That way the first column will have a zero width if the sidebar is not loaded, and get to the 150px sidebar with when it loads.
I am working on a responsive layout locally. I am testing with firefox responsive layout tool. For some reason Firefox is not applying the media query for 320px. I tried this solution Browser not recognizing max-device-width but it didn't work.
Any idea?
My code
#media only screen and (max-width: 320px) {
.btn-default {
display: inline-block !important;
}
.slide figure figcaption {
right: 21%;
width: 67%;
}
aside {
width: 64%;
margin-top: 0%;
margin-right: 30%;
}
.footerFloat {
width: 25%;
float: left;
min-width: 200px;
margin-left: 118px;
}
.textul {
text-align: left;
}
h1 {
font-size: 20px;
text-align:left;
margin: -36px 0px 16px;
}
}
When I debug my code with inspect element at 320px resolution it doesn't read the above code. Intsead goes to:
#media only screen and (max-width : 800px) {
.btn-default {
display: inline-block !important;
}
aside {
width: 64%;
margin-top: 0%;
margin-right: 30%;
}
header {
background-position: center;
background-image: url('Images/logo_mobile.png') ;
}
h1 {
font-size: 20px;
text-align:center;
margin: -136px 0px 16px;
}
.textul {
text-align: left;
}
}
I'm trying to get this calendar control to work in jsfiddle.
http://jsfiddle.net/edwardtanguay/pe4sfex6/5/
My local version of this works, and I've added everything that I can, but it seems to have a problem with the less styles which in my local HTML are in a style tag, and when I try to add it into jsfiddle, it tells me to put styles in the CSS window, but they don't work there?
Does anyone know of a workaround to get this to work in jsfiddle?
<style type="text/less">
body { font-family:Arial; font-size:14px; }
body>span, body>h1 { float:left; width:100%; margin:0; padding:0; margin-bottom:10px; }
span { color:#888888;
>b { color:black; }
}
.vertical-centre (#height) { height:#height; line-height:#height !important; display:inline-block; vertical-align:middle; }
.border-box { box-sizing:border-box; -moz-box-sizing:border-box; }
#border-colour:#CCC;
calendar { float:left; display:block; .border-box; background:white; width:300px; border:solid 1px #border-colour; margin-bottom:10px;
#secondary-colour:#2875C7;
#spacing:10px;
#icon-width:40px;
#header-height:40px;
>div.header { float:left; width:100%; background:#secondary-colour; height:#header-height; color:white;
>* { .vertical-centre(#header-height); }
>i { float:left; width:#icon-width; font-size:1.125em; font-weight:bold; position:relative; .border-box; padding:0 #spacing; cursor:pointer; }
>i.fa-angle-left { text-align:left; }
>i.fa-angle-right { text-align:right; margin-left:#icon-width*-1; }
>span { float:left; width:100%; font-weight:bold; text-transform:uppercase; .border-box; padding-left:#icon-width+#spacing; margin-left:#icon-width*-1; text-align:center; padding-right:#icon-width; color:inherit; }
}
>div.week { float:left; width:100%; border-top:solid 1px #border-colour;
&:first-child { border-top:none; }
>span.day { float:left; width:100%/7; .border-box; border-left:solid 1px #border-colour; font-size:0.75em; text-align:center; .vertical-centre(30px); background:white; cursor:pointer; color:black;
&:first-child { border-left:none; }
&.today { background:#E3F2FF; }
&.different-month { color:#C0C0C0; }
&.selected { background:#secondary-colour; color:white; }
}
&.names>span { color:#secondary-colour; font-weight:bold; }
}
}
</style>
When screen resolution is >1000px I have A, B, and C as 280, 350, and 210px respectively)
When it shrinks, I would like it to be B max width followed by A and C clustered together in a div and shrunk. I'm not sure I can do this with straight CSS as the elements are out of order - or am I wrong here? Thanks!
you could do like this with CSS3. But this rely on rowA being on absolute position once page width is less than 1000px. There are other workaround to change the margin-top of it with js dynamically so that col A will hold it position regardless content height changed.
.body{ margin:0;padding:0;
}
#rowA {
width:25%;
float:left;
//margin:10px;
min-height:340px;
margin:0;padding:0;
background-color: blue;
}
#rowB {
width:50%;
float:left;
//margin:10px;
min-height:340px;
margin:0;padding:0;
background-color: red;
}
#rowC {
//border:1px solid #000;
width:25%;
float:left;
//margin:10px;
min-height:340px;
margin:0;padding:0;
background-color: blue;
}
#colA, #colB, #colC {
min-height:330px;
margin:5px;padding:0;
background-color: green;
text-align:center;
}
#media (max-width: 1000px) {
#rowB {
width:100%;
clear:left;
}
#rowA {
width:50%;
position:absolute;
margin-top:340px;
}
#rowC {
width:50%;
clear:left;
float:right;
}
}
In body tags.
<div class="grid">
<span id="rowA"><div id="colA">col A</div></span><span id="rowB"><div id="colB">col B</div></span><span id="rowC"><div id="colC">col C</div></span>