diff options
author | Franz Steininger <narrenfrei@gmail.com> | 2021-05-27 12:07:15 +0300 |
---|---|---|
committer | Franz Steininger <narrenfrei@gmail.com> | 2021-05-28 09:05:51 +0300 |
commit | fcb793e6248029b0d7eea778dd25ac7a7c42bc7c (patch) | |
tree | 82a6c8370e5f1f7bef4f35490dfeecd9842ad641 /assets | |
parent | 04ad7b8511667b0bb18bede4aa8c1d6479a1789d (diff) |
showcase for styling possibilities
Diffstat (limited to 'assets')
-rw-r--r-- | assets/scss/_taxonomy.scss | 225 |
1 files changed, 163 insertions, 62 deletions
diff --git a/assets/scss/_taxonomy.scss b/assets/scss/_taxonomy.scss index 345f112..f6c19a6 100644 --- a/assets/scss/_taxonomy.scss +++ b/assets/scss/_taxonomy.scss @@ -41,8 +41,9 @@ font-weight: 700; color: #30638E; border-bottom: 1px #30638E solid; - margin-bottom: 1rem; + margin-bottom: 1em; padding-bottom: 0.375rem; + margin-top: 1em; } } @@ -92,13 +93,30 @@ } } +.taxonomy-count { + font-size: 0.8em; + // height: 1.25em; // 26px; + line-height: 1.25em; // 26px; + + // from W3.CSS https://www.w3schools.com/w3css/w3css_badges.asp + display: inline-block; + padding-left: 0.6em; + padding-right: 0.6em; + margin-left: 0.6em; + // margin-right: 0.6em; + text-align: center; + border-radius: 1em; + // color: #fff!important; + background-color: $white; +} + .taxonomy-term { - background: #eee; + background: $gray-200; border-width: 0; border-radius: 0 3px 3px 0; // border-width: 0; - color: #999; - display: inline-block !important; + color: $gray-600; + display: inline-block; font-size: 1em; line-height: 1.5em; // 26px; min-height: 1.5em; // 26px; @@ -111,49 +129,9 @@ -webkit-clip-path: polygon(100% 0,100% 100%,0.8em 100%,0 50%,0.8em 0); clip-path: polygon(100% 0,100% 100%,0.8em 100%,0 50%,0.8em 0); - - // &::before { - // background: #fff; - // border-radius: 10px; - // box-shadow: inset 0 1px rgba(0, 0, 0, 0.25); - // content: ''; - // height: 0.5em; // 6px; - // left: 0.5em; // 10px; - // position: absolute; - // width: 0.5em; // 6px; - // top: 0.5em; // 10px; - - // https://stackoverflow.com/questions/30753216/how-to-create-a-triangle-with-css-that-scales-to-parent-div-height?rq=1 - // &::before { - // content: ''; - // position: absolute; - // display: block; - // left: -0.8em; - // top: 0; - // bottom: 0; - // width: 0.81em; - // height: 100%; - // background: #eee; - // -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%); - // clip-path: polygon(100% 0, 100% 100%, 0 50%); - // border-width: 0; - // } - // } - - // &::after { - // background: #fff; - // border-bottom: 0.75em solid transparent; // 13px solid transparent; - // border-left: 0.75em solid #eee; // 13px solid #eee; - // border-top: 0.75em solid transparent; // 13px solid transparent; - // content: ''; - // position: absolute; - // right: 0; - // top: 0; - // } - &:hover { background-color: $primary; - color: white; + color: $white; .taxonomy-count{ color: $dark!important; @@ -165,6 +143,146 @@ } } +// Example for simple tags layout +.taxo-text-tags { + + .taxonomy-term { + background: none; + border-width: 0; + border-radius: 0; + color: $gray-600; + // display: inline-block !important; + font-size: 1em; + line-height: 1.5em; // 26px; + min-height: 1.5em; // 26px; + max-width: 100%; + padding: 0; // 0 20px 0 23px; + position: relative; + margin: 0; // 0 10px 10px 0; + text-decoration: none; + -webkit-clip-path: none; + clip-path: none; + + &:hover { + background: none; + color: $link-color; + + .taxonomy-count{ + color: $dark!important; + } + } + + &:hover::before { + background: none; + } + } + + li + li::before { + content: "|"; + color: $gray-600; + margin-right: 0.2em; + } + + .taxonomy-count { + font-size: 1em; + line-height: 1.25em; // 26px; + display: inline-block; + padding: 0; + margin: 0; + text-align: center; + border-radius: 0; + background: none; + vertical-align: super; + font-size: 0.75em; + } + + .taxonomy-term:hover .taxonomy-count { + color: $link-color !important; + } +} + +// Example for icon tags +.taxo-fruits { + + .taxonomy-term[data-taxonomy-term]::before { + font-style: normal; + font-variant: normal; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + font-family: "Font Awesome 5 Free"; + // font-weight: 900; + padding-right: 0.5em; + font-size: 2em; + } + + .taxonomy-term[data-taxonomy-term="apple"]::before { + content: "\f5d1"; + color: red; + } + + .taxonomy-term[data-taxonomy-term="carrot"]::before { + content: "\f787"; + color: orange; + } + + .taxonomy-term[data-taxonomy-term="lemon"]::before { + content: "\f094"; + color: limegreen; + } + + .taxonomy-term[data-taxonomy-term="pepper"]::before { + content: "\f816"; + color: darkred; + } + + .taxonomy-term { + // padding: 4px 16px; + // right: 9999px; + background: none; + border-width: 0; + border-radius: 0; + color: $gray-600; + // display: inline-block !important; + font-size: 1em; + line-height: 1.5em; // 26px; + min-height: 1.5em; // 26px; + max-width: 100%; + padding: 0; // 0 20px 0 23px; + position: relative; + margin: 0; // 0 10px 10px 0; + // margin-right: 1em; + text-decoration: none; + -webkit-clip-path: none; + clip-path: none; + + &:hover { + background: none; + color: $link-color; + + .taxonomy-count{ + color: $dark!important; + } + } + + &:hover::before { + background: none; + } + } + + .taxonomy-count, + .taxonomy-label { + display: none; + } + + &.taxonomy-terms-article { + margin-bottom: 1.5rem; + + .taxonomy-title { + display: none; + } + } +} + .taxonomy-taxonomy-page { max-width: 800px; margin: auto; @@ -184,23 +302,6 @@ // } } -.taxonomy-count { - font-size: 0.8em; - // height: 1.25em; // 26px; - line-height: 1.25em; // 26px; - - // from W3.CSS https://www.w3schools.com/w3css/w3css_badges.asp - display: inline-block; - padding-left: 0.6em; - padding-right: 0.6em; - margin-left: 0.6em; - // margin-right: 0.6em; - text-align: center; - border-radius: 1em; - // color: #fff!important; - background-color: #fff; -} - .article-meta { margin-bottom: 1.5rem; } |