OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Corrected BEM nesting depths

Browse Source
This commit is contained in:
squidfunk 2016-09-13 20:58:28 +02:00
parent 0111478b65
commit b387f2abee
10 changed files with 176 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.sass-lint.yml
View File

@ -71,7 +71,7 @@ rules:
- break-at-device
- break-from-device
- break-to-device
nesting-depth: 0
nesting-depth: 2
no-color-keywords: 2
no-color-literals: 2
no-css-comments: 2

2
src/assets/stylesheets/_config.scss
View File

@ -55,8 +55,6 @@ $break-devices: (
// Primary and accent colors
$md-color-primary: $clr-indigo-500;
$md-color-primary--light: $clr-indigo-100;
$md-color-primary--dark: $clr-indigo-700;
$md-color-accent: $clr-indigo-a200;
// Shades of black

45
src/assets/stylesheets/_shame.scss
View File

@ -24,17 +24,26 @@
// Nothing to see here, move along
// ----------------------------------------------------------------------------
.md-search__suggest {
@include z-depth(8);
background: $md-color-white;
border-radius: 0 0 px2rem(3px) px2rem(3px);
color: #000000;
text-align: left;
border-top: px2rem(1px) solid $md-color-black--lightest;
display: none;
display: none; // TODO: doesnt work due to display: none;
opacity: 0;
// overflow: auto;
transition: opacity .3s;
// pointer-events: none;
.md-search__input:focus ~ & {
// animation: anima .3s;
display: block;
opacity: 1;
}
}
@ -67,6 +76,10 @@
}
}
.md-search-term {
}
.checklist {
li {
@ -163,21 +176,13 @@ mark {
}
}
article {
overflow: auto;
}
.floater {
display: none;
.md-button {
float: right;
margin-top: 9px;
font-size: 13px;
padding-left: 2.6rem;
&::before {
@extend %md-icon;
content: "edit";
}
font-weight: 700;
text-transform: uppercase;
}
.task-list-item {
@ -188,9 +193,9 @@ article {
margin: 0 4px 0.25em -20px;
vertical-align: middle;
}
//
//
//
.task-list-item {
position: relative;
}
@ -221,3 +226,11 @@ article {
content: "✔";
color: #1EBB52;
}
.codehilite .hll {
background: #FFFF00;
display: block;
margin: 0 -16px;
padding: 0 16px;
}

1
src/assets/stylesheets/base/_typeset.scss
View File

@ -169,6 +169,7 @@ code {
pre {
margin: 2.0rem 0;
padding: 1.0rem 1.2rem;
border-radius: 0.2rem;
background: #F7F7F7;
color: #37474F;
font-size: 85%;

14
src/assets/stylesheets/helpers/_break.scss
View File

@ -30,17 +30,17 @@
/// @example
/// $break-devices: (
/// mobile: (
/// portrait: px2em(220px) px2em(479px),
/// landscape: px2em(480px) px2em(719px)
/// portrait: 220px 479px,
/// landscape: 480px 719px
/// ),
/// tablet: (
/// portrait: px2em(720px) px2em(959px),
/// landscape: px2em(960px) px2em(1199px)
/// portrait: 720px 959px,
/// landscape: 960px 1199px
/// ),
/// screen: (
/// small: px2em(1200px) px2em(1599px),
/// medium: px2em(1600px) px2em(1999px),
/// large: px2em(2000px)
/// small: 1200px 1599px,
/// medium: 1600px 1999px,
/// large: 2000px
/// )
/// );
///

3
src/assets/stylesheets/layout/_content.scss
View File

@ -41,6 +41,9 @@
&__inner {
margin: 2.4rem 1.6rem;
// Hack: this is necessary for floating the edit button
overflow: auto;
// [screen small +]: Add space for table of contents
@include break-from-device(screen small) {
margin: 2.4rem;

132
src/assets/stylesheets/layout/_footer.scss
View File

@ -29,84 +29,84 @@
position: absolute;
bottom: 0;
width: 100%;
}
// Pagination container
&-pagination {
background: $md-color-black;
color: $md-color-white;
}
// Pagination container
.md-footer-pagination {
background: $md-color-black;
color: $md-color-white;
}
// Footer navigation
&-nav {
padding: 0.4rem;
overflow: auto;
// Footer navigation
.md-footer-nav {
padding: 0.4rem;
overflow: auto;
// Links to previous and next page
&__link {
padding-top: 2.8rem;
padding-bottom: 0.8rem;
transition: opacity 0.25s;
// Links to previous and next page
&__link {
padding-top: 2.8rem;
padding-bottom: 0.8rem;
transition: opacity 0.25s;
// [mobile landscape +]: Set proportional width
@include break-from-device(mobile landscape) {
width: 50%;
}
// [mobile landscape +]: Set proportional width
@include break-from-device(mobile landscape) {
width: 50%;
}
// Hovered link
&:hover {
opacity: 0.7;
}
// Hovered link
&:hover {
opacity: 0.7;
}
// Link to previous page
&--prev {
width: 25%;
float: left;
// Link to previous page
&--prev {
width: 25%;
float: left;
// Title
.md-footer-nav__title {
// Title
.md-footer-nav__title {
// [mobile portrait -]: Hide title for previous page
@include break-to-device(mobile portrait) {
display: none;
}
// [mobile portrait -]: Hide title for previous page
@include break-to-device(mobile portrait) {
display: none;
}
}
// Link to next page
&--next {
width: 75%;
float: right;
text-align: right;
}
}
// Link icon
&__icon {
display: inline-block;
margin: 0.4rem;
padding: 0.8rem;
transition: background 0.25s;
font-size: 2.4rem;
cursor: pointer;
}
// Link title
&__title {
position: relative;
padding: 0 0.4rem;
font-size: 1.8rem;
line-height: 4.8rem;
}
// Link direction
&__direction {
position: absolute;
right: 0;
left: 0;
margin-top: -2.0rem;
padding: 0 0.4rem;
color: $md-color-white--light;
font-size: 1.5rem;
// Link to next page
&--next {
width: 75%;
float: right;
text-align: right;
}
}
// Link icon
&__icon {
display: inline-block;
margin: 0.4rem;
padding: 0.8rem;
transition: background 0.25s;
font-size: 2.4rem;
cursor: pointer;
}
// Link title
&__title {
position: relative;
padding: 0 0.4rem;
font-size: 1.8rem;
line-height: 4.8rem;
}
// Link direction
&__direction {
position: absolute;
right: 0;
left: 0;
margin-top: -2.0rem;
padding: 0 0.4rem;
color: $md-color-white--light;
font-size: 1.5rem;
}
}

62
src/assets/stylesheets/layout/_header.scss
View File

@ -36,42 +36,42 @@
background: $md-color-primary;
color: $md-color-white;
z-index: 1;
}
// Navigation within header
&-nav {
padding: 0.4rem;
// Navigation within header
.md-header-nav {
padding: 0.4rem;
// Header icon
&__icon {
display: inline-block;
position: relative;
margin: 0.4rem;
padding: 0.8rem;
transition: opacity 0.25s;
font-size: 2.4rem;
cursor: pointer;
z-index: 1;
// Header icon
&__icon {
display: inline-block;
position: relative;
margin: 0.4rem;
padding: 0.8rem;
transition: opacity 0.25s;
font-size: 2.4rem;
cursor: pointer;
z-index: 1;
// Hovered icon
&:hover {
opacity: 0.7;
}
// [tablet +]: Hide the search icon from tablet
@include break-from-device(tablet) {
// Search icon
&.md-icon--search {
display: none;
}
}
// Hovered icon
&:hover {
opacity: 0.7;
}
// Header title
&__title {
padding: 0 2.0rem;
font-size: 1.8rem;
line-height: 4.8rem;
// [tablet +]: Hide the search icon from tablet
@include break-from-device(tablet) {
// Search icon
&.md-icon--search {
display: none;
}
}
}
// Header title
&__title {
padding: 0 2.0rem;
font-size: 1.8rem;
line-height: 4.8rem;
}
}

9
src/assets/stylesheets/layout/_search.scss
View File

@ -67,6 +67,7 @@
// [tablet +]: Header-embedded search
@include break-from-device(tablet) {
padding: 0.4rem;
padding-right: 3.2rem;
}
}
@ -106,6 +107,7 @@
&__input {
padding: 0 0.8rem 0 6.4rem;
border-radius: px2rem(2px);
text-overflow: ellipsis;
// Placeholder and icon color in active state
+ .md-search__icon,
@ -128,7 +130,7 @@
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0),
background-color 0.25s,
color 0.25s;
background: $md-color-white--lightest;
background: $md-color-black--lighter;
color: $md-color-white;
font-size: ms(0);
@ -141,14 +143,15 @@
// Hovered search field
&:hover {
background: $md-color-white--lighter;
background: $md-color-white--lightest;
}
// Active search field
&:focus {
width: 72.8rem;
width: 66.8rem;
background: $md-color-white;
color: $md-color-black;
text-overflow: none;
// Placeholder and icon color in active state
+ .md-search__icon,

35
src/assets/stylesheets/layout/_source.scss
View File

@ -34,7 +34,7 @@
padding: 0 1.2rem;
transition: opacity 0.25s;
font-size: 1.3rem;
line-height: 1.4;
line-height: 1.2;
white-space: nowrap;
vertical-align: middle;
@ -86,10 +86,39 @@
overflow: hidden;
}
// Repository statistics
&__stats {
// Source facts (statistics etc.)
&__facts {
margin: 0;
padding: 0;
color: $md-color-white--light;
font-size: 1.1rem;
font-weight: 700;
list-style-type: none;
}
// Fact
&__fact {
float: left;
transform: translateY(0%);
transition: opacity 0.25s,
transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
opacity: 1;
&--hidden {
transform: translateY(100%);
opacity: 0;
}
&::before {
margin: 0 0.2rem;
content: "\00B7";
}
&:first-child {
&::before {
display: none;
}
}
}
}