Sidebar off-canvas refactor (#11)
- Remove tinted background - Refactor sidebar overlay - Remove problematic overlay and `pointer-events: hidden` - Size sidebar accordingly to avoid it covering up `.wrapper` content and interfering with interactions - Add `-ms-` vendor prefixes for Internet Exploer - Update CHANGELOG Close #9
This commit is contained in:
parent
67319c1876
commit
4b915b40be
|
@ -131,7 +131,7 @@ linters:
|
||||||
PropertySortOrder:
|
PropertySortOrder:
|
||||||
enabled: true
|
enabled: true
|
||||||
order: smacss
|
order: smacss
|
||||||
ignore_unspecified: false
|
ignore_unspecified: true
|
||||||
min_properties: 2
|
min_properties: 2
|
||||||
separate_groups: false
|
separate_groups: false
|
||||||
|
|
||||||
|
|
|
@ -10,8 +10,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
||||||
- Google Analytics tracking ID, Disqus comments, to `/docs` demo site.
|
- Google Analytics tracking ID, Disqus comments, to `/docs` demo site.
|
||||||
|
|
||||||
### Changed
|
### Changed
|
||||||
|
- Refactor sidebar off-canvas menu. [#9](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/9)
|
||||||
|
- Removed tinted background from `<th>` elements.
|
||||||
- Permalink structure of `/docs` demo site.
|
- Permalink structure of `/docs` demo site.
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
- Unclickable main content links in Internet Explorer 10. [#9](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/9)
|
||||||
|
|
||||||
## [1.0.1] - 2017-03-23
|
## [1.0.1] - 2017-03-23
|
||||||
### Added
|
### Added
|
||||||
- Responsive embed helper classes for videos. [#2](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/2)
|
- Responsive embed helper classes for videos. [#2](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/2)
|
||||||
|
|
|
@ -20,7 +20,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: $site-image-height;
|
min-height: $site-image-height;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
|
|
|
@ -3,8 +3,15 @@
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
transition: $global-transition;
|
transition: $global-transition;
|
||||||
|
box-shadow: -1em 0 5em 0 rgba(0, 0, 0, 0.125);
|
||||||
|
|
||||||
|
@include breakpoint($medium) {
|
||||||
|
position: relative;
|
||||||
|
z-index: 200;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro,
|
.intro,
|
||||||
|
@ -64,10 +71,13 @@ main {
|
||||||
.layout--about {
|
.layout--about {
|
||||||
|
|
||||||
.entry-wrap {
|
.entry-wrap {
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
@include breakpoint($medium) {
|
@include breakpoint($medium) {
|
||||||
|
-ms-flex-wrap: nowrap;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -75,6 +85,7 @@ main {
|
||||||
.entry-content {
|
.entry-content {
|
||||||
|
|
||||||
@include breakpoint($medium) {
|
@include breakpoint($medium) {
|
||||||
|
-ms-flex: 1;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,9 +21,11 @@
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
@include list-unstyled;
|
@include list-unstyled;
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
> li {
|
> li {
|
||||||
|
-ms-flex: 1;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
-ms-flex-pack: justify;
|
-ms-flex-pack: justify;
|
||||||
|
|
|
@ -8,24 +8,14 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
|
||||||
z-index: 150;
|
z-index: 150;
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
/* page overlay dimmer */
|
@include breakpoint($sidebar-width) {
|
||||||
&::after {
|
width: $sidebar-width;
|
||||||
display: block;
|
}
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
@include breakpoint($large) {
|
||||||
left: 0;
|
width: (1.5 * $sidebar-width);
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
|
|
||||||
background: rgba($base-color, 0.5);
|
|
||||||
content: '';
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
will-change: opacity;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
@ -68,14 +58,8 @@
|
||||||
&.is--visible {
|
&.is--visible {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
|
|
||||||
&::after {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .inner {
|
> .inner {
|
||||||
transform: none;
|
transform: none;
|
||||||
box-shadow: 0 1em 5em 0 rgba(0, 0, 0, 0.125);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is--animatable > .inner {
|
&.is--animatable > .inner {
|
||||||
|
@ -95,16 +79,18 @@
|
||||||
padding: 1.5em;
|
padding: 1.5em;
|
||||||
transform: translateX(-1 * $sidebar-width);
|
transform: translateX(-1 * $sidebar-width);
|
||||||
background-color: $sidebar-background-color;
|
background-color: $sidebar-background-color;
|
||||||
box-shadow: none;
|
|
||||||
z-index: 160;
|
z-index: 160;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
pointer-events: auto;
|
|
||||||
|
|
||||||
@include breakpoint($medium) {
|
@include breakpoint($medium) {
|
||||||
padding: 3rem;
|
padding: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include breakpoint(max-width $medium) {
|
||||||
|
box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.125);
|
||||||
|
}
|
||||||
|
|
||||||
@include breakpoint($large) {
|
@include breakpoint($large) {
|
||||||
max-width: (1.5 * $sidebar-width);
|
max-width: (1.5 * $sidebar-width);
|
||||||
transform: translateX(-1.5 * $sidebar-width);
|
transform: translateX(-1.5 * $sidebar-width);
|
||||||
|
@ -163,7 +149,9 @@
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
|
|
||||||
.toggle {
|
.toggle {
|
||||||
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -171,6 +159,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-toggle-label {
|
.sidebar-toggle-label {
|
||||||
|
-ms-flex-order: 2;
|
||||||
order: 2;
|
order: 2;
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
@ -12,14 +12,6 @@ table {
|
||||||
word-break: keep-all;
|
word-break: keep-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
background-color: tint($base-color, 80%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
border-bottom: 1px solid $border-color;
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
|
@ -53,12 +53,15 @@ a img.align-left {
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
.is--pushed {
|
.is--pushed {
|
||||||
|
@include clearfix();
|
||||||
|
|
||||||
@include breakpoint($medium) {
|
@include breakpoint($medium) {
|
||||||
padding-left: $sidebar-width;
|
width: calc(100% - #{$sidebar-width});
|
||||||
|
transform: translateX(1 * $sidebar-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint($large) {
|
@include breakpoint($large) {
|
||||||
padding-left: (1.5 * $sidebar-width);
|
width: calc(100% - (1.5 * #{$sidebar-width}));
|
||||||
|
transform: translateX(1.5 * $sidebar-width);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue