Button styling

This commit is contained in:
Nabeel Shahzad 2018-01-01 17:00:40 -06:00
parent dd400806ee
commit d4f69bee2a
7 changed files with 1650 additions and 827 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,17 +1,17 @@
.btn,
.navbar .navbar-nav > li > a.btn{
border-radius: $border-radius-btn-base;
//border-radius: $border-radius-btn-base;
box-sizing: border-box;
border-width: $border-thick;
//border-width: $border-thick;
background-color: $transparent-bg;
font-size: $font-size-base;
font-weight: $font-weight-semi;
padding: $padding-base-vertical $padding-base-horizontal;
@include btn-styles($default-color, $default-states-color);
@include transition($fast-transition-time, linear);
&:hover,
&:focus{
outline: 0 !important;
@ -22,15 +22,15 @@
@include box-shadow(none);
outline: 0 !important;
}
&.btn-icon{
padding: $padding-base-vertical;
}
}
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group{
margin-left: -2px;
}
@ -42,21 +42,21 @@
.navbar .navbar-nav > li > a.btn-info, .btn-info { @include btn-styles($info-color, $info-states-color); }
.navbar .navbar-nav > li > a.btn-warning, .btn-warning { @include btn-styles($warning-color, $warning-states-color); }
.navbar .navbar-nav > li > a.btn-danger, .btn-danger { @include btn-styles($danger-color, $danger-states-color); }
.btn-neutral {
.btn-neutral {
@include btn-styles($white-color, $white-color);
&:hover,
&:focus{
color: $default-color;
}
&:active,
&.active,
.open > &.dropdown-toggle{
background-color: $white-color;
color: $default-color;
}
}
&.btn-fill{
color: $default-color;
}
@ -64,7 +64,7 @@
&.btn-fill:focus{
color: $default-states-color;
}
&.btn-simple:active,
&.btn-simple.active{
background-color: transparent;
@ -81,7 +81,7 @@
.btn-simple{
border: $none;
padding: $padding-base-vertical $padding-base-horizontal;
&.btn-icon{
padding: $padding-base-vertical;
}
@ -91,7 +91,7 @@
font-weight: $font-weight-normal;
}
.btn-sm{
@include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-btn-small, $line-height-small);
@include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-btn-small, $line-height-small);
}
.btn-xs {
@include btn-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-xs, $border-radius-btn-small, $line-height-small);

View File

@ -1,4 +1,4 @@
.card{
.card {
border: 0;
border-radius: $border-radius-extreme;
box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
@ -174,6 +174,30 @@
}
}
}
.btn-primary {
@include btn-styles($primary-color, $primary-states-color);
}
.btn-success {
@include btn-styles($success-color, $success-states-color);
}
.btn-info {
@include btn-styles($info-color, $info-states-color);
}
.btn-warning {
@include btn-styles($warning-color, $warning-states-color);
}
.btn-danger {
@include btn-styles($danger-color, $danger-states-color);
}
.btn-neutral {
@include btn-styles($white-color, $white-color);
}
}
.card-user{
.image{

View File

@ -33,8 +33,8 @@ $medium-gray: #DDDDDD !default;
$dark-gray: #9A9A9A !default;
$gray-input-bg: #fffcf5 !default;
$danger-input-bg: #FFC0A4 !default;
$success-input-bg: #ABF3CB !default;
$danger-input-bg: #fffcf5 !default;
$success-input-bg: #fffcf5 !default;
$other-medium-gray: #A49E93 !default;
$transparent-bg: transparent !default;
@ -42,27 +42,59 @@ $default-color: #2f2d2a !default; //#66615B !default;
$default-bg: #66615B !default;
$default-states-color: #403D39 !default;
$primary-color: #7A9E9F !default;
$primary-bg: #7A9E9F !default;
//$primary-color: #7A9E9F !default;
$primary-color: #f96332 !default;
$primary-bg: darken($primary-color, 5%) !default;
$primary-states-color: #427C89 !default;
$success-color: #7AC29A !default;
$success-bg: #7AC29A !default;
$success-states-color: #42A084 !default;
//$success-color: #7AC29A !default;
$success-color: #18ce0f !default;
$success-bg: darken($success-color, 5%) !default;
$success-states-color: darken($success-color, 5%) !default;
$info-color: #68B3C8 !default;
$info-bg: #68B3C8 !default;
$info-color: #2CA8FF !default;
$info-bg: #109CFF !default;
$info-states-color: #3091B2 !default;
$warning-color: #F3BB45 !default;
$warning-bg: #F3BB45 !default;
$warning-bg: darken($warning-color, 5%) !default;
$warning-states-color: #BB992F !default;
$danger-color: #EB5E28 !default;
$danger-bg: #EB5E28 !default;
$danger-states-color: #B33C12 !default;
$danger-color: #FF3636 !default;
$danger-bg: darken($danger-color, 5%) !default;
$danger-states-color: darken($danger-color, 5%) !default;
/*
$default-color: #B8B8B8 !default;
$default-states-color: darken($default-color, 5%) !default;
$default-color-opacity: rgba(182, 182, 182, .6) !default;
$primary-color: #f96332 !default;
$primary-states-color: darken($primary-color, 5%) !default;
$primary-color-opacity: rgba(249, 99, 50, .3) !default;
$primary-color-alert: rgba(249, 99, 50, .8) !default;
$success-color: #18ce0f !default;
$success-states-color: darken($success-color, 5%) !default;
$success-color-opacity: rgba(24, 206, 15, .3) !default;
$success-color-alert: rgba(24, 206, 15, .8) !default;
$info-color: #2CA8FF !default;
$info-states-color: #109CFF !default;
$info-color-opacity: rgba(44, 168, 255, .3) !default;
$info-color-alert: rgba(44, 168, 255, .8) !default;
$warning-color: #FFB236 !default;
$warning-states-color: darken($warning-color, 5%) !default;
$warning-color-opacity: rgba(255, 178, 54, .3) !default;
$warning-color-alert: rgba(255, 178, 54, .8) !default;
$danger-color: #FF3636 !default;
$danger-states-color: darken($danger-color, 5%) !default;
$danger-color-opacity: rgba(255, 54, 54, .3) !default;
$danger-color-alert: rgba(255, 54, 54, .8) !default;
*/
$link-disabled-color: #666666 !default;

View File

@ -1,21 +1,22 @@
// Mixin for generating new styles
@mixin btn-styles($btn-color, $btn-states-color) {
border-color: $btn-color;
color: $btn-color;
background-color: $btn-color;
&:hover,
&:focus,
&:active,
&.active,
.open > &.dropdown-toggle {
background-color: $btn-color;
color: $fill-font-color;
border-color: $btn-color;
.caret{
border-top-color: $fill-font-color;
}
&:active:focus,
&:active:hover,
&.active:focus,
&.active:hover,
.open > &.dropdown-toggle,
.open > &.dropdown-toggle:focus,
.open > &.dropdown-toggle:hover {
background-color: $btn-states-color;
color: $white-color;
}
&.disabled,
&:disabled,
&[disabled],
@ -26,60 +27,126 @@
&.focus,
&:active,
&.active {
background-color: $transparent-bg;
background-color: $btn-color;
border-color: $btn-color;
}
}
&.btn-fill {
&.focus,
&:focus {
box-shadow: none;
}
// btn-neutral style
@if $btn-color == $white-color {
color: $white-color;
background-color: $btn-color;
@include opacity(1);
&.btn-danger {
color: $danger-color;
&:hover,
&:focus,
&:active {
color: $danger-states-color;
}
}
&.btn-info {
color: $white-color;
&:hover,
&:focus,
&:active {
color: $info-states-color;
}
}
&.btn-warning {
color: $white-color;
&:hover,
&:focus,
&:active {
color: $warning-states-color;
}
}
&.btn-success {
color: $white-color;
&:hover,
&:focus,
&:active {
color: $success-states-color;
}
}
&.btn-default {
color: $white-color;
&:hover,
&:focus,
&:active {
color: $default-states-color;
}
}
&.active,
&:active:focus,
&:active:hover,
&.active:focus,
&.active:hover,
.open > &.dropdown-toggle,
.open > &.dropdown-toggle:focus,
.open > &.dropdown-toggle:hover {
background-color: $white-color;
color: $primary-color;
}
&:hover,
&:focus,
&:active,
&.active,
.open > &.dropdown-toggle{
background-color: $btn-states-color;
color: $white-color;
border-color: $btn-states-color;
&:active {
color: $primary-states-color;
}
.caret{
border-top-color: $white-color;
} @else {
color: $white-color;
}
&.btn-simple {
color: $btn-color;
border-color: $btn-color;
&:hover,
&:focus,
&:active {
background-color: $transparent-bg;
color: $btn-states-color;
border-color: $btn-states-color;
}
}
&.btn-simple {
&.btn-link {
color: $btn-color;
&:hover,
&:focus,
&:active,
&.active,
.open > &.dropdown-toggle{
background-color: $transparent-bg;
color: $btn-states-color;
&:active {
background-color: $transparent-bg;
color: $btn-states-color;
text-decoration: none;
}
.caret{
border-top-color: $white-color;
}
}
.caret{
border-top-color: $btn-color;
}
}
@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border, $line-height){
font-size: $font-size;
border-radius: $border;
//border-radius: $border;
padding: $padding-vertical $padding-horizontal;
&.btn-simple{
padding: $padding-vertical + 2 $padding-horizontal;
padding: $padding-vertical + 2 $padding-horizontal;
}
}
}

View File

@ -1,12 +1,12 @@
{
"/assets/admin/vendor/paper-dashboard.css": "/assets/admin/vendor/paper-dashboard.css?id=729efec551211db36219",
"/assets/admin/vendor/paper-dashboard.css": "/assets/admin/vendor/paper-dashboard.css?id=233e12aabc29a3c6fba3",
"/assets/frontend/css/now-ui-kit.css": "/assets/frontend/css/now-ui-kit.css?id=58ec3dc768f07fee143a",
"/assets/system/js/jquery.js": "/assets/system/js/jquery.js?id=09dd64a64ba840c31a81",
"/assets/fonts/glyphicons-halflings-regular.woff2": "/assets/fonts/glyphicons-halflings-regular.woff2?id=b5b5055c6d812c0f9f0d",
"/assets/admin/fonts/glyphicons-halflings-regular.woff2": "/assets/admin/fonts/glyphicons-halflings-regular.woff2?id=b5b5055c6d812c0f9f0d",
"/assets/admin/css/clear.png": "/assets/admin/css/clear.png?id=0e92f4c3efc6988a3c96",
"/assets/admin/css/loading.gif": "/assets/admin/css/loading.gif?id=90a4b76b4f11558691f6",
"/assets/admin/css/vendor.min.css": "/assets/admin/css/vendor.min.css?id=b7f27b62f5cf3ebb7a65",
"/assets/admin/css/vendor.min.css": "/assets/admin/css/vendor.min.css?id=dd0f6c4b8953c784240e",
"/assets/admin/js/vendor.js": "/assets/admin/js/vendor.js?id=0f6b516f7ea80d70d407",
"/assets/admin/css/blue.png": "/assets/admin/css/blue.png?id=753a3c0dec86d3a38d9c",
"/assets/admin/css/blue@2x.png": "/assets/admin/css/blue@2x.png?id=97da23d47b838cbd4bef",