Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Material guideline #196

Open
wants to merge 15 commits into
base: v4-dev
Choose a base branch
from
+23,251 −16,368
Open

Material guideline #196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
7f29701
Material guideline
djibe Jun 28, 2018
481a2ad
Material guideline
djibe Jun 28, 2018
86f7afd
WIP BS 4.3.1
djibe Jun 13, 2019
c48e2b0
WIP 4.3.1
djibe Jun 13, 2019
d0a012d
WIP 4.3.1
djibe Jun 13, 2019
062d3c0
WIP 4.3.1
djibe Jun 14, 2019
ca6f595
WIP 4.3.
djibe Jun 14, 2019
dd9524d
06/15/2019
djibe Jun 15, 2019
187ec33
WIP
djibe Jun 20, 2019
bc91385
Add files via upload
djibe Jun 20, 2019
35d3c34
Add files via upload
djibe Jun 22, 2019
096221f
4.3.1 WIP
djibe Jul 8, 2019
c4299b5
Add files via upload
djibe Jul 8, 2019
d46c949
4.3.1 WIP
djibe Jul 18, 2019
4d04164
4.3.1 WIP
djibe Jul 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 39 additions & 20 deletions assets/scss/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -692,39 +692,58 @@ $colors: map-merge(
// Black and white
// Based on https://material.google.com/style/color.html#color-text-background-colors

$black: #000000 !default;
$black: #000 !default;

$black-primary-opacity: 0.87 !default;
$black-secondary-opacity: 0.54 !default;
$black-hint-opacity: 0.38 !default;
$black-divider-opacity: 0.12 !default;
$black-primary-opacity: .87 !default;
$black-caption-opacity: .60 !default; // Form helper text
$black-secondary-opacity: .54 !default;
$black-hint-opacity: .38 !default;
$black-divider-opacity: .12 !default;

$black-primary: rgba(red($black), green($black), blue($black), $black-primary-opacity) !default;
$black-secondary: rgba(red($black), green($black), blue($black), $black-secondary-opacity) !default;
$black-hint: rgba(red($black), green($black), blue($black), $black-hint-opacity) !default;
$black-divider: rgba(red($black), green($black), blue($black), $black-divider-opacity) !default;
$black-primary: rgba($black, $black-primary-opacity) !default;
$black-caption: rgba($black, $black-caption-opacity) !default;
$black-secondary: rgba($black, $black-secondary-opacity) !default;
$black-hint: rgba($black, $black-hint-opacity) !default;
$black-divider: rgba($black, $black-divider-opacity) !default;

$white: #ffffff !default;
$white: #fff !default;

$white-primary-opacity: 1 !default;
$white-secondary-opacity: 0.7 !default;
$white-hint-opacity: 0.5 !default;
$white-divider-opacity: 0.12 !default;

$white-primary: rgba(red($white), green($white), blue($white), $white-primary-opacity) !default;
$white-secondary: rgba(red($white), green($white), blue($white), $white-secondary-opacity) !default;
$white-hint: rgba(red($white), green($white), blue($white), $white-hint-opacity) !default;
$white-divider: rgba(red($white), green($white), blue($white), $white-divider-opacity) !default;
$white-secondary-opacity: .7 !default;
$white-hint-opacity: .5 !default;
$white-divider-opacity: .12 !default;

$white-primary: rgba($white, $white-primary-opacity) !default;
$white-secondary: rgba($white, $white-secondary-opacity) !default;
$white-hint: rgba($white, $white-hint-opacity) !default;
$white-divider: rgba($white, $white-divider-opacity) !default;

// States
// Based on https://material.io/design/interaction/states.html#usage

$overlay-hover-colored-opacity: .08 !default;
$overlay-focus-colored-opacity: .24 !default;
$overlay-selected-colored-opacity: .16 !default;
$overlay-activated-colored-opacity: .24 !default;
$overlay-pressed-colored-opacity: .32 !default;
$overlay-dragged-colored-opacity: .16 !default;

$overlay-hover-white-opacity: .04 !default;
$overlay-focus-white-opacity: .12 !default;
$overlay-selected-white-opacity: .08 !default;
$overlay-activated-white-opacity: .12 !default;
$overlay-pressed-white-opacity: .16 !default;
$overlay-dragged-white-opacity: .08 !default;

// Theme
// Based on https://material.google.com/style/color.html#color-themes

$dark-theme-1: #000000 !default;
$dark-theme-1: $black !default;
$dark-theme-2: $material-color-grey-900 !default;
$dark-theme-3: #303030 !default;
$dark-theme-4: $material-color-grey-800 !default;

$light-theme-1: $material-color-grey-300 !default;
$light-theme-2: $material-color-grey-100 !default;
$light-theme-3: $material-color-grey-050 !default;
$light-theme-4: #ffffff !default;
$light-theme-4: $white !default;
23 changes: 17 additions & 6 deletions assets/scss/_functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
@mixin _assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;

@each $key, $num in $map {
@if $prev-num == null {
@if $prev-num == null or unit($num) == "%" {
// Do nothing
} @else if not comparable($num, $prev-num) {
@warn 'Potentially invalid value for #{$map-name}: This map must be in ascending order, but key "#{$key}" has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key "#{$prev-key}"!';
Expand All @@ -16,11 +15,13 @@
}
}

@mixin _assert-starts-at-zero($map) {
$first-value: nth(map-values($map), 1);

// Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
$values: map-values($map);
$first-value: nth($values, 1);
@if $first-value != 0 {
@warn 'First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.';
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
}
}

Expand Down Expand Up @@ -75,3 +76,13 @@
@function strip-unit($val) {
@return $val / ($val * 0 + 1);
}

// Use secondary color for selection controls/inputs

@function selection-theme-color() {
@if $secondary-color-for-controls {
@return theme-color(secondary);
} @else {
@return theme-color(primary);
}
}
46 changes: 33 additions & 13 deletions assets/scss/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,41 @@
@import "mixins/deprecate";

// Utilities
@import 'mixins/breakpoints';
@import 'mixins/hover';
@import 'mixins/image';
//@import "mixins/badge";
@import "mixins/resize";
@import 'mixins/screen-reader';
//@import "mixins/size";
@import "mixins/reset-text";
@import 'mixins/text-emphasis';
@import 'mixins/text-hide';
@import 'mixins/text-truncate';
@import "mixins/visibility";

// Components
//@import "mixins/alert";
//@import "mixins/buttons";
//@import "mixins/pagination";
@import "mixins/lists";
@import 'mixins/nav-divider';
@import 'mixins/forms';
//@import "mixins/table-row";

// Skins
@import 'mixins/background-variant';
@import 'mixins/border-radius';
@import 'mixins/breakpoint';
@import 'mixins/transition';

// Layout
@import 'mixins/clearfix';
@import 'mixins/float';
@import 'mixins/form';
@import 'mixins/grid';
@import 'mixins/grid-framework';
@import 'mixins/hover';
@import 'mixins/image';
@import 'mixins/list';
@import 'mixins/grid';
@import 'mixins/float';

// Material
@import 'mixins/material-icons';
@import 'mixins/nav-divider';
@import 'mixins/reset-text';
@import 'mixins/screenreader';
@import 'mixins/text-alignment';
@import 'mixins/text-emphasis';
@import 'mixins/text-hide';
@import 'mixins/text-truncate';
@import 'mixins/transition';
@import 'mixins/typography';
125 changes: 68 additions & 57 deletions assets/scss/_print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,44 @@

@if $enable-print-styles {
@media print {
@page {
size: $print-page-size;
}

*,
*::after,
*::before {
box-shadow: none !important;
*::before,
*::after {
text-shadow: none !important;
box-shadow: none !important;
}

a:not(.btn) {
text-decoration: underline;
}

// stylelint-disable-next-line selector-no-qualifying-type
abbr[title]::after {
content: ' (" attr(title) ") ';
content: " ("attr(title) ") ";
}

pre {
white-space: pre-wrap !important;
}

pre,
blockquote {
border: $border-width solid rgba($black, .12);
page-break-inside: avoid;
}

body {
min-width: $print-body-min-width !important;
thead {
display: table-header-group;
}

tr,
img {
page-break-inside: avoid;
}

p,
h2,
h3,
p {
h3 {
orphans: 3;
widows: 3;
}
Expand All @@ -42,29 +49,65 @@
page-break-inside: avoid;
}

img {
page-break-inside: avoid;
@page {
size: $print-page-size;
}

pre {
page-break-inside: avoid;
white-space: pre-wrap !important;
body {
min-width: $print-body-min-width !important;
}

thead {
display: table-header-group;
.container {
min-width: $print-body-min-width !important;
}

tr {
page-break-inside: avoid;
.navbar {
display: none;
}

.card {
border: $border-width solid $border-color-solid;
.badge {
border: $border-width solid $black;
}

.container {
min-width: $print-body-min-width !important;
.table {
border-collapse: collapse !important;

td,
th {
background-color: $white !important;
}
}

.table-bordered {

th,
td {
border: 1px solid $border-color-solid;
}
}

.table-dark {
color: inherit;

th,
td,
thead th,
tbody+tbody {
border-color: $border-color-solid;
}
}

.table .thead-dark th {
color: inherit;
border-color: $border-color-solid;
}


// ADDITIONS

.card {
border: $border-width solid $border-color-solid;
page-break-inside: avoid;
}

.dropdown-menu {
Expand Down Expand Up @@ -99,40 +142,8 @@
border-bottom: $border-width solid $border-color-solid;
}

.navbar {
display: none;
}

.popover {
border: $border-width solid $border-color-solid;
}

.table {
td,
th {
background-color: $white !important;
}
}

.table-bordered {
border: $border-width solid $border-color-solid;
}

.table-dark {
color: inherit;

td,
th,
.table {
border-color: $border-color-solid;
}
}

.table .thead-dark {
td,
th {
color: inherit;
}
}
}
}
11 changes: 8 additions & 3 deletions assets/scss/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
// Bootstrap

@import 'utilities/align';
@import 'utilities/border';
@import 'utilities/background';
@import 'utilities/borders';
@import 'utilities/clearfix';
@import 'utilities/display';
@import "utilities/embed";
@import 'utilities/flex';
@import 'utilities/float';
@import 'utilities/overflow';
@import 'utilities/position';
@import 'utilities/screenreader';
@import 'utilities/screenreaders';
@import 'utilities/shadows';
@import 'utilities/sizing';
@import 'utilities/spacing';
@import 'utilities/stretched-link';
@import "utilities/spacing";
@import 'utilities/text';
@import 'utilities/visibility';

// Material

@import 'utilities/material-icons';
@import 'utilities/scrollbars';
@import 'utilities/webkit-custom';
4 changes: 4 additions & 0 deletions assets/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

$enable-grid-classes: true !default;
$enable-print-styles: true !default;
$enable-pointer-cursor-for-buttons: true !default;
$enable-validation-icons: true !default;
$enable-validation-valid: true !default; // Use Success color for valid inputs
$secondary-color-for-controls: false !default; // Use secondary color for selection/inputs

// Variables

Expand Down
Loading