CODEWITHSUNDEEP
csszurb-foundation
MaxwellLynn
MaxwellLynn

Reputation: 968

Foundation - Change the colour of the hollow buttons

I'm struggling to find the variables to how you can change the colouring of the hollow buttons that foundation provides.

At the moment I have to override the styling by doing the below: 

&.hollow {
   border: 1px solid $clr-primary;
   color: $clr-primary;
}

I like having to do most of my styling changes in the foundation settings file instead of taking this approach so I don't have to write more CSS than I need.

Is there a variable that I am missing that I can apply these stylings to in the foundation settings?

Upvotes: 0

Views: 805

Answers (2)

ITZAP
ITZAP

Reputation: 296

Simply read-up on the ZURB Foundation SCSS Button MIXINS which are explained at the bottom of this page here >>

Here are a few SCSS examples:

div.pagenumber a.pagelink {
	@include button($expand:false, $background:$primary-color, $background-hover:auto, $color:auto, $style:solid);
	font-size: inherit;
	padding: 0.5em;
	margin: 0;
	border-radius: $global-radius;
}

div.pagenumber a.pagelink:hover {
	@include button($expand:false, $background:$primary-color, $background-hover:auto, $color:auto, $style:hollow);
	text-decoration: none;
	font-size: inherit;
	padding: 0.5em;
	margin: 0;
	border-radius: $global-radius;
}

input.cancel {
	@include breakpoint(small) {
		@include button($expand:false, $background:$darkred, $background-hover:$crimson, $color:$white, $style:solid);
		font-size: 0.85rem;
	}
	@include breakpoint(medium) {font-size: 0.95rem;}
	@include breakpoint(large) {font-size: 1rem;}
}

Upvotes: 1

Gerrit
Gerrit

Reputation: 1412

According the foundation wiki you find the variables here:

All Foundation projects include a settings file, named _settings.scss. If you're using the CLI to create a Foundation for Sites project, you can find the settings file under scss/ (basic template) or src/assets/scss/ (ZURB template). If you're installing the framework standalone using Bower or npm, there's a settings file included in those packages, which you can move into your own Sass files to work with. — http://foundation.zurb.com/sites/docs/sass.html

Changing the color palette: http://foundation.zurb.com/sites/docs/global.html#changing-the-color-palette

Upvotes: 1

Related Questions