[simple theme] update to ion icons 5 and drop webfont

* update from ionicons-npm to ionicons ver.5
* drop the webfont built by grunt for icons
* built icons.html template for inlining icons with jinja2 into html
* update icon to use mostly the outline version
* add icons to categories and do not display them on mobile to save space
* remove all legacy ion icon font files from simple theme
* icons.html is added in this commit since make statc.build.restore requires git to know the file already
* cleanup error-dialog
This commit is contained in:
MrPaulBlack
2021-11-13 10:42:07 +01:00
parent 8877512e20
commit 566dfe3330
27 changed files with 260 additions and 868 deletions

View File

@@ -16,6 +16,40 @@
"spacer categories";
}
.category {
display: inline-block;
position: relative;
margin-right: 1rem;
padding: 0;
input {
display: none;
}
label {
svg {
padding-right: 0.2rem;
}
cursor: pointer;
padding: 0.2rem 0;
display: inline-flex;
text-transform: capitalize;
font-size: 0.9em;
border-bottom: 2px solid transparent;
.disable-user-select;
div.category_name {
margin: auto 0;
}
}
input[type="checkbox"]:checked + label {
color: var(--color-categories-item-selected-font);
border-bottom: 2px solid var(--color-categories-item-border-selected);
}
}
#search_logo {
grid-area: logo;
display: flex;
@@ -79,7 +113,7 @@
border-collapse: separate;
box-sizing: border-box;
margin: 0;
padding: 8px;
padding: 10px;
background: none repeat scroll 0 0 var(--color-search-background);
border: 1px solid var(--color-search-border);
border-radius: 0;
@@ -156,7 +190,6 @@
#categories {
width: 100%;
margin: 0;
text-align: left;
overflow-x: scroll;
overflow-y: hidden;
@@ -188,7 +221,7 @@
}
.search_box {
// hack, should bew 100% ?
// hack, should be 100% ?
width: 99%;
margin: 0.1em;
padding: 0 0.1em 0 0;
@@ -219,9 +252,15 @@
.category {
display: block;
width: 100%;
margin: 0;
label {
padding: 10px !important;
padding: 0.8rem !important;
margin: 0 !important;
svg {
display: none;
}
}
}
}
@@ -239,7 +278,6 @@
}
#categories {
margin: 0 10px 0 0;
.disable-user-select;
&::-webkit-scrollbar {
@@ -248,33 +286,6 @@
}
}
.category {
display: inline-block;
position: relative;
margin: 0 3px;
padding: 0;
input {
display: none;
}
label {
cursor: pointer;
padding: 0.3rem 0.75rem 0.5rem 0.75rem;
margin: 0;
display: block;
text-transform: capitalize;
font-size: 0.9em;
border-bottom: 2px solid transparent;
.disable-user-select;
}
input[type="checkbox"]:checked + label {
color: var(--color-categories-item-selected-font);
border-bottom: 2px solid var(--color-categories-item-border-selected);
}
}
#categories_container {
position: relative;
}

View File

@@ -10,7 +10,6 @@
@import "../../__common__/less/stats.less";
@import "../../__common__/less/result_templates.less";
@import (inline) "../../node_modules/normalize.css/normalize.css";
@import "../generated/ion.less";
@import "definitions.less";
@import "mixins.less";
@import "code.less";
@@ -28,10 +27,23 @@
@import "search.less";
// ion-icon
.ion-icon-big {
.ion-icon;
.ion-icon {
display: inline-block;
vertical-align: bottom;
line-height: 1;
text-decoration: inherit;
}
font-size: 149%;
.ion-icon-small {
width: 1rem;
height: 1rem;
.ion-icon;
}
.ion-icon-big {
width: 1.5rem;
height: 1.5rem;
.ion-icon;
}
// Main LESS-Code
@@ -530,7 +542,7 @@ article[data-vim-selected].category-social {
#linkto_preferences {
position: absolute;
right: 10px;
top: 2rem;
top: 2.2rem;
padding: 0;
border: 0;
display: block;

View File

@@ -121,20 +121,13 @@ div.selectable_url {
// dialog
.dialog() {
position: relative;
padding: 1em 1em 1em 2.7em;
display: flex;
padding: 1rem;
margin: 0 0 1em 0;
border: 1px solid var(--color-toolkit-dialog-border);
text-align: left;
.rounded-corners;
&::before {
position: absolute;
top: 0.5em;
left: 0.5em;
font-family: "ion"; // stylelint-disable font-family-no-missing-generic-family-keyword
font-size: 1.5em;
}
.close {
float: right;
position: relative;
@@ -177,7 +170,6 @@ div.selectable_url {
color: var(--color-error);
background: var(--color-error-background);
border-color: var(--color-error);
.ion-error();
}
.dialog-warning {
@@ -186,7 +178,6 @@ div.selectable_url {
color: var(--color-warning);
background: var(--color-warning-background);
border-color: var(--color-warning);
.ion-warning();
}
.dialog-modal {