I would like to make hooking in Stylus by using mixin like it does in LESS. It seems like Stylus can't make #extend .className before .className is defined, but LESS does.
For example. By LESS logic It may look like
.uk-button {
display: inline-block;
border 1px solid #00f;
}
.hook-button() {}
.hook-button() {
border 1px solid #00a;
}
but by Stylus logic It must be
hook-button()
.hook-button
{block}
+hook-button()
border 1px solid #00f
.uk-button
display inline-block
border 1px solid #00a
#extend .hook-button
Is there any way to place hook after #extend in Stylus?
upd: The main problem is that override goes before wanted class. You could try online LESS and Stylus.
Related
I am trying to make a component with buttons inside a div, I am having issues, because the styles are not applying on the buttons, I guess I should not use slot here. Can someone guide me?
Component
<template>
<div :class="[$style.btnGroup]" v-bind="$attrs">
<slot :class="$style[variant]">/>
</div>
</template>
How I use this
<ButtonGroup variant="warning">
<button>Test</button>
<button>Test</button>
<button>Test</button>
</ButtonGroup>
I use css module
<style module>
.btnGroup button {
position: relative;
border: none;
font-weight: 400;
border-radius: 0.25rem;
cursor: pointer;
font-size: 1rem;
padding: 0.5rem 1rem;
transition: 0.1s;
}
.primary{
background: var(--primary-bg);
border: 1px solid var(--primary-bg);
color: white;
}
.warning {
background: var(--warning-bg);
border: 1px solid var(--warning-bg);
font-size: 1rem;
padding: 0.5rem 1rem;
transition: 0.1s;
color: black;
}
etc. for each variant I have different style.
You are applying the class on the button group not the buttons that are inside, to solve this instead of binding the class to the slot bind another variable and use that variable binding on each button or you can solve it through css thats why i suggested you show us the css give a class to the buttongroup the way you are doing and in css do as so:
<slot class="buttongroupclass">/>
.buttongroupclass button{
//the css you want to apply
}
I wanted to change the style of b-input buefy but when I try changing the design it doesn't work.
Here is my code.
<b-field>
<b-input
placeholder="Username"
size="is-medium"
></b-input>
</b-field>
<style>
input.input.is-medium {
border: 1px solid red;
}
</style>
If you want to change all your buttons, take a look at Bulma's variables.
Buefy uses Bulma CSS
https://bulma.io/documentation/elements/button/#variables
Here, you will want to change $button-border-color
Late answer.
The selector seems correct, so I'm not sure why it doesn't work for you. Your example works in my environment (Buefy 0.9.4, Vue 2.6.10).
You might try a less specific selector:
input {
border: 1px solid red;
}
Or... (cringe) use the important flag:
input.input.is-medium {
border: 1px solid red !important;
}
To customize just a single input, try assigning a ref attribute to the <b-input> and then use JS to update the style. Note that <b-input> creates a <div> that wraps the <input>, so we have to go hunting for it using $el and querySelector.
Buefy HTML
<b-input
ref="myInput"
placeholder="Username"
size="is-medium"
></b-input>
VueJS
mounted() {
this.$refs.myInput.$el.querySelector('input').style.border = "1px solid red";
},
I'm using a CMS theme that contains all of Bootstrap 3. Is it possible to add a title block manually in HTML/CSS? I'm not sure if that's the block's official name... it's the purple full-width block containing the text:
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
in the following link (for example):
http://getbootstrap.com/css/
This title block is built into my theme and is available based on the design for the page I select.
But I was wondering if this block is available separately from Bootstrap, like a Navbar, panel, well, etc. component, that I can just include some HTML/CSS code and have it appear in the body of a page, for example.
No it's not in bootstrap but it's pretty easy to grab the style and use it anywhere:
.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}
.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
check this jsfiddle
If you look at their source, they are using a stylesheet called docs.min.css, they have defined the background in here. Other then that it is just a simple <div class="container"><!--title and subtitle here-->. So the answer is a yes and a no. You can, of course, use containers seperately from your CMS when using bootstrap, but the background will not be available unless you strip it from the getbootstrap.com source.
Edit
If you see their styles, they are using this code in their docs.min.css:
#media (min-width: 768px)
.bs-docs-header h1 {
font-size: 60px;
line-height: 1;
}
}
This means, when the width of your window is above 768 pixels, it gives the h1 a font-size of 60px. When you fall under it, this code is ignored and the default bootstrap font-size is being applied.
Edit 2
To get a background-color behind it, don't apply the background color to the .container. wrap a div around it without a width value. The container width is not full width, so if you apply a background to it, its only behind the container that is centered.
Edit 3
A simple HTML structure would be something like this (you still have to include all bootstrap styles and default html tags etc.
<html>
<body>
<div id="bgColorDiv">
<div class="container">
<h1>My title</h1>
<p>Paragraph below the title</p>
</div>
</div>
</body>
</html>
What I am trying to do is to round corners of a <select> using "border-radius". Strangely, webkit browsers show white background overflowing borders of the <select>.
Update
Here's the screenshot and my code:
HTML:
<select class="rounded_select">
<option>rounded_select</option>
</select>
CSS:
.rounded_select {
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
border-bottom: 2px solid #eee;
border-right: 2px solid #eee;
border-radius: 10px;
}
Are there any ideas how to fix it?
Update: It is preferrable to save the button image on the right of the select.
-webkit-appearance:none might do the trick.
EDIT: Yep that appears to do it: http://jsfiddle.net/dbxjB/
Setting background-color for the select seems to do the trick.
Edit: Does not. Setting border to 1px did it. As well as 2px dashed for example. Glitchy.
CSS3 -webkit-transition is choking on multiple box-shadow values and text-shadow values. (Chrome & Safari)
More specifically, I have two scenarios...
I have text has a document heading that has three text-shadows (for appearance of depth). I am also using the -webkit-transition rule to change the color of the text-shadow on hover so that it appears to glow on hover.
I have links which I'm using the box-shadow rule on in the same way as above, with three values for depth effect. Also using -webkit-transition here to change the color of the buttons and text for a hover effect.
The Problem: For both instances above, when hovering over the elements webkit appears to render the transition as one at a time, so the values don't all fade into their new values simultaneously. Instead, they appear as each one is rendered - one after the other, and it is a very awkward transition as you'll see.
I have several instances, and here are links to some of them:
(make sure to view in Chrome or Safari)
-Text-shadow transition on :hover for page h1 ("GIFT of HEALING" text): http://cure.org/goh
-Box-shadow transition on :hover for 1st slide call to action ("Read More" button): http://cure.org
-Box-shadow transition on :hover for footer nav links (About, Rods, etc): http://tuscaroratackle.com
Finally, here's a sample of the code I'm using:
(Not from any site, just an example I built for this question; see it live here: http://joelglovier.com/test/webkit-shadow-transition-bug.html)
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
ul {
overflow:hidden;
width:500px;
height:auto;
margin:50px 100px;
background:rgba(0,0,0,.4);
border:1px solid rgba(0,0,0,1);
-webkit-border-radius:10px;
-webkit-box-shadow:inset 0px 0px 5px rgba(255,255,255,.5),0px 2px 10px #6e5e4c;
-webkit-transition:all .5s ease;
}
ul:hover {
-webkit-box-shadow:inset 0px 0px 10px rgba(255,255,255,.5),0px 2px 10px #92d400;
}
li {
display:inline-block;
}
a:link,a:visited {
float:left;
display:block;
padding:6px 10px;
margin:10px 20px;
font:bold 18px/22px Tahoma,Helvetical,Arial,sans-serif;
text-decoration:none;
color:#000;
background:#92d400;
-webkit-border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0px #b7f52f,0px 4px 0px #5c8500,0px 3px 10px #000;
-webkit-transition:all .5s ease;
}
a:hover,a:focus {
background:#198c45;
-webkit-box-shadow:inset 1px 1px 0px #1ac65c,0px 3px 0px #046228,0px 3px 10px #fff;
}
a:active {
position:relative;
top:1px
}
</style>
</head>
<body>
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
</body>
</html>
So the question here really is is there any way to prevent that ordered rendering, such as using different syntax in my CSS? (such as a specific order of the multiple box-shadow values, or using multiple box-shadow declarations instead of adding them all into one rule?)
05/09/2011 UPDATE: The bug has been reported to Webkit (see Husar's comment below). Also, I see that recent builds of Chrome (specifically my current 10.0.648.205 version) is rendering a smoothe transition now, effectively eliminating the bug. Safari however (version 5.0.5 (6533.21.1)) still displays the buggy rendering.
Apparently this is just a bug with webkit rendering, and there is no apparent fix.
I've also noticed that when you use jQuery, for example, to simply fade text in or out, WebKit "hiccups." So basically, I'm going to go out on a limb and say that I don't think your particular styles have anything to do with it. I could be completely wrong. If you find out what the deal is, I'd love to hear a solution because I too have run into this annoyance a time or two.
this could help to fix this problem on rendering for hovering events
-webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px);