From d3fbacf4fd6b8f21f5dc5016cf81f55d8955fb21 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Thu, 14 Jan 2016 12:08:28 -0600 Subject: [PATCH] #822 initial drawer implementation. #823 wip card implementation. #805 initial dashboard example implementation. More work to be done, but this is a reasonably working checkpoint. --- docs/examples/dashboard/dashboard.scss | 117 ------- docs/examples/dashboard/example.scss | 214 +++++++++++++ .../dashboard/images/android-desktop.png | Bin 0 -> 8325 bytes docs/examples/dashboard/images/dog.png | Bin 0 -> 8691 bytes docs/examples/dashboard/images/favicon.png | Bin 0 -> 905 bytes .../examples/dashboard/images/ios-desktop.png | Bin 0 -> 1489 bytes docs/examples/dashboard/images/user.jpg | Bin 0 -> 6961 bytes docs/examples/dashboard/index.html | 297 +++++++++++++++--- docs/examples/drawer/drawer.scss | 117 ------- docs/examples/drawer/index.html | 48 --- docs/material-design/test.md | 71 +++++ scss/_cards.scss | 57 +++- scss/_core.scss | 1 + scss/_drawer.scss | 156 +++++++++ scss/_menu.scss | 2 + scss/_mixins.scss | 1 + scss/mixins/_type.scss | 11 + scss/variables/_drawer.scss | 11 + scss/variables/bootstrap/_card.scss | 6 +- 19 files changed, 787 insertions(+), 322 deletions(-) delete mode 100644 docs/examples/dashboard/dashboard.scss create mode 100644 docs/examples/dashboard/example.scss create mode 100644 docs/examples/dashboard/images/android-desktop.png create mode 100644 docs/examples/dashboard/images/dog.png create mode 100644 docs/examples/dashboard/images/favicon.png create mode 100644 docs/examples/dashboard/images/ios-desktop.png create mode 100644 docs/examples/dashboard/images/user.jpg delete mode 100644 docs/examples/drawer/drawer.scss delete mode 100644 docs/examples/drawer/index.html create mode 100644 scss/_drawer.scss create mode 100644 scss/mixins/_type.scss create mode 100644 scss/variables/_drawer.scss diff --git a/docs/examples/dashboard/dashboard.scss b/docs/examples/dashboard/dashboard.scss deleted file mode 100644 index ae09f045..00000000 --- a/docs/examples/dashboard/dashboard.scss +++ /dev/null @@ -1,117 +0,0 @@ ---- ---- - -body { - /* Show it's not fixed to the top */ - min-height: 75rem; - padding-top: 6rem; -} - -// -///* -// * Base structure -// */ -// -///* Move down content because we have a fixed navbar that is 50px tall */ -//body { -// padding-top: 50px; -//} -// -// -///* -// * Global add-ons -// */ -// -//.sub-header { -// padding-bottom: 10px; -// border-bottom: 1px solid #eee; -//} -// -///* -// * Top navigation -// * Hide default border to remove 1px line. -// */ -//.navbar-fixed-top { -// border: 0; -//} -// -///* -// * Sidebar -// */ -// -///* Hide for mobile, show later */ -//.sidebar { -// display: none; -//} -//@media (min-width: 768px) { -// .sidebar { -// position: fixed; -// top: 51px; -// bottom: 0; -// left: 0; -// z-index: 1000; -// display: block; -// padding: 20px; -// overflow-x: hidden; -// overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ -// background-color: #f5f5f5; -// border-right: 1px solid #eee; -// } -//} -// -///* Sidebar navigation */ -//.nav-sidebar { -// margin-right: -21px; /* 20px padding + 1px border */ -// margin-bottom: 20px; -// margin-left: -20px; -//} -//.nav-sidebar > li > a { -// padding-right: 20px; -// padding-left: 20px; -//} -//.nav-sidebar > .active > a { -// &, -// &:hover, -// &:focus { -// color: #fff; -// background-color: #428bca; -// } -//} -// -// -///* -// * Main content -// */ -// -//.main { -// padding: 20px; -//} -//@media (min-width: 768px) { -// .main { -// padding-right: 40px; -// padding-left: 40px; -// } -//} -//.main .page-header { -// margin-top: 0; -//} -// -// -///* -// * Placeholder dashboard ideas -// */ -// -//.placeholders { -// margin-bottom: 30px; -// text-align: center; -//} -//.placeholders h4 { -// margin-bottom: 0; -//} -//.placeholder { -// margin-bottom: 20px; -//} -//.placeholder img { -// display: inline-block; -// border-radius: 50%; -//} diff --git a/docs/examples/dashboard/example.scss b/docs/examples/dashboard/example.scss new file mode 100644 index 00000000..9b59dcbf --- /dev/null +++ b/docs/examples/dashboard/example.scss @@ -0,0 +1,214 @@ +--- +--- + +//--- +//--- + +$teal-300: #4db6ac !default; +$grey-100: #f5f5f5 !default; +$grey-600: #757575 !default; +$blue-grey-800: #37474f !default; +$blue-grey-400: #78909c !default; +$blue-grey-900: #263238 !default; +$blue-grey-50: #eceff1 !default; +$deep-purple-500: #673ab7 !default; + +a, a:hover { + color: rgba(255, 255, 255, 0.56); +} + +.mdb-layout { + + .mdb-layout-header { + background-color: $grey-100; + color: $grey-600; + } + + .mdb-layout-content { + padding-top: .5rem; + background-color: $grey-100; + } +} + +.mdb-layout-drawer { + background-color: $blue-grey-900; + color: $blue-grey-50; + font-size: .875rem; + + > header { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: 16px; + height: 151px; + + .avatar { + width: 48px; + height: 48px; + border-radius: 24px; + margin-bottom: 1rem; + } + + .account { + display: flex; + position: relative; + flex-direction: row; + align-items: center; + width: 100%; + + .dropdown { + margin-left: auto; + .dropdown-menu { + font-size: .875rem; + + .dropdown-item { + flex-wrap: nowrap; + } + } + } + } + } + + .mdl-navigation { + flex-grow: 1; + background-color: $blue-grey-800; + z-index: -2; + + .mdb-list-group-item { + padding-left: 2.5rem; + padding-right: 2.5rem; + font-size: .8125rem; + font-weight: 500; + color: rgba(255, 255, 255, 0.56); + + &:hover { + background-color: #00BCD4; + color: #37474F; + } + + .material-icons { + color: $blue-grey-400; + } + } + } +} + +.demo-chart { + &:nth-child(1) { + color: #ACEC00; + } + + &:nth-child(2) { + color: #00BBD6; + } + + &:nth-child(3) { + color: #BA65C9; + } + + &:nth-child(4) { + color: #EF3C79; + } +} + +.demo-graphs { + padding: 16px 32px; + display: flex; + flex-direction: column; + align-items: stretch; + + .demo-graph { + &:nth-child(1) { + color: #00b9d8; + } + + &:nth-child(2) { + color: #d9006e; + } + } +} + +/* TODO: Find a proper solution to have the graphs + * not float around outside their container in IE10/11. + * Using a browserhacks.com solution for now. + */ +:-ms-input-placeholder, +:root .demo-graphs { + min-height: 664px; +} + +:-ms-input-placeholder, +:root .demo-graph { + max-height: 300px; +} + +/* TODO end */ + +.demo-cards { + + .card { + margin-bottom: 2rem; + } + + .card-title { + color: #fff; + } + + .card-text { + color: $grey-600 + } + + .card-footer { + display: flex; + align-items: center; + } + + .demo-updates { + .card-header { + border: 0; // we are using color as a separator instead of a bottom border, this allows image to meet the bottom edge + min-height: 200px; + background-color: $teal-300; + background-image: url('images/dog.png'); + background-position: 90% 100%; + background-repeat: no-repeat; + + .card-title { + // position the title down towards the bottom header with respect to the bg image + margin-bottom: 0; + padding-top: 8.5rem; + } + } + + .btn { + color: #00BCD4; + } + } + + .demo-options { + + &, + .card-footer { + background-color: $deep-purple-500; + } + + .card-footer { + .material-icons { + margin-left: auto; + color: rgba(255, 255, 255, 0.89); + } + } + + .btn, + .checkbox label { + color: $blue-grey-50; + } + + .checkbox .check { + border-color: $blue-grey-50; + } + } +} + + + diff --git a/docs/examples/dashboard/images/android-desktop.png b/docs/examples/dashboard/images/android-desktop.png new file mode 100644 index 0000000000000000000000000000000000000000..72a7f12efec41c151a64a1c2d7f75d06489b5365 GIT binary patch literal 8325 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 R07?J=002ovPDHLkV1mG3+2a5J literal 0 HcmV?d00001 diff --git a/docs/examples/dashboard/images/favicon.png b/docs/examples/dashboard/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..6ebb80943afd02a8fff0fe00d242bf322427ed70 GIT binary patch literal 905 zcmV;419tq0P)Px&LrFwIR9FecS4~J%Q4~J+)$|KR24-1cmLesI4rB#Ei`Eesh7fI9NfC&<+6A?U zBq+gkn|>gnT1V}oflSOSQL};aC!yK23B!iJYrKq-qJtNkdmPlm>mNQEa(&_ZyD4j?Ln%XOhncmrRrXL7MueM^nQt z%m#-*9qu@B+f(Wxlkaq3N-jfJDb>Ae@BU4hg`aQ36v8r~n%g^{kWv@J6e?cR`q|WI zs)zOYsI0c43?Op$x_1?_MkA$KITH!a#2edUK?bnrO#WN|uU|R0P9SCVXU}!zaa!vO z_L=ZRg42!zC-bWH%wf2Ef{j9iM=k2Kf1CYI1A{{XkL>%e_0plngP|C3n8!Muz6*dj z;Ndyv3^*GMdVC8_PE9*85VSNmImz>i;3B%mzpU8;+;CBs%%_PjM)z`0cix6;AQ;gJ z!+{H&kQoPXy@mm0?a||>W_Uc=VIq|EV2|j5K@*)IM&`n49N^3+MG)4HjZct7BoT(; zLSpDR&zU0DhqL<&#~m*q`m`gVq4h@p)6`RF<4G7Spe1^m!s=*nWB}qKG*PyOw{a|vfqeRsRy`DT+aMzmSWXx0bDQ( zTtNE%RIg(WAqPo51Hx#EQKB0%U(23zerM+6`+ZVx7A{I#ZQy^8xhUmQ z>}t?XkplqyUYr|70mvuTf{GZnLLGnr)oV>%{b$~!lc?{p7Pt8yCRb)g zQ-dyDrvp&PEY5x1u{km1ZQb^Vv})r@X1mLfz3zXS-QrKPOS6*`p&}7kDOPB?q$N!rEOBX>)Lh6s zxeqG-6qh8y4q7f~E{MvggG*%~L#5alI`kLJ>BD>X!@cjFbMJ?H_qRZ_k-mjK2m~_n z^*J7-#-wkftF7MdB$r_|fa8PEM?rN0%l9CV7Tx#wkyA-vSxMg|Q?w~9rhvtH8J@Z` z68nI2e`^QWe5O0$${iE(S-XAq_q33q(t89=6FFDIrhe<)SEQ2sJ2LYI=d_lb=NGmO zaa)&)(*kW#9vaV=JR{SB$2>+xvim-b=iGLk)GvM-u*l2QcO!hX;(?KbkNWp|;%{3y zBx}8zYvXMx=+Kx~hzU9;@ZgV0ml`zp)q|2zt|IV53>C%LDW$%K9sXg^D1kd~wmbK& z_WztaxX*?zrEW@9kK6r2RH`cr*M}8*bu259ZYV=ET0H&&QFOlR-2_09KASoX_DoYa zb);;fhq=|rDQtw^AY+5kKJ{>;v7gt|Q{LPuBWFYb$xcvq_R~<9bb1C(^j#d?0f44G z-3)iF9-{fj182Snvqv94Txnr+R2SSn=ip>M_mx>5KiZ&t6S@I}2KB6+G$YhPVw%lM zL%`kCK=?F^l7ssorsK-0HB*U-{;LfR<}atKU+W=yIM%|Y%7a{Jp&31cMr)Tt-@C_z zoMEz0Y2?`ABRV3oLnnk*3#(<}`@v@kM8({4X8YK%vf5Zwdu<`>U*BK@H+CyfI!H8F z)o8?Vp~cva=RkQc5w==Js{zybz=&))6PL?RJlI!*5rAL;2!dfy5r3ig%XryMCl{NF zZuAP(lZEAFTC4^JzVldS%1KM$vs_~DvZ^DVg-AJx+)i!Ak_Yh4RL3DPB&=!NR2{-t zxmK3P#g_>0yhXfC&fWYAJILoKlRy}sB4?L80!9sTD?oIJLr-XY!_`9VEM5;}ZX{b3%@@~xju&vE4y>DGm$LXO zl-+$te7h^XzbcU|rWWUCbcA*IATj>g>%Z#%* zFyXJ+8VUIZY6WKBO*%hoH3$r$D^$?d;TPixiJW6VTn-T2&oikiq^AH$B+_2gUYxtX z$3H$=YhkwCV&tKO`;t~yn!gV8*7fFs3A`VdgX<^TThHR*Q7!puhmLjJ&CY~G<}sww zFRI2XFTHDSe32+xCw$76VCFZwI|myB46yKS<@r>Bk3 znmtl33eg*mU63LpdK)X}wJW!{y;B+WTcWB;tsLBwb-uHNzPH2XshgS%jD6iU{1&Xb Pqd~r2fye8P5`O;=E&=P1 literal 0 HcmV?d00001 diff --git a/docs/examples/dashboard/images/user.jpg b/docs/examples/dashboard/images/user.jpg new file mode 100644 index 0000000000000000000000000000000000000000..930ab14f0b20c224bad94fee8df1f9839854c8e9 GIT binary patch literal 6961 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 literal 0 HcmV?d00001 diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html index 6bd5146e..8236f616 100644 --- a/docs/examples/dashboard/index.html +++ b/docs/examples/dashboard/index.html @@ -5,45 +5,270 @@ group: material-design --- - + +
+
+
+ +
+ +
    +
  • + Home +
    • +
