sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

- update: Bootstrap version to v4.0.0-beta.2

Browse Source 
- update: vue-chartjs version to 3.0.0
- refactor: Remove old SCSS variables
- refactor: Breadcrumb Menu styles
- fix: External links issue
- fix: Mobile sidebar-nav height issue
This commit is contained in:
Łukasz Holeczek
2017-10-22 19:22:38 +02:00
parent f244f02585
commit 923dc4ac3c
157 changed files with 2398 additions and 1832 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Vue_Full_Project/scss/bootstrap/mixins/_alert.scss
+1 -1
View File
@@ -1,6 +1,6 @@
@mixin alert-variant($background, $border, $color) {
color: $color;
background-color: $background;
@include gradient-bg($background);
border-color: $border;
hr {
Vue_Full_Project/scss/bootstrap/mixins/_background-variant.scss
+8
View File
@@ -1,3 +1,5 @@
// stylelint-disable declaration-no-important
// Contextual backgrounds
@mixin bg-variant($parent, $color) {
@@ -10,3 +12,9 @@
}
}
}
@mixin bg-gradient-variant($parent, $color) {
#{$parent} {
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
}
}
Vue_Full_Project/scss/bootstrap/mixins/_badge.scss
+2 -2
View File
@@ -1,10 +1,10 @@
@mixin badge-variant($bg) {
@include color-yiq($bg);
color: color-yiq($bg);
background-color: $bg;
&[href] {
@include hover-focus {
@include color-yiq($bg);
color: color-yiq($bg);
text-decoration: none;
background-color: darken($bg, 10%);
}
Vue_Full_Project/scss/bootstrap/mixins/_breakpoints.scss
+18 -4
View File
@@ -81,8 +81,18 @@
$min: breakpoint-min($lower, $breakpoints);
$max: breakpoint-max($upper, $breakpoints);
@media (min-width: $min) and (max-width: $max) {
@content;
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else if $max == null {
@include media-breakpoint-up($lower) {
@content;
}
} @else if $min == null {
@include media-breakpoint-down($upper) {
@content;
}
}
}
@@ -98,8 +108,12 @@
@content;
}
} @else if $max == null {
@include media-breakpoint-up($name)
@include media-breakpoint-up($name) {
@content;
}
} @else if $min == null {
@include media-breakpoint-down($name)
@include media-breakpoint-down($name) {
@content;
}
}
}
Vue_Full_Project/scss/bootstrap/mixins/_buttons.scss
+27 -16
View File
@@ -3,25 +3,25 @@
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
@include color-yiq($background);
background-color: $background;
@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
color: color-yiq($background);
@include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
&:hover {
@include color-yiq($background);
background-color: $active-background;
border-color: $active-border;
@include hover {
color: color-yiq($hover-background);
@include gradient-bg($hover-background);
border-color: $hover-border;
}
&:focus,
&.focus {
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5);
box-shadow: $btn-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
} @else {
box-shadow: 0 0 0 3px rgba($border, .5);
box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
}
}
@@ -32,13 +32,22 @@
border-color: $border;
}
&:active,
&.active,
&:not([disabled]):not(.disabled):active,
&:not([disabled]):not(.disabled).active,
.show > &.dropdown-toggle {
color: color-yiq($active-background);
background-color: $active-background;
background-image: none; // Remove the gradient for the pressed/active state
@if $enable-gradients {
background-image: none; // Remove the gradient for the pressed/active state
}
border-color: $active-border;
@include box-shadow($btn-active-box-shadow);
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: $btn-active-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
} @else {
box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
}
}
}
@@ -56,7 +65,7 @@
&:focus,
&.focus {
box-shadow: 0 0 0 3px rgba($color, .5);
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
}
&.disabled,
@@ -65,12 +74,14 @@
background-color: transparent;
}
&:active,
&.active,
&:not([disabled]):not(.disabled):active,
&:not([disabled]):not(.disabled).active,
.show > &.dropdown-toggle {
color: $color-hover;
background-color: $color;
border-color: $color;
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
}
}
Vue_Full_Project/scss/bootstrap/mixins/_caret.scss
Executable
+35
View File
@@ -0,0 +1,35 @@
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
width: 0;
height: 0;
margin-left: $caret-width * .85;
vertical-align: $caret-width * .85;
content: "";
@if $direction == down {
@include caret-down;
} @else if $direction == up {
@include caret-up;
}
}
&:empty::after {
margin-left: 0;
}
}
}
Vue_Full_Project/scss/bootstrap/mixins/_float.scss
+2
View File
@@ -1,3 +1,5 @@
// stylelint-disable declaration-no-important
@mixin float-left {
float: left !important;
}
Vue_Full_Project/scss/bootstrap/mixins/_forms.scss
+31 -4
View File
@@ -1,7 +1,7 @@
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-border-color-focus` variable.
// which defaults to the `$input-focus-border-color` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
@@ -16,13 +16,40 @@
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
outline: none;
@include box-shadow($input-focus-box-shadow);
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: $input-box-shadow, $input-btn-focus-box-shadow;
} @else {
box-shadow: $input-btn-focus-box-shadow;
}
}
}
@mixin form-validation-state($state, $color) {
.#{$state}-feedback {
display: none;
margin-top: .25rem;
font-size: .875rem;
color: $color;
}
.#{$state}-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
width: 250px;
padding: .5rem;
margin-top: .1rem;
font-size: .875rem;
line-height: 1;
color: #fff;
background-color: rgba($color,.8);
border-radius: .2rem;
}
.form-control,
.custom-select {
.was-validated &:#{$state},
@@ -33,8 +60,8 @@
box-shadow: 0 0 0 .2rem rgba($color,.25);
}
~ .invalid-feedback,
~ .invalid-tooltip {
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
Vue_Full_Project/scss/bootstrap/mixins/_gradients.scss
+8
View File
@@ -1,5 +1,13 @@
// Gradients
@mixin gradient-bg($color) {
@if $enable-gradients {
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
} @else {
background-color: $color;
}
}
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
Vue_Full_Project/scss/bootstrap/mixins/_grid-framework.scss
+14 -1
View File
@@ -10,7 +10,7 @@
width: 100%;
min-height: 1px; // Prevent columns from collapsing when empty
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
padding-left: ($gutter / 2);
}
@each $breakpoint in map-keys($breakpoints) {
@@ -46,11 +46,24 @@
}
}
.order#{$infix}-first {
order: -1;
}
@for $i from 1 through $columns {
.order#{$infix}-#{$i} {
order: $i;
}
}
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
.offset#{$infix}-#{$i} {
@include make-col-offset($i, $columns);
}
}
}
}
}
}
Vue_Full_Project/scss/bootstrap/mixins/_grid.scss
+10 -5
View File
@@ -3,11 +3,11 @@
// Generate semantic grid columns with these mixins.
@mixin make-container() {
width: 100%;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
margin-right: auto;
margin-left: auto;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
width: 100%;
}
@@ -24,7 +24,7 @@
display: flex;
flex-wrap: wrap;
margin-right: ($grid-gutter-width / -2);
margin-left: ($grid-gutter-width / -2);
margin-left: ($grid-gutter-width / -2);
}
@mixin make-col-ready() {
@@ -35,7 +35,7 @@
width: 100%;
min-height: 1px; // Prevent collapsing
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
}
@mixin make-col($size, $columns: $grid-columns) {
@@ -45,3 +45,8 @@
// do not appear to require this.
max-width: percentage($size / $columns);
}
@mixin make-col-offset($size, $columns: $grid-columns) {
$num: $size / $columns;
margin-left: if($num == 0, 0, percentage($num));
}
Vue_Full_Project/scss/bootstrap/mixins/_hover.scss
+13 -12
View File
@@ -1,3 +1,4 @@
// stylelint-disable indentation
@mixin hover {
// TODO: re-enable along with mq4-hover-shim
// @if $enable-hover-media-query {
@@ -8,21 +9,21 @@
// }
// }
// @else {
// scss-lint:disable Indentation
&:hover { @content }
// scss-lint:enable Indentation
&:hover { @content; }
// }
}
@mixin hover-focus {
@if $enable-hover-media-query {
&:focus { @content }
@include hover { @content }
&:focus {
@content;
}
@include hover { @content; }
} @else {
&:focus,
&:hover {
@content
@content;
}
}
}
@@ -31,14 +32,14 @@
@if $enable-hover-media-query {
&,
&:focus {
@content
@content;
}
@include hover { @content }
@include hover { @content; }
} @else {
&,
&:focus,
&:hover {
@content
@content;
}
}
}
@@ -47,14 +48,14 @@
@if $enable-hover-media-query {
&:focus,
&:active {
@content
@content;
}
@include hover { @content }
@include hover { @content; }
} @else {
&:focus,
&:active,
&:hover {
@content
@content;
}
}
}
Vue_Full_Project/scss/bootstrap/mixins/_image.scss
+3 -3
View File
@@ -20,15 +20,15 @@
//
// Short retina mixin for setting background-image and -size.
// stylelint-disable indentation, media-query-list-comma-newline-after
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
background-image: url($file-1x);
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
// but doesn't convert dppx=>dpi.
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
// Compatibility info: http://caniuse.com/#feat=css-media-resolution
@media
only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
// Compatibility info: https://caniuse.com/#feat=css-media-resolution
@media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
only screen and (min-resolution: 2dppx) { // Standardized
background-image: url($file-2x);
background-size: $width-1x $height-1x;
Vue_Full_Project/scss/bootstrap/mixins/_list-group.scss
-2
View File
@@ -6,7 +6,6 @@
background-color: $background;
}
//scss-lint:disable QualifyingElement
a.list-group-item-#{$state},
button.list-group-item-#{$state} {
color: $color;
@@ -22,5 +21,4 @@
border-color: $color;
}
}
// scss-lint:enable QualifyingElement
}
Vue_Full_Project/scss/bootstrap/mixins/_navbar-align.scss
+2 -1
View File
@@ -1,7 +1,8 @@
// Navbar vertical align
//
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);`
// to calculate the appropriate top margin.
// @mixin navbar-vertical-align($element-height) {
// margin-top: (($navbar-height - $element-height) / 2);
Vue_Full_Project/scss/bootstrap/mixins/_reset-text.scss
+1 -2
View File
@@ -1,4 +1,3 @@
// scss-lint:disable DuplicateProperty
@mixin reset-text {
font-family: $font-family-base;
// We deliberately do NOT reset font-size or word-wrap.
@@ -6,7 +5,7 @@
font-weight: $font-weight-normal;
line-height: $line-height-base;
text-align: left; // Fallback for where `start` is not supported
text-align: start;
text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties
text-decoration: none;
text-shadow: none;
text-transform: none;
Vue_Full_Project/scss/bootstrap/mixins/_screen-reader.scss
+2 -2
View File
@@ -1,7 +1,7 @@
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content
// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
// See: http://a11yproject.com/posts/how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
@mixin sr-only {
position: absolute;
Vue_Full_Project/scss/bootstrap/mixins/_text-emphasis.scss
+2
View File
@@ -1,3 +1,5 @@
// stylelint-disable declaration-no-important
// Typography
@mixin text-emphasis-variant($parent, $color) {
Vue_Full_Project/scss/bootstrap/mixins/_visibility.scss
+2
View File
@@ -1,3 +1,5 @@
// stylelint-disable declaration-no-important
// Visibility
@mixin invisible($visibility) {