From 75c947fb8142d1cf9d7ca56efeea981230920ba5 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Tue, 3 Mar 2020 12:24:47 -0300 Subject: [PATCH] Adds option to customize theme font family #338. Some other CSS adjustments. --- src/views/admin/components/filter-types/date/Date.vue | 1 + src/views/admin/components/filter-types/numeric/Numeric.vue | 1 + .../admin/components/filter-types/tainacan-filter-item.vue | 1 + src/views/admin/scss/_buttons.scss | 2 +- src/views/admin/scss/_checkboxes.scss | 3 ++- src/views/admin/scss/_custom_variables.scss | 3 ++- src/views/admin/scss/_inputs.scss | 1 + src/views/admin/scss/_modals.scss | 1 + src/views/admin/scss/_radios.scss | 1 + src/views/admin/scss/_selects.scss | 1 + src/views/admin/scss/_tabs.scss | 2 ++ src/views/admin/scss/_tags.scss | 1 + src/views/admin/scss/_tooltips.scss | 1 + src/views/admin/scss/tainacan-admin.scss | 2 +- src/views/theme-search/scss/_view-mode-slideshow.scss | 6 +++--- src/views/theme-search/theme-search.vue | 5 +++-- 16 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/views/admin/components/filter-types/date/Date.vue b/src/views/admin/components/filter-types/date/Date.vue index c4fcd4e34..a7811345c 100644 --- a/src/views/admin/components/filter-types/date/Date.vue +++ b/src/views/admin/components/filter-types/date/Date.vue @@ -252,6 +252,7 @@ .dropdown-trigger button { padding: 0 0.5em !important; height: auto !important; + min-height: 100%; i:not(.tainacan-icon-arrowdown) { margin-top: -3px; diff --git a/src/views/admin/components/filter-types/numeric/Numeric.vue b/src/views/admin/components/filter-types/numeric/Numeric.vue index 24b2f06a0..769993fd0 100644 --- a/src/views/admin/components/filter-types/numeric/Numeric.vue +++ b/src/views/admin/components/filter-types/numeric/Numeric.vue @@ -175,6 +175,7 @@ .dropdown-trigger button { height: auto !important; font-size: 1em !important; + min-height: 100%; i:not(.tainacan-icon-arrowdown) { font-size: 1.25em; diff --git a/src/views/admin/components/filter-types/tainacan-filter-item.vue b/src/views/admin/components/filter-types/tainacan-filter-item.vue index b39f2baaa..4f6345d71 100644 --- a/src/views/admin/components/filter-types/tainacan-filter-item.vue +++ b/src/views/admin/components/filter-types/tainacan-filter-item.vue @@ -104,6 +104,7 @@ width: 100%; overflow-x: hidden; text-overflow: ellipsis; + line-height: 1.3em; } } .collapse-content { diff --git a/src/views/admin/scss/_buttons.scss b/src/views/admin/scss/_buttons.scss index fd802e8fc..20c143dd6 100644 --- a/src/views/admin/scss/_buttons.scss +++ b/src/views/admin/scss/_buttons.scss @@ -20,7 +20,7 @@ button.link-style:active { border-radius: 6px !important; font-weight: normal; text-transform: inherit; - font-family: inherit; + font-family: var(--tainacan-font-family, inherit); padding: 2px 13px !important; margin-top: 0px !important; margin-bottom: 0px !important; diff --git a/src/views/admin/scss/_checkboxes.scss b/src/views/admin/scss/_checkboxes.scss index 5a09dd202..7cb2ed03f 100644 --- a/src/views/admin/scss/_checkboxes.scss +++ b/src/views/admin/scss/_checkboxes.scss @@ -1,5 +1,6 @@ .b-checkbox.checkbox { - + font-family: var(--tainacan-font-family, inherit); + input[type="checkbox"] { box-shadow: none !important; } diff --git a/src/views/admin/scss/_custom_variables.scss b/src/views/admin/scss/_custom_variables.scss index fa9eb11dc..047412470 100644 --- a/src/views/admin/scss/_custom_variables.scss +++ b/src/views/admin/scss/_custom_variables.scss @@ -64,7 +64,8 @@ // Background --tainacan-background-color: var(--tainacan-white); - // Font size + // Font family and size + --tainacan-font-family: #{$family-sans-serif}; --tainacan-base-font-size: #{$base-font-size}; // Filter Menu Width when not a modal diff --git a/src/views/admin/scss/_inputs.scss b/src/views/admin/scss/_inputs.scss index 4fc035ae0..2427eaab4 100644 --- a/src/views/admin/scss/_inputs.scss +++ b/src/views/admin/scss/_inputs.scss @@ -19,6 +19,7 @@ input[type="week"].input { height: auto; line-height: 1em; font-size: 0.875em; + font-family: var(--tainacan-font-family, inherit); border-radius: 1px !important; box-shadow: none !important; background-color: var(--tainacan-input-background-color); diff --git a/src/views/admin/scss/_modals.scss b/src/views/admin/scss/_modals.scss index ea1cf1de6..c30c1b198 100644 --- a/src/views/admin/scss/_modals.scss +++ b/src/views/admin/scss/_modals.scss @@ -56,6 +56,7 @@ } } .tainacan-modal-content { + font-family: var(--tainacan-font-family, inherit); border-radius: 0px; background-color: var(--tainacan-background-color); padding: 40px $page-side-padding; diff --git a/src/views/admin/scss/_radios.scss b/src/views/admin/scss/_radios.scss index bf89e4e4d..6e1e5368f 100644 --- a/src/views/admin/scss/_radios.scss +++ b/src/views/admin/scss/_radios.scss @@ -1,4 +1,5 @@ .b-radio.radio { + font-family: var(--tainacan-font-family, inherit); input[type="radio"] + .check { width: 0.755em !important; diff --git a/src/views/admin/scss/_selects.scss b/src/views/admin/scss/_selects.scss index a267c4154..5e120ab6c 100644 --- a/src/views/admin/scss/_selects.scss +++ b/src/views/admin/scss/_selects.scss @@ -14,6 +14,7 @@ border-radius: 1px !important; font-weight: normal; font-size: 0.875em !important; + font-family: var(--tainacan-font-family, inherit); line-height: 1.5em; height: auto !important; padding: calc(0.375em - 1px) 20px calc(0.375em - 1px) 10px !important; diff --git a/src/views/admin/scss/_tabs.scss b/src/views/admin/scss/_tabs.scss index fd8a62422..0a7512eae 100644 --- a/src/views/admin/scss/_tabs.scss +++ b/src/views/admin/scss/_tabs.scss @@ -1,6 +1,8 @@ // Tabs .tabs { font-size: 1em; + font-family: var(--tainacan-font-family, inherit); + ul { border-bottom-color: var(--tainacan-input-border-color); } diff --git a/src/views/admin/scss/_tags.scss b/src/views/admin/scss/_tags.scss index 009456e64..b744a2f9d 100644 --- a/src/views/admin/scss/_tags.scss +++ b/src/views/admin/scss/_tags.scss @@ -1,4 +1,5 @@ .tags { + font-family: var(--tainacan-font-family, inherit); border: solid 1px var(--tainacan-input-border-color) !important; border-radius: 20px; flex-wrap: nowrap; diff --git a/src/views/admin/scss/_tooltips.scss b/src/views/admin/scss/_tooltips.scss index 23b385c47..c8f409091 100644 --- a/src/views/admin/scss/_tooltips.scss +++ b/src/views/admin/scss/_tooltips.scss @@ -22,6 +22,7 @@ } .tooltip { font-size: 0.6875em; + font-family: var(--tainacan-font-family, inherit); z-index: 999999999; display: block !important; diff --git a/src/views/admin/scss/tainacan-admin.scss b/src/views/admin/scss/tainacan-admin.scss index 5d79f44ae..bf03311ac 100644 --- a/src/views/admin/scss/tainacan-admin.scss +++ b/src/views/admin/scss/tainacan-admin.scss @@ -50,7 +50,7 @@ body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, bod z-index: 999999; overflow-y: auto; margin: 0px !important; - font-family: $family-sans-serif; + font-family: var(--tainacan-font-family, $family-sans-serif); font-size: 1em; } diff --git a/src/views/theme-search/scss/_view-mode-slideshow.scss b/src/views/theme-search/scss/_view-mode-slideshow.scss index cc901f4d8..38ecc0194 100644 --- a/src/views/theme-search/scss/_view-mode-slideshow.scss +++ b/src/views/theme-search/scss/_view-mode-slideshow.scss @@ -138,9 +138,9 @@ z-index: 99; top: 123px; left: 0; - max-width: 33px; - height: 26px; - width: 33px; + max-width: 1.625em; + height: 1.625em; + width: 1.625em; border: none; background-color: var(--tainacan-gray5); color: var(--tainacan-white); diff --git a/src/views/theme-search/theme-search.vue b/src/views/theme-search/theme-search.vue index 40c725b84..1bc6208e8 100644 --- a/src/views/theme-search/theme-search.vue +++ b/src/views/theme-search/theme-search.vue @@ -72,8 +72,9 @@ export default { @import "../admin/scss/_custom_variables.scss"; .theme-items-list { - background: var(--tainacan-background-color); - font-size: var(--tainacan-base-font-size); + background: var(--tainacan-background-color, inherit); + font-size: var(--tainacan-base-font-size, inherit); + font-family: var(--tainacan-font-family, inherit); position: relative; -webkit-overflow-scrolling: touch;