How can I combine classes on a button using .less? - css

I have this .less file for buttons:
button {
background: #button-background;
color: #text;
&.primary {
background-image: linear-gradient(#79d858, #569e3d);
border-color: #4a993e;
color: white;
}
&.primary:hover {
background-image: linear-gradient(#89e868, #66ae4d);
border-color: #4a993e;
color: white;
}
&.primary:active,
&.primary:focus {
background-image: linear-gradient(#99f878, #76be5d);
border-color: #4a993e;
color: white;
}
}
Can someone give me advice on how I can combine all the &.primary into one ?


Is this what you want:
button {
background: #button-background;
color: #text;
&.primary {
background-image: linear-gradient(#79d858, #569e3d);
border-color: #4a993e;
color: white;
&:hover {
background-image: linear-gradient(#89e868, #66ae4d);
}
&:active, &:focus {
background-image: linear-gradient(#99f878, #76be5d);
}
}
}
DEMO

Related

Modify css so as to not change text color

I am using HTML and css from sharingbuttons.io for social media buttons on a web site.
The neural button is fine:
The hover button
changes the fill color as desired. But it also changes the text color. I want the text to remain white. How do I do that?
CSS
.resp-sharing-button__link,
.resp-sharing-button__icon {
display: inline-block
}
.resp-sharing-button__link {
text-decoration: none;
color: #fff;
margin: 0.5em
}
.resp-sharing-button {
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}
.resp-sharing-button__icon svg {
width: 1em;
height: 1em;
margin-right: 0.4em;
vertical-align: top
}
.resp-sharing-button--small svg {
margin: 0;
vertical-align: middle
}
/* Non solid icons get a stroke */
.resp-sharing-button__icon {
stroke: #fff;
fill: none
}
/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
fill: #fff;
stroke: none
}
.resp-sharing-button--twitter {
background-color: #55acee
}
.resp-sharing-button--twitter:hover {
background-color: #525250
}
.resp-sharing-button--facebook {
background-color: #3b5998
}
.resp-sharing-button--facebook:hover {
background-color: #525250
}
.resp-sharing-button--email {
background-color: #777
}
.resp-sharing-button--email:hover {
background-color: #525250
}
.resp-sharing-button--facebook {
background-color: #3b5998;
border-color: #3b5998;
}
.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
background-color: #525250;
border-color: #525250;
}
.resp-sharing-button--twitter {
background-color: #55acee;
border-color: #55acee;
}
.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
background-color: #525250;
border-color: #525250;
}
.resp-sharing-button--email {
background-color: #777777;
border-color: #777777;
}
.resp-sharing-button--email:hover,
.resp-sharing-button--email:active {
background-color: #525250;
border-color: #525250;
}
HTML
!-- Sharingbutton Facebook -->
<a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com" target="_blank" rel="noopener" aria-label="Facebook">
<div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--medium"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg></div>Facebook</div>
</a>

Did you try to add color: #fff;? Like this:
.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
color: #fff;
background-color: #525250;
border-color: #525250;
}

On this:
.resp-sharing-button--facebook:hover {
background-color: #525250
}
you can just say
color: #fff or white;
but if you are specifically targeting the facebook text, I guess just add a div around the tags you have give it a class, and do
color: #fff;

Bootstrap 5 map for color levels

In Bootstrap 5 docs, _colors.scss has the following classes:
.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
and so on...
Each color level is defined in _variables.scss
How to generate these classes with .scss loops and maps instead of manually writing each level for each color?

Customizing SO's snippets selection background

I am currently trying to create a dark SO theme with Stylish.
Everything was going great until I had to customize the snippet.
I can't seem to change the selection color to any other than the one predefined :
.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{
background:#d7d4f0;
}
I tried adding this, but nothing is changing :
.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{
background: blue !important;
}
Is there anyway to change the selection background here?
Here's the complete CSS from the theme, if it helps :
body, #questions div, .qa-block, #content {
background:#282828 !important;
}
#footer.categories {
background:#181818 !important;
}
.post-text {
background:#D5D5D5 !important;
color:#000000;
}
h1, h2, h3, h4 .page-description td, p, .owner-revision span, .revision span, div.container, #mdhelp pre, .badgecount, .comments, .user-panel-content td, .user-panel-content th, .content-page, .viewcount, .welovestackoverflow, .vote-count-post, .summarycount, #sidebar.module p .vote-count-post, .answer-votes, div.comment-body, h1 a, h4, span.reputation-score, div.module.question-stats p, span.page-numbers, #newsletter-ad, .item-summary, div.new-about-content-page.about-content-page div h2.about-title, .module.newuser, .page-description td, .bulletin-title, .status.answered span, .status.answered div, .label-key b, .excerpt, .answer-help, #mdhelp, .rep-col .rep, .user-card .user-card-name, #avatar-card .reputation {
color:#C0C0C0 !important;
}
.user-stats .stat span, #avatar-card .badgecount, #badges-table .badges-number {
color:#666 !important;
}
.revision-comment, .user-info-rep, .user-info-rep .user-details, .nav.mainnavs li a, .tag-container .col, .tar-container .stat .number, .top-tags .tag-wrapper .tag-container .stat .number, .card, .jobs, .login-link.btn {
color:#C0C0C0 !important;
background: #303030 !important;
}
.vote-count-post, .votes {
color:#E3E3AC !important;
}
span.count, .badge-tag {
color: #FFFFFF !important;
}
.stats {
background-color:#C0C0C0 !important;
}
#questions .status.unanswered {
color:#C23B22 !important;
}
.status.unanswered span {
color:#777777 !important;
}
.diff-delete {
background:#501010 !important;
}
.diff-add {
color:#A0E0A0 !important;
background:#105010 !important;
}
#questions .status.answered, .user-about-me, .stats {
background:#353535 !important;
}
#reputationGraph, .graph {
background:#FFF !important;
}
.result-highlight {
color:#FFFFFF !important;
}
#questions .status.answered-accepted {
background:#759971 !important;
}
.answer-hyperlink:visited{
color:#A187BE !important;
}
a, h1>a:visited, .answer-hyperlink, .reputation a:visited {
color:#6ECFF6 !important;
}
.content-block, .on-topic-examples, .off-topic-examples, .topbar .header, .modal-content, .welovestackoverflow, .comment-user, .community-bulletin, .revision td, #nav-askquestion, .answer-votes, #tabs a, .tabs a, .nav.mainnavs li, .question-status, #newsletter-ad .company-ad-b, .company-ad-sb, #hero-content, .module.newuser, .subtabs a.youarehere, .user-show-new .user-header-slim .data, .page-numbers.current, .other-sites, .topbar .topbar-icon-on, .topbar .topbar-icon-on:hover, .answer-help-background, #mdhelp-tabs, .ad502-room, header, .topbar-dialog div.header {
background-color:#373737 !important;
}
.owner-revision td, .owner-revision .revision-comment, .owner-revision .user-details{
background: #4A5287 !important;
}
.comment-user.owner {
background:#2E5666 !important;
}
.comment-user {
padding:2px !important;
}
.post-tag, #toc {
background:#454545 !important;
border:0px !important;
}
.welovestackoverflow, .topbar-dialog {
border: 0px !important;
}
.mdhelp-tabs, #hireme {
border: 1px solid #888 !important;
}
.top-tags .tag-wrapper .tag-container .col {
border-right:2px solid #888 !important;
}
.module, #question-header, .question-summary, .subheader, #tabs > a, .tabs > a, .company-ad-b, .company-ad-sb, #hero-content, div.subtabs a, .page-numbers, .topbar-dialog li, .user-about-me, .user-show-new .user-header-slim .data, .comment td, .answer, .wmd-input, .wmd-button-bar, .wmd-preview, .grippie, .ad502-room, .card, .progress-bar div {
border-color:#888 !important;
}
.topbar-dialog {
background-color:#888 !important;
}
.post-signature.owner, .user-details, .tagged-interesting, #hireme {
background:#353535 !important;
}
.comment:hover, .js-gps-track:hover, .siteSwitcher-dialog li:hover, .inbox-item:hover, header .topbar-icon-on, header .secondary-nav .-item .-link:hover {
background:#555555 !important;
}
input {
background:#E5E5E5 !important;
color:#404040 !important;
}
#hmenus a:hover {
background:#606060 !important;
}
textarea {
background:#404040 !important;
color:#C0C0C0 !important;
}
.grippie {
background:#454545 !important;
}
.feed-icon {
background-color: rgba(255, 255, 255, 0) !important;
}
/* old logo */
#hlogo a {
background-image: url("http://i.imgur.com/zeNdkNx.png") !important;
background-size: 280px;
width:280px;
height:90px;
}
/* new header logo */
.so-header .-logo .-img {
background-image: url("https://i.imgur.com/lLtU6Nd.png") !important;
background-size: 150px;
width:150px;
height:30px;
background-position:0;
margin-top:-4px;
background-repeat:no-repeat;
}
.community-bulletin, .ad502-room {
box-shadow:none !important;
}
/* code colors */
.post-text {
background:#282828 !important;
color:#C0C0C0 !important;
}
.prettyprint, blockquote, pre, pre>.spaces, .hi, .badge-tag {
background:#353535 !important;
}
code {
background:#353535 !important;
color:#C0C0C0 !important;
}
.lit { /* literal */
color:#FF6961 !important;
}
.tag { /* tag */
color:#FF6961 !important;
}
.atn {
color:#C23B22 !important;
}
.atv {
color:#AEC6CF !important;
}
.str { /* string*/
color:#C23B22 !important;
}
.pln { /* plain text */
color:#E0E0E0 !important;
}
.pun { /* punctuation */
color:#A0A0A0 !important;
}
.com { /* comment */
color:#ACD372 !important;
}
.kwd { /* keyword */
color:#AEC6CF !important;
}
.typ { /* type */
color:#7EB1C4 !important;
}
.new-post-activity{
background-color: inherit;
}
.snippet-code{
border: none !important;
}
.snippet-holder{
background: #2a2a2a !important;
}
.CodeMirror-scroll{
background: #353535 !important;
}
.cm-def,.cm-atom,.cm-attribute,.cm-s-default{
color: #6262ff !important;
}
.cm-s-default .cm-keyword{
color: #9e1fb1 !important;
}
.cm-tag{
color: #44833a !important;
}
.cm-string{
color: #8d3535 !important;
}
.CodeMirror{
color: #C0C0C0 !important;
background: #353535 !important;
}
.CodeMirror-selected {
background: blue !important;
}
.CodeMirror-focused .CodeMirror-selected {
background: blue !important;
}
.CodeMirror-scroll .CodeMirror-line::selection,.CodeMirror-scroll .CodeMirror-line>span::selection,.CodeMirror-scroll .CodeMirror-line>span>span::selection{
background: blue !important;
}
.CodeMirror-gutters{
background: #424242 !important;
}
#snpte-box-edit-result{
background: #7d7d7d !important;
}
.snippet-modal .-code .column.result .-name{
color: #bebfbf !important;
}
.clc-cp-sb--short .-wrapper{
background-color: #3d3d3d !important;
}
.clc-cp-sb--short .-bg-image:after{
background-color: #484848 !important;
}
.clc-cp-container .clc-cp-tag{
background: #454545 !important;
}
.clc-btn-secondary{
background: #606060 !important;
}
.clc-cp-sb--tall{
background-color: inherit !important;
border: none !important;
}
.clc-cp-sb--tall .clc-cp-sb-learnmore-wrap{
background-color: inherit !important;
}
#hireme{
margin-bottom: 20px;
}
.mainbar.reviewable-answer,.comment.js-comment {
background-color: inherit !important;
}
#new-answer-activity, .new-post-activity{
background-color: inherit;
}
.p-highlights .-card{
background-color: inherit;
border: 1px solid #e4e6e8;
}
.p-highlights .-graph{
background-image: url(https://data.zenoo.fr/stackoverflow_lines.svg)
}
aside.-badges>div:first-of-type>div{
background-color: #202020;
border-color: #646363;
}

In codemirror.css, from line 321 you will see:
.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
Copy these rules into your styleesheet.
Try replacing the background-color property with your custom color for all of these rules.
Try adding !important.

As far as I can tell, my comment on the sol answer is working
.CodeMirror-selected {
background: red;
}
.CodeMirror-focused .CodeMirror-selected {
background: red
}

So, thanks to #vals, I noticed that
.CodeMirror-selected {
background: red;
}
.CodeMirror-focused .CodeMirror-selected {
background: red
}
was working on its own, but not in my Stylish theme, I finally understood why:
The rule
.prettyprint, blockquote, pre, pre>.spaces, .hi, .badge-tag {
background:#353535 !important;
}
Was overwriting any background we tried to put on the selection. So I added a fix to it, targeting the Snippet line more precisely :
pre.CodeMirror-line{
background: inherit !important;
}
Now #vals solution is working :)
Thanks everyone for helping me solve this !

::-moz-selection { /* Code for Firefox */
background:#d7d4f0;
}
::selection {
background:#d7d4f0;
}
use this code it resolve your problem

Extract value from variable

I just want to ask if it is possible in LESSCSS to use the extract function while the value is stored in LESS Variable?
This is what I'm using:
#basic: #ffffff, #000000, #333333;
#classes: white, black, gray;
.make-color(#i: length(#basic)) when (#i > 0) {
.make-color(#i - 1);
#color: extract(#basic, #i);
#class: extract(#classes, #i);
.#{class} {
color: #color;
}
}
}
This is what I want
#white: #ffffff;
#black: #000000;
#gray: #333333;
#basic: #white, #black, #gray;
#classes: white, black, gray;
.make-color(#i: length(#basic)) when (#i > 0) {
.make-color(#i - 1);
#color: extract(#basic, #i);
#class: extract(#classes, #i);
.#{class} {
color: #color;
}
}
}
When I tried the second one it returns a compiled css like this:
.white{
color: #white;
}
.black{
color: #black;
}
.gray{
color: #gray;
}
but my target is like this:
.white{
color: #ffffff;
}
.black{
color: #000000;
}
.gray{
color: #333333;
}