+
    +
  • +
    + + + + +
    +
    • +
  • +
    + +
    + + + +
    +
    +
    • +
+
+
-
- -
- - - -
-
-
-
-

Navbar example

-

This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.

- View navbar docs » +
+
+ + + +
+
+ + + 82 + % + + + + + 82 + % + + + + + 82 + % + + + + + 82 + % + + +
+
+ + +
+
+ +
+
+ + + + + + +
+
+
+ +
+ + +
+
+

Updates

+
+ +
+

Non dolore elit adipisicing ea reprehenderit consectetur culpa.

+
+
+ Read More +
+
+ + +
+
+

View options

+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ Change location + location_on +
+
+
+
+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + 500 + 400 + 300 + 200 + 100 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + + + + + + + + + +
diff --git a/docs/examples/drawer/drawer.scss b/docs/examples/drawer/drawer.scss deleted file mode 100644 index ae09f045..00000000 --- a/docs/examples/drawer/drawer.scss +++ /dev/null @@ -1,117 +0,0 @@ ---- ---- - -body { - /* Show it's not fixed to the top */ - min-height: 75rem; - padding-top: 6rem; -} - -// -///* -// * Base structure -// */ -// -///* Move down content because we have a fixed navbar that is 50px tall */ -//body { -// padding-top: 50px; -//} -// -// -///* -// * Global add-ons -// */ -// -//.sub-header { -// padding-bottom: 10px; -// border-bottom: 1px solid #eee; -//} -// -///* -// * Top navigation -// * Hide default border to remove 1px line. -// */ -//.navbar-fixed-top { -// border: 0; -//} -// -///* -// * Sidebar -// */ -// -///* Hide for mobile, show later */ -//.sidebar { -// display: none; -//} -//@media (min-width: 768px) { -// .sidebar { -// position: fixed; -// top: 51px; -// bottom: 0; -// left: 0; -// z-index: 1000; -// display: block; -// padding: 20px; -// overflow-x: hidden; -// overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ -// background-color: #f5f5f5; -// border-right: 1px solid #eee; -// } -//} -// -///* Sidebar navigation */ -//.nav-sidebar { -// margin-right: -21px; /* 20px padding + 1px border */ -// margin-bottom: 20px; -// margin-left: -20px; -//} -//.nav-sidebar > li > a { -// padding-right: 20px; -// padding-left: 20px; -//} -//.nav-sidebar > .active > a { -// &, -// &:hover, -// &:focus { -// color: #fff; -// background-color: #428bca; -// } -//} -// -// -///* -// * Main content -// */ -// -//.main { -// padding: 20px; -//} -//@media (min-width: 768px) { -// .main { -// padding-right: 40px; -// padding-left: 40px; -// } -//} -//.main .page-header { -// margin-top: 0; -//} -// -// -///* -// * Placeholder dashboard ideas -// */ -// -//.placeholders { -// margin-bottom: 30px; -// text-align: center; -//} -//.placeholders h4 { -// margin-bottom: 0; -//} -//.placeholder { -// margin-bottom: 20px; -//} -//.placeholder img { -// display: inline-block; -// border-radius: 50%; -//} diff --git a/docs/examples/drawer/index.html b/docs/examples/drawer/index.html deleted file mode 100644 index d50f07aa..00000000 --- a/docs/examples/drawer/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -layout: example -title: Drawer Template -group: material-design ---- - - - - -
- -
- - - -
-
- -
-
-

