this is my css ; how do i set the navbar header to transparent. I have tried to set background-color; transparent; but this don't change anything
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #fafafa;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
Try this
.navbar-inner {
background-color: #ffffff;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
For more details check out w3schools - CSS Image Opacity / Transparency
Related
I need to add link to my image. I mean when ever I click my image it should redirect to perticular page. I tried to do it using Link tag (react-router-dom) but it is not working properly.
<div className="cate-images">
<Link to={link}>
<img src={image} />
</Link>
</div>
.categories-items {
position: relative;
transition: $transition;
.cate-images {
a {
cursor: pointer;
img {
box-shadow: 0 0 30px #eee;
background: #fff;
border-radius: 0 0 5px 5px;
position: relative;
transition: all 500ms ease;
border-radius: 5px;
}
}
}
&:before {
content: "";
background: -moz-linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0) 50%);
background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0) 50%);
background: -webkit-linear-gradient(
to top,
#000000 0%,
rgba(0, 0, 0, 0) 50%
);
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 0;
border-radius: 5px;
transition: all 500ms ease;
z-index: 1;
}
&:hover {
transform: translateY(-10px);
}
}
I've got my Stripe form as below, that loads just fine
render() {
const createOptions = (fontSize: string) => {
return {
style: {
base: {
fontSize,
color: '#424770',
letterSpacing: '0.025em',
fontFamily: 'Source Code Pro, monospace',
'::placeholder': {
color: '#aab7c4',
},
},
invalid: {
color: '#9e2146',
},
},
};
};
return (
<div className={styles.cardsection}>
<form onSubmit={this.handleSubmit}>
<label>
Card Details
<CardElement {...createOptions(this.props.fontSize)} />
</label>
<button>
{this.state.paid === 'waiting' ? 'Please wait...' : 'Confirm order'}
</button>
</form>
</div>
);
}
}
export default injectStripe(CheckoutForm);
And I have my styles.less file:
.cardsection {
width: 60%;
margin: auto;
margin-top: 30px;
background-color: #f6f9fc;
padding: 20px;
label {
color: #6b7c93;
font-weight: 300;
letter-spacing: 0.025em;
.StripeElement {
display: block;
margin: 10px 0 20px 0;
max-width: 500px;
padding: 10px 14px;
box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px, rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
border-radius: 4px;
background: white;
}
.StripeElement--focus {
box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px, rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
}
}
}
button {
white-space: nowrap;
border: 0;
outline: 0;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
color: #fff;
border-radius: 4px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
background-color: #6772e5;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
margin-top: 10px;
}
button:hover {
color: #fff;
cursor: pointer;
background-color: #7795f8;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
}
For some reason, I cannot style the StripeElements. All my other styling works just fine, but the Stripe Elements don't. I've checked the HTML loaded, and within the label is my div called StripeElement
As you can see from the below, the input box is not styled.
I am using the React-Stripe-Element library and its implemented on an SSR app using Next.js
EDIT: I've found the problem, but I'm not sure how to overcome it.
When my app gets build, my classes are assigned a random variable in both the css and the html.
For example, cardsection becomes cardsection__Xy12xg2. The problem is that in my HTML, StripeElement stays as StripeElement, but my CSS becomes StripeElement__28vnshY
Any ideas how to overcome this?
Solution is to pass the StripeElement class directly into the Stripe component as a property:
<CardElement {...createOptions(this.props.fontSize)} className={styles.StripeElement} />
I am using select2. I've enabled users to select keywords that doesn't match. Just wondering when someone does type something that doesn't match, how do you style the dropdown item that's not matching to show a different style? I would like to gray it out or make it italic or something.
Heres an example, the 1st dropdown item doesn't match anything else in the dropdown:
I'm using Angular, but I'm happy for anyone with jQuery solutions to answer as well. I can appropriate it for Angular.
you will want to use the formatResult option, along with styling the result using the markMatch internal function of select2 to retain underline function (see https://groups.google.com/forum/#!topic/select2/FhVygJ_21Nk )
This is an example of code i did to style user input than did not match the queried list of tags. I also included the count of the number of times the tag was used
...
formatResult: function(result, container, query, escapeMarkup) {
var markup=[];
window.Select2.util.markMatch(result.text, query.term, markup, escapeMarkup);
if (result.isNew) {
return markup.join("");
} else {
return '<span class="post-tag">'+markup.join("")+'</span><span class="item-multiplier">× '+result.count+'</span>';
}
},
...
css for my above example
<style>
.item-multiplier {
font-size: 90%;
font-weight: normal;
margin-right: 4px;
color: #999;
}
.post-tag, .post-text .post-tag, .wmd-preview a.post-tag {
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
position: relative;
text-decoration: none;
font-size: 100%;
line-height: 1.4;
white-space: nowrap;
color: #333;
cursor: default;
border: 1px solid #aaaaaa;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
background-clip: padding-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #e4e4e4;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-image: linear-gradient(to top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
}
.select2-results .select2-highlighted {
background: #fff0d9;
color: #000;
}
.select2-result-selectable .select2-match, .select2-result-unselectable .select2-match {
font-weight: bold;
}
</style>
I am building a SPA with AngularJs and Breeze using VS 2013 project based on John Papa's HotTowel.
We have all the latest nuget packages for Angular, Breeze and BootStrap. One of my requirements is to highlight a text area when the field is invalid (in our case required). This functionality has been implemented with many other fields in the app (primarily input and select fields) and works just fine. However, when I try to apply the data-ng-required directive to the textarea, I do not get the red outline around the textarea.
After some digging I found a fix for this by modifying the breeze.directives.css file:
Before:
input:invalid,
select:invalid {
border: red solid 1px !important;
border-left: 5px solid red !important;
}
span.z-decorator span.invalid,
input:invalid + .z-decorator > .invalid,
select:invalid + .z-decorator > .invalid {
visibility: visible;
display: inline-block;
background-color: rgb(189, 54, 47);
margin: 0.3em 0 0 1em;
padding: 4px 10px;
-ms-border-radius: 3px 3px 3px 3px !important;
border-radius: 3px 3px 3px 3px !important;
background-position: 15px center;
background-repeat: no-repeat;
-webkit-box-shadow: 0 0 12px #999999;
-ms-box-shadow: 0 0 12px #999999;
box-shadow: 0 0 12px #999999;
color: #ffffff;
-ms-opacity: 0.8;
opacity: 0.8;
z-index: 20;
}
select:invalid + .z-decorator > .invalid {
margin: 0.1em 0 0 1em;
}
After:
input:invalid,
textarea:invalid,
select:invalid {
border: red solid 1px !important;
border-left: 5px solid red !important;
}
span.z-decorator span.invalid,
input:invalid + .z-decorator > .invalid,
textarea:invalid + .z-decorator > .invalid,
select:invalid + .z-decorator > .invalid {
visibility: visible;
display: inline-block;
background-color: rgb(189, 54, 47);
margin: 0.3em 0 0 1em;
padding: 4px 10px;
-ms-border-radius: 3px 3px 3px 3px !important;
border-radius: 3px 3px 3px 3px !important;
background-position: 15px center;
background-repeat: no-repeat;
-webkit-box-shadow: 0 0 12px #999999;
-ms-box-shadow: 0 0 12px #999999;
box-shadow: 0 0 12px #999999;
color: #ffffff;
-ms-opacity: 0.8;
opacity: 0.8;
z-index: 20;
}
select:invalid + .z-decorator > .invalid {
margin: 0.1em 0 0 1em;
}
I simply inserted the following:
"textarea:invalid," in the definition of each class
This gives the results I was expecting, however, I really did not want to modify the breeze.directives.css file as this could get over-written the next time we update the breeze files.
To prevent this, I copied the both sections of the css to the bottom of our custometheme.css file where we add customizations then modified them to only point to the textarea:invalid.
My questions is, does anybody know of a reason they left this functionality out? Might this cause problems later?
I did some fairly extensive research to find the solution to this problem and was not able to find any references to other people running into this.
Anyone else run into this?
I'm afraid the breeze directives are more of a proof of concept. That's one reason they are in Breeze Labs.
That said, we take pull requests and I have no objection to adding a textarea selector.
I am trying to use Select2 plugin on Kendo Window. But its not working for me. ComboBox content is not visible when trying to open that.
Just need to select2.css class select2-drop changed the z-index and it works just fine
.select2-drop {
width: 100%;
margin-top: -1px;
position: absolute;
z-index: 10010;
top: 100%;
background: #fff;
color: #000;
border: 1px solid #aaa;
border-top: 0;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
}