How do I apply the same styling to all immediate children classes?

In less I have the following:
.some-class{
> li{
a{
color: white;
background: #fti-lightgrey;
border-radius: 0px;
padding: 1px 15px;
// a color for the partcular tab that is chosen. (the color for each tab can be set inside mura)
&.orange{
&:hover{ background: #fti-orange; }
&:hover{ color: white; }
}
&.black {
&:hover{ background: black; }
&:hover{ color: white; }
}
&.topaz{
&:hover{ background: #fti-topaz; }
&:hover{ color: white; }
}
}
}
}
How do I avoid writing &:hover{ color: white; } multiple times?
Is there a way to apply this line to all of the immediate class descendants somewhere inside the a tag?

It depends on the desired result.
Do you want:
1) White hover color by default, regardless of whether it also has the one of the .orange, .black, or .topaz classes?
.some-class{
> li{
a{
color: white;
background: #fti-lightgrey;
border-radius: 0px;
padding: 1px 15px;
// a color for the partcular tab that is chosen. (the color for each tab can be set inside mura)
&.orange{
&:hover{ background: #fti-orange; }
}
&.black {
&:hover{ background: black; }
}
&.topaz{
&:hover{ background: #fti-topaz; }
}
}
a:hover{ color: white; }
}
}
2) Or do you only want it to be white on hover if it also has one of .orange, .black, .topaz classes?
.some-class{
> li{
a{
color: white;
background: #fti-lightgrey;
border-radius: 0px;
padding: 1px 15px;
// a color for the partcular tab that is chosen. (the color for each tab can be set inside mura)
&.orange{
&:hover{ background: #fti-orange; }
}
&.black {
&:hover{ background: black; }
}
&.topaz{
&:hover{ background: #fti-topaz; }
}
}
a:hover {
&.orange, &.black, &.topaz{
color: white;
}
}
}
}

You could do
a:hover {
&.orange,
&.black,
&.topaz { color: white; }
}
then define the background individually. This is assuming the hover for your anchor is different colour than white by default and you want the coloured classes to be white(not in a human race way!).
or use the same style as you have
a {
&.orange, &.black, &.topaz {
&:hover { color: white; }
}
}
if you have a common class for the colours then you could always target that common class

In this case I would recommend to simply remove &:hover { color: white; } rules, as long as you have it set on a tag already and there is no something like a:hover rules which might override this.
In case if you have some a:hover rule with different color, simply add &:hover { color: white } right inside of a block.
.some-class{
> li{
a{
color: white;
background: #fti-lightgrey;
border-radius: 0px;
padding: 1px 15px;
// a color for the partcular tab that is chosen. (the color for each tab can be set inside mura)
&.orange{
&:hover{ background: #fti-orange; }
}
&.black {
&:hover{ background: black; }
}
&.topaz{
&:hover{ background: #fti-topaz; }
}
}
}
}

Resources