diff options
author | Jeffrey Tse <jeffreytse.mail@gmail.com> | 2019-09-11 12:19:34 +0800 |
---|---|---|
committer | Jeffrey Tse <jeffreytse.mail@gmail.com> | 2019-09-11 12:21:17 +0800 |
commit | 61eae5c5f9881cab29712f6e696085baa977e1f9 (patch) | |
tree | bb301b58b94fee5dcefbdfae8f0c8fc13ee5bd21 /_sass/misc | |
parent | cd3a8163dd997d0a7c4d320816651efa8f7dce60 (diff) |
release: v1.0.0
Diffstat (limited to '_sass/misc')
-rw-r--r-- | _sass/misc/article-menu.scss | 47 | ||||
-rw-r--r-- | _sass/misc/common-list.scss | 49 | ||||
-rw-r--r-- | _sass/misc/google-translate.scss | 189 |
3 files changed, 285 insertions, 0 deletions
diff --git a/_sass/misc/article-menu.scss b/_sass/misc/article-menu.scss new file mode 100644 index 0000000..006f6ee --- /dev/null +++ b/_sass/misc/article-menu.scss @@ -0,0 +1,47 @@ +/* + * Post menu + */ + +.post-menu { + padding: 0 20px; + max-width: 250px; + + .post-menu-title { + font-size: $base-font-size * 1.35; + margin-bottom: 6px; + font-weight: 600; + color: #4e4e4e; + + &:before { + content: '\f02e'; + margin-right: 5px; + font-size: $base-font-size * 1.15; + } + } + + .post-menu-content { + ul { + @for $i from 2 to 7 { + .h-h#{$i} { + padding-left: ($i - 2) * $base-font-size * 0.9; + font-size: (7 - $i) + $base-font-size * 0.9; + } + } + + a { + display: flex; + padding: 0px 8px; + + * { + pointer-events: none; + } + } + + .active { + color: white; + background: mix(invert($theme-color), darkorange); + transition: background 0.5s; + } + } + } +} diff --git a/_sass/misc/common-list.scss b/_sass/misc/common-list.scss new file mode 100644 index 0000000..97f7b31 --- /dev/null +++ b/_sass/misc/common-list.scss @@ -0,0 +1,49 @@ +/** + * Common list + */ +.common-list { + @include relative-font-size(1.0); + + background: #eaeaea; + box-shadow: 0px 0px 3px 0px #a9a9a9; + border-radius: 3px; + min-width: 200px; + + ul { + list-style: none; + margin: 0; + } + + li { + border-bottom: 1px solid $background-color; + + &:last-child { + border-bottom: none; + } + + a { + display: flex; + justify-content: space-between; + padding: 8px 12px; + text-decoration: none; + font-weight: 600; + color: mix($theme-color, #666); + transition: background 0.2s; + + &:hover { + background: mix($theme-color, #fff, 20%); + } + } + + span { + @include relative-font-size(0.8); + display: inline-block; + border-radius: 10px; + align-self: center; + background: darken(invert($theme-color), 20%); + padding: 0px 8px; + margin-left: 20px; + color: $white-color; + } + } +} diff --git a/_sass/misc/google-translate.scss b/_sass/misc/google-translate.scss new file mode 100644 index 0000000..97519a5 --- /dev/null +++ b/_sass/misc/google-translate.scss @@ -0,0 +1,189 @@ +/* OVERRIDE GOOGLE TRANSLATE WIDGET CSS BEGIN */ + +%goog-te-menu { + a.goog-te-menu-value { + vertical-align: top !important; + + &:hover { + text-decoration: none; + } + + span { + color: #aaa; + } + + span:hover { + color: white; + } + + /* Remove the down arrow */ + /* when dropdown open */ + span[style="color: rgb(213, 213, 213);"] { + display: none; + } + /* after clicked/touched */ + span[style="color: rgb(118, 118, 118);"] { + display: none; + } + /* on page load (not yet touched or clicked) */ + span[style="color: rgb(155, 155, 155);"] { + display: none; + } + + /* Remove span with left border line | (next to the arrow) in Chrome & Firefox */ + span[style="border-left: 1px solid rgb(187, 187, 187);"] { + display: none; + } + /* Remove span with left border line | (next to the arrow) in Edge & IE11 */ + span[style="border-left-color: rgb(187, 187, 187); border-left-width: 1px; border-left-style: solid;"] { + display: none; + } + } +} + +div#google_translate_element { + display: inline; + + div.goog-te-gadget { + display: inline; + font-size: 0; + } + + div[id=':0.targetLanguage'] { + display: inline; + } + + div.goog-te-gadget-simple { + border: none; + background-color: transparent; + + @extend %goog-te-menu; + } + + a.goog-logo-link { + display: none; + } + + .goog-te-gadget-icon { + display: none !important; + /*background: url("url for the icon") 0 0 no-repeat !important;*/ + } + + a.goog-te-menu-value { + margin: 0; + + span:first-child { + display: none; + } + + &:before { + content: "\f1ab \f0d7"; + font-family: FontAwesome; + font-size: initial; + color: #fefefe; + border: 1px solid #fefefe85; + border-radius: 3px; + padding: 3px 6px; + } + } +} + +.goog-te-menu-frame .goog-te-menu2 { + max-width: 100%; + overflow-x: auto; + box-sizing: border-box; + height: auto; +} + +/* HIDE the google translate toolbar */ +.goog-te-banner-frame.skiptranslate { + display: none !important; + border: none; + box-shadow: 0 0; + -webkit-box-shadow: 0 0; +} + +body { + top: 0px !important; +} + +/* OVERRIDE GOOGLE TRANSLATE WIDGET CSS END */ + + +// Main look + +.ct-language-selected { + background: lighten($theme-color, 10%) !important; +} + +.ct-language-dropdown { + overflow: hidden; + max-height: 0; + position: absolute; + top: 110%; + right: -10px; + -webkit-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; + width: 100px; + text-align: center; + padding-top: 0; + z-index: 200; + + li { + background: lighten($theme-color, 5%); + padding: 5px; + + a { + display: block; + + img { + width: 24px; + max-height: 24px; + } + } + + &:first-child { + padding-top: 10px; + border-radius: 3px 3px 0 0; + } + + &:last-child { + padding-bottom: 10px; + border-radius: 0 0 3px 3px; + } + + &:hover { + @extend .ct-language-selected; + } + } + +} + +.list-unstyled { + display: inline-block; + list-style: none; + margin-left: 0; +} + +.ct-language { + display: inline-block; + position: relative; + background: #fefefe2b; + padding: 3px 10px; + border-radius: 3px; + + &:hover { + cursor: pointer; + + .ct-language-dropdown { + padding-top: 8px; + max-height: 10000px; + } + } + + &:before { + content: "\f1ab \f0d7"; + font-family: FontAwesome; + } +} + |