Skip to content

Instantly share code, notes, and snippets.

@cesasol
Created August 4, 2016 16:24
Show Gist options
  • Save cesasol/ef6535e99f3671808e6d04dad386aa62 to your computer and use it in GitHub Desktop.
Save cesasol/ef6535e99f3671808e6d04dad386aa62 to your computer and use it in GitHub Desktop.
Styling wordpress plugin "Membership 2 Pro" with foundation
.ms-alert-box {
@include callout-base;
ms-alert-success {
@include callout-style($success-color);
}
}
.ms-form-price-boxes {
@include flex-grid-row();
.ms-membership-form{
@include breakpoint(small) {
@include flex-grid-column(12);
}
@include breakpoint(medium) {
@include flex-grid-column(6);
}
.ms-membership-details-wrapper{
@include flex-grid-row(nest collapse);
border: solid 1px #DDDDDD;
> div{
@include flex-grid-column(12, 0);
}
.ms-top-bar {
background-color: $secondary-color;
.ms-title{
color: $white;
font-size: 2rem;
font-weight: 200;
border-bottom: 0;
}
}
.ms-price-details{
@include flex-grid-row();
padding: 0;
}
.ms-description {
@include flex-order(2);
li{
@include flex-grid-column(12);
@extend .no-bullet;
text-align: center;
text-align: justify;
border-bottom: solid 1px $secondary-color;
padding: 0.875rem 0rem;
&:last-child {
border-bottom: 0;
}
}
}
.ms-price{
@include flex-grid-column(12, 0);
@include flex-order(1);
background-color: $blue-2;
color: $white;
text-align: center;
font-size: 1.75rem;
border-bottom: 0;
}
.ms-bottom-bar {
margin: 0;
background-color: 0;
padding: 0;
.button{
@include button-expand();
border-radius: 0;
font-weight: 500;
font-size: 1.2rem;
}
}
}
}
}
.ms-form-element{
&.ms-form-element-xprofile{
&.editfield{
.checkbox,.radio{
// @include fieldset();
.label{
font-size: 1rem;
line-height: 1.5;
background: $body-background;
padding: $legend-padding;
margin: 0;
margin-#{$global-left}: rem-calc(-3);
}
.input-options{
&.radio-button-options{
label{
@include form-element();
float: none;
padding: 0.2rem;
input{
float: none;
min-width: unset;
}
}
}
&.checkbox-options{
column-count: 2;
label{
float: none;
display: list-item;
@extend .no-bullet;
// font-weight: bold;
@include form-element();
// height: 2rem;
padding: 0.2rem;
&:nth-child(odd){
}
input{
min-width: unset;
float: none;
}
}
}
}
}
input{
&[type="textbox"]{
@include form-element();
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment