Button styling
This commit is contained in:
parent
dd400806ee
commit
d4f69bee2a
1098
public/assets/admin/css/vendor.min.css
vendored
1098
public/assets/admin/css/vendor.min.css
vendored
File diff suppressed because one or more lines are too long
1098
public/assets/admin/vendor/paper-dashboard.css
vendored
1098
public/assets/admin/vendor/paper-dashboard.css
vendored
File diff suppressed because one or more lines are too long
@ -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);
|
||||
|
@ -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{
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user