this is my style.less code:
.transition {
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.shadow {
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
-moz-box-shadow: 0px 0px 10px #808080;
-o-box-shadow: 0px 0px 10px #808080;
-webkit-box-shadow: 0px 0px 10px #808080;
box-shadow: 0px 0px 10px #808080;
}
.shadow:hover {
-moz-box-shadow: 0px 0px 10px #a5a5a5;
-o-box-shadow: 0px 0px 10px #a5a5a5;
-webkit-box-shadow: 0px 0px 10px #a5a5a5;
box-shadow: 0px 0px 10px #a5a5a5;
}
.radius {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#t1 {
.shadow;
.transition;
.radius;
}
but when I hover #t1 the shadow doesn't change. I want to know why it doesn't work and expect add #t1:hover and inherit the style is there any other way?
You need to change the .hover class to include the :hover state as part of the class definition:
.hover {
...styles...
&:hover {
...hover state styles...
}
}
.someOtherClass {
.hover;
}
Example
In order to have the :hover styles generated correctly you need to connect .shadow and .shadow:hover via the & operator so they belong together:
.shadow {
/*normal styles*/
&:hover{
/* hover styles */
}
}
The rest can stay the same, because
#t1{
.shadow;
}
will now automatically generate both, the normal and the hover rules.
You can try it out here: Online-Less-Converter
Every additional block you add to .shadow via the & operator will automatically be applied to #t1 as well, so if you add another:
.shadow{
&:hover{}
&.foo{
/* another set of rules*/
}
}
#t1{
.shadow; /* this will now generate 3 ruleblocks for #t1*/
}
the .foo ruleblock will be generated for #t1 as well:
#t1{...}
#t1:hover{...}
#t1.foo{/* another set of rules*/}
Related
I would like to create an input field that accept multiple email addresses (for example to send an invitation). How can I achieve this without the help of jQuery or an external plugin or package?
I used to rely on bootstrap-tagsinput but I want to get rid of it, but I have no idea how to achieve the same thing without it.
This solution is quite a carbon copy of how the bootstrap tags input behaves but uses vanilla js only and some style rules.
It captures the click event on the container to create a text input inside that when will loose focus, will create a .tag span inside its parent with its original value (unless that value is empty spaces).
You may also change that condition so that it will create the tag only if the typed text matches a regular expression describing a valid email address.
const emailInput = document.getElementById('emailInputContainer');
//creates a tag element with the given text
function createTag(text){
const tag = document.createElement('span');
tag.classList.add('tag');
tag.innerText = text;
const remove = document.createElement('span');
remove.classList.add('remove');
tag.append(remove);
remove.addEventListener('click', (event)=>{
event.currentTarget.parentElement.remove();
});
return tag;
}
//creates and returns an input element
function createNewInput(){
const newInput = document.createElement('input');
newInput.classList.add('tempinput');
newInput.addEventListener('focusout', (event)=>{
const target = event.currentTarget;
if(target.value.trim().length > 0){
const tag = createTag(target.value);
target.parentElement.append(tag);
}
target.remove();
});
return newInput;
}
//adds the click event listener to the input container
emailInput.addEventListener('click', (event)=>{
const target = event.currentTarget;
const newInput = createNewInput();
target.append(newInput);
newInput.focus();
});
body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#emailInputContainer{
border: solid 1px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
color: #555;
vertical-align: middle;
border-radius: 4px;
line-height: 22px;
cursor: text;
width: 100%;
height: 1.5em;
}
.tag{
padding: 2px 5px;
margin-right: 5px;
background: #5bc0de;
color: white;
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.tempinput{
border: none;
outline: none;
}
.tag > .remove{
margin-left: 8px;
cursor: pointer;
}
.tag > .remove::after{
content: "x";
padding: 0px 0px;
}
<div id="emailInputContainer" tabindex="0">
</div>
I have the below LESS stylesheet and I know there has to be a better way to organize this. Is the only option to create a map containing the classes and a mixin perhaps to repeat the styles?
// child div is injected by JS
.ddemrcontent > span, .blocksmarttemplate > span, .blocktoken > span {
display: inline-flex;
align-items: center;
min-height: 1.7rem;
margin-top: 0.2rem;
padding-left: 0.2rem;
}
.ddfreetext {
display: flex;
min-height: 1.7rem;
margin-top: 0.2rem;
}
.ddemrcontent > span:hover, .blocksmarttemplate > span:hover, .blocktoken > span:hover {
text-decoration: underline;
cursor: pointer;
}
.ddemrcontent > span {
border-left: 4px solid cadetblue;
}
.blocksmarttemplate > span {
border-left: 4px solid burlywood;
}
.blocktoken > span {
border-left: 4px solid #8a7090;
}
.ddfreetext {
border: 1px dashed black;
}
UPDATE
Here is the best I've been able to come up with. Since the & parent selector won't apply to each distinct parent selector (that are comma delimited) I think I am forced to use a mixin and call it to apply the rules for each parent I have.
Would love to hear if there's still a better way.
.dyndoccontent(#color) {
& > span {
display: inline-flex;
align-items: center;
min-height: 1.7rem;
margin-top: 0.2rem;
padding-left: 0.2rem;
border-left: 4px solid #color;
&:hover {
text-decoration: underline;
cursor: pointer;
}
}
}
// child div is injected by JS
.ddemrcontent {
.dyndoccontent(cadetblue);
}
.blocksmarttemplate {
.dyndoccontent(burlywood);
}
.blocktoken {
.dyndoccontent(#8a7090);
}
.ddfreetext {
display: flex;
min-height: 1.7rem;
margin-top: 0.2rem;
border: 1px dashed black;
}
I would definitely recommend mixin if you have multiple parts in your less files which use the same styles.
For you example i would go for a more nested way:
// child div is injected by JS
.ddemrcontent, .blocksmarttemplate, .blocktoken {
& > span {
display: inline-flex;
align-items: center;
min-height: 1.7rem;
margin-top: 0.2rem;
padding-left: 0.2rem;
&:hover {
text-decoration: underline;
cursor: pointer;
}
}
}
.ddfreetext {
border: 1px dashed black;
display: flex;
min-height: 1.7rem;
margin-top: 0.2rem;
}
.ddemrcontent > span {
border-left: 4px solid cadetblue;
}
.blocksmarttemplate > span {
border-left: 4px solid burlywood;
}
.blocktoken > span {
border-left: 4px solid #8a7090;
}
I am using the npm package https://www.npmjs.com/package/vuejs-paginate
to handle pagination in a vuejs application.
I would like to style this pagination component.
My styling successfully sets the background of page number buttons yellow when the user hovers over them, but fails to set the background of the current page to green. Why?
Here is my component tag with the props.
<paginate
:pageCount="totalPages"
:click-handler="paginateCallback"
:prevText="'Prev'"
:nextText="'Next'"
:containerClass="'pagination'"
class="pagination"
v-model="pageNumber"
></paginate>
And here is the css...
.pagination a {
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
background-color: white;
}
.pagination a.active {
background-color: green;
}
.pagination a:hover:not(.active) {background-color: yellow;}
.pagination a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
By the way, in case it is relevant information, the application uses bootstrap-vue elsewhere.
Thanks to the first answer below, I was able to resolve this.
Here is the working css after adding the active-class prop to the component...
.pagination li {
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
color: white;
background-color: white;
font-size: 1em;
}
.pagination li.pagination-active {
background-color: green;
}
.pagination li:hover:not(.active) {background-color: yellow;}
Now, however, there is a border around the number of the active page button until the user clicks again anywhere on the page. How can we eliminate this border?
As the documentations says: there is an active class prop that you can set and style that class. see the props in the link above.
<paginate
:pageCount="totalPages"
:click-handler="paginateCallback"
:prevText="'Prev'"
:nextText="'Next'"
:active-class="myActiveBtn"
:containerClass="'pagination'"
class="pagination"
v-model="pageNumber"
></paginate>
style:
.myActiveBtn{
background-color: green;
}
I want to change the margin on the .v-dialog class and the max-height when it's not full screen.
The code from the console:
.v-dialog {
border-radius: 4px;
margin: 24px; <-------- want to change this
overflow-y: auto;
pointer-events: auto;
-webkit-transition: .3s cubic-bezier(.25,.8,.25,1);
transition: .3s cubic-bezier(.25,.8,.25,1);
width: 100%;
z-index: inherit;
-webkit-box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,
}
and:
.v-dialog:not(.v-dialog--fullscreen) {
max-height: 90%; <--------- want to change this
}
It's not enough just to add a class to the v-dialog component somehow it dosen't register it.
It's always a good idea to use the docs for reference, if you haven't done so already.
https://dev.vuetifyjs.com/en/components/dialogs#dialogs
You have to use the content-class property, instead of the normal class, if you want to attach a class to the v-dialog
Applies a custom class to the detached element. This is useful because
the content is moved to the beginning of the v-app component (unless
the attach prop is provided) and is not targettable by classes passed
directly on the component.
In this class you can then override the margin and max-height:
.custom-dialog.v-dialog{
margin: 10px;
}
.custom-dialog.v-dialog:not(.v-dialog--fullscreen) {
max-height: 50%;
}
I'm using bootstrap and vue 2.0.
It works normally when I don't click the button. It focus on #mouseenter and unfocus on #mouseleave like this.
But when I clicked button, it stay focused like this until I make another click anywhere, even in another window.
How can I fix this? Here is HTML and CSS code.
Button html:
<button class="btn btn-primary" v-on:click="search()"
type="button">{{$lang.ticketsSearch}}</button>
Button css:
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
color: #333;
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
a.btn.disabled,
fieldset[disabled] a.btn {
pointer-events: none;
}
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-primary:focus,
.btn-primary.focus {
color: #fff;
background-color: #286090;
border-color: #122b40;
}
.btn-primary:hover {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
color: #fff;
background-color: #204d74;
border-color: #122b40;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-primary .badge {
color: #337ab7;
background-color: #fff;
}
When that button is clicked, it takes on the :focus state. If you don't want it to behave like that, you'd have to overwrite the focus state, but that's probably not a good idea. You could look into programmatically putting the focus on something else.
In this particular case to remove the "green" when you click and move away, you should only need to do:
.btn-primary:focus,
.btn-primary.focus {
color: #fff;
background-color: #000; /*this is where the colour was green*/
border-color: #122b40;
}