I moved some gradient button styles into a mixin and now the hover styling is incorrect. The hover state should apply a background offset with the gradient over the top but when used as a mixin it is being applied in the reverse order i.e., the offset is applied on top of the gradient, making the button look like it is two different solid colors. What's the correct way to apply these styles using a mixin?
Styles
.btn-primary {
background-color: hsl(98, 35%, 73%) !important;
color: #333 !important;
.btn-gradient(#ebf3e6, #b3d2a2);
}
Mixin
.btn-gradient(#startColor, #endColor) {
border-color: #endColor #endColor hsl(98, 35%, 68%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#startColor, endColorstr=#endColor);
background-image: -khtml-gradient(linear, left top, left bottom, from(#startColor), to(#endColor));
background-image: -moz-linear-gradient(top, #startColor, #endColor);
background-image: -ms-linear-gradient(top, #startColor, #endColor);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #startColor), color-stop(100%, #endColor));
background-image: -webkit-linear-gradient(top, #startColor, #endColor);
background-image: -o-linear-gradient(top, #startColor, #endColor);
background-image: linear-gradient(#startColor, #endColor);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33);
-webkit-font-smoothing: antialiased;
&:hover {
background-position: 0 -15px;
}
}
Mixin hover
No mixin hover
Turns out I was missing background-repeat: repeat-x; from the mixin.
Related
I need a textarea as follows :
You can use linear gradients:
textarea{
background-attachment: local;
background-image:
linear-gradient(to right, white 10px, transparent 10px),
linear-gradient(to left, white 10px, transparent 10px),
repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
line-height: 31px;
padding: 8px 10px;
width: 500px;
}
<textarea></textarea>
I am trying to create a component that I can insert as a vertical line between flex box columns. I need the height to be dynamic. I am setting the height=100% and setting align-self: stretch(because the flexbox is a row). Nothing is happening. The div gets a height of 0
This is the component
import styled from 'styled-components'
export default styled.div`
border-left: 3px solid gray;
height: 100%;
align-self: stretch;
width: 1px;
display: block;
margin-left: 20px;
margin-right: 20px;
`
And this is how I inject it
<VerticalLine></VerticalLine>
If I add some content to the component, then the line is only as tall as the content
<VerticalLine>a</VerticalLine>
You can remove the height, because flex is adjusting the height by themself:
.verticalLine {
border-left: 3px solid gray;
align-self: stretch;
width: 1px;
display: block;
margin-left: 20px;
margin-right: 20px;
}
See my example on jsFiddle
Probably a super noobie question, but does anyone know why my onClick is not firing? I have tried changing the z-index in my CSS in case the button was too far back, but this did not change anything.
Here is my button module:
import React from 'react';
import classes from './button.module.css';
const button = (props)=>{
return(
<button onClick={()=>{console.log("hello");props.select()}} className={classes.button}>
<div className={classes.text_center}>
<div className={classes.button_text}>{props.text}</div></div>
</button>
);
}
export default button;
Later on I call the module:
this.state.skills?null:<Button select={()=>{console.log("hi");this.setState({skills:true})}} text={"Skills"}></Button>}.
The button actually displays fine, and the text is passed as a prop, but unfortunately I can't get the onClick to fire. Neither of the two console.log statements fire.
All help is appreciated.
///
As requested in the comments button.module.css:
#font-face {
font-family: 'Raleway';
src: url('../../../Fonts/Raleway/Raleway-Light.ttf') format('truetype') /* IE6-IE8 */
}
.button_choice{
width:10vw;
height:10vh;
top:25%;
border: 2px solid #4ca3dd;
position: relative;
display: inline-block;
margin-left:5vw;
background-color: white;
vertical-align: middle;
border-radius:10px;
padding:5px;
}
.button_choice:hover{
background-color: red;
}
.text_center{
height:100%;
width:100%;
position:relative;
display: table;
}
.text_center:hover{
background-color: blue;
}
.button_text{
font-family:"Raleway";
position:relative;
line-height: 30px;
font-size: 20px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
/////
Slight break through :/, when considering the 3 classes below, .background_init is a div spreading over the whole page. On the press of a button, this div slides to half of the size on the left by changing to the class .background_left. The buttons are contained within background_right. If I change height in .background_left to 200px, the buttons work (including hover), but obviously this completely messes up my styling. Any suggestions?
.background_init{
width:100vw;
height:100vh;
background-color: #4ca3dd;
}
.background_left{
width:50vw;
height:100vh;
background-color: #4ca3dd;
transition: width 2s;
}
.background_right{
overflow: auto;
width:50vw;
height:100vh;
transition: width 2s;
}
I am not sure why this works, but instead of using 100vh and 100vw, I used display:absolute and width:50%/ 100% and height:100%. If anyone can explain why this works I would be extremely grateful.
To test links in my Quilljs editor, I'm highlighting text and then clicking the link symbol in the toolbar -- for a split second the link tooltip shows up, only to disappear right away unless I hold my click on the symbol.
It appears that there's a 'ql-hidden' class that's being applied wrongly, but I'm not sure if it's something to do with my configuration being incorrect.
Here's the JavaScript:
var primaryQuill = new Quill('#editor', {
modules: {
toolbar: '#toolbar',
'link-tooltip': true
},
theme: 'snow'
});
Here's the HTML (using the Jade templating language):
#toolbar
span.ql-format-group
button.ql-bold(type="button") Bold
button.ql-italic(type="button") Italic
span.ql-format-group
button.ql-link(type="button") Link
#editor
p Start writing here...
And here are the only styles I've written for this:
.ql-toolbar {
background: #fff !important;
box-shadow: 1px 1px 3px 1px rgba(0,0,0,.1) !important;
margin: 5px 0px !important;
border: none !important;
}
.ql-container {
margin: -5px 0px !important;
background: #fff !important;
border: none !important;
box-shadow: 1px 2px 3px 1px rgba(0,0,0,.2) !important;
min-height: 500px;
font-size: 1.2em !important;
font-family: inherit !important;
color:rgba(0,0,0,.8) !important;
}
I would like to know how to move the close button in lightbox 2 to the top?
.lb-data .lb-close{display:block;
float:right;
width:30px;
height:30px;
background:url(../images/close.png) top right no-repeat;
text-align:right;
outline:0;
filter:alpha(Opacity=70);
opacity:.7;
-webkit-transition:opacity .2s;
-moz-transition:opacity .2s;
-o-transition:opacity .2s;transition:opacity .2s}
add this code to your css:
.lb-data .lb-close {
position: absolute;
top: -50px;
margin-right: -50px;
}
you should play with the pixel sizes to locate it exactlly where you want.