Navbar example

-

This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.

- View navbar docs » -
-
diff --git a/docs/material-design/test.md b/docs/material-design/test.md index 206cbc98..ebf49875 100644 --- a/docs/material-design/test.md +++ b/docs/material-design/test.md @@ -4,6 +4,77 @@ title: Test group: material-design --- + {% example html %} +

Normal navbar

+ + +
+
+
+

Flex navbar

+With flex enabled on a navbar (and with compiled flex-enabled css), the nav elements do not inline. + + + + + {% endexample %} diff --git a/scss/_cards.scss b/scss/_cards.scss index 7c606df4..b9f2583d 100644 --- a/scss/_cards.scss +++ b/scss/_cards.scss @@ -1,3 +1,58 @@ +//https://www.google.com/design/spec/components/cards.html#cards-content-blocks +// Card resting elevation: 2dp .card { - @include shadow-8dp(); + border: 0; + + // Cards have a default elevation of 2dp. + @include shadow-2dp(); + @extend %std-font; + + // spec: see "Avatar, Title, and Subtitle area" + // Height: 72dp + // Padding: 16dp + // Top and bottom padding: 16dp + .card-header { + padding: 1rem; + } + + .card-block { + padding: 1.5rem 1rem 1rem; + //@extend %std-font; + } + + // Primary title/text + // - Title: 24sp or 14sp + // - Subtitle: 14sp + + // non-h* card-titles will be 14sp + //&.card-title { + // @extend %std-font; + //} + + // any h* will signal the larger size should render as 24sp + @include headings() { + &.card-title { + font-size: 1.5rem; + font-weight: 300; + } + } + + .mdb-card-actions, // needed? if you have actions in the middle of the card (see spec), it may be necessary + .card-footer { // assume footer is the set of actions? + padding: .5rem; + } + + &.mdb-card-raised { + // Card raised elevation: 8dp + @include shadow-8dp(); + } + + @include media-breakpoint-up(lg) { + // On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover. + &.mdb-card-flat { + box-shadow: none; + } + } } + + diff --git a/scss/_core.scss b/scss/_core.scss index 60325f1a..e8ae1512 100644 --- a/scss/_core.scss +++ b/scss/_core.scss @@ -23,6 +23,7 @@ @import "cards"; @import "modal"; @import "menu"; +@import "drawer"; @import "themes"; @import "ripples"; diff --git a/scss/_drawer.scss b/scss/_drawer.scss new file mode 100644 index 00000000..48762358 --- /dev/null +++ b/scss/_drawer.scss @@ -0,0 +1,156 @@ +// .mdb-layout-fixed-drawer is a marker that both header and content respond to. + + +//WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!! + +.mdb-layout-container { + position: absolute; + width: 100%; + height: 100%; + + // Main layout class. + .mdb-layout { + position: relative; + display: flex; + width: 100%; + height: 100%; + flex-direction: column; // allows for sticky header and footer + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + } +} + +// Header +.mdb-layout-header { // navbar + // FIXME: it would be nice to stick this directly on the navbar, but navbars are not flex ready, so this is relegated to be a container at this time. + z-index: 3; + box-sizing: border-box; + display: flex; + width: 100%; + max-height: 1000px; + flex-direction: column; + flex-wrap: nowrap; + flex-shrink: 0; + justify-content: flex-start; + transition-property: max-height; + + > .navbar { // heights for common scenarios such as a header with a navbar + + // Current navbar is not flex enabled https://github.com/twbs/bootstrap/issues/18875 + // - with flex a vertical align is a breeze + // - with standard layout, we need to use padding instead of height to layout. + min-height: $mdb-layout-mobile-header-height; + + // FIXME: hack remove padding once the flex layout works properly + $padding: ($mdb-layout-mobile-header-height - (1rem * $line-height)) / 2; + padding-top: $padding; + padding-bottom: $padding; + + @include media-breakpoint-up(lg) { + min-height: $mdb-layout-desktop-header-height; + + // FIXME: hack remove padding once the flex layout works properly + $padding: ($mdb-layout-desktop-header-height - (1rem * $line-height)) / 2; + padding-top: $padding; + padding-bottom: $padding; + } + } +} + +// Drawer. +.mdb-layout-drawer { + position: absolute; + top: 0; + left: 0; + z-index: 5; + box-sizing: border-box; + display: flex; + height: 100%; + max-height: 100%; + + flex-direction: column; + flex-wrap: nowrap; + overflow: visible; + overflow-y: auto; + color: $mdb-layout-text-color; + background: $mdb-layout-drawer-bg-color; + + // Transform offscreen. + transition: transform; + will-change: transform; + transform-style: preserve-3d; + + @include shadow-2dp(); + @include material-animation-default(); + + > * { + flex-shrink: 0; + } + + .mdl-navigation { + flex-direction: column; + align-items: stretch; + padding-top: 1rem; + } +} + +// Content. +.mdb-layout-content { + position: relative; + z-index: 1; + display: inline-block; + //-ms-flex: 0 1 auto; // Fix IE10 bug. + overflow-x: hidden; + overflow-y: auto; + flex-grow: 1; + -webkit-overflow-scrolling: touch; // TODO: why? +} + + +// FIXME: the below needs to happen if it is the right size OR if the drawer is visible. Need to look at collapse or collapseInline to see if it can help us here. + +// Responsive Header with fixed drawer +.mdb-layout-header { + @include media-breakpoint-up(lg) { + .mdb-layout-fixed-drawer > & { + width: calc(100% - #{$mdb-layout-drawer-sm}); + margin-left: $mdb-layout-drawer-sm; + } + } +} + +// Responsive Drawer Width +.mdb-layout-drawer { + width: $mdb-layout-drawer-sm; + transform: translateX(-$mdb-layout-drawer-sm - 10px); // initially way off screen + + //&.is-visible { + // transform: translateX(0); + // ~ .mdb-layout-content.mdb-layout-content { + // overflow: hidden; + // } + //} + + @include media-breakpoint-up(lg) { + .mdb-layout-fixed-drawer > & { + transform: translateX(0); + } + } +} + +// Responsive Content with fixed drawer +.mdb-layout-content { + + .mdb-layout-fixed-drawer > & { + margin-left: 0; + } + + @include media-breakpoint-up(lg) { + .mdb-layout-fixed-drawer > & { + margin-left: $mdb-layout-drawer-sm; + } + } +} + + diff --git a/scss/_menu.scss b/scss/_menu.scss index b8736b0b..0f0dbec9 100644 --- a/scss/_menu.scss +++ b/scss/_menu.scss @@ -67,12 +67,14 @@ min-height: $mdb-menu-item-min-height; flex-flow: row wrap; + align-items: center; padding-top: $mdb-menu-item-padding-top; padding-right: $mdb-menu-item-padding-right; padding-bottom: $mdb-menu-item-padding-bottom; padding-left: $mdb-menu-item-padding-left; + // FIXME: multi-line menu word wrapping doesn't work - see the maximum width example in menus.md overflow: hidden; line-height: $mdb-menu-line-height; diff --git a/scss/_mixins.scss b/scss/_mixins.scss index d30cc3db..b1b7ff9e 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -1,5 +1,6 @@ @import "mixins/utilities"; @import "mixins/animations"; +@import "mixins/type"; @import "mixins/shadows"; @import "mixins/variations"; @import "mixins/forms"; diff --git a/scss/mixins/_type.scss b/scss/mixins/_type.scss new file mode 100644 index 00000000..8d8873b6 --- /dev/null +++ b/scss/mixins/_type.scss @@ -0,0 +1,11 @@ +@mixin headings() { + h1, h2, h3, h4, h5, h6 { + @content; + } +} + +// 14sp font +%std-font { + font-size: .875rem; + font-weight: normal; +} diff --git a/scss/variables/_drawer.scss b/scss/variables/_drawer.scss new file mode 100644 index 00000000..58bd09a7 --- /dev/null +++ b/scss/variables/_drawer.scss @@ -0,0 +1,11 @@ +// Drawer +$mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default; +$mdb-layout-text-color: rgba($grey-800, 1) !default; + +// Sizing +$mdb-layout-drawer-sm: 240px !default; + +// General layout header height. +// FIXME: is this really necessary or something to be considered custom? +$mdb-layout-mobile-header-height: 3.5rem !default; // 56px +$mdb-layout-desktop-header-height: 4rem !default; // 64px diff --git a/scss/variables/bootstrap/_card.scss b/scss/variables/bootstrap/_card.scss index 089ac6ab..6c18fba1 100644 --- a/scss/variables/bootstrap/_card.scss +++ b/scss/variables/bootstrap/_card.scss @@ -3,10 +3,10 @@ //$card-spacer-y: .75rem !default; //$card-border-width: 1px !default; //$card-border-radius: $border-radius !default; -//$card-border-color: #e5e5e5 !default; +$card-border-color: $gray-lighter !default; // #e5e5e5 //$card-border-radius-inner: $card-border-radius !default; -//$card-cap-bg: #f5f5f5 !default; -//$card-bg: #fff !default; +$card-bg: #fff !default; +$card-cap-bg: $card-bg !default; // #f5f5f5 // //$card-link-hover-color: #fff !default; //