Skip to content

Commit

Permalink
Design system variables name changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@prajwal88
prajwal88 committed Feb 18, 2019
1 parent 28ac5b2 commit a07a01e
Show file tree
Hide file tree
Showing 5 changed files with 370 additions and 254 deletions.
2 changes: 1 addition & 1 deletion _variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,4 +208,4 @@ $primary-border: 0.5px solid rgba(216, 216, 216, 0.5);
$primary-background: rgba(216, 216, 216, 0.5);
$card-label-border-color: rgba(2, 79, 157, 0.5);
$dull-color: #b7d8f1;
$qr-btn: #edf4f9;
$qr-btn: #edf4f9;
164 changes: 143 additions & 21 deletions component/_buttons.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// buttons
/* buttons sytle guide */
// Specificity overrides
input[type="submit"],
input[type="reset"],
Expand All @@ -7,19 +7,21 @@ input[type="button"] {
width: 100%;
}
}

// base button styles
.sb-btn {
-webkit-tap-highlight-color: transparent;
-webkit-appearance: button;
user-select: none;
outline: 0;
display: inline-block;
margin-left: 0.25rem;
border: 1px solid;
color:#fff;
cursor:pointer;
margin:0px 0px 0px 8px;
color: $white-color;
@include margin(0px 0px 0px 8px);
min-width:($base-block-space * 8);
line-height: normal;
@include border-radius(3px);
text: {
transform: capitalize;
decoration: none;
Expand All @@ -36,23 +38,32 @@ input[type="button"] {

}
// button sizes
.sb-btn-small {
height:$base-btn-small-height;
padding: ($base-block-space * .5) ($base-block-space * 2);
font-size:$font-size-xs;
@include border-radius(2px);
.sb-btn-xs, .sb-btn-normal, .sb-btn-sm,.sb-btn-md {
padding: ($base-block-space * 1) ($base-block-space * 2);
}
.sb-btn-xs {
height:($base-block-space * 3);
padding: ($base-block-space * 1);
font-size:$font-size-sm;
}
.sb-btn-normal {
height:$base-btn-normal-height;
padding: $block-padding-y-x;
font-size:$font-size-sm;
@include border-radius(4px);
}
.sb-btn-big {
height:$base-btn-big-height;
padding: $block-padding-y-x;
font-size:$font-size-normal;
@include border-radius(6px);
.sb-btn-sm {
height:($base-block-space * 5);
font-size:$font-size-normal;
}
.sb-btn-md {
height:($base-block-space * 6);
font-size:$font-size-md;
}
.sb-btn-lg {
height:($base-block-space * 7);
padding: ($base-block-space * 3);
font-size:$font-size-lg;
}
// disabled button
.sb-btn-disabled {
Expand All @@ -72,7 +83,7 @@ input[type="button"] {
@include btn-theme-bgwhite($primary-color);
}
.sb-btn-outline-secondary{
@include btn-theme-bgwhite($secondary-color);
@include btn-theme-bgwhite($secondary-200);
}
.sb-btn-outline-tertiary{
@include btn-theme-bgwhite($tertiary-color);
Expand All @@ -82,7 +93,7 @@ input[type="button"] {
@include btn-theme-bgwhite($primary-color);
}
.sb-btn-outline-success{
@include btn-theme-bgwhite($secondary-color);
@include btn-theme-bgwhite($secondary-200);
}
.sb-btn-outline-warning{
@include btn-theme-bgwhite($tertiary-color);
Expand All @@ -94,24 +105,135 @@ input[type="button"] {
@include btn-theme-bgwhite($gray-800);
}
// default colored btns
.sb-btn-primary{
.sb-btn-primary,.sb-btn-info{
@include btn-theme($primary-color);
&:hover,&:active {
background: $primary-800;
}
}
.sb-btn-secondary{
@include btn-theme($secondary-color);
.sb-btn-secondary,.sb-btn-success{
@include btn-theme($secondary-200);
&:hover,&:active {
background: $secondary-400;
}
}
.sb-btn-tertiary{
.sb-btn-tertiary,.sb-btn-warning{
@include btn-theme($tertiary-color);
&:hover,&:active {
background: $tertiary-400;
}
}
.sb-btn-success{
@include btn-theme($success-color);
&:hover,&:active {
background: $secondary-400;
}
}
.sb-btn-info{
@include btn-theme($info-color);
&:hover,&:active {
background: $primary-800;
}
}
.sb-btn-warning{
@include btn-theme($warning-color);
&:hover,&:active {
background: $tertiary-400;
}
}
.sb-btn-error{
@include btn-theme($danger-color);
}
&:hover,&:active {
background: $red-400;
}
}

// to cleanup
.ui.dodger-blue.basic.label {
border: 1px solid $primary-color !important;
border-radius: 4px;
color: $primary-color;
font-size: 1rem;
font-weight: 300;
padding: 4px 16px;

}
.ui.semi-circular.dodger-blue.basic.label {
border: 1px solid $primary-color !important;
border-radius: 18.5px;
color: $primary-color;
font-size: 1.16rem;
padding: 10px 27px;
}

.ui.semi-circular.dodger-blue.button {
border: 1px solid $primary-color;
border-radius: 18.5px;
background: $primary-color;
color: #fff;
font-size: 1rem;
font-weight: 100;
padding: 6px 27px;
}

.circular-placeholder {
border: 6px solid #fff;
background-color: #fff;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.38);
border-radius: 100%;
height: 92px;
width: 92px;
}
.ui.button.rounded{
border-radius: 20px;
}
.ui.explore.blue.button {
background-color: $primary-color;
padding: 10px 30px;
}
.ui.explore.blue.button:hover {
opacity: 0.8;
}
.ui.explore.blue.button:active {
opacity: 0.9;
}
.ui.basic.explore.blue.button {
background-color: #fff;
border: 0.5px solid $primary-color;
box-shadow: none;
color: $primary-color;
font-weight: 700;
height:36px;
padding: 10px 30px;
}
.ui.basic.explore.blue.button:hover {
opacity: 0.8;
}
.ui.basic.explore.blue.button:active {
opacity: 0.9;
}
.ui.blue.button,
.ui.blue.buttons .button{
background-color: $primary-color !important;
color: #fff !important;
}
.ui.primary.button,
.ui.primary.buttons .button{
background-color: $primary-color !important;
color: #fff !important;
}
.ui.basic.primary.button,
.ui.basic.primary.buttons .button{
color: $primary-color !important;
background: transparent !important;
}
.ui.basic.blue.button,
.ui.basic.blue.buttons .button{
color: $primary-color !important;
background: transparent !important;
}
.ui.red.label,
.ui.red.labels .label{
background: $danger-color !important;
border-color: $danger-color !important;
}
Loading

0 comments on commit a07a01e

Please sign in to comment.