Apply rules to list of parent classes - less

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;
}

Related

how to use deep selector in less imported externally to tsx/jsx

The deep selector in vue3 has been changed into :deep(xxx), but it doesn't work when I use it in .less imported externally to .tsx.
BTW, Although Vue3 is no longer use /deep/ or >>>, I still tried and didn't work too
.register_form {
&__base_info {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: palegoldenrod;
&__input_container {
padding: 1rem;
border: 1px solid green;
border-radius: 5px;
&__label {
font-weight: bolder;
}
:deep(input) {
border: none;
background-color: yellow;
}
}
}
}

Cannot set Axios properly with Vue 2 and Nuxt

I am quite new to vue.js, using vue 2 and nuxt.js. I am trying to build an authentication in a website. There is a backend api running in local.
I have a form that receives my user's data. The data is then stored in the store using vuex. I want to make a POST Api call using axios, which retrieves the data stored from the store to the API running localy.
Unfortunately, I cannot get axios to run this properly...
It seems that the sendData function cant have access to the store. I tried many things : this.$store.user, this.user, $store...
Thanks a lot for your help!
4th Component
<template>
<form class="form-horizontal" >
<!-- firstname input-->
<div class="field">
<label class="label" for="contact_first_name">Prénom</label>
<div class="control">
<input id="contact_first_name" name="contact_first_name" type="contact_first_name" placeholder="Prénom" class="input " required="" v-model="companycontact.contact_first_name">
</div>
</div>
<!-- name input-->
<div class="field">
<label class="label" for="contact_last_name">Nom</label>
<div class="control">
<input id="contact_last_name" name="contact_last_name" type="contact_last_name" placeholder="Nom" class="input " required="" v-model="companycontact.contact_last_name">
</div>
</div>
<!-- service choice -->
<div class="field">
<label class="label" for="Service">Service</label>
<div class="control">
<div class="formfield-select">
<select id="service-choice" name="service-choice" class="input" v-model="companycontact.contact_service">
<option v-for="(service, index) in services" :key="index" :value="service.value">
{{ service.text }}
</option>
</select>
</div>
</div>
<div class="next-back-button">
<nuxt-link to="/SignUpCompanyOnline" class="button is-rounded back-button" #click.native="saveStore()">Retour</nuxt-link>
<nuxt-link to="/SignUpCompanyIg" class="button is-rounded next-button" #click.native="saveStore(); sendData()">Suivant</nuxt-link>
</div>
</div>
</form>
</template>
<script>
export default {
name: 'SignUpCompanyContact',
data () {
return {
companycontact: {
contact_first_name: this.contact_first_name,
contact_last_name: this.contact_last_name,
services: this.services,
},
services: [
{ text: 'Communication', value: 'COM' },
{ text: 'Direction', value: 'DIR' },
{ text: 'Marketing', value: 'MAR' },
{ text: 'Autre', value: 'OTH' },
],
}
},
methods: {
saveStore() {
this.$store.commit('signUp/setContactServiceInsta', { companycontact: this.companycontact })
},
async sendData () {
// console.log(this.user.email)
// console.log(this.$store.user.email)
// console.log(user.email)
// console.log($store)
/* let data = {
email: this.user.email,
password: this.password,
nb_employees: this.numberemployee,
name: this.name,
insta_account: this.insta_account,
sale_type: this.option,
sector_type: this.sector,
website_url: this.website_url,
contact_first_name: this.contact_first_name,
contact_last_name: this.contact_last_name,
contact_service: this.contact_service
}
// console.log(data);
this.$axios.post('http://localhost:8000/api/companies/', data )
.then(response => console.log(response))
.catch(error => console.log(error.response)) */
}
}
}
</script>
<style>
.form-example {
padding-bottom: 20px;
}
.form-logo{
width: 30px;
height: 30px;
border-bottom:2px solid #D8D8D8;
}
input {
width: 300px;
}
input[placeholder] {
width: 300px;
}
/* contact firstname lastname */
input[type=contact_last_name] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid #D8D8D8;
background-image: url(../../assets/icons/user-lightgrey.svg);
background-size: 30px;
background-position-y: 4px;
background-repeat: no-repeat;
text-indent: 20px;
}
input[type=contact_last_name]:focus {
border-bottom: 2px solid #7F7F7F;
outline: none;
background-image: url(../../assets/icons/user-darkgrey.svg);
-webkit-box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
transition-duration: .3s;
border-radius: 1px;
}
input[type=contact_first_name] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid #D8D8D8;
background-image: url(../../assets/icons/user-lightgrey.svg);
background-size: 30px;
background-position-y: 4px;
background-repeat: no-repeat;
text-indent: 20px;
}
input[type=contact_first_name]:focus {
border-bottom: 2px solid #7F7F7F;
outline: none;
background-image: url(../../assets/icons/user-darkgrey.svg);
-webkit-box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
transition-duration: .3s;
border-radius: 1px;
}
/* service */
#service-choice {
padding-left: 20px !important;
margin: 8px 0;
box-sizing: border-box;
color: #4A4A4A !important;
border: 1px solid #fff !important;
border-bottom: 2px solid #D8D8D8 !important;
background-image: url(../../assets/icons/sector-lightgrey.svg);
background-size: 30px;
background-repeat: no-repeat;
text-indent: 20px;
outline: none !important;
}
#service-choice:focus {
border-bottom: 2px solid #7F7F7F;
outline: none;
color: #4A4A4A !important;
background-image: url(../../assets/icons/sector-darkgrey.svg);
border-radius: 1px;
}
/* submit button */
.submit-button {
text-decoration: none;
outline: none;
background-color: #00CC99;
border: 1px solid #00CC99;
font-size: 20px;
color: #fff;
font-weight: normal;
padding: 10px 20px;
margin-top: 40px;
font-family: 'Montserrat', sans-serif;
-webkit-box-shadow: 0px 0px 44px -9px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 0px 44px -9px rgba(0,0,0,0.40);
box-shadow: 0px 0px 44px -9px rgba(0,0,0,0.40);
}
.submit-button:hover {
background-color: #fff;
border: 1px solid #00CC99;
color: #00CC99;
transition: background-color .3s;
}
/* next button / back button */
.next-back-button {
display: flex;
justify-content: space-evenly;
flex-direction: row;
width: 50%;
}
.next-button {
text-decoration: none;
outline: none;
background-color: #00CC99;
border: 1px solid #00CC99;
font-size: 20px;
color: #fff;
font-weight: normal;
padding: 10px 20px;
margin-top: 40px;
font-family: 'Montserrat', sans-serif;
}
.next-button:hover {
background-color: #fff;
border: 1px solid #00CC99;
color: #00CC99;
transition: background-color .3s;
}
.back-button {
text-decoration: none;
outline: none;
background-color: #ffffff;
border: 1px solid #D8D8D8;
font-size: 20px;
color: #D8D8D8;
font-weight: normal;
padding: 10px 20px;
margin-top: 40px;
font-family: 'Montserrat', sans-serif;
outline: none;
}
.back-button:hover {
background-color: #fff;
border: 1px solid #999999;
color: #999999;
transition: background-color .3s;
}
</style>
VUEX store :
export const state = () => ({
user: {},
company: {},
companydetails: {},
companycontact: {},
validationcode: {},
})
export const mutations = {
setEmailPassword(state, { user }) {
console.log(user)
state.user.email = user.email
state.user.password = user.password
},
setCompanyEmployeeInsta(state, { company }) {
console.log(company)
state.company.name = company.name
state.company.insta_account = company.insta_account
state.company.selected = company.selected
},
setWebsiteCanalSector(state, { companydetails }) {
console.log(companydetails)
state.companydetails.website_url = companydetails.website_url
state.companydetails.option = companydetails.option
state.companydetails.sector = companydetails.sector
},
setContactServiceInsta(state, { companycontact }) {
console.log(companycontact)
state.companycontact.contact_first_name = companycontact.contact_first_name
state.companycontact.contact_last_name = companycontact.contact_last_name
state.companycontact.contact_service = companycontact.contact_service
},
setValidationCode(state, { validationcode }) {
console.log(validationcode)
state.validationcode.contact_first_name = validationcode.contact_first_name
},
}

which files are necessary for bootstrap dropdown to work?

I am avoiding including the entire bootstrap source code in my app. All I need at this point is the bootstrap dropdown classes. I am trying to make a simple dropdown that looks like this...
<div class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle">display dropdown</a>
<ul
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-scrollable dropdown-content"
>
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
</ul>
</div>
I copied dropdown.scss from the tabler.io library.
This is all it contains...
.dropdown {
display: inline-block;
color: orange;
}
.dropdown-menu {
box-shadow: $dropdown-box-shadow;
min-width: 12rem;
}
.dropdown-item {
color: $text-muted-dark;
z-index: 1000;
}
.dropdown-menu-arrow {
&:before {
position: absolute;
top: -6px;
left: 12px;
display: inline-block;
border-right: 5px solid transparent;
border-bottom: 5px solid $border-color;
border-left: 5px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: "";
}
&:after {
position: absolute;
top: -5px;
left: 12px;
display: inline-block;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
border-left: 5px solid transparent;
content: "";
}
&.dropdown-menu-right {
&:before,
&:after {
left: auto;
right: 12px;
}
}
}
.dropdown-toggle {
user-select: none;
cursor: pointer;
&:after {
vertical-align: 0.155em;
}
&:empty:after {
margin-left: 0;
}
}
.dropdown-icon {
color: $text-muted;
margin-right: 0.5rem;
margin-left: -0.5rem;
width: 1em;
display: inline-block;
text-align: center;
vertical-align: -1px;
}
I know that my code is referencing this stylesheet because the font color is orange and the stylesheet's first rule includes color: orange.
I also know that my code detects the user clicking on the text because I tested by adding #click.prevent="doSomething()" where doSomething() simply console logged a message.The message did indeed print out in the Chrome dev tools console.
However, when I click on the words display dropdown, the dropdown menu does not open.
I understand there are javascript files I may need. Which files are those and how can I make sure my code uses this file? This is a Vuejs app using Nuxt.

Button stays focused (hover) after clicked

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;
}

Bootstrap collapse nav at 991px

Building a site using Bootstrap. Having an issue with the van. I want it to collapse at 991px. Searched online and found this code, however it has changed the function of the nav as the nav wont stay open. Any ideas? The code used to override default is in my custom.css
http://nurdit.com/styleengineered/
#media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Try changing the CSS above to:
#media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-collapse.collapse.in { /* NEW */
display: block!important;
}
}
As far as I can tell, this does the trick on your site. Credit for this suggestion goes to Dave Forber , see Bootstrap 3 Navbar Collapse