Commit b9f963fd authored by hynek's avatar hynek 🤤
Browse files

refactor(scss/templates/forms): provide icons over css classes instead of font awesome glyphs

these are inserted as inline svg and styled via inline styles

close #277, #278
parent a57e45df
......@@ -75,20 +75,20 @@ def get_value(dictionary, key):
@register.filter
def get_file_icon(mime_str):
def get_file_icon(mime_str: str) -> str:
"""
Returns the fa icon string for the mime group
Returns the icon class string for the mime group
"""
if mime_str == "application/zip":
return "fa-file"
if mime_str == "archive/pdf" or mime_str == "application/pdf":
return "fa-file-pdf"
return "i-file-zip-md"
if mime_str in ("archive/pdf", "application/pdf"):
return "i-file-pdf-md"
try:
kind, ext = mime_str.split("/")
return "fa-file-" + kind
return "i-file-" + kind + "-md"
except Exception:
return "fa-file"
return "i-file-md"
@register.filter
......
......@@ -31,9 +31,9 @@ from discuss_data.dddatasets.models import (
UPDATED_MSG = """
{% if updated %}<div id='updated-msg' class='alert alert-success' ic-trigger-on='scrolled-into-view' ic-action='delay:2500;fadeOut;remove' ic-target='#updated-msg' role='alert'>
<i class='fa fa-spinner fa-spin'></i><strong>{{ target|title }} saved</strong></div>{% endif %}
<span class='spinner-sm'></span><strong>{{ target|title }} saved</strong></div>{% endif %}
{% if err %}<div id='updated-msg' class='alert alert-danger' role='alert'>
<i class='fa fa-spinner fa-spin'></i><strong>Error! {{ target|title }} could not be saved. Error encountered in fields {% for field in err %} {{ field }}, {% endfor %}</strong></div> {% endif %}"""
<span class='spinner-sm'></span><strong>Error! {{ target|title }} could not be saved. Error encountered in fields {% for field in err %} {{ field }}, {% endfor %}</strong></div> {% endif %}"""
ADD_EDIT_HEADING = (
"<h2>{% if new %}Edit{% else %}Add{% endif %} {{ target|title }}</h2><hr>"
......@@ -41,7 +41,7 @@ ADD_EDIT_HEADING = (
REQ_FIELD = "<p class='help-block'>[*] {}</p>".format(_("Required fields"))
EDIT_DATASET_BTN = "<button class='btn btn-primary' type='submit'>{% if btn_text %}{{ btn_text }}{% else %}Save{% endif %} <i class='ic-indicator fa fa-spinner fa-spin' style='display:none'></i></button>"
EDIT_DATASET_BTN = "<button class='btn btn-primary' type='submit'>{% if btn_text %}{{ btn_text }}{% else %}Save{% endif %} <span class='spinner-sm'></span></button>"
class DataSetPublicationForm(ModelForm):
......@@ -54,13 +54,7 @@ class DataSetPublicationForm(ModelForm):
helper = FormHelper()
helper.form_tag = False
helper.layout = Layout(
Div(
Div(
"pub_type",
css_class="col-md-12",
),
css_class="row",
),
Div(Div("pub_type", css_class="col-md-12",), css_class="row",),
)
......@@ -74,13 +68,7 @@ class DataSetIndividualLicenseForm(ModelForm):
helper = FormHelper()
helper.form_tag = False
helper.layout = Layout(
Div(
Div(
"individual_license",
css_class="col-md-12",
),
css_class="row",
),
Div(Div("individual_license", css_class="col-md-12",), css_class="row",),
)
......@@ -99,13 +87,7 @@ class DataSetCopyrightForm(ModelForm):
helper.form_tag = False
helper.layout = Layout(
Div(
Div(
"copyright_declaration",
css_class="col-md-12",
),
css_class="row",
),
Div(Div("copyright_declaration", css_class="col-md-12",), css_class="row",),
# HTML(EDIT_DATASET_BTN),
# FormActions(Submit("save", "Save {{ target }}"),),
# Div(HTML(UPDATED_MSG),),
......@@ -128,10 +110,7 @@ class DataSubmissionAgreementAcceptForm(ModelForm):
_("Data Submission Agreement"),
)
),
Div(
"dsa_accepted",
css_class="col-md-12",
),
Div("dsa_accepted", css_class="col-md-12",),
css_class="row",
),
HTML(EDIT_DATASET_BTN),
......@@ -147,18 +126,9 @@ class DataSetCreatorFormSetHelper(FormHelper):
self.form_tag = False
self.layout = Layout(
Div(
Div(
"name",
css_class="col-md-4",
),
Div(
"first_name",
css_class="col-md-4",
),
Div(
"creator_type",
css_class="col-md-2",
),
Div("name", css_class="col-md-4",),
Div("first_name", css_class="col-md-4",),
Div("creator_type", css_class="col-md-2",),
Field("DELETE", template="core/_bool_button.html"),
css_class="row crispyformset",
),
......@@ -183,25 +153,13 @@ class DataSubmissionAgreementForm(ModelForm):
helper.form_tag = False
helper.layout = Layout(
Div(
Div(
"postal_address",
css_class="col-md-12",
),
Div(
"birthdate",
css_class="col-md-12",
),
Div("postal_address", css_class="col-md-12",),
Div("birthdate", css_class="col-md-12",),
css_class="row",
),
Div(
Div(
"project_type",
css_class="col-md-6",
),
Div(
"project_title",
css_class="col-md-6",
),
Div("project_type", css_class="col-md-6",),
Div("project_title", css_class="col-md-6",),
css_class="row",
),
# Div(
......@@ -255,63 +213,30 @@ class DataSetForm(ModelForm):
css_class="row",
),
Div(
Div(
"date_of_data_creation_from",
css_class="col-md-6",
),
Div(
"date_of_data_creation_to",
css_class="col-md-6",
),
Div(
"date_of_data_creation_text",
css_class="col-md-12",
),
Div("date_of_data_creation_from", css_class="col-md-6",),
Div("date_of_data_creation_to", css_class="col-md-6",),
Div("date_of_data_creation_text", css_class="col-md-12",),
css_class="row",
),
Div(
Div(
"time_period_from",
css_class="col-md-6",
),
Div(
"time_period_to",
css_class="col-md-6",
),
Div(
"time_period_text",
css_class="col-md-12",
),
Div("time_period_from", css_class="col-md-6",),
Div("time_period_to", css_class="col-md-6",),
Div("time_period_text", css_class="col-md-12",),
css_class="row",
),
Div(
Div(
"sources_of_data",
css_class="col-md-6",
),
Div(
"datatypes",
css_class="col-md-6",
),
Div("sources_of_data", css_class="col-md-6",),
Div("datatypes", css_class="col-md-6",),
css_class="row",
),
Div(
Div(
"institutional_affiliation",
css_class="col-md-6",
),
Div("institutional_affiliation", css_class="col-md-6",),
Div("funding", css_class="col-md-6", wrapper_class="controls"),
css_class="row",
),
Div(
Div(
"related_dataset_text",
css_class="col-md-6",
),
Div(
"related_dataset",
css_class="col-md-6",
),
Div("related_dataset_text", css_class="col-md-6",),
Div("related_dataset", css_class="col-md-6",),
css_class="row",
),
HTML(REQ_FIELD),
......@@ -320,9 +245,7 @@ class DataSetForm(ModelForm):
# Submit("save", "Save {{ target }}"),
# # Button('cancel', 'Cancel', data_toggle="collapse", data_target="#collapse-{{ object_type }}-{{ object.id }}"),
# ),
Div(
HTML(UPDATED_MSG),
),
Div(HTML(UPDATED_MSG),),
)
# def __init__(self, *args, **kwargs):
# super().__init__(*args, **kwargs)
......@@ -357,22 +280,10 @@ class DataSetEditForm(ModelForm):
helper.help_text_inline = False
helper.layout = Layout(
Div(
Div(
"title",
css_class="col-md-12",
),
Div(
"subtitle",
css_class="col-md-12",
),
Div(
"shorttitle",
css_class="col-md-12",
),
Div(
"description",
css_class="col-md-8",
),
Div("title", css_class="col-md-12",),
Div("subtitle", css_class="col-md-12",),
Div("shorttitle", css_class="col-md-12",),
Div("description", css_class="col-md-8",),
HTML(
"<span ic-get-from='{% url 'core:load' %}' ic-trigger-on='load'></span>"
),
......@@ -380,9 +291,7 @@ class DataSetEditForm(ModelForm):
),
HTML(REQ_FIELD),
HTML(EDIT_DATASET_BTN),
Div(
HTML(UPDATED_MSG),
),
Div(HTML(UPDATED_MSG),),
)
# init form at every request to update categories queried from db
......@@ -419,23 +328,15 @@ class DataSetImageUploadForm(ModelForm):
helper.layout = Layout(
# HTML(ADD_EDIT_HEADING),
Div(
Div(
"image",
css_class="col-md-12",
),
Div(
"remove_photo",
css_class="col-md-12",
),
Div("image", css_class="col-md-12",),
Div("remove_photo", css_class="col-md-12",),
css_class="row",
),
HTML(REQ_FIELD),
HTML(
'<button type="submit">Save {{ target }}<i class="ic-indicator fa fa-spinner fa-spin" style="display:none"></i></button>'
),
Div(
HTML(UPDATED_MSG),
'<button type="submit">Save {{ target }}<span class="spinner-sm"></span></button>'
),
Div(HTML(UPDATED_MSG),),
)
......@@ -448,17 +349,9 @@ class DataFileUploadForm(ModelForm):
helper.form_tag = False
helper.use_custom_control = True
helper.layout = Layout(
Div(
"data_file_type",
css_class="col-md-4",
),
Div(
HTML(REQ_FIELD),
css_class="col-md-12",
),
Div(
HTML(UPDATED_MSG),
),
Div("data_file_type", css_class="col-md-4",),
Div(HTML(REQ_FIELD), css_class="col-md-12",),
Div(HTML(UPDATED_MSG),),
)
......@@ -483,27 +376,14 @@ class DataListForm(ModelForm):
helper.form_tag = False
helper.layout = Layout(
Div(
Div(
"name",
css_class="col-md-11",
),
Div(
"public",
css_class="col-md-1",
),
Div(
"description",
css_class="col-md-12",
),
Div("name", css_class="col-md-11",),
Div("public", css_class="col-md-1",),
Div("description", css_class="col-md-12",),
css_class="row",
),
HTML(REQ_FIELD),
FormActions(
Submit("save", "Save {{ target }}"),
),
Div(
HTML(UPDATED_MSG),
),
FormActions(Submit("save", "Save {{ target }}"),),
Div(HTML(UPDATED_MSG),),
)
......
......@@ -18,9 +18,9 @@ from .models import Publication
UPDATED_MSG = """
{% if updated %}<div id='updated-msg' class='alert alert-success' ic-trigger-on='scrolled-into-view' ic-action='delay:2500;fadeOut;remove' role='alert'>
<i class='fa fa-spinner fa-spin'></i><strong>{{ target|title }} saved</strong></div>{% endif %}
<span class='spinner-sm'></span><strong>{{ target|title }} saved</strong></div>{% endif %}
{% if err %}<div id='updated-msg' class='alert alert-danger' role='alert'>
<i class='fa fa-spinner fa-spin'></i><strong>Error! {{ target|title }} could not be saved. Error encountered in fields {% for field in err %} {{ field }}, {% endfor %}</strong></div> {% endif %}"""
<span class='spinner-sm'></span><strong>Error! {{ target|title }} could not be saved. Error encountered in fields {% for field in err %} {{ field }}, {% endfor %}</strong></div> {% endif %}"""
ADD_EDIT_HEADING = (
"<h2>{% if new %}Add{% else %}Edit{% endif %} {{ target|title }}</h2><hr>"
......@@ -51,57 +51,21 @@ class PublicationForm(ModelForm):
helper.form_tag = False
helper.layout = Layout(
Div(
Div(
"title",
css_class="col-md-12",
),
Div(
"authors_text",
css_class="col-md-6",
),
Div(
"publisher_text",
css_class="col-md-2",
),
Div(
"places_text",
css_class="col-md-2",
),
Div(
"year",
css_class="col-md-2",
),
Div(
"included_text",
css_class="col-md-10",
),
Div(
"pages",
css_class="col-md-2",
),
Div(
"url",
css_class="col-md-6",
),
Div(
"doi",
css_class="col-md-3",
),
Div(
"isbn",
css_class="col-md-3",
),
Div("title", css_class="col-md-12",),
Div("authors_text", css_class="col-md-6",),
Div("publisher_text", css_class="col-md-2",),
Div("places_text", css_class="col-md-2",),
Div("year", css_class="col-md-2",),
Div("included_text", css_class="col-md-10",),
Div("pages", css_class="col-md-2",),
Div("url", css_class="col-md-6",),
Div("doi", css_class="col-md-3",),
Div("isbn", css_class="col-md-3",),
# Div("description", css_class="col-md-6",),
css_class="row",
),
HTML(REQ_FIELD),
HTML(
"<span id='indicator' style='display:none'><i class='fa fa-spinner fa-spin'></i> Saving...</span>"
),
FormActions(
Submit("save", "Save {{ target }}", ic_indicator="#indicator"),
),
Div(
HTML(UPDATED_MSG),
),
HTML("<span id='indicator'><span class='spinner-sm'></span> Saving...</span>"),
FormActions(Submit("save", "Save {{ target }}", ic_indicator="#indicator"),),
Div(HTML(UPDATED_MSG),),
)
......@@ -8,9 +8,9 @@ from discuss_data.ddusers.models import Affiliation, Project, User
UPDATED_MSG = """
{% if updated %}<div id='updated-msg' class='alert alert-success' ic-trigger-on='scrolled-into-view' ic-action='delay:2500;fadeOut;remove' role='alert'>
<i class='fa fa-spinner fa-spin'></i><strong>{{ target|title }} saved</strong></div>{% endif %}
<span class='spinner-sm'></span><strong>{{ target|title }} saved</strong></div>{% endif %}
{% if err %}<div id='updated-msg' class='alert alert-danger' role='alert'>
<i class='fa fa-spinner fa-spin'></i><strong>Error! {{ target|title }} could not be saved. Error encountered in fields {% for field in err %} {{ field }}, {% endfor %}</strong></div> {% endif %}"""
<span class='spinner-sm'></span><strong>Error! {{ target|title }} could not be saved. Error encountered in fields {% for field in err %} {{ field }}, {% endfor %}</strong></div> {% endif %}"""
ADD_EDIT_HEADING = (
"<h2>{% if new %}Add{% else %}Edit{% endif %} {{ target|title }}</h2><hr>"
......@@ -57,9 +57,7 @@ class UserForm(ModelForm):
),
Div(Div("external_profile", css_class="col-md-12",), css_class="row",),
HTML(REQ_FIELD),
HTML(
"<span id='indicator' style='display:none'><i class='fa fa-spinner fa-spin'></i> Saving...</span>"
),
HTML("<span id='indicator'><span class='spinner-sm'></span> Saving...</span>"),
FormActions(
Submit(
"save",
......@@ -107,9 +105,7 @@ class AffiliationForm(ModelForm):
css_class="row",
),
HTML(REQ_FIELD),
HTML(
"<span id='indicator' style='display:none'><i class='fa fa-spinner fa-spin'></i> Saving...</span>"
),
HTML("<span id='indicator'><span class='spinner-sm'></span> Saving...</span>"),
FormActions(Submit("save", "Save {{ target }}", ic_indicator="#indicator"),),
Div(HTML(UPDATED_MSG),),
)
......
......@@ -691,49 +691,122 @@ h1, h2, h3 {
font-size: large;
}
#indicator {
display: none;
}
/*
* Icons
*/
/* general settings */
.i::before {
display: inline-block;
height: 1.5rem;
width: 1.5rem;
position:relative;
top: calc(1rem / 3);
}
/* icons path map */
$icons: (
account: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>',
add-photo: '<path d="M0 0h24v24H0z" fill="none"/><path d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H23v16H3V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3-5c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z"/>',
camera: '<path d="M0 0h24v24H0V0z" fill="none"/><circle cx="12" cy="12" r="3"/><path d="M16.83 4L15 2H9L7.17 4H2v16h20V4h-5.17zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>',
check-mark: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>',
close: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>',
dashboard: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/>',
drop-down-arrow: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/>',
file-pdf: '<path fill="currentColor" d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2M10.1,11.4C10.08,11.44 9.81,13.16 8,16.09C8,16.09 4.5,17.91 5.33,19.27C6,20.35 7.65,19.23 9.07,16.59C9.07,16.59 10.89,15.95 13.31,15.77C13.31,15.77 17.17,17.5 17.7,15.66C18.22,13.8 14.64,14.22 14,14.41C14,14.41 12,13.06 11.5,11.2C11.5,11.2 12.64,7.25 10.89,7.3C9.14,7.35 9.8,10.43 10.1,11.4M10.91,12.44C10.94,12.45 11.38,13.65 12.8,14.9C12.8,14.9 10.47,15.36 9.41,15.8C9.41,15.8 10.41,14.07 10.91,12.44M14.84,15.16C15.42,15 17.17,15.31 17.1,15.64C17.04,15.97 14.84,15.16 14.84,15.16M7.77,17C7.24,18.24 6.33,19 6.1,19C5.87,19 6.8,17.4 7.77,17M10.91,10.07C10.91,10 10.55,7.87 10.91,7.92C11.45,8 10.91,10 10.91,10.07Z" />',
follow: '<path d="M22 6H12l-2-2H2v16h20V6zm-4.06 11L15 15.28 12.06 17l.78-3.33-2.59-2.24 3.41-.29L15 8l1.34 3.14 3.41.29-2.59 2.24.78 3.33z"/>',
/* for DSA, maybe rename */
gavel: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M1 21h12v2H1v-2zM5.24 8.07l2.83-2.83 14.14 14.14-2.83 2.83L5.24 8.07zM12.32 1l5.66 5.66-2.83 2.83-5.66-5.66L12.32 1zM3.83 9.48l5.66 5.66-2.83 2.83L1 12.31l2.83-2.83z"/>',
glasses: '<path fill="currentColor" d="M3,10C2.76,10 2.55,10.09 2.41,10.25C2.27,10.4 2.21,10.62 2.24,10.86L2.74,13.85C2.82,14.5 3.4,15 4,15H7C7.64,15 8.36,14.44 8.5,13.82L9.56,10.63C9.6,10.5 9.57,10.31 9.5,10.19C9.39,10.07 9.22,10 9,10H3M7,17H4C2.38,17 0.96,15.74 0.76,14.14L0.26,11.15C0.15,10.3 0.39,9.5 0.91,8.92C1.43,8.34 2.19,8 3,8H9C9.83,8 10.58,8.35 11.06,8.96C11.17,9.11 11.27,9.27 11.35,9.45C11.78,9.36 12.22,9.36 12.64,9.45C12.72,9.27 12.82,9.11 12.94,8.96C13.41,8.35 14.16,8 15,8H21C21.81,8 22.57,8.34 23.09,8.92C23.6,9.5 23.84,10.3 23.74,11.11L23.23,14.18C23.04,15.74 21.61,17 20,17H17C15.44,17 13.92,15.81 13.54,14.3L12.64,11.59C12.26,11.31 11.73,11.31 11.35,11.59L10.43,14.37C10.07,15.82 8.56,17 7,17M15,10C14.78,10 14.61,10.07 14.5,10.19C14.42,10.31 14.4,10.5 14.45,10.7L15.46,13.75C15.64,14.44 16.36,15 17,15H20C20.59,15 21.18,14.5 21.25,13.89L21.76,10.82C21.79,10.62 21.73,10.4 21.59,10.25C21.45,10.09 21.24,10 21,10H15Z" />',
help: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>',
home: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"/>',
label: '<path fill="currentColor" d="M17.63,5.84C17.27,5.33 16.67,5 16,5H5A2,2 0 0,0 3,7V17A2,2 0 0,0 5,19H16C16.67,19 17.27,18.66 17.63,18.15L22,12L17.63,5.84Z" />',
labels: '<path fill="currentColor" d="M4 19H13L11 21H4C3.5 21 2.97 20.79 2.59 20.41C2.21 20.03 2 19.5 2 19V9H4V19M17.63 5.84C17.27 5.33 16.67 5 16 5H8C6.9 5 6 5.9 6 7V15C6 16.1 6.9 17 8 17H16C16.67 17 17.27 16.66 17.63 16.15L22 11L17.63 5.84Z" />',
list: '<g fill="none"><path d="M0 0h24v24H0V0z"/><path d="M0 0h24v24H0V0z" opacity=".87"/></g><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>',
lock: '<path fill="currentColor" d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" />',
my-data: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M22 6H12l-2-2H2v16h20V6zm-3 8h-3v3h-2v-3h-3v-2h3V9h2v3h3v2z"/>',
/* replace my-profile with account */
my-profile: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>',
pagination-arrow-left: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>',
pagination-arrow-right: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>',
people: '<g><rect fill="none" height="24" width="24"/></g><g><g/><g><g><path d="M16.67,13.13C18.04,14.06,19,15.32,19,17v3h4v-3 C23,14.82,19.43,13.53,16.67,13.13z" fill-rule="evenodd"/></g><g><circle cx="9" cy="8" fill-rule="evenodd" r="4"/></g><g><path d="M15,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4c-0.47,0-0.91,0.1-1.33,0.24 C14.5,5.27,15,6.58,15,8s-0.5,2.73-1.33,3.76C14.09,11.9,14.53,12,15,12z" fill-rule="evenodd"/></g><g><path d="M9,13c-2.67,0-8,1.34-8,4v3h16v-3C17,14.34,11.67,13,9,13z" fill-rule="evenodd"/></g></g></g>',
search: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>',
shared-data: '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M22 6H12l-2-2H2v16h20V6zm-7 3c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm4 8h-8v-1c0-1.33 2.67-2 4-2s4 .67 4 2v1z"/>',
);
/* icons classes creator */
/* SIDENAV ICONS */
/* general settings */
.i-nav::before, .i-nav-24::before {
display: inline-block;
height: 1.5rem;
width: 1.5rem;
position:relative;
top: calc(1rem / 3);
}
@each $icon, $path in $icons {
.i-#{$icon}::before {
.i-nav-#{$icon}::before, .i-nav-#{$icon}-24::before {
content: "";
$color: encodecolor(theme-color("tertiary"));
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$color}" width="48px" height="48px">#{$path}</svg>');
background-size: 1.5rem 1.5rem;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$color}" width="24px" height="24px">#{$path}</svg>');
}
.active .i-#{$icon}::before,
.i-#{$icon}:hover::before {
.active .i-nav-#{$icon}::before,
.i-nav-#{$icon}:hover::before, .i-nav-#{$icon}-24::before,
.i-nav-#{$icon}-24:hover::before {
display: inline-block;
content: "";
$color: encodecolor(theme-color("light"));
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$color}" width="48px" height="48px">#{$path}</svg>');
background-size: 1.5rem 1.5rem;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$color}" width="24px" height="24px">#{$path}</svg>');
}
}
$sizes: (
sm: 1em,
md: 1.5em,
lg: 2em,
xl: 3em,
);
/* GENERAL ICONS */
@each $icon, $path in $icons {
@each $size-name, $size in $sizes {
.i-#{$icon}-#{$size-name} {
display: inline-block;
content: "";
height: $size;
width: $size;
$color: encodecolor(theme-color("primary"));
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$color}" width="#{$size}" height="#{$size}">#{$path}</svg>');
}
}
}
/* spinner taken from https://tobiasahlin.com/spinkit/ */
@each $size-name, $size in $sizes {
.spinner-#{$size-name} {
width: $size;
height: $size;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {