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:
Michael Rose
GitHub
parent
67319c1876
commit
4b915b40be
|
|
@ -131,7 +131,7 @@ linters:
|
|||
PropertySortOrder:
|
||||
enabled: true
|
||||
order: smacss
|
||||
ignore_unspecified: false
|
||||
ignore_unspecified: true
|
||||
min_properties: 2
|
||||
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.
|
||||
|
||||
### 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.
|
||||
|
||||
### 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
|
||||
### Added
|
||||
- Responsive embed helper classes for videos. [#2](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/2)
|
||||
|
|
|
|||
|
|
@ -20,7 +20,9 @@
|
|||
}
|
||||
|
||||
a {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-height: $site-image-height;
|
||||
color: $text-color;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,15 @@
|
|||
========================================================================== */
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
transition: $global-transition;
|
||||
box-shadow: -1em 0 5em 0 rgba(0, 0, 0, 0.125);
|
||||
|
||||
@include breakpoint($medium) {
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.intro,
|
||||
|
|
@ -64,10 +71,13 @@ main {
|
|||
.layout--about {
|
||||
|
||||
.entry-wrap {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include breakpoint($medium) {
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
@ -75,6 +85,7 @@ main {
|
|||
.entry-content {
|
||||
|
||||
@include breakpoint($medium) {
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,9 +21,11 @@
|
|||
|
||||
ul {
|
||||
@include list-unstyled;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
||||
> li {
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
|
|
|
|||
|
|
@ -8,24 +8,14 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 150;
|
||||
pointer-events: none;
|
||||
|
||||
/* page overlay dimmer */
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
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;
|
||||
@include breakpoint($sidebar-width) {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
@include breakpoint($large) {
|
||||
width: (1.5 * $sidebar-width);
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -68,14 +58,8 @@
|
|||
&.is--visible {
|
||||
transform: translateX(0);
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
> .inner {
|
||||
transform: none;
|
||||
box-shadow: 0 1em 5em 0 rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
&.is--animatable > .inner {
|
||||
|
|
@ -95,16 +79,18 @@
|
|||
padding: 1.5em;
|
||||
transform: translateX(-1 * $sidebar-width);
|
||||
background-color: $sidebar-background-color;
|
||||
box-shadow: none;
|
||||
z-index: 160;
|
||||
will-change: transform;
|
||||
overflow-x: hidden;
|
||||
pointer-events: auto;
|
||||
|
||||
@include breakpoint($medium) {
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
@include breakpoint(max-width $medium) {
|
||||
box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
@include breakpoint($large) {
|
||||
max-width: (1.5 * $sidebar-width);
|
||||
transform: translateX(-1.5 * $sidebar-width);
|
||||
|
|
@ -163,7 +149,9 @@
|
|||
z-index: 10000;
|
||||
|
||||
.toggle {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
|
@ -171,6 +159,7 @@
|
|||
}
|
||||
|
||||
.sidebar-toggle-label {
|
||||
-ms-flex-order: 2;
|
||||
order: 2;
|
||||
margin-left: 0.5rem;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -12,14 +12,6 @@ table {
|
|||
word-break: keep-all;
|
||||
}
|
||||
|
||||
thead {
|
||||
|
||||
th,
|
||||
td {
|
||||
background-color: tint($base-color, 80%);
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
|
|
|||
|
|
@ -53,12 +53,15 @@ a img.align-left {
|
|||
========================================================================== */
|
||||
|
||||
.is--pushed {
|
||||
@include clearfix();
|
||||
|
||||
@include breakpoint($medium) {
|
||||
padding-left: $sidebar-width;
|
||||
width: calc(100% - #{$sidebar-width});
|
||||
transform: translateX(1 * $sidebar-width);
|
||||
}
|
||||
|
||||
@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