Merge pull request #8 from hiui-group/feature/entry

release: 2.0.0-beta.1
hiui-group · Jun 25, 2019 · 6d6b158 · 6d6b158
2 parents eea15e4 + 1d44eac
commit 6d6b158
Show file tree

Hide file tree

Showing 13 changed files with 260 additions and 214 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -7,7 +7,7 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-      -   image: circleci/node:7.10
+      -   image: circleci/node:10.15.3
 
       # Specify service dependencies here if necessary
       # CircleCI maintains a library of pre-built images

diff --git a/.stylelintrc b/.stylelintrc
@@ -1,7 +1,7 @@
 {
   "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
   "rules": {
-    "max-nesting-depth": 2,
+    "max-nesting-depth": null,
     "string-quotes": "single",
     "declaration-colon-space-after": "always",
     "declaration-colon-space-before": "never",

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # HIUI Core CSS
 
-[![CircleCI](https://circleci.com/gh/hiui-group/core-css.svg?style=shield)](https://circleci.com/gh/hiui-group/core-css)  
+[![CircleCI](https://circleci.com/gh/hiui-group/core-css.svg?style=shield)](https://circleci.com/gh/hiui-group/core-css)
 
 HIUI core styles, include common reset, helper classes and typography. i18n supported.
 

diff --git a/base.scss b/base.scss
@@ -1,7 +1,7 @@
 /**
  * Author: Sivan[[email protected]]
  * Date: 2018-08-16 00:00
- * Description: index.
+ * Description: import variables, mixins and common styles.
  */
 
 @import './lib/core/index';

diff --git a/index.scss b/index.scss
@@ -1,7 +1,7 @@
 /**
  * Author: Sivan[[email protected]]
  * Date: 2018-08-16 00:00
- * Description: index.
+ * Description: import variables and mixins.
  */
 
 @import './lib/core/index';
diff --git a/lib/base/typography/_base.scss b/lib/base/typography/_base.scss
@@ -6,67 +6,13 @@
 
 @import '../../core/index';
 
-// Headings
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-weight: $font-weight-bold;
-}
-
-h1 {
-  font-size: $font-size-h1;
-}
-
-h2 {
-  font-size: $font-size-h2;
-}
-
-h3 {
-  font-size: $font-size-h3;
-}
-
-h4 {
-  font-size: $font-size-h4;
-}
-
-h5 {
-  font-size: $font-size-h5;
-}
-
-h6 {
-  font-size: $font-size-h6;
-}
-
-// Perfect small
-// 12px * 0.875 => 11px
-// 14px * 0.875 => 12px
-// 16px * 0.875 => 14px
-// 18px * 0.875 => 16px
-// 20px * 0.875 => 18px
-small {
-  font-size: 0.875em;
-}
-
 #{$entry-selector} {
   @include clearfix();
 
-  > *:first-child {
-    margin-top: 0 !important;
-  }
-
-  > *:last-child {
-    margin-bottom: 0 !important;
-  }
-
   // Be careful about CSS selector specificity!
-  // For example:
-  // article a < .hi-btn
-  // .entry a > .hi-btn
+  /// For example:
+  /// article a < .hi-btn
+  /// .entry a > .hi-btn
   a {
     //&:not(.hi-btn) {
     //  padding-left: 0.125em;
@@ -80,41 +26,62 @@ small {
     }
   }
 
-  // Blocks margin
-  p,
-  blockquote,
-  ul,
-  ol,
-  dl,
-  table,
-  pre {
-    margin-top: $spacer-4;
-    margin-bottom: $spacer-4;
+  // Perfect small
+  /// 12px * 0.875 => 11px
+  /// 14px * 0.875 => 12px
+  /// 16px * 0.875 => 14px
+  /// 18px * 0.875 => 16px
+  /// 20px * 0.875 => 18px
+  small {
+    font-size: 0.875em;
   }
 
-  // Horizontal rules
-  hr {
-    height: 1px;
-    padding: 0;
-    margin: $spacer-6 0;
-    background-color: $gray-light;
-    border: 0;
-  }
+  // Only add to block elements at entry root
+  > {
+    // Blocks margin
+    *:first-child {
+      margin-top: 0 !important;
+    }
 
-  blockquote {
-    margin-left: 0;
-    margin-right: 0;
-    padding: $spacer-2 $spacer-4;
-    background-color: $gray-lighter;
-    color: #666;
-    border-left: $spacer-1 solid $gray;
+    *:last-child {
+      margin-bottom: 0 !important;
+    }
+
+    p,
+    blockquote,
+    ul,
+    ol,
+    dl,
+    table,
+    pre {
+      margin-top: $spacer-4;
+      margin-bottom: $spacer-4;
+    }
 
-    > :first-child {
-      margin-top: 0;
+    // Horizontal rules
+    hr {
+      height: 1px;
+      padding: 0;
+      margin: $spacer-6 0;
+      background-color: $gray-light;
+      border: 0;
     }
 
-    > :last-child {
-      margin-bottom: 0;
+    blockquote {
+      margin-left: 0;
+      margin-right: 0;
+      padding: $spacer-2 $spacer-4;
+      background-color: $gray-lighter;
+      color: #666;
+      border-left: $spacer-1 solid $gray;
+
+      > :first-child {
+        margin-top: 0;
+      }
+
+      > :last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }
diff --git a/lib/base/typography/_headings.scss b/lib/base/typography/_headings.scss
@@ -7,14 +7,47 @@
 @import '../../core/index';
 
 #{$entry-selector} {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: $spacer-6;
-    margin-bottom: $spacer-4;
-    line-height: $line-height-condensed;
+  // Only reset headings at entry root
+  > {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-top: $spacer-6;
+      margin-bottom: $spacer-4;
+      font-weight: $font-weight-bold;
+    }
+
+    h1 {
+      font-size: $font-size-h1;
+      line-height: $line-height-size-h1;
+    }
+
+    h2 {
+      font-size: $font-size-h2;
+      line-height: $line-height-size-h2;
+    }
+
+    h3 {
+      font-size: $font-size-h3;
+      line-height: $line-height-size-h3;
+    }
+
+    h4 {
+      font-size: $font-size-h4;
+      line-height: $line-height-size-h4;
+    }
+
+    h5 {
+      font-size: $font-size-h5;
+      line-height: $line-height-size-h5;
+    }
+
+    h6 {
+      font-size: $font-size-h6;
+      line-height: $line-height-size-h6;
+    }
   }
 }
diff --git a/lib/base/typography/_images.scss b/lib/base/typography/_images.scss
@@ -7,17 +7,21 @@
 @import '../../core/index';
 
 #{$entry-selector} {
-  img {
-    max-width: 100%;
-    box-sizing: content-box;
-    background-color: transparent;
+  // Only add to imgs at entry root
+  > {
+    img,
+    figure img {
+      max-width: 100%;
+      box-sizing: content-box;
+      background-color: transparent;
 
-    &[align=right] {
-      padding-left: 20px;
-    }
+      &[align=right] {
+        padding-left: 20px;
+      }
 
-    &[align=left] {
-      padding-right: 20px;
+      &[align=left] {
+        padding-right: 20px;
+      }
     }
   }
 }
diff --git a/lib/base/typography/_lists.scss b/lib/base/typography/_lists.scss
@@ -7,55 +7,62 @@
 @import '../../core/index';
 
 #{$entry-selector} {
-  ul,
-  ol {
-    padding-left: 2em;
-
+  // Only add to lists at entry root
+  > {
     ul,
     ol {
-      margin-top: $spacer-1;
-      margin-bottom: $spacer-1;
-    }
-  }
+      padding-left: 2em;
 
-  ol ol,
-  ul ol {
-    list-style-type: lower-roman;
-  }
+      ul,
+      ol {
+        margin-top: $spacer-1;
+        margin-bottom: $spacer-1;
+      }
 
-  ul ul ol,
-  ul ol ol,
-  ol ul ol,
-  ol ol ol {
-    list-style-type: lower-alpha;
-  }
+      li {
+        word-wrap: break-all;
+
+        > *:first-child {
+          margin-top: 0 !important;
+        }
 
-  li {
-    word-wrap: break-all;
+        > *:last-child {
+          margin-bottom: 0 !important;
+        }
 
-    > p {
-      margin-top: 0;
+        & + li {
+          margin-top: $spacer-1;
+        }
+      }
     }
 
-    & + li {
-      margin-top: $spacer-1;
+    ol ol,
+    ul ol {
+      list-style-type: lower-roman;
     }
-  }
 
-  dl {
-    padding: 0;
-  }
+    ul ul ol,
+    ul ol ol,
+    ol ul ol,
+    ol ol ol {
+      list-style-type: lower-alpha;
+    }
 
-  dt {
-    padding: 0;
-    margin-top: $spacer-4;
-    font-style: italic;
-    font-weight: $font-weight-bold;
-  }
+    dl {
+      padding: 0;
+
+      dt {
+        padding: 0;
+        margin-top: $spacer-4;
+        font-style: italic;
+        font-weight: $font-weight-bold;
+      }
 
-  dd {
-    margin-left: 0;
-    margin-bottom: $spacer-4;
-    padding: 0 $spacer-4;
+      dd {
+        margin-left: 0;
+        margin-bottom: $spacer-4;
+        padding: 0 $spacer-4;
+      }
+    }
   }
 }