forked from mirrors/thatmattlove-hyperglass
⚡🚀🎨💄
This commit is contained in:
Matt Love
parent
3f7988910d
commit
2f2c32422e
105 changed files with 12954 additions and 5571 deletions
|
|
@ -4,6 +4,7 @@ returns errors if input is invalid. Passes validated parameters to
|
|||
construct.py, which is used to build & run the Netmiko connectoins or
|
||||
hyperglass-frr API calls, returns the output back to the front end.
|
||||
"""
|
||||
|
||||
# Third Party Imports
|
||||
import http3
|
||||
import sshtunnel
|
||||
|
|
@ -82,7 +83,7 @@ class Connect:
|
|||
"device_type": self.device_config.nos,
|
||||
"username": self.cred.username,
|
||||
"password": self.cred.password.get_secret_value(),
|
||||
"fast_cli": True,
|
||||
"global_delay_factor": 0.2,
|
||||
}
|
||||
logger.debug(f"Local binding: localhost:{tunnel.local_bind_port}")
|
||||
try:
|
||||
|
|
@ -94,6 +95,7 @@ class Connect:
|
|||
nm_connect_direct = ConnectHandler(**scrape_host)
|
||||
response = nm_connect_direct.send_command(self.query)
|
||||
except (
|
||||
OSError,
|
||||
NetMikoAuthenticationException,
|
||||
NetMikoTimeoutException,
|
||||
NetmikoAuthError,
|
||||
|
|
@ -103,11 +105,12 @@ class Connect:
|
|||
raise CantConnect(scrape_error)
|
||||
else:
|
||||
scrape_host = {
|
||||
"host": self.device_config.address,
|
||||
"host": self.device_config.address.compressed,
|
||||
"port": self.device_config.port,
|
||||
"device_type": self.device_config.nos,
|
||||
"username": self.cred.username,
|
||||
"password": self.cred.password.get_secret_value(),
|
||||
"fast_cli": True,
|
||||
"global_delay_factor": 0.2,
|
||||
}
|
||||
try:
|
||||
logger.debug(
|
||||
|
|
@ -115,6 +118,7 @@ class Connect:
|
|||
dev=self.device_config.location
|
||||
)
|
||||
)
|
||||
logger.debug(f"Device Parameters: {scrape_host}")
|
||||
nm_connect_direct = ConnectHandler(**scrape_host)
|
||||
response = nm_connect_direct.send_command(self.query)
|
||||
except (
|
||||
|
|
|
|||
|
|
@ -315,9 +315,9 @@ class Branding(BaseSettings):
|
|||
class Logo(BaseSettings):
|
||||
"""Class model for params.branding.logo"""
|
||||
|
||||
path: str = "static/images/hyperglass-dark.png"
|
||||
path: str = "ui/images/hyperglass-dark.png"
|
||||
width: int = 384
|
||||
favicons: str = "static/images/favicons/"
|
||||
favicons: str = "ui/images/favicons/"
|
||||
|
||||
class PeeringDb(BaseSettings):
|
||||
"""Class model for params.branding.peering_db"""
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
"""Hyperglass Front End"""
|
||||
|
||||
# Standard Library Imports
|
||||
import os
|
||||
import time
|
||||
from ast import literal_eval
|
||||
from pathlib import Path
|
||||
|
|
@ -42,11 +41,16 @@ redis_config = {
|
|||
"decode_responses": True,
|
||||
}
|
||||
|
||||
# Static File Definitions
|
||||
static_dir = Path(__file__).parent / "static" / "ui"
|
||||
|
||||
# Main Sanic app definition
|
||||
static_dir = Path(__file__).parent / "static"
|
||||
logger.debug(f"Static Files: {static_dir}")
|
||||
|
||||
app = Sanic(__name__)
|
||||
app.static("/static", str(static_dir))
|
||||
app.static("/ui", str(static_dir))
|
||||
|
||||
logger.debug(app.config)
|
||||
|
||||
# Redis Cache Config
|
||||
r_cache = aredis.StrictRedis(db=params.features.cache.redis_id, **redis_config)
|
||||
|
|
@ -124,6 +128,15 @@ async def handle_404(request, exception):
|
|||
return response.html(html, status=404)
|
||||
|
||||
|
||||
@app.exception(ServerError)
|
||||
async def handle_408(request, exception):
|
||||
"""Renders full error page for invalid URI"""
|
||||
client_addr = get_remote_address(request)
|
||||
count_notfound.labels(exception, path, client_addr).inc()
|
||||
logger.error(f"Error: {exception}, Source: {client_addr}")
|
||||
return response.html(exception, status=408)
|
||||
|
||||
|
||||
@app.exception(RateLimitExceeded)
|
||||
async def handle_429(request, exception):
|
||||
"""Renders full error page for too many site queries"""
|
||||
|
|
@ -148,6 +161,7 @@ async def clear_cache():
|
|||
"""Function to clear the Redis cache"""
|
||||
try:
|
||||
await r_cache.flushdb()
|
||||
return "Successfully cleared cache"
|
||||
except Exception as error_exception:
|
||||
logger.error(f"Error clearing cache: {error_exception}")
|
||||
raise HyperglassError(f"Error clearing cache: {error_exception}")
|
||||
|
|
@ -163,7 +177,7 @@ async def site(request):
|
|||
@app.route("/test", methods=["GET"])
|
||||
async def test_route(request):
|
||||
"""Test route for various tests"""
|
||||
html = render.html("500")
|
||||
html = render.html("results")
|
||||
return response.html(html, status=500)
|
||||
|
||||
|
||||
|
|
@ -232,6 +246,8 @@ async def hyperglass_main(request):
|
|||
starttime = time.time()
|
||||
cache_value = await Execute(lg_data).response()
|
||||
endtime = time.time()
|
||||
if not cache_value:
|
||||
raise handle_408("Request timed out.")
|
||||
elapsedtime = round(endtime - starttime, 4)
|
||||
logger.debug(
|
||||
f"Execution for query {cache_key} took {elapsedtime} seconds to run."
|
||||
|
|
@ -261,3 +277,7 @@ async def hyperglass_main(request):
|
|||
lg_data["target"],
|
||||
).inc()
|
||||
return response.html(response_output, status=response_status)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
cli()
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
{% extends "templates/base.html.j2" %}
|
||||
|
||||
<head>
|
||||
{% block head %}
|
||||
{% include "templates/inlinestyle.html.j2" %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
{% block content %}
|
||||
<div class="ui vertical center aligned segment" id="lg-maincontainer">
|
||||
{% import "templates/errortext.html.j2" as errortext %}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
{% extends "templates/base.html.j2" %}
|
||||
|
||||
<head>
|
||||
{% block head %}
|
||||
{% include "templates/inlinestyle.html.j2" %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
{% block content %}
|
||||
<div class="ui vertical center aligned segment" id="lg-maincontainer">
|
||||
{% import "templates/errortext.html.j2" as errortext %}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html class="h-100">
|
||||
|
||||
<head>
|
||||
<title>{{ branding.site_name }}</title>
|
||||
|
|
@ -16,24 +16,32 @@
|
|||
<meta name="msapplication-TileColor" content="{{ branding.colors.tag.location_title }}" />
|
||||
<meta name="msapplication-config" content="{{ branding.logo.favicons }}browserconfig.xml" />
|
||||
<meta name="theme-color" content="{{ branding.colors.button_submit }}" />
|
||||
<link href="static/css/icofont/icofont.min.css" rel="stylesheet" />
|
||||
<link href="static/semantic/dist/semantic.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="static/css/animsition.min.css" rel="stylesheet" />
|
||||
<!-- <link href="static/css/hyperglass.css" rel="stylesheet" /> -->
|
||||
<link href="ui/hyperglass.css" rel="stylesheet" type="text/css" />
|
||||
{% block head %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body id="root">
|
||||
<body class="d-flex flex-column h-100">
|
||||
<div class="container-fluid d-flex w-100 h-100 p-3 mx-auto flex-column">
|
||||
<header>
|
||||
<div>
|
||||
{% if branding.peering_db.enable %}
|
||||
<nav class="nav nav-masthead justify-content-center float-md-right">
|
||||
<a class="nav-link active" href="https://as{{ general.primary_asn }}.peeringdb.com/"
|
||||
target="_blank">PeeringDB <i class="remixicon-share-circle-line"></i>
|
||||
</a>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main role="main" class="flex-shrink-0">
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
{% block footer %}
|
||||
{% endblock %}
|
||||
<script src="static/js/jquery-3.4.0.min.js"></script>
|
||||
<script src="static/semantic/dist/semantic.min.js"></script>
|
||||
<script src="static/js/clipboard.min.js"></script>
|
||||
<script src="static/js/animsition.min.js"></script>
|
||||
<script src="static/js/hyperglass.js"></script>
|
||||
</main>
|
||||
{% include "templates/footer.html.j2" %}
|
||||
</div>
|
||||
<script src="ui/hyperglass.js"></script>
|
||||
{% if general.google_analytics %}
|
||||
<!--Google Analytics-->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id={{general.google_analytics}}">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<p class="ui ">Powered by <a href="https://github.com/checktheroads/hyperglass" target="_blank">hyperglass</a>.
|
||||
<p><small>Powered by <a href="https://github.com/checktheroads/hyperglass" target="_blank">hyperglass</a>.
|
||||
Source code
|
||||
licensed <a href="https://github.com/checktheroads/hyperglass/blob/master/LICENSE" target="_blank">BSD
|
||||
3-Clause
|
||||
Clear.</a></p>
|
||||
Clear.</a></small></p>
|
||||
|
|
@ -1,39 +1,20 @@
|
|||
{% if branding.footer.enable and branding.credit.enable %}
|
||||
<div class="ui vertical footer segment">
|
||||
<div class="ui center aligned fluid container">
|
||||
<div class="ui vertical basic segments">
|
||||
<div class="ui padded segment" id="lg-footer-text">
|
||||
{{ details.footer.content | safe }}
|
||||
</div>
|
||||
<div class="ui padded segment" id="lg-credit-text">
|
||||
{% include "templates/credit.html.j2" %}
|
||||
</div>
|
||||
<footer class="footer mt-auto py-3">
|
||||
<div class="container text-center">
|
||||
{% if branding.footer.enable and branding.credit.enable %}
|
||||
<div class="col">
|
||||
<small>{{ details.footer.content | safe }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% elif branding.footer.enable and not branding.credit.enable %}
|
||||
<div class="ui vertical footer segment">
|
||||
<div class="ui center aligned fluid container">
|
||||
<div class="ui vertical basic segments">
|
||||
<div class="ui padded segment" id="lg-footer-text">
|
||||
{{ details.footer.content | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% elif branding.credit.enable and not branding.footer.enable %}
|
||||
<div class="ui vertical footer segment">
|
||||
<div class="ui center aligned fluid container">
|
||||
<div class="ui vertical basic segments">
|
||||
<div class="ui padded segment" id="lg-credit-text">
|
||||
<div class="col">
|
||||
{% include "templates/credit.html.j2" %}
|
||||
</div>
|
||||
</div>
|
||||
{% elif not branding.credit.enable and branding.footer.enable %}
|
||||
<div class="col">
|
||||
<small>{{ details.footer.content | safe }}</small>
|
||||
</div>
|
||||
{% elif not branding.footer.enable and branding.credit.enable %}
|
||||
<div class="col">
|
||||
{% include "templates/credit.html.j2" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% elif not branding.footer.enable and not branding.footer.enable %}
|
||||
<div class="ui vertical footer segment">
|
||||
<div class="ui center aligned fluid container">
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</footer>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
@charset "utf-8";
|
||||
|
||||
/* Fonts */
|
||||
@import url('{{ branding.font.primary.url }}');
|
||||
@import url('{{ branding.font.mono.url }}');
|
||||
|
||||
$family-sans-serif: "{{ branding.font.primary.name }}", sans-serif;
|
||||
$family-monospace: "{{ branding.font.mono.name }}", monospace;
|
||||
|
||||
/* Color Changes */
|
||||
$body-background-color: {{ branding.colors.background }};
|
||||
$footer-background-color: transparent;
|
||||
$danger: {{ branding.colors.danger }};
|
||||
|
||||
/* Custom Colors */
|
||||
$lg-btn-submit: {{ branding.colors.button_submit }};
|
||||
$lg-tag-loc_title: {{ branding.colors.tag.location_title }};
|
||||
$lg-tag-type_title: {{ branding.colors.tag.query_type_title }};
|
||||
$lg-tag-type: {{ branding.colors.tag.query_type }};
|
||||
$lg-progressbar: {{ branding.colors.progress_bar }};
|
||||
$lg-tag-loc: {{ branding.colors.tag.location }};
|
||||
|
||||
/* Element Changes */
|
||||
$footer-padding: 3rem 1.5rem 3rem ;
|
||||
|
||||
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
|
||||
@import "utilities/_all";
|
||||
@import "base/_all";
|
||||
@import "elements/_all";
|
||||
@import "components/_all";
|
||||
@import "grid/_all";
|
||||
@import "layout/_all";
|
||||
|
||||
/* Hyperglass Imports */
|
||||
@import "custom/custom_elements";
|
||||
|
|
@ -1,106 +1,72 @@
|
|||
{% extends "templates/base.html.j2" %}
|
||||
|
||||
<head>
|
||||
{% block head %}
|
||||
{% include "templates/inlinestyle.html.j2" %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
{# {% include "templates/ratelimit-query.html.j2" %} #}
|
||||
|
||||
{% block content %}
|
||||
{% include "templates/ratelimit-query.html.j2" %}
|
||||
{% if branding.peering_db.enable %}
|
||||
<div class="ui secondary menu">
|
||||
<div class="right menu">
|
||||
<a href="https://as{{ general.primary_asn }}.peeringdb.com/" target="_blank" class="item">
|
||||
PeeringDB
|
||||
<i class="sign out alternate icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="ui vertical center aligned segment" id="lg-maincontainer">
|
||||
<div class="ui content container animsition" data-animsition-out-class="fade-out-right"
|
||||
data-animsition-in-class="fade-in-left" id="lg-form">
|
||||
<div id="hg-parent" class="mx-auto">
|
||||
<div class="container animsition" data-animsition-out-class="fade-out-right" data-animsition-in-class="fade-in-left"
|
||||
id="hg-form">
|
||||
{% import "templates/title.html.j2" as title %}
|
||||
{{ title.title(branding, primary_asn, size_title="h1", size_subtitle="h3") }}
|
||||
<form class="ui huge form" onsubmit="return false" name="queryform" id="lgForm" action="?" method="POST">
|
||||
<div class="two fields">
|
||||
<div class="field">
|
||||
<div class="ui fluid search selection dropdown" id="location">
|
||||
<input type="hidden" name="location">
|
||||
<div class="default text">{{ branding.text.location }}</div>
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu">
|
||||
{% for (netname, loc_params) in networks.items() %}
|
||||
<div class="divider"></div>
|
||||
<div class="header">
|
||||
<i class="globe icon"></i>
|
||||
{{ netname }}
|
||||
</div>
|
||||
{{ title.title(branding, primary_asn, size_title="h1", size_subtitle="h4", align="center") }}
|
||||
<form onsubmit="return false" name="queryform" id="lgForm" action="?" method="POST">
|
||||
<div class="form-row mb-3">
|
||||
<div class="col">
|
||||
<select multiple class="form-control form-control-lg hg-select" id="location" data-live-search="true"
|
||||
title="{{ branding.text.location }}">
|
||||
{% for (netname, loc_params) in networks.items() %}
|
||||
<optgroup label="{{ netname }}">
|
||||
{% for param in loc_params %}
|
||||
<div class="item" data-value='{{param["hostname"]}}'>
|
||||
{{param["display_name"]}}
|
||||
</div>
|
||||
<input type="hidden" id='{{param["hostname"]}}' name='{{param["display_name"]}}' value="{{ netname }}">
|
||||
<option data-tokens='{{ netname }} {{param["hostname"]}}' value='{{param["hostname"]}}'
|
||||
data-display-name='{{param["display_name"]}}' data-netname="{{ netname }}" id='{{param["hostname"]}}'>
|
||||
{{ param["display_name"] }}</option>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</optgroup>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui selection dropdown left icon" id="query_type">
|
||||
<input type="hidden" name="query_type">
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">{{ branding.text.query_type }}</div>
|
||||
<div class="ui menu">
|
||||
{% if features.bgp_route.enable %}
|
||||
<div class="item feature-selection" id="type_bgp_route" data-value="bgp_route">
|
||||
{{ branding.text.bgp_route }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if features.bgp_community.enable == true %}
|
||||
<div class="item feature-selection" id="type_bgp_community" data-value="bgp_community">
|
||||
{{ branding.text.bgp_community }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if features.bgp_aspath.enable == true %}
|
||||
<div class="item feature-selection" id="type_bgp_aspath" data-value="bgp_aspath">
|
||||
{{ branding.text.bgp_aspath }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if features.ping.enable == true %}
|
||||
<div class="item feature-selection" id="type_ping" data-value="ping">
|
||||
{{ branding.text.ping }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if features.traceroute.enable == true %}
|
||||
<div class="item feature-selection" id="type_traceroute" data-value="traceroute">
|
||||
{{ branding.text.traceroute }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col">
|
||||
<select class="form-control form-control-lg hg-select" id="query_type"
|
||||
title="{{ branding.text.query_type }}" data-live-search="true">
|
||||
{% if features.bgp_route.enable %}
|
||||
<option id="bgp_route" value="bgp_route" data-display-name="{{ branding.text.bgp_route }}">
|
||||
{{ branding.text.bgp_route }}</option>
|
||||
{% endif %}
|
||||
{% if features.bgp_community.enable %}
|
||||
<option id="bgp_community" value="bgp_community" data-display-name="{{ branding.text.bgp_community }}">
|
||||
{{ branding.text.bgp_community }}</option>
|
||||
{% endif %}
|
||||
{% if features.bgp_aspath.enable %}
|
||||
<option id="bgp_aspath" value="bgp_aspath" data-display-name="{{ branding.text.bgp_aspath }}">
|
||||
{{ branding.text.bgp_aspath }}</option>
|
||||
{% endif %}
|
||||
{% if features.ping.enable %}
|
||||
<option id="ping" value="ping" data-display-name="{{ branding.text.ping }}">{{ branding.text.ping }}
|
||||
</option>
|
||||
{% endif %}
|
||||
{% if features.traceroute.enable %}
|
||||
<option id="type_traceroute" value="traceroute" data-display-name="{{ branding.text.traceroute }}">
|
||||
{{ branding.text.traceroute }}</option>
|
||||
{% endif %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row mb-3">
|
||||
<div class="col">
|
||||
<div class="input-group input-group-lg">
|
||||
<input class="form-control" type="text" placeholder="{{ branding.text.query_placeholder }}"
|
||||
aria-label="{{ branding.text.query_placeholder }}" aria-describedby="target" id="target">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary" id="hg-submit-button" type="submit">
|
||||
<div id="hg-submit-icon">
|
||||
<i class="remixicon-search-line"></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" id="field-target">
|
||||
<div class="ui fluid icon input">
|
||||
<input type="text" placeholder="{{ branding.text.query_placeholder }}" id="target">
|
||||
<i class="search link icon" id="submit_button"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui hidden message"></div>
|
||||
</form>
|
||||
<div class="ui popup" id="bgpr_help_content">{{ info["bgp_route"]["content"] | safe }}</div>
|
||||
<div class="ui popup" id="bgpc_help_content">{{ info["bgp_community"]["content"] | safe }}<div class="ui divider">
|
||||
</div>{{ details["bgp_community"]["content"] | safe }}</div>
|
||||
<div class="ui popup" id="bgpa_help_content">{{ info["bgp_aspath"]["content"] | safe }}<div class="ui divider">
|
||||
</div>{{ details["bgp_aspath"]["content"] | safe }}</div>
|
||||
<div class="ui popup" id="ping_help_content">{{ info["ping"]["content"] | safe }}</div>
|
||||
<div class="ui popup" id="traceroute_help_content">{{ info["traceroute"]["content"] | safe }}</div>
|
||||
</div>
|
||||
{% include "templates/results.html.j2" %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block footer %}
|
||||
{% include "templates/footer.html.j2" %}
|
||||
{% endblock %}
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<style type="text/css">
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.container {
|
||||
width: 700px;
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
#lg-results a {
|
||||
color: rgba(0, 0, 0, .87);
|
||||
}
|
||||
|
||||
#lg-maincontainer {
|
||||
padding-top: 36px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#lg-results-output {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.ui.content.container {
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.ui.vertical.segment footer.ui.segment {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.ui.huge.header {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.ui.fluid.container {
|
||||
height: 75%;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
#lg-footer-text,
|
||||
#lg-credit-text {
|
||||
font-size: 75%;
|
||||
margin-left: 12.5%;
|
||||
margin-right: 12.5%;
|
||||
}
|
||||
|
||||
#lg-credit-text a,
|
||||
#lg-footer-text a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#clip-button {
|
||||
float: right;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,29 +1,20 @@
|
|||
<div class="ui content fluid left aligned container animsition" data-animsition-out-class="fade-out-left"
|
||||
data-animsition-in-class="fade-in-right" id="lg-results">
|
||||
{% import "templates/title.html.j2" as title %}
|
||||
{{ title.title(branding, primary_asn, size_title="h1", size_subtitle="h3") }}
|
||||
<div class="ui segments">
|
||||
<div class="ui padded fluid segment">
|
||||
<h2 class="ui header">
|
||||
<a href="#" id="results_back"><i class="icon angle left"></i></a>
|
||||
<div class="content">
|
||||
{{ branding.text.results }}
|
||||
<div class="container animsition" data-animsition-out-class="fade-out-left" data-animsition-in-class="fade-in-right"
|
||||
id="hg-results">
|
||||
{% import "templates/title.html.j2" as title %}
|
||||
{{ title.title(branding, primary_asn, size_title="h1", size_subtitle="h4", align="left") }}
|
||||
<div class="container mb-lg-1 mt-lg-1">
|
||||
<div class="row mb-lg-1">
|
||||
<div class="col align-self-center">
|
||||
<button type="button" id="hg-back" class="float-left btn btn-light btn-lg">
|
||||
<i class="remixicon-arrow-left-s-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-lg-1">
|
||||
<div class="col align-self-center">
|
||||
<div class="accordion" id="hg-accordion">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
<div id="results_detail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui padded fluid segment">
|
||||
<!-- <button class="ui basic right floated icon button" id="clip-button" data-clipboard-target="#lg-results-segment"><i
|
||||
class="copy outline icon" id="clip-icon"></i></button> -->
|
||||
<i id="clip-button" data-clipboard-target="#lg-results-segment" data-content="Copy Output"
|
||||
class="copy link icon"></i>
|
||||
<div id="lg-results-segment"></div>
|
||||
</div>
|
||||
{% if features.cache.show_text %}
|
||||
<div class="ui padded fluid segment">
|
||||
<span class="ui small text">{{ features.cache.text }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,19 +1,21 @@
|
|||
{% macro title(branding, primary_asn, size_title="h1", size_subtitle="h3") -%}
|
||||
{% macro title(branding, primary_asn, size_title="h1", size_subtitle="h4", align="center") -%}
|
||||
<div class="container-fluid text-{{ align }}">
|
||||
{% if branding.text.title_mode == 'text_only' %}
|
||||
<{{ size_title }} class="ui header">{{ branding.text.title }}</{{ size_title }}>
|
||||
<{{ size_subtitle }} class="ui header">{{ branding.text.subtitle.format(primary_asn=primary_asn) }}</{{ size_subtitle }}>
|
||||
<{{ size_title }}>{{ branding.text.title }}</{{ size_title }}>
|
||||
<{{ size_subtitle }}>{{ branding.text.subtitle.format(primary_asn=primary_asn) }}</{{ size_subtitle }}>
|
||||
<br>
|
||||
{% elif branding.text.title_mode == 'all' %}
|
||||
<img src="{{ branding.logo.path }}" style="width: {{ branding.logo.width }}px;">
|
||||
<{{ size_title }} class="ui header">{{ branding.text.title }}</{{ size_title }}>
|
||||
<{{ size_subtitle }} class="ui header">{{ branding.text.subtitle.format(primary_asn=primary_asn) }}</{{ size_subtitle }}>
|
||||
<{{ size_title }}>{{ branding.text.title }}</{{ size_title }}>
|
||||
<{{ size_subtitle }}>{{ branding.text.subtitle.format(primary_asn=primary_asn) }}</{{ size_subtitle }}>
|
||||
<br>
|
||||
{% elif branding.text.title_mode == 'logo_title' %}
|
||||
<img src="{{ branding.logo.path }}" style="width: {{ branding.logo.width }}px;">
|
||||
<{{ size_title }} class="ui header">{{ branding.text.title }}</{{ size_title }}>
|
||||
<{{ size_title }}>{{ branding.text.title }}</{{ size_title }}>
|
||||
<br>
|
||||
{% elif branding.text.title_mode == 'logo_only' %}
|
||||
<img src="{{ branding.logo.path }}" style="width: {{ branding.logo.width }}px;">
|
||||
<br>
|
||||
{% endif %}
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
12
hyperglass/static/.eslintrc.yml
Normal file
12
hyperglass/static/.eslintrc.yml
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
env:
|
||||
browser: true
|
||||
es6: true
|
||||
extends:
|
||||
- airbnb-base
|
||||
globals:
|
||||
Atomics: readonly
|
||||
SharedArrayBuffer: readonly
|
||||
parserOptions:
|
||||
ecmaVersion: 2018
|
||||
sourceType: module
|
||||
rules: {}
|
||||
8
hyperglass/static/.gitignore
vendored
8
hyperglass/static/.gitignore
vendored
|
|
@ -1,3 +1,9 @@
|
|||
.DS_Store
|
||||
.sass-cache/
|
||||
node_modules/
|
||||
package-lock.json
|
||||
semantic/
|
||||
semantic.json
|
||||
old/
|
||||
*.tmp*
|
||||
.cache
|
||||
yarn-error.log
|
||||
|
|
|
|||
2
hyperglass/static/css/.gitignore
vendored
2
hyperglass/static/css/.gitignore
vendored
|
|
@ -1,2 +0,0 @@
|
|||
.DS_Store
|
||||
hyperglass.css
|
||||
7
hyperglass/static/css/animsition.min.css
vendored
7
hyperglass/static/css/animsition.min.css
vendored
File diff suppressed because one or more lines are too long
2
hyperglass/static/custom/.gitignore
vendored
2
hyperglass/static/custom/.gitignore
vendored
|
|
@ -1,2 +0,0 @@
|
|||
*
|
||||
!.gitignore
|
||||
4
hyperglass/static/hyperglass.css
Normal file
4
hyperglass/static/hyperglass.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import './main.scss';
|
||||
@import './node_modules/animsition/dist/css/animsition.min.css';
|
||||
@import './node_modules/remixicon/fonts/remixicon.css';
|
||||
@import './node_modules/bootstrap-select/dist/css/bootstrap-select.min.css';
|
||||
216
hyperglass/static/hyperglass.es6
Normal file
216
hyperglass/static/hyperglass.es6
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
// Module Imports
|
||||
global.jQuery = require('jquery');
|
||||
const $ = jQuery;
|
||||
const Popper = require('popper.js');
|
||||
const bootstrap = require('bootstrap');
|
||||
const selectpicker = require('bootstrap-select');
|
||||
const animsition = require('animsition');
|
||||
const ClipboardJS = require('clipboard');
|
||||
|
||||
const status_refresh = '<i class="remixicon-refresh-line hg-menu-icon"></i>';
|
||||
|
||||
$('#location').selectpicker({
|
||||
liveSearchNormalize: true,
|
||||
style: '',
|
||||
styleBase: 'form-control',
|
||||
iconBase: '',
|
||||
tickIcon: 'remixicon-check-line',
|
||||
});
|
||||
|
||||
$('#query_type').selectpicker({
|
||||
liveSearchNormalize: true,
|
||||
style: '',
|
||||
styleBase: 'form-control',
|
||||
iconBase: '',
|
||||
tickIcon: 'remixicon-check-line',
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
$('#hg-results').hide();
|
||||
$('.animsition').animsition({
|
||||
inClass: 'fade-in',
|
||||
outClass: 'fade-out',
|
||||
inDuration: 800,
|
||||
outDuration: 800,
|
||||
transition: (url) => { window.location.href = url; },
|
||||
});
|
||||
|
||||
$('#hg-form').animsition('in');
|
||||
});
|
||||
|
||||
$('#hg-back').click(() => {
|
||||
$('.hg-select').selectpicker('deselectAll');
|
||||
$('#hg-results').animsition('out', $('#hg-form'), '#');
|
||||
$('#hg-results').hide();
|
||||
$('#hg-form').show();
|
||||
$('#hg-form').animsition('in');
|
||||
$('#hg-accordion').empty();
|
||||
});
|
||||
|
||||
const queryApp = (queryType, queryTypeName, locationList, target) => {
|
||||
let results_title = `${queryTypeName} Query for ${target}`;
|
||||
|
||||
$('#hg-results-title').html(results_title);
|
||||
|
||||
$('#hg-submit-icon').empty().removeClass('hg-loading').html('<i class="remixicon-search-line"></i>');
|
||||
|
||||
$.each(locationList, (n, loc) => {
|
||||
let location_name = $(`#${loc}`).data('display-name');
|
||||
let network_name = $(`#${loc}`).data('netname');
|
||||
|
||||
let contentHtml = `
|
||||
<div class="card" id="${loc}-output">
|
||||
<div class="card-header bg-light text-dark" id="${loc}-heading">
|
||||
<div class="float-right hg-status-container" id="${loc}-status-container">
|
||||
<button type="button" class="float-right btn btn-light btn-lg hg-menu-btn hg-status-btn"
|
||||
data-location="${loc}" id="${loc}-status-btn" disabled>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="float-right btn btn-light btn-lg hg-menu-btn hg-copy-btn"
|
||||
data-clipboard-target="#${loc}-text" id="${loc}-copy-btn" disabled>
|
||||
<i class="remixicon-file-copy-line hg-menu-icon hg-copy hg-copy-icon"></i>
|
||||
</button>
|
||||
<h2 class="mb-0" id="${loc}-heading-container">
|
||||
<button class="btn btn-link text-secondary" type="button" data-toggle="collapse"
|
||||
data-target="#${loc}-content" aria-expanded="true" aria-controls="${loc}-content"
|
||||
id="${loc}-heading-text">
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="collapse" id="${loc}-content" aria-labelledby="${loc}-heading" data-parent="#hg-accordion">
|
||||
<div class="card-body" id="${loc}-text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if ($(`#${loc}-output`).length) {
|
||||
$(`#${loc}-output`).replaceWith(contentHtml);
|
||||
} else {
|
||||
$('#hg-accordion').append(contentHtml);
|
||||
}
|
||||
// let status_container = `<div class="float-left hg-status-container" id="${loc}-status-container"></div>`
|
||||
let status_loading = `<i id="${loc}-spinner" class="hg-menu-icon hg-status-icon remixicon-loader-4-line text-secondary"></i>`;
|
||||
|
||||
// $(`#${loc}-heading-container`).prepend(status_container);
|
||||
$(`#${loc}-heading-text`).text(location_name);
|
||||
$(`#${loc}-status-container`)
|
||||
.addClass('hg-loading')
|
||||
.find('.hg-status-btn')
|
||||
.empty()
|
||||
.html(status_loading);
|
||||
|
||||
const generateError = (errorClass, loc, text) => {
|
||||
let status_error = '<i class="hg-menu-icon hg-status-icon remixicon-alert-line"></i>';
|
||||
$(`#${loc}-heading`).removeClass('text-secondary bg-light').addClass(`bg-${errorClass}`);
|
||||
$(`#${loc}-heading-text`).removeClass('text-secondary');
|
||||
$(`#${loc}-heading`).find('.hg-menu-btn').removeClass('btn-light').addClass(`btn-${errorClass}`);
|
||||
$(`#${loc}-status-container`)
|
||||
.removeClass('hg-loading')
|
||||
.find('.hg-status-btn')
|
||||
.empty()
|
||||
.html(status_error);
|
||||
$(`#${loc}-text`).html(text);
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: '/lg',
|
||||
type: 'POST',
|
||||
data: JSON.stringify({
|
||||
location: loc,
|
||||
query_type: queryType,
|
||||
target: target,
|
||||
}),
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
context: document.body,
|
||||
async: true,
|
||||
timeout: 15000,
|
||||
})
|
||||
.done((data, textStatus, jqXHR) => {
|
||||
let response_pre = `<pre>${jqXHR.responseText}</pre>`;
|
||||
let status_success = '<i class="hg-menu-icon hg-status-icon remixicon-check-line"></i>';
|
||||
$(`#${loc}-heading`).removeClass('text-secondary bg-light').addClass('bg-primary');
|
||||
$(`#${loc}-heading-text`).removeClass('text-secondary');
|
||||
$(`#${loc}-heading`).find('.hg-menu-btn').removeClass('btn-light').addClass('btn-primary');
|
||||
$(`#${loc}-status-container`)
|
||||
.removeClass('hg-loading')
|
||||
.find('.hg-status-btn')
|
||||
.empty()
|
||||
.html(status_success);
|
||||
$(`#${loc}-text`).empty().html(response_pre);
|
||||
})
|
||||
.fail((jqXHR, textStatus, errorThrown) => {
|
||||
let codes_danger = [401, 415, 500, 501, 503];
|
||||
let codes_warning = [405];
|
||||
if (textStatus === 'timeout') {
|
||||
let text = 'Request timed out.';
|
||||
let response_html = `<div class="alert alert-warning" role="alert">${text}</div>`;
|
||||
let tab_timeout = '<i class="remixicon-time-line"></i>';
|
||||
|
||||
$(`#${loc}-heading`).removeClass('text-secondary bg-light').addClass('bg-warning');
|
||||
$(`#${loc}-heading-text`).removeClass('text-secondary');
|
||||
$(`#${loc}-status-container`).empty().removeClass('hg-loading').html(tab_timeout);
|
||||
$(`#${loc}-heading`).find('.hg-menu-btn').removeClass('btn-light').addClass('btn-warning');
|
||||
$(`#${loc}-text`).html(response_html);
|
||||
} else if (codes_danger.includes(jqXHR.status)) {
|
||||
generateError('danger', loc, jqXHR.responseText);
|
||||
} else if (codes_warning.includes(jqXHR.status)) {
|
||||
generateError('warning', loc, jqXHR.responseText);
|
||||
}
|
||||
})
|
||||
.always(() => {
|
||||
$(`#${loc}-status-btn`).removeAttr('disabled');
|
||||
$(`#${loc}-copy-btn`).removeAttr('disabled');
|
||||
});
|
||||
$(`#${locationList[0]}-content`).collapse('show');
|
||||
});
|
||||
};
|
||||
|
||||
// Submit Form Action
|
||||
$('#lgForm').submit((event) => {
|
||||
event.preventDefault();
|
||||
$('#hg-submit-icon').empty().html('<i class="remixicon-loader-4-line"></i>').addClass('hg-loading');
|
||||
let query_type = $("#query_type").val();
|
||||
let query_type_title = $(`#${query_type}`).data('display-name');
|
||||
let location = $('#location').val();
|
||||
let target = $('#target').val();
|
||||
queryApp(query_type, query_type_title, location, target);
|
||||
$('#hg-form').animsition('out', $('#hg-results'), '#');
|
||||
$('#hg-form').hide();
|
||||
$('#hg-results').show();
|
||||
$('#hg-results').animsition('in');
|
||||
$('#hg-submit-spinner').remove();
|
||||
});
|
||||
|
||||
const clipboard = new ClipboardJS('.hg-copy-btn');
|
||||
clipboard.on('success', (e) => {
|
||||
$(e.trigger).find('.hg-copy-icon').removeClass('remixicon-file-copy-line').addClass('remixicon-task-line');
|
||||
e.clearSelection();
|
||||
setTimeout(() => {
|
||||
$(e.trigger).find('.hg-copy-icon').removeClass('remixicon-task-line').addClass('remixicon-file-copy-line');
|
||||
}, 800);
|
||||
});
|
||||
clipboard.on('error', (e) => {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
$('#hg-accordion').on('mouseenter', '.hg-status-btn', (e) => {
|
||||
$(e.currentTarget)
|
||||
.find('.hg-status-icon')
|
||||
.addClass('remixicon-repeat-line');
|
||||
});
|
||||
|
||||
$('#hg-accordion').on('mouseleave', '.hg-status-btn', (e) => {
|
||||
$(e.currentTarget)
|
||||
.find('.hg-status-icon')
|
||||
.removeClass('remixicon-repeat-line');
|
||||
});
|
||||
|
||||
$('#hg-accordion').on('click', '.hg-status-btn', (e) => {
|
||||
let loc_id = $(e.currentTarget).data('location');
|
||||
console.log(`Refreshing ${loc_id}`);
|
||||
let query_type = $('#query_type').val();
|
||||
let query_type_title = $(`#${query_type}`).data('display-name');
|
||||
let target = $('#target').val();
|
||||
queryApp(query_type, query_type_title, [loc_id,], target);
|
||||
});
|
||||
1
hyperglass/static/js/.gitignore
vendored
1
hyperglass/static/js/.gitignore
vendored
|
|
@ -1 +0,0 @@
|
|||
.DS_Store
|
||||
8
hyperglass/static/js/animsition.min.js
vendored
8
hyperglass/static/js/animsition.min.js
vendored
File diff suppressed because one or more lines are too long
7
hyperglass/static/js/clipboard.min.js
vendored
7
hyperglass/static/js/clipboard.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,219 +0,0 @@
|
|||
// Get the list of locations for the selected Network
|
||||
|
||||
var progress = $("#progress");
|
||||
var resultsbox = $("#resultsbox");
|
||||
var target_error = $("#target_error");
|
||||
var target_input = $("#target");
|
||||
// adjustDropdowns();
|
||||
clearPage();
|
||||
|
||||
$(".selection.dropdown").dropdown({
|
||||
fullTextSearch: true,
|
||||
match: "both",
|
||||
allowCategorySelection: true,
|
||||
ignoreCare: true
|
||||
});
|
||||
|
||||
$("#type_bgp_route").popup({
|
||||
hoverable: true,
|
||||
variation: "wide",
|
||||
position: "right center",
|
||||
html: $("#bgpr_help_content").html()
|
||||
});
|
||||
|
||||
$("#type_bgp_community").popup({
|
||||
hoverable: true,
|
||||
variation: "wide",
|
||||
position: "right center",
|
||||
html: $("#bgpc_help_content").html()
|
||||
});
|
||||
|
||||
$("#type_bgp_aspath").popup({
|
||||
hoverable: true,
|
||||
variation: "wide",
|
||||
position: "right center",
|
||||
html: $("#bgpa_help_content").html()
|
||||
});
|
||||
|
||||
$("#type_ping").popup({
|
||||
hoverable: true,
|
||||
variation: "wide",
|
||||
position: "right center",
|
||||
html: $("#ping_help_content").html()
|
||||
});
|
||||
|
||||
$("#type_traceroute").popup({
|
||||
hoverable: true,
|
||||
variation: "wide",
|
||||
position: "right center",
|
||||
html: $("#traceroute_help_content").html()
|
||||
});
|
||||
|
||||
// ClipboardJS Elements
|
||||
var clip_button = document.getElementById("clip-button");
|
||||
var clipboard = new ClipboardJS(clip_button);
|
||||
clipboard.on("success", function (e) {
|
||||
$("#clip-button")
|
||||
.removeClass("copy link icon")
|
||||
.addClass("green check icon");
|
||||
e.clearSelection();
|
||||
setTimeout(function () {
|
||||
$("#clip-button")
|
||||
.removeClass("green check icon")
|
||||
.addClass("copy link icon");
|
||||
}, 800);
|
||||
});
|
||||
clipboard.on("error", function (e) {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
function clearErrors() {
|
||||
$("#lgForm").removeClass("error");
|
||||
$("#lgForm").removeClass("warning");
|
||||
$("#lgForm > div.ui.message").html("").removeClass("error").addClass("hidden");
|
||||
$("#field-target").removeClass("error");
|
||||
$(".ui.fluid.icon.input").removeClass("loading");
|
||||
}
|
||||
|
||||
function clearPage() {
|
||||
$(".ui.fluid.icon.input").removeClass("loading");
|
||||
progress.hide();
|
||||
resultsbox.hide();
|
||||
target_error.hide();
|
||||
if (target_input.hasClass("is-warning")) {
|
||||
target_input.removeClass("is-warning");
|
||||
}
|
||||
if (target_input.hasClass("is-danger")) {
|
||||
target_input.removeClass("is-danger");
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('#lg-results').hide();
|
||||
$(".animsition").animsition({
|
||||
inClass: 'fade-in',
|
||||
outClass: 'fade-out',
|
||||
inDuration: 800,
|
||||
outDuration: 800,
|
||||
transition: function (url) { window.location.href = url; }
|
||||
});
|
||||
|
||||
$('#lg-form').animsition('in');
|
||||
});
|
||||
|
||||
$("#results_back").on("click", function () {
|
||||
$('#lg-results').animsition('out', $('#lg-form'), '#');
|
||||
$('#lg-results').hide();
|
||||
$('#lg-form').show();
|
||||
$('#lg-form').animsition('in');
|
||||
})
|
||||
|
||||
// Submit Form Action
|
||||
$("#lgForm").form().submit(function (event) {
|
||||
event.preventDefault();
|
||||
clearErrors();
|
||||
submitForm();
|
||||
});
|
||||
|
||||
$("#submit_button").on("click", function () {
|
||||
clearErrors();
|
||||
submitForm();
|
||||
})
|
||||
|
||||
function buildError(msgClass, msg) {
|
||||
var msgHtml = [
|
||||
'<div class="ui ',
|
||||
msgClass,
|
||||
' message transition hidden>',
|
||||
'<i class="close icon"></i>',
|
||||
'<p>',
|
||||
msg,
|
||||
'</p>',
|
||||
'</div>'
|
||||
].join("");
|
||||
return msgHtml;
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
clearErrors();
|
||||
var query_type = $("#query_type").dropdown("get value");
|
||||
var query_type_title = $("#query_type").dropdown("get text");
|
||||
var location = $("#location").dropdown("get value");
|
||||
var location_name = $("#location").dropdown("get text");
|
||||
var target = $("#target").val();
|
||||
console.log(query_type);
|
||||
console.log(location);
|
||||
console.log(target);
|
||||
|
||||
network = $("#" + location).val();
|
||||
|
||||
var tags = [
|
||||
'<div class="ui label">',
|
||||
network,
|
||||
'<div class="detail">',
|
||||
location_name,
|
||||
"</div>",
|
||||
"</div>",
|
||||
'<div class="ui label">',
|
||||
query_type_title,
|
||||
'<div class="detail">',
|
||||
target,
|
||||
"</div>",
|
||||
"</div>"
|
||||
].join("");
|
||||
|
||||
$("#results_detail").html(tags);
|
||||
$(".ui.fluid.icon.input").addClass("loading");
|
||||
|
||||
$.ajax({
|
||||
url: "/lg",
|
||||
type: "POST",
|
||||
data: JSON.stringify({
|
||||
location: location,
|
||||
query_type: query_type,
|
||||
target: target
|
||||
}),
|
||||
contentType: "application/json; charset=utf-8",
|
||||
context: document.body,
|
||||
statusCode: {
|
||||
200: function (response, code) {
|
||||
$('#lg-form').animsition('out', $('#lg-results'), '#');
|
||||
$('#lg-results').show();
|
||||
$('#lg-results').animsition('in');
|
||||
response_html = [
|
||||
'<pre>',
|
||||
response,
|
||||
"</pre>"
|
||||
].join("");
|
||||
$(".ui.fluid.icon.input").removeClass("loading");
|
||||
$("#lg-results-segment").html(response_html);
|
||||
},
|
||||
401: function (response, code) {
|
||||
$("#lgForm").addClass("error");
|
||||
$("#lgForm > div.ui.hidden.message").html(response.responseText).addClass("error").removeClass("hidden");
|
||||
$("#field-target").addClass("error");
|
||||
$(".ui.fluid.icon.input").removeClass("loading");
|
||||
},
|
||||
405: function (response, code) {
|
||||
$("#lgForm").addClass("error");
|
||||
$("#lgForm > div.ui.hidden.message").html(response.responseText).addClass("error").removeClass("hidden");
|
||||
$("#field-target").addClass("error");
|
||||
$(".ui.fluid.icon.input").removeClass("loading");
|
||||
},
|
||||
415: function (response, code) {
|
||||
$("#lgForm").addClass("warning");
|
||||
$("#lgForm > div.ui.hidden.message").html(response.responseText).addClass("warning").removeClass("hidden");
|
||||
$(".ui.fluid.icon.input").removeClass("loading");
|
||||
},
|
||||
429: function (response, code) {
|
||||
$("#ratelimit").modal("show");
|
||||
},
|
||||
504: function (response, code) {
|
||||
$("#lgForm").addClass("error");
|
||||
$("#lgForm > div.ui.hidden.message").html(response.responseText).addClass("error").removeClass("hidden");
|
||||
$("#field-target").addClass("error");
|
||||
$(".ui.fluid.icon.input").removeClass("loading");
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
2
hyperglass/static/js/jquery-3.4.0.min.js
vendored
2
hyperglass/static/js/jquery-3.4.0.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
13
hyperglass/static/main.scss
Normal file
13
hyperglass/static/main.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// Functions
|
||||
|
||||
@function findTextColor($color) {
|
||||
@if (lightness($color) > 50) {
|
||||
@return $dark;
|
||||
} @else {
|
||||
@return $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Imports
|
||||
@import "./node_modules/bootstrap/scss/bootstrap";
|
||||
@import "./overrides.sass";
|
||||
95
hyperglass/static/overrides.sass
Normal file
95
hyperglass/static/overrides.sass
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
#hg-form
|
||||
margin-top: 20% !important
|
||||
max-width: 75%
|
||||
.nav-masthead
|
||||
.nav-link
|
||||
& + .nav-link
|
||||
margin-left: 1rem
|
||||
|
||||
// Fixes input group issue where button is 1px taller than the input element (default is 2px)
|
||||
.input-group-lg > .form-control:not(textarea),
|
||||
.input-group-lg > .custom-select,
|
||||
.bootstrap-select.form-control-lg .dropdown-toggle
|
||||
height: calc(1.5em + 1rem + 3px) !important
|
||||
|
||||
#hg-accordion
|
||||
.btn-link
|
||||
font-weight: 200
|
||||
font-size: 1.4rem
|
||||
|
||||
.hg-menu-btn
|
||||
-webkit-transition: none
|
||||
-moz-transition: none
|
||||
-o-transition: none
|
||||
transition: none
|
||||
|
||||
.hg-menu-icon
|
||||
-webkit-transition: all 0.5s ease
|
||||
-moz-transition: all 0.5s ease
|
||||
-o-transition: all 0.5s ease
|
||||
transition: all 0.5s ease
|
||||
|
||||
.tab-content
|
||||
overflow: hidden
|
||||
|
||||
.tab-pane
|
||||
& > pre
|
||||
min-height: 45vh
|
||||
max-height: 60vh
|
||||
-ms-overflow-style: none
|
||||
scrollbar-width: none
|
||||
|
||||
::-webkit-scrollbar
|
||||
width: 0px
|
||||
background: transparent
|
||||
|
||||
.hg-status-container
|
||||
display: inline-block
|
||||
text-align: center
|
||||
vertical-align: middle
|
||||
line-height: 1.5
|
||||
|
||||
.hg-loading
|
||||
animation: spinner-border .75s linear infinite
|
||||
|
||||
.accordion
|
||||
div
|
||||
&.card
|
||||
&:only-child
|
||||
border-bottom: $card-border-width solid $card-border-color
|
||||
|
||||
.btn:focus,.btn:active
|
||||
outline: none !important
|
||||
box-shadow: none
|
||||
|
||||
.bg-primary
|
||||
*
|
||||
color: findTextColor($primary) !important
|
||||
|
||||
.bg-secondary
|
||||
*
|
||||
color: findTextColor($secondary) !important
|
||||
|
||||
.bg-success
|
||||
*
|
||||
color: findTextColor($success) !important
|
||||
|
||||
.bg-danger
|
||||
*
|
||||
color: findTextColor($danger) !important
|
||||
|
||||
.bg-warning
|
||||
*
|
||||
color: findTextColor($warning) !important
|
||||
|
||||
.bg-info
|
||||
*
|
||||
color: findTextColor($info) !important
|
||||
|
||||
.bg-light
|
||||
*
|
||||
color: findTextColor($light) !important
|
||||
|
||||
.bg-dark
|
||||
*
|
||||
color: findTextColor($dark) !important
|
||||
39
hyperglass/static/package.json
Normal file
39
hyperglass/static/package.json
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"name": "hyperglass",
|
||||
"version": "1.0.0",
|
||||
"description": "Front end utilities for hyperglass",
|
||||
"main": "hyperglass.js",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.0.0-0",
|
||||
"@babel/preset-env": "^7.5.5",
|
||||
"animsition": "^4.0.2",
|
||||
"bootstrap": "^4.3.1",
|
||||
"bootstrap-select": "^1.13.10",
|
||||
"clipboard": "^2.0.4",
|
||||
"jquery": "^3.4.1",
|
||||
"parcel-bundler": "^1.12.3",
|
||||
"popper.js": "^1.15.0",
|
||||
"remixicon": "^1.3.1",
|
||||
"sass": "^1.22.9",
|
||||
"tinyify": "^2.5.1",
|
||||
"watchify": "^3.11.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"cssnano": "^4.1.10",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-config-airbnb-base": "^13.2.0",
|
||||
"eslint-plugin-import": "^2.18.2"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "parcel build --no-cache --bundle-node-modules --public-url /ui/ --out-dir ./ui hyperglass.es6 hyperglass.css"
|
||||
},
|
||||
"author": "https://github.com/checktheroads",
|
||||
"license": "BSD-3-Clause-Clear",
|
||||
"babel": {
|
||||
"presets": [
|
||||
"@babel/preset-react"
|
||||
]
|
||||
}
|
||||
}
|
||||
2
hyperglass/static/sass/.gitignore
vendored
2
hyperglass/static/sass/.gitignore
vendored
|
|
@ -1,2 +0,0 @@
|
|||
.DS_Store
|
||||
hyperglass.scss
|
||||
5
hyperglass/static/sass/base/_all.sass
vendored
5
hyperglass/static/sass/base/_all.sass
vendored
|
|
@ -1,5 +0,0 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "minireset.sass"
|
||||
@import "generic.sass"
|
||||
@import "helpers.sass"
|
||||
130
hyperglass/static/sass/base/generic.sass
vendored
130
hyperglass/static/sass/base/generic.sass
vendored
|
|
@ -1,130 +0,0 @@
|
|||
$body-background-color: $white !default
|
||||
$body-size: 16px !default
|
||||
$body-rendering: optimizeLegibility !default
|
||||
$body-family: $family-primary !default
|
||||
$body-color: $text !default
|
||||
$body-weight: $weight-normal !default
|
||||
$body-line-height: 1.5 !default
|
||||
|
||||
$code-family: $family-code !default
|
||||
$code-padding: 0.25em 0.5em 0.25em !default
|
||||
$code-weight: normal !default
|
||||
$code-size: 0.875em !default
|
||||
|
||||
$hr-background-color: $background !default
|
||||
$hr-height: 2px !default
|
||||
$hr-margin: 1.5rem 0 !default
|
||||
|
||||
$strong-color: $text-strong !default
|
||||
$strong-weight: $weight-bold !default
|
||||
|
||||
html
|
||||
background-color: $body-background-color
|
||||
font-size: $body-size
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
-webkit-font-smoothing: antialiased
|
||||
min-width: 300px
|
||||
overflow-x: hidden
|
||||
overflow-y: scroll
|
||||
text-rendering: $body-rendering
|
||||
text-size-adjust: 100%
|
||||
|
||||
article,
|
||||
aside,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
section
|
||||
display: block
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea
|
||||
font-family: $body-family
|
||||
|
||||
code,
|
||||
pre
|
||||
-moz-osx-font-smoothing: auto
|
||||
-webkit-font-smoothing: auto
|
||||
font-family: $code-family
|
||||
|
||||
body
|
||||
color: $body-color
|
||||
font-size: 1rem
|
||||
font-weight: $body-weight
|
||||
line-height: $body-line-height
|
||||
|
||||
// Inline
|
||||
|
||||
a
|
||||
color: $link
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
strong
|
||||
color: currentColor
|
||||
&:hover
|
||||
color: $link-hover
|
||||
|
||||
code
|
||||
background-color: $code-background
|
||||
color: $code
|
||||
font-size: $code-size
|
||||
font-weight: $code-weight
|
||||
padding: $code-padding
|
||||
|
||||
hr
|
||||
background-color: $hr-background-color
|
||||
border: none
|
||||
display: block
|
||||
height: $hr-height
|
||||
margin: $hr-margin
|
||||
|
||||
img
|
||||
height: auto
|
||||
max-width: 100%
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"]
|
||||
vertical-align: baseline
|
||||
|
||||
small
|
||||
font-size: 0.875em
|
||||
|
||||
span
|
||||
font-style: inherit
|
||||
font-weight: inherit
|
||||
|
||||
strong
|
||||
color: $strong-color
|
||||
font-weight: $strong-weight
|
||||
|
||||
// Block
|
||||
|
||||
fieldset
|
||||
border: none
|
||||
|
||||
pre
|
||||
+overflow-touch
|
||||
background-color: $pre-background
|
||||
color: $pre
|
||||
font-size: 0.875em
|
||||
overflow-x: auto
|
||||
padding: 1.25rem 1.5rem
|
||||
white-space: pre
|
||||
word-wrap: normal
|
||||
code
|
||||
background-color: transparent
|
||||
color: currentColor
|
||||
font-size: 1em
|
||||
padding: 0
|
||||
|
||||
table
|
||||
td,
|
||||
th
|
||||
text-align: left
|
||||
vertical-align: top
|
||||
th
|
||||
color: $text-strong
|
||||
276
hyperglass/static/sass/base/helpers.sass
vendored
276
hyperglass/static/sass/base/helpers.sass
vendored
|
|
@ -1,276 +0,0 @@
|
|||
// Float
|
||||
|
||||
.is-clearfix
|
||||
+clearfix
|
||||
|
||||
.is-pulled-left
|
||||
float: left !important
|
||||
|
||||
.is-pulled-right
|
||||
float: right !important
|
||||
|
||||
// Overflow
|
||||
|
||||
.is-clipped
|
||||
overflow: hidden !important
|
||||
|
||||
// Overlay
|
||||
|
||||
.is-overlay
|
||||
@extend %overlay
|
||||
|
||||
// Typography
|
||||
|
||||
=typography-size($target:'')
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
.is-size-#{$i}#{if($target == '', '', '-' + $target)}
|
||||
font-size: $size !important
|
||||
|
||||
+typography-size()
|
||||
|
||||
+mobile
|
||||
+typography-size('mobile')
|
||||
|
||||
+tablet
|
||||
+typography-size('tablet')
|
||||
|
||||
+touch
|
||||
+typography-size('touch')
|
||||
|
||||
+desktop
|
||||
+typography-size('desktop')
|
||||
|
||||
+widescreen
|
||||
+typography-size('widescreen')
|
||||
|
||||
+fullhd
|
||||
+typography-size('fullhd')
|
||||
|
||||
$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
|
||||
|
||||
@each $alignment, $text-align in $alignments
|
||||
.has-text-#{$alignment}
|
||||
text-align: #{$text-align} !important
|
||||
|
||||
@each $alignment, $text-align in $alignments
|
||||
+mobile
|
||||
.has-text-#{$alignment}-mobile
|
||||
text-align: #{$text-align} !important
|
||||
+tablet
|
||||
.has-text-#{$alignment}-tablet
|
||||
text-align: #{$text-align} !important
|
||||
+tablet-only
|
||||
.has-text-#{$alignment}-tablet-only
|
||||
text-align: #{$text-align} !important
|
||||
+touch
|
||||
.has-text-#{$alignment}-touch
|
||||
text-align: #{$text-align} !important
|
||||
+desktop
|
||||
.has-text-#{$alignment}-desktop
|
||||
text-align: #{$text-align} !important
|
||||
+desktop-only
|
||||
.has-text-#{$alignment}-desktop-only
|
||||
text-align: #{$text-align} !important
|
||||
+widescreen
|
||||
.has-text-#{$alignment}-widescreen
|
||||
text-align: #{$text-align} !important
|
||||
+widescreen-only
|
||||
.has-text-#{$alignment}-widescreen-only
|
||||
text-align: #{$text-align} !important
|
||||
+fullhd
|
||||
.has-text-#{$alignment}-fullhd
|
||||
text-align: #{$text-align} !important
|
||||
|
||||
.is-capitalized
|
||||
text-transform: capitalize !important
|
||||
|
||||
.is-lowercase
|
||||
text-transform: lowercase !important
|
||||
|
||||
.is-uppercase
|
||||
text-transform: uppercase !important
|
||||
|
||||
.is-italic
|
||||
font-style: italic !important
|
||||
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
.has-text-#{$name}
|
||||
color: $color !important
|
||||
a.has-text-#{$name}
|
||||
&:hover,
|
||||
&:focus
|
||||
color: darken($color, 10%) !important
|
||||
.has-background-#{$name}
|
||||
background-color: $color !important
|
||||
|
||||
@each $name, $shade in $shades
|
||||
.has-text-#{$name}
|
||||
color: $shade !important
|
||||
.has-background-#{$name}
|
||||
background-color: $shade !important
|
||||
|
||||
.has-text-weight-light
|
||||
font-weight: $weight-light !important
|
||||
.has-text-weight-normal
|
||||
font-weight: $weight-normal !important
|
||||
.has-text-weight-semibold
|
||||
font-weight: $weight-semibold !important
|
||||
.has-text-weight-bold
|
||||
font-weight: $weight-bold !important
|
||||
|
||||
.is-family-primary
|
||||
font-family: $family-primary !important
|
||||
|
||||
.is-family-secondary
|
||||
font-family: $family-secondary !important
|
||||
|
||||
.is-family-sans-serif
|
||||
font-family: $family-sans-serif !important
|
||||
|
||||
.is-family-monospace
|
||||
font-family: $family-monospace !important
|
||||
|
||||
.is-family-code
|
||||
font-family: $family-code !important
|
||||
|
||||
// Visibility
|
||||
|
||||
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
||||
|
||||
@each $display in $displays
|
||||
.is-#{$display}
|
||||
display: #{$display} !important
|
||||
+mobile
|
||||
.is-#{$display}-mobile
|
||||
display: #{$display} !important
|
||||
+tablet
|
||||
.is-#{$display}-tablet
|
||||
display: #{$display} !important
|
||||
+tablet-only
|
||||
.is-#{$display}-tablet-only
|
||||
display: #{$display} !important
|
||||
+touch
|
||||
.is-#{$display}-touch
|
||||
display: #{$display} !important
|
||||
+desktop
|
||||
.is-#{$display}-desktop
|
||||
display: #{$display} !important
|
||||
+desktop-only
|
||||
.is-#{$display}-desktop-only
|
||||
display: #{$display} !important
|
||||
+widescreen
|
||||
.is-#{$display}-widescreen
|
||||
display: #{$display} !important
|
||||
+widescreen-only
|
||||
.is-#{$display}-widescreen-only
|
||||
display: #{$display} !important
|
||||
+fullhd
|
||||
.is-#{$display}-fullhd
|
||||
display: #{$display} !important
|
||||
|
||||
.is-hidden
|
||||
display: none !important
|
||||
|
||||
.is-sr-only
|
||||
border: none !important
|
||||
clip: rect(0, 0, 0, 0) !important
|
||||
height: 0.01em !important
|
||||
overflow: hidden !important
|
||||
padding: 0 !important
|
||||
position: absolute !important
|
||||
white-space: nowrap !important
|
||||
width: 0.01em !important
|
||||
|
||||
+mobile
|
||||
.is-hidden-mobile
|
||||
display: none !important
|
||||
|
||||
+tablet
|
||||
.is-hidden-tablet
|
||||
display: none !important
|
||||
|
||||
+tablet-only
|
||||
.is-hidden-tablet-only
|
||||
display: none !important
|
||||
|
||||
+touch
|
||||
.is-hidden-touch
|
||||
display: none !important
|
||||
|
||||
+desktop
|
||||
.is-hidden-desktop
|
||||
display: none !important
|
||||
|
||||
+desktop-only
|
||||
.is-hidden-desktop-only
|
||||
display: none !important
|
||||
|
||||
+widescreen
|
||||
.is-hidden-widescreen
|
||||
display: none !important
|
||||
|
||||
+widescreen-only
|
||||
.is-hidden-widescreen-only
|
||||
display: none !important
|
||||
|
||||
+fullhd
|
||||
.is-hidden-fullhd
|
||||
display: none !important
|
||||
|
||||
.is-invisible
|
||||
visibility: hidden !important
|
||||
|
||||
+mobile
|
||||
.is-invisible-mobile
|
||||
visibility: hidden !important
|
||||
|
||||
+tablet
|
||||
.is-invisible-tablet
|
||||
visibility: hidden !important
|
||||
|
||||
+tablet-only
|
||||
.is-invisible-tablet-only
|
||||
visibility: hidden !important
|
||||
|
||||
+touch
|
||||
.is-invisible-touch
|
||||
visibility: hidden !important
|
||||
|
||||
+desktop
|
||||
.is-invisible-desktop
|
||||
visibility: hidden !important
|
||||
|
||||
+desktop-only
|
||||
.is-invisible-desktop-only
|
||||
visibility: hidden !important
|
||||
|
||||
+widescreen
|
||||
.is-invisible-widescreen
|
||||
visibility: hidden !important
|
||||
|
||||
+widescreen-only
|
||||
.is-invisible-widescreen-only
|
||||
visibility: hidden !important
|
||||
|
||||
+fullhd
|
||||
.is-invisible-fullhd
|
||||
visibility: hidden !important
|
||||
|
||||
// Other
|
||||
|
||||
.is-marginless
|
||||
margin: 0 !important
|
||||
|
||||
.is-paddingless
|
||||
padding: 0 !important
|
||||
|
||||
.is-radiusless
|
||||
border-radius: 0 !important
|
||||
|
||||
.is-shadowless
|
||||
box-shadow: none !important
|
||||
|
||||
.is-unselectable
|
||||
@extend %unselectable
|
||||
84
hyperglass/static/sass/base/minireset.sass
vendored
84
hyperglass/static/sass/base/minireset.sass
vendored
|
|
@ -1,84 +0,0 @@
|
|||
/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
|
||||
// Blocks
|
||||
html,
|
||||
body,
|
||||
p,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
blockquote,
|
||||
figure,
|
||||
fieldset,
|
||||
legend,
|
||||
textarea,
|
||||
pre,
|
||||
iframe,
|
||||
hr,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
// Headings
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
font-size: 100%
|
||||
font-weight: normal
|
||||
|
||||
// List
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
// Form
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea
|
||||
margin: 0
|
||||
|
||||
// Box sizing
|
||||
html
|
||||
box-sizing: border-box
|
||||
|
||||
*
|
||||
&,
|
||||
&::before,
|
||||
&::after
|
||||
box-sizing: inherit
|
||||
|
||||
// Media
|
||||
img,
|
||||
embed,
|
||||
iframe,
|
||||
object,
|
||||
video
|
||||
height: auto
|
||||
max-width: 100%
|
||||
|
||||
audio
|
||||
max-width: 100%
|
||||
|
||||
// Iframe
|
||||
iframe
|
||||
border: 0
|
||||
|
||||
// Table
|
||||
table
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
|
||||
td,
|
||||
th
|
||||
padding: 0
|
||||
text-align: left
|
||||
15
hyperglass/static/sass/components/_all.sass
vendored
15
hyperglass/static/sass/components/_all.sass
vendored
|
|
@ -1,15 +0,0 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "breadcrumb.sass"
|
||||
@import "card.sass"
|
||||
@import "dropdown.sass"
|
||||
@import "level.sass"
|
||||
@import "list.sass"
|
||||
@import "media.sass"
|
||||
@import "menu.sass"
|
||||
@import "message.sass"
|
||||
@import "modal.sass"
|
||||
@import "navbar.sass"
|
||||
@import "pagination.sass"
|
||||
@import "panel.sass"
|
||||
@import "tabs.sass"
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
$breadcrumb-item-color: $link !default
|
||||
$breadcrumb-item-hover-color: $link-hover !default
|
||||
$breadcrumb-item-active-color: $text-strong !default
|
||||
|
||||
$breadcrumb-item-padding-vertical: 0 !default
|
||||
$breadcrumb-item-padding-horizontal: 0.75em !default
|
||||
|
||||
$breadcrumb-item-separator-color: $grey-light !default
|
||||
|
||||
.breadcrumb
|
||||
@extend %block
|
||||
@extend %unselectable
|
||||
font-size: $size-normal
|
||||
white-space: nowrap
|
||||
a
|
||||
align-items: center
|
||||
color: $breadcrumb-item-color
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
|
||||
&:hover
|
||||
color: $breadcrumb-item-hover-color
|
||||
li
|
||||
align-items: center
|
||||
display: flex
|
||||
&:first-child a
|
||||
padding-left: 0
|
||||
&.is-active
|
||||
a
|
||||
color: $breadcrumb-item-active-color
|
||||
cursor: default
|
||||
pointer-events: none
|
||||
& + li::before
|
||||
color: $breadcrumb-item-separator-color
|
||||
content: "\0002f"
|
||||
ul,
|
||||
ol
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
.icon
|
||||
&:first-child
|
||||
margin-right: 0.5em
|
||||
&:last-child
|
||||
margin-left: 0.5em
|
||||
// Alignment
|
||||
&.is-centered
|
||||
ol,
|
||||
ul
|
||||
justify-content: center
|
||||
&.is-right
|
||||
ol,
|
||||
ul
|
||||
justify-content: flex-end
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
// Styles
|
||||
&.has-arrow-separator
|
||||
li + li::before
|
||||
content: "\02192"
|
||||
&.has-bullet-separator
|
||||
li + li::before
|
||||
content: "\02022"
|
||||
&.has-dot-separator
|
||||
li + li::before
|
||||
content: "\000b7"
|
||||
&.has-succeeds-separator
|
||||
li + li::before
|
||||
content: "\0227B"
|
||||
74
hyperglass/static/sass/components/card.sass
vendored
74
hyperglass/static/sass/components/card.sass
vendored
|
|
@ -1,74 +0,0 @@
|
|||
$card-color: $text !default
|
||||
$card-background-color: $white !default
|
||||
$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||
|
||||
$card-header-background-color: transparent !default
|
||||
$card-header-color: $text-strong !default
|
||||
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
|
||||
$card-header-weight: $weight-bold !default
|
||||
|
||||
$card-content-background-color: transparent !default
|
||||
|
||||
$card-footer-background-color: transparent !default
|
||||
$card-footer-border-top: 1px solid $border !default
|
||||
|
||||
.card
|
||||
background-color: $card-background-color
|
||||
box-shadow: $card-shadow
|
||||
color: $card-color
|
||||
max-width: 100%
|
||||
position: relative
|
||||
|
||||
.card-header
|
||||
background-color: $card-header-background-color
|
||||
align-items: stretch
|
||||
box-shadow: $card-header-shadow
|
||||
display: flex
|
||||
|
||||
.card-header-title
|
||||
align-items: center
|
||||
color: $card-header-color
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
font-weight: $card-header-weight
|
||||
padding: 0.75rem
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
|
||||
.card-header-icon
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: 0.75rem
|
||||
|
||||
.card-image
|
||||
display: block
|
||||
position: relative
|
||||
|
||||
.card-content
|
||||
background-color: $card-content-background-color
|
||||
padding: 1.5rem
|
||||
|
||||
.card-footer
|
||||
background-color: $card-footer-background-color
|
||||
border-top: $card-footer-border-top
|
||||
align-items: stretch
|
||||
display: flex
|
||||
|
||||
.card-footer-item
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
justify-content: center
|
||||
padding: 0.75rem
|
||||
&:not(:last-child)
|
||||
border-right: $card-footer-border-top
|
||||
|
||||
// Combinations
|
||||
|
||||
.card
|
||||
.media:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
77
hyperglass/static/sass/components/dropdown.sass
vendored
77
hyperglass/static/sass/components/dropdown.sass
vendored
|
|
@ -1,77 +0,0 @@
|
|||
$dropdown-content-background-color: $white !default
|
||||
$dropdown-content-arrow: $link !default
|
||||
$dropdown-content-offset: 4px !default
|
||||
$dropdown-content-radius: $radius !default
|
||||
$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||
$dropdown-content-z: 20 !default
|
||||
|
||||
$dropdown-item-color: $grey-dark !default
|
||||
$dropdown-item-hover-color: $black !default
|
||||
$dropdown-item-hover-background-color: $background !default
|
||||
$dropdown-item-active-color: $link-invert !default
|
||||
$dropdown-item-active-background-color: $link !default
|
||||
|
||||
$dropdown-divider-background-color: $border !default
|
||||
|
||||
.dropdown
|
||||
display: inline-flex
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&.is-active,
|
||||
&.is-hoverable:hover
|
||||
.dropdown-menu
|
||||
display: block
|
||||
&.is-right
|
||||
.dropdown-menu
|
||||
left: auto
|
||||
right: 0
|
||||
&.is-up
|
||||
.dropdown-menu
|
||||
bottom: 100%
|
||||
padding-bottom: $dropdown-content-offset
|
||||
padding-top: initial
|
||||
top: auto
|
||||
|
||||
.dropdown-menu
|
||||
display: none
|
||||
left: 0
|
||||
min-width: 12rem
|
||||
padding-top: $dropdown-content-offset
|
||||
position: absolute
|
||||
top: 100%
|
||||
z-index: $dropdown-content-z
|
||||
|
||||
.dropdown-content
|
||||
background-color: $dropdown-content-background-color
|
||||
border-radius: $dropdown-content-radius
|
||||
box-shadow: $dropdown-content-shadow
|
||||
padding-bottom: 0.5rem
|
||||
padding-top: 0.5rem
|
||||
|
||||
.dropdown-item
|
||||
color: $dropdown-item-color
|
||||
display: block
|
||||
font-size: 0.875rem
|
||||
line-height: 1.5
|
||||
padding: 0.375rem 1rem
|
||||
position: relative
|
||||
|
||||
a.dropdown-item,
|
||||
button.dropdown-item
|
||||
padding-right: 3rem
|
||||
text-align: left
|
||||
white-space: nowrap
|
||||
width: 100%
|
||||
&:hover
|
||||
background-color: $dropdown-item-hover-background-color
|
||||
color: $dropdown-item-hover-color
|
||||
&.is-active
|
||||
background-color: $dropdown-item-active-background-color
|
||||
color: $dropdown-item-active-color
|
||||
|
||||
.dropdown-divider
|
||||
background-color: $dropdown-divider-background-color
|
||||
border: none
|
||||
display: block
|
||||
height: 1px
|
||||
margin: 0.5rem 0
|
||||
75
hyperglass/static/sass/components/level.sass
vendored
75
hyperglass/static/sass/components/level.sass
vendored
|
|
@ -1,75 +0,0 @@
|
|||
.level
|
||||
@extend %block
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
code
|
||||
border-radius: $radius
|
||||
img
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
// Modifiers
|
||||
&.is-mobile
|
||||
display: flex
|
||||
.level-left,
|
||||
.level-right
|
||||
display: flex
|
||||
.level-left + .level-right
|
||||
margin-top: 0
|
||||
.level-item
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
margin-right: 0.75rem
|
||||
&:not(.is-narrow)
|
||||
flex-grow: 1
|
||||
// Responsiveness
|
||||
+tablet
|
||||
display: flex
|
||||
& > .level-item
|
||||
&:not(.is-narrow)
|
||||
flex-grow: 1
|
||||
|
||||
.level-item
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-basis: auto
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
justify-content: center
|
||||
.title,
|
||||
.subtitle
|
||||
margin-bottom: 0
|
||||
// Responsiveness
|
||||
+mobile
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
|
||||
.level-left,
|
||||
.level-right
|
||||
flex-basis: auto
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
.level-item
|
||||
// Modifiers
|
||||
&.is-flexible
|
||||
flex-grow: 1
|
||||
// Responsiveness
|
||||
+tablet
|
||||
&:not(:last-child)
|
||||
margin-right: 0.75rem
|
||||
|
||||
.level-left
|
||||
align-items: center
|
||||
justify-content: flex-start
|
||||
// Responsiveness
|
||||
+mobile
|
||||
& + .level-right
|
||||
margin-top: 1.5rem
|
||||
+tablet
|
||||
display: flex
|
||||
|
||||
.level-right
|
||||
align-items: center
|
||||
justify-content: flex-end
|
||||
// Responsiveness
|
||||
+tablet
|
||||
display: flex
|
||||
39
hyperglass/static/sass/components/list.sass
vendored
39
hyperglass/static/sass/components/list.sass
vendored
|
|
@ -1,39 +0,0 @@
|
|||
$list-background-color: $white !default
|
||||
$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||
$list-radius: $radius !default
|
||||
|
||||
$list-item-border: 1px solid $border !default
|
||||
$list-item-color: $text !default
|
||||
$list-item-active-background-color: $link !default
|
||||
$list-item-active-color: $link-invert !default
|
||||
$list-item-hover-background-color: $background !default
|
||||
|
||||
.list
|
||||
@extend %block
|
||||
background-color: $list-background-color
|
||||
border-radius: $list-radius
|
||||
box-shadow: $list-shadow
|
||||
// &.is-hoverable > .list-item:hover:not(.is-active)
|
||||
// background-color: $list-item-hover-background-color
|
||||
// cursor: pointer
|
||||
|
||||
.list-item
|
||||
display: block
|
||||
padding: 0.5em 1em
|
||||
&:not(a)
|
||||
color: $list-item-color
|
||||
&:first-child
|
||||
border-top-left-radius: $list-radius
|
||||
border-top-right-radius: $list-radius
|
||||
&:last-child
|
||||
border-top-left-radius: $list-radius
|
||||
border-top-right-radius: $list-radius
|
||||
&:not(:last-child)
|
||||
border-bottom: $list-item-border
|
||||
&.is-active
|
||||
background-color: $list-item-active-background-color
|
||||
color: $list-item-active-color
|
||||
|
||||
a.list-item
|
||||
background-color: $list-item-hover-background-color
|
||||
cursor: pointer
|
||||
48
hyperglass/static/sass/components/media.sass
vendored
48
hyperglass/static/sass/components/media.sass
vendored
|
|
@ -1,48 +0,0 @@
|
|||
.media
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
text-align: left
|
||||
.content:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
.media
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
display: flex
|
||||
padding-top: 0.75rem
|
||||
.content:not(:last-child),
|
||||
.control:not(:last-child)
|
||||
margin-bottom: 0.5rem
|
||||
.media
|
||||
padding-top: 0.5rem
|
||||
& + .media
|
||||
margin-top: 0.5rem
|
||||
& + .media
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
margin-top: 1rem
|
||||
padding-top: 1rem
|
||||
// Sizes
|
||||
&.is-large
|
||||
& + .media
|
||||
margin-top: 1.5rem
|
||||
padding-top: 1.5rem
|
||||
|
||||
.media-left,
|
||||
.media-right
|
||||
flex-basis: auto
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
|
||||
.media-left
|
||||
margin-right: 1rem
|
||||
|
||||
.media-right
|
||||
margin-left: 1rem
|
||||
|
||||
.media-content
|
||||
flex-basis: auto
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
text-align: left
|
||||
|
||||
+mobile
|
||||
.media-content
|
||||
overflow-x: auto
|
||||
50
hyperglass/static/sass/components/menu.sass
vendored
50
hyperglass/static/sass/components/menu.sass
vendored
|
|
@ -1,50 +0,0 @@
|
|||
$menu-item-color: $text !default
|
||||
$menu-item-radius: $radius-small !default
|
||||
$menu-item-hover-color: $text-strong !default
|
||||
$menu-item-hover-background-color: $background !default
|
||||
$menu-item-active-color: $link-invert !default
|
||||
$menu-item-active-background-color: $link !default
|
||||
|
||||
$menu-list-border-left: 1px solid $border !default
|
||||
|
||||
$menu-label-color: $text-light !default
|
||||
|
||||
.menu
|
||||
font-size: $size-normal
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
|
||||
.menu-list
|
||||
line-height: 1.25
|
||||
a
|
||||
border-radius: $menu-item-radius
|
||||
color: $menu-item-color
|
||||
display: block
|
||||
padding: 0.5em 0.75em
|
||||
&:hover
|
||||
background-color: $menu-item-hover-background-color
|
||||
color: $menu-item-hover-color
|
||||
// Modifiers
|
||||
&.is-active
|
||||
background-color: $menu-item-active-background-color
|
||||
color: $menu-item-active-color
|
||||
li
|
||||
ul
|
||||
border-left: $menu-list-border-left
|
||||
margin: 0.75em
|
||||
padding-left: 0.75em
|
||||
|
||||
.menu-label
|
||||
color: $menu-label-color
|
||||
font-size: 0.75em
|
||||
letter-spacing: 0.1em
|
||||
text-transform: uppercase
|
||||
&:not(:first-child)
|
||||
margin-top: 1em
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1em
|
||||
86
hyperglass/static/sass/components/message.sass
vendored
86
hyperglass/static/sass/components/message.sass
vendored
|
|
@ -1,86 +0,0 @@
|
|||
$message-background-color: $background !default
|
||||
$message-radius: $radius !default
|
||||
|
||||
$message-header-background-color: $text !default
|
||||
$message-header-color: $text-invert !default
|
||||
$message-header-weight: $weight-bold !default
|
||||
$message-header-padding: 0.75em 1em !default
|
||||
$message-header-radius: $radius !default
|
||||
|
||||
$message-body-border-color: $border !default
|
||||
$message-body-border-width: 0 0 0 4px !default
|
||||
$message-body-color: $text !default
|
||||
$message-body-padding: 1.25em 1.5em !default
|
||||
$message-body-radius: $radius !default
|
||||
|
||||
$message-body-pre-background-color: $white !default
|
||||
$message-body-pre-code-background-color: transparent !default
|
||||
|
||||
$message-header-body-border-width: 0 !default
|
||||
|
||||
.message
|
||||
@extend %block
|
||||
background-color: $message-background-color
|
||||
border-radius: $message-radius
|
||||
font-size: $size-normal
|
||||
strong
|
||||
color: currentColor
|
||||
a:not(.button):not(.tag):not(.dropdown-item)
|
||||
color: currentColor
|
||||
text-decoration: underline
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
|
||||
$color-luminance: colorLuminance($color)
|
||||
$darken-percentage: $color-luminance * 70%
|
||||
$desaturate-percentage: $color-luminance * 30%
|
||||
&.is-#{$name}
|
||||
background-color: lighten($color, $color-lightning)
|
||||
.message-header
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.message-body
|
||||
border-color: $color
|
||||
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
|
||||
|
||||
.message-header
|
||||
align-items: center
|
||||
background-color: $message-header-background-color
|
||||
border-radius: $message-header-radius $message-header-radius 0 0
|
||||
color: $message-header-color
|
||||
display: flex
|
||||
font-weight: $message-header-weight
|
||||
justify-content: space-between
|
||||
line-height: 1.25
|
||||
padding: $message-header-padding
|
||||
position: relative
|
||||
.delete
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
margin-left: 0.75em
|
||||
& + .message-body
|
||||
border-width: $message-header-body-border-width
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
|
||||
.message-body
|
||||
border-color: $message-body-border-color
|
||||
border-radius: $message-body-radius
|
||||
border-style: solid
|
||||
border-width: $message-body-border-width
|
||||
color: $message-body-color
|
||||
padding: $message-body-padding
|
||||
code,
|
||||
pre
|
||||
background-color: $message-body-pre-background-color
|
||||
pre code
|
||||
background-color: $message-body-pre-code-background-color
|
||||
113
hyperglass/static/sass/components/modal.sass
vendored
113
hyperglass/static/sass/components/modal.sass
vendored
|
|
@ -1,113 +0,0 @@
|
|||
$modal-z: 40 !default
|
||||
|
||||
$modal-background-background-color: rgba($black, 0.86) !default
|
||||
|
||||
$modal-content-width: 640px !default
|
||||
$modal-content-margin-mobile: 20px !default
|
||||
$modal-content-spacing-mobile: 160px !default
|
||||
$modal-content-spacing-tablet: 40px !default
|
||||
|
||||
$modal-close-dimensions: 40px !default
|
||||
$modal-close-right: 20px !default
|
||||
$modal-close-top: 20px !default
|
||||
|
||||
$modal-card-spacing: 40px !default
|
||||
|
||||
$modal-card-head-background-color: $background !default
|
||||
$modal-card-head-border-bottom: 1px solid $border !default
|
||||
$modal-card-head-padding: 20px !default
|
||||
$modal-card-head-radius: $radius-large !default
|
||||
|
||||
$modal-card-title-color: $text-strong !default
|
||||
$modal-card-title-line-height: 1 !default
|
||||
$modal-card-title-size: $size-4 !default
|
||||
|
||||
$modal-card-foot-radius: $radius-large !default
|
||||
$modal-card-foot-border-top: 1px solid $border !default
|
||||
|
||||
$modal-card-body-background-color: $white !default
|
||||
$modal-card-body-padding: 20px !default
|
||||
|
||||
.modal
|
||||
@extend %overlay
|
||||
align-items: center
|
||||
display: none
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
overflow: hidden
|
||||
position: fixed
|
||||
z-index: $modal-z
|
||||
// Modifiers
|
||||
&.is-active
|
||||
display: flex
|
||||
|
||||
.modal-background
|
||||
@extend %overlay
|
||||
background-color: $modal-background-background-color
|
||||
|
||||
.modal-content,
|
||||
.modal-card
|
||||
margin: 0 $modal-content-margin-mobile
|
||||
max-height: calc(100vh - #{$modal-content-spacing-mobile})
|
||||
overflow: auto
|
||||
position: relative
|
||||
width: 100%
|
||||
// Responsiveness
|
||||
+tablet
|
||||
margin: 0 auto
|
||||
max-height: calc(100vh - #{$modal-content-spacing-tablet})
|
||||
width: $modal-content-width
|
||||
|
||||
.modal-close
|
||||
@extend %delete
|
||||
background: none
|
||||
height: $modal-close-dimensions
|
||||
position: fixed
|
||||
right: $modal-close-right
|
||||
top: $modal-close-top
|
||||
width: $modal-close-dimensions
|
||||
|
||||
.modal-card
|
||||
display: flex
|
||||
flex-direction: column
|
||||
max-height: calc(100vh - #{$modal-card-spacing})
|
||||
overflow: hidden
|
||||
-ms-overflow-y: visible
|
||||
|
||||
.modal-card-head,
|
||||
.modal-card-foot
|
||||
align-items: center
|
||||
background-color: $modal-card-head-background-color
|
||||
display: flex
|
||||
flex-shrink: 0
|
||||
justify-content: flex-start
|
||||
padding: $modal-card-head-padding
|
||||
position: relative
|
||||
|
||||
.modal-card-head
|
||||
border-bottom: $modal-card-head-border-bottom
|
||||
border-top-left-radius: $modal-card-head-radius
|
||||
border-top-right-radius: $modal-card-head-radius
|
||||
|
||||
.modal-card-title
|
||||
color: $modal-card-title-color
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
font-size: $modal-card-title-size
|
||||
line-height: $modal-card-title-line-height
|
||||
|
||||
.modal-card-foot
|
||||
border-bottom-left-radius: $modal-card-foot-radius
|
||||
border-bottom-right-radius: $modal-card-foot-radius
|
||||
border-top: $modal-card-foot-border-top
|
||||
.button
|
||||
&:not(:last-child)
|
||||
margin-right: 10px
|
||||
|
||||
.modal-card-body
|
||||
+overflow-touch
|
||||
background-color: $modal-card-body-background-color
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
overflow: auto
|
||||
padding: $modal-card-body-padding
|
||||
428
hyperglass/static/sass/components/navbar.sass
vendored
428
hyperglass/static/sass/components/navbar.sass
vendored
|
|
@ -1,428 +0,0 @@
|
|||
$navbar-background-color: $white !default
|
||||
$navbar-box-shadow-size: 0 2px 0 0 !default
|
||||
$navbar-box-shadow-color: $background !default
|
||||
$navbar-height: 3.25rem !default
|
||||
$navbar-padding-vertical: 1rem !default
|
||||
$navbar-padding-horizontal: 2rem !default
|
||||
$navbar-z: 30 !default
|
||||
$navbar-fixed-z: 30 !default
|
||||
|
||||
$navbar-item-color: $grey-dark !default
|
||||
$navbar-item-hover-color: $link !default
|
||||
$navbar-item-hover-background-color: $white-bis !default
|
||||
$navbar-item-active-color: $black !default
|
||||
$navbar-item-active-background-color: transparent !default
|
||||
$navbar-item-img-max-height: 1.75rem !default
|
||||
|
||||
$navbar-burger-color: $navbar-item-color !default
|
||||
|
||||
$navbar-tab-hover-background-color: transparent !default
|
||||
$navbar-tab-hover-border-bottom-color: $link !default
|
||||
$navbar-tab-active-color: $link !default
|
||||
$navbar-tab-active-background-color: transparent !default
|
||||
$navbar-tab-active-border-bottom-color: $link !default
|
||||
$navbar-tab-active-border-bottom-style: solid !default
|
||||
$navbar-tab-active-border-bottom-width: 3px !default
|
||||
|
||||
$navbar-dropdown-background-color: $white !default
|
||||
$navbar-dropdown-border-top: 2px solid $border !default
|
||||
$navbar-dropdown-offset: -4px !default
|
||||
$navbar-dropdown-arrow: $link !default
|
||||
$navbar-dropdown-radius: $radius-large !default
|
||||
$navbar-dropdown-z: 20 !default
|
||||
|
||||
$navbar-dropdown-boxed-radius: $radius-large !default
|
||||
$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||
|
||||
$navbar-dropdown-item-hover-color: $black !default
|
||||
$navbar-dropdown-item-hover-background-color: $background !default
|
||||
$navbar-dropdown-item-active-color: $link !default
|
||||
$navbar-dropdown-item-active-background-color: $background !default
|
||||
|
||||
$navbar-divider-background-color: $background !default
|
||||
$navbar-divider-height: 2px !default
|
||||
|
||||
$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
|
||||
|
||||
$navbar-breakpoint: $desktop !default
|
||||
|
||||
=navbar-fixed
|
||||
left: 0
|
||||
position: fixed
|
||||
right: 0
|
||||
z-index: $navbar-fixed-z
|
||||
|
||||
.navbar
|
||||
background-color: $navbar-background-color
|
||||
min-height: $navbar-height
|
||||
position: relative
|
||||
z-index: $navbar-z
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.navbar-brand
|
||||
& > .navbar-item,
|
||||
.navbar-link
|
||||
color: $color-invert
|
||||
& > a.navbar-item,
|
||||
.navbar-link
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-link
|
||||
&::after
|
||||
border-color: $color-invert
|
||||
.navbar-burger
|
||||
color: $color-invert
|
||||
+from($navbar-breakpoint)
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
& > .navbar-item,
|
||||
.navbar-link
|
||||
color: $color-invert
|
||||
& > a.navbar-item,
|
||||
.navbar-link
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-link
|
||||
&::after
|
||||
border-color: $color-invert
|
||||
.navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar-item.has-dropdown.is-active .navbar-link
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-dropdown
|
||||
a.navbar-item
|
||||
&.is-active
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
& > .container
|
||||
align-items: stretch
|
||||
display: flex
|
||||
min-height: $navbar-height
|
||||
width: 100%
|
||||
&.has-shadow
|
||||
box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
|
||||
&.is-fixed-bottom,
|
||||
&.is-fixed-top
|
||||
+navbar-fixed
|
||||
&.is-fixed-bottom
|
||||
bottom: 0
|
||||
&.has-shadow
|
||||
box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
|
||||
&.is-fixed-top
|
||||
top: 0
|
||||
|
||||
html,
|
||||
body
|
||||
&.has-navbar-fixed-top
|
||||
padding-top: $navbar-height
|
||||
&.has-navbar-fixed-bottom
|
||||
padding-bottom: $navbar-height
|
||||
|
||||
.navbar-brand,
|
||||
.navbar-tabs
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-shrink: 0
|
||||
min-height: $navbar-height
|
||||
|
||||
.navbar-brand
|
||||
a.navbar-item
|
||||
&:hover
|
||||
background-color: transparent
|
||||
|
||||
.navbar-tabs
|
||||
+overflow-touch
|
||||
max-width: 100vw
|
||||
overflow-x: auto
|
||||
overflow-y: hidden
|
||||
|
||||
.navbar-burger
|
||||
color: $navbar-burger-color
|
||||
+hamburger($navbar-height)
|
||||
margin-left: auto
|
||||
|
||||
.navbar-menu
|
||||
display: none
|
||||
|
||||
.navbar-item,
|
||||
.navbar-link
|
||||
color: $navbar-item-color
|
||||
display: block
|
||||
line-height: 1.5
|
||||
padding: 0.5rem 0.75rem
|
||||
position: relative
|
||||
.icon
|
||||
&:only-child
|
||||
margin-left: -0.25rem
|
||||
margin-right: -0.25rem
|
||||
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
cursor: pointer
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: $navbar-item-hover-background-color
|
||||
color: $navbar-item-hover-color
|
||||
|
||||
.navbar-item
|
||||
display: block
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
img
|
||||
max-height: $navbar-item-img-max-height
|
||||
&.has-dropdown
|
||||
padding: 0
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.is-tab
|
||||
border-bottom: 1px solid transparent
|
||||
min-height: $navbar-height
|
||||
padding-bottom: calc(0.5rem - 1px)
|
||||
&:hover
|
||||
background-color: $navbar-tab-hover-background-color
|
||||
border-bottom-color: $navbar-tab-hover-border-bottom-color
|
||||
&.is-active
|
||||
background-color: $navbar-tab-active-background-color
|
||||
border-bottom-color: $navbar-tab-active-border-bottom-color
|
||||
border-bottom-style: $navbar-tab-active-border-bottom-style
|
||||
border-bottom-width: $navbar-tab-active-border-bottom-width
|
||||
color: $navbar-tab-active-color
|
||||
padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
|
||||
|
||||
.navbar-content
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
|
||||
.navbar-link:not(.is-arrowless)
|
||||
padding-right: 2.5em
|
||||
&::after
|
||||
@extend %arrow
|
||||
border-color: $navbar-dropdown-arrow
|
||||
margin-top: -0.375em
|
||||
right: 1.125em
|
||||
|
||||
.navbar-dropdown
|
||||
font-size: 0.875rem
|
||||
padding-bottom: 0.5rem
|
||||
padding-top: 0.5rem
|
||||
.navbar-item
|
||||
padding-left: 1.5rem
|
||||
padding-right: 1.5rem
|
||||
|
||||
.navbar-divider
|
||||
background-color: $navbar-divider-background-color
|
||||
border: none
|
||||
display: none
|
||||
height: $navbar-divider-height
|
||||
margin: 0.5rem 0
|
||||
|
||||
+until($navbar-breakpoint)
|
||||
.navbar > .container
|
||||
display: block
|
||||
.navbar-brand,
|
||||
.navbar-tabs
|
||||
.navbar-item
|
||||
align-items: center
|
||||
display: flex
|
||||
.navbar-link
|
||||
&::after
|
||||
display: none
|
||||
.navbar-menu
|
||||
background-color: $navbar-background-color
|
||||
box-shadow: 0 8px 16px rgba($black, 0.1)
|
||||
padding: 0.5rem 0
|
||||
&.is-active
|
||||
display: block
|
||||
// Fixed navbar
|
||||
.navbar
|
||||
&.is-fixed-bottom-touch,
|
||||
&.is-fixed-top-touch
|
||||
+navbar-fixed
|
||||
&.is-fixed-bottom-touch
|
||||
bottom: 0
|
||||
&.has-shadow
|
||||
box-shadow: 0 -2px 3px rgba($black, 0.1)
|
||||
&.is-fixed-top-touch
|
||||
top: 0
|
||||
&.is-fixed-top,
|
||||
&.is-fixed-top-touch
|
||||
.navbar-menu
|
||||
+overflow-touch
|
||||
max-height: calc(100vh - #{$navbar-height})
|
||||
overflow: auto
|
||||
html,
|
||||
body
|
||||
&.has-navbar-fixed-top-touch
|
||||
padding-top: $navbar-height
|
||||
&.has-navbar-fixed-bottom-touch
|
||||
padding-bottom: $navbar-height
|
||||
|
||||
+from($navbar-breakpoint)
|
||||
.navbar,
|
||||
.navbar-menu,
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
align-items: stretch
|
||||
display: flex
|
||||
.navbar
|
||||
min-height: $navbar-height
|
||||
&.is-spaced
|
||||
padding: $navbar-padding-vertical $navbar-padding-horizontal
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
align-items: center
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
border-radius: $radius
|
||||
&.is-transparent
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: transparent !important
|
||||
.navbar-item.has-dropdown
|
||||
&.is-active,
|
||||
&.is-hoverable:hover
|
||||
.navbar-link
|
||||
background-color: transparent !important
|
||||
.navbar-dropdown
|
||||
a.navbar-item
|
||||
&:hover
|
||||
background-color: $navbar-dropdown-item-hover-background-color
|
||||
color: $navbar-dropdown-item-hover-color
|
||||
&.is-active
|
||||
background-color: $navbar-dropdown-item-active-background-color
|
||||
color: $navbar-dropdown-item-active-color
|
||||
.navbar-burger
|
||||
display: none
|
||||
.navbar-item,
|
||||
.navbar-link
|
||||
align-items: center
|
||||
display: flex
|
||||
.navbar-item
|
||||
display: flex
|
||||
&.has-dropdown
|
||||
align-items: stretch
|
||||
&.has-dropdown-up
|
||||
.navbar-link::after
|
||||
transform: rotate(135deg) translate(0.25em, -0.25em)
|
||||
.navbar-dropdown
|
||||
border-bottom: $navbar-dropdown-border-top
|
||||
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
|
||||
border-top: none
|
||||
bottom: 100%
|
||||
box-shadow: 0 -8px 8px rgba($black, 0.1)
|
||||
top: auto
|
||||
&.is-active,
|
||||
&.is-hoverable:hover
|
||||
.navbar-dropdown
|
||||
display: block
|
||||
.navbar.is-spaced &,
|
||||
&.is-boxed
|
||||
opacity: 1
|
||||
pointer-events: auto
|
||||
transform: translateY(0)
|
||||
.navbar-menu
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
.navbar-start
|
||||
justify-content: flex-start
|
||||
margin-right: auto
|
||||
.navbar-end
|
||||
justify-content: flex-end
|
||||
margin-left: auto
|
||||
.navbar-dropdown
|
||||
background-color: $navbar-dropdown-background-color
|
||||
border-bottom-left-radius: $navbar-dropdown-radius
|
||||
border-bottom-right-radius: $navbar-dropdown-radius
|
||||
border-top: $navbar-dropdown-border-top
|
||||
box-shadow: 0 8px 8px rgba($black, 0.1)
|
||||
display: none
|
||||
font-size: 0.875rem
|
||||
left: 0
|
||||
min-width: 100%
|
||||
position: absolute
|
||||
top: 100%
|
||||
z-index: $navbar-dropdown-z
|
||||
.navbar-item
|
||||
padding: 0.375rem 1rem
|
||||
white-space: nowrap
|
||||
a.navbar-item
|
||||
padding-right: 3rem
|
||||
&:hover
|
||||
background-color: $navbar-dropdown-item-hover-background-color
|
||||
color: $navbar-dropdown-item-hover-color
|
||||
&.is-active
|
||||
background-color: $navbar-dropdown-item-active-background-color
|
||||
color: $navbar-dropdown-item-active-color
|
||||
.navbar.is-spaced &,
|
||||
&.is-boxed
|
||||
border-radius: $navbar-dropdown-boxed-radius
|
||||
border-top: none
|
||||
box-shadow: $navbar-dropdown-boxed-shadow
|
||||
display: block
|
||||
opacity: 0
|
||||
pointer-events: none
|
||||
top: calc(100% + (#{$navbar-dropdown-offset}))
|
||||
transform: translateY(-5px)
|
||||
transition-duration: $speed
|
||||
transition-property: opacity, transform
|
||||
&.is-right
|
||||
left: auto
|
||||
right: 0
|
||||
.navbar-divider
|
||||
display: block
|
||||
.navbar > .container,
|
||||
.container > .navbar
|
||||
.navbar-brand
|
||||
margin-left: -.75rem
|
||||
.navbar-menu
|
||||
margin-right: -.75rem
|
||||
// Fixed navbar
|
||||
.navbar
|
||||
&.is-fixed-bottom-desktop,
|
||||
&.is-fixed-top-desktop
|
||||
+navbar-fixed
|
||||
&.is-fixed-bottom-desktop
|
||||
bottom: 0
|
||||
&.has-shadow
|
||||
box-shadow: 0 -2px 3px rgba($black, 0.1)
|
||||
&.is-fixed-top-desktop
|
||||
top: 0
|
||||
html,
|
||||
body
|
||||
&.has-navbar-fixed-top-desktop
|
||||
padding-top: $navbar-height
|
||||
&.has-navbar-fixed-bottom-desktop
|
||||
padding-bottom: $navbar-height
|
||||
&.has-spaced-navbar-fixed-top
|
||||
padding-top: $navbar-height + ($navbar-padding-vertical * 2)
|
||||
&.has-spaced-navbar-fixed-bottom
|
||||
padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
|
||||
// Hover/Active states
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
&.is-active
|
||||
color: $navbar-item-active-color
|
||||
&.is-active:not(:hover)
|
||||
background-color: $navbar-item-active-background-color
|
||||
.navbar-item.has-dropdown
|
||||
&:hover,
|
||||
&.is-active
|
||||
.navbar-link
|
||||
background-color: $navbar-item-hover-background-color
|
||||
|
||||
// Combination
|
||||
|
||||
.hero
|
||||
&.is-fullheight-with-navbar
|
||||
min-height: calc(100vh - #{$navbar-height})
|
||||
144
hyperglass/static/sass/components/pagination.sass
vendored
144
hyperglass/static/sass/components/pagination.sass
vendored
|
|
@ -1,144 +0,0 @@
|
|||
$pagination-color: $grey-darker !default
|
||||
$pagination-border-color: $grey-lighter !default
|
||||
$pagination-margin: -0.25rem !default
|
||||
$pagination-min-width: $control-height !default
|
||||
|
||||
$pagination-hover-color: $link-hover !default
|
||||
$pagination-hover-border-color: $link-hover-border !default
|
||||
|
||||
$pagination-focus-color: $link-focus !default
|
||||
$pagination-focus-border-color: $link-focus-border !default
|
||||
|
||||
$pagination-active-color: $link-active !default
|
||||
$pagination-active-border-color: $link-active-border !default
|
||||
|
||||
$pagination-disabled-color: $grey !default
|
||||
$pagination-disabled-background-color: $grey-lighter !default
|
||||
$pagination-disabled-border-color: $grey-lighter !default
|
||||
|
||||
$pagination-current-color: $link-invert !default
|
||||
$pagination-current-background-color: $link !default
|
||||
$pagination-current-border-color: $link !default
|
||||
|
||||
$pagination-ellipsis-color: $grey-light !default
|
||||
|
||||
$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
||||
|
||||
.pagination
|
||||
font-size: $size-normal
|
||||
margin: $pagination-margin
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
&.is-rounded
|
||||
.pagination-previous,
|
||||
.pagination-next
|
||||
padding-left: 1em
|
||||
padding-right: 1em
|
||||
border-radius: $radius-rounded
|
||||
.pagination-link
|
||||
border-radius: $radius-rounded
|
||||
|
||||
.pagination,
|
||||
.pagination-list
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
text-align: center
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link,
|
||||
.pagination-ellipsis
|
||||
@extend %control
|
||||
@extend %unselectable
|
||||
font-size: 1em
|
||||
padding-left: 0.5em
|
||||
padding-right: 0.5em
|
||||
justify-content: center
|
||||
margin: 0.25rem
|
||||
text-align: center
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link
|
||||
border-color: $pagination-border-color
|
||||
color: $pagination-color
|
||||
min-width: $pagination-min-width
|
||||
&:hover
|
||||
border-color: $pagination-hover-border-color
|
||||
color: $pagination-hover-color
|
||||
&:focus
|
||||
border-color: $pagination-focus-border-color
|
||||
&:active
|
||||
box-shadow: $pagination-shadow-inset
|
||||
&[disabled]
|
||||
background-color: $pagination-disabled-background-color
|
||||
border-color: $pagination-disabled-border-color
|
||||
box-shadow: none
|
||||
color: $pagination-disabled-color
|
||||
opacity: 0.5
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next
|
||||
padding-left: 0.75em
|
||||
padding-right: 0.75em
|
||||
white-space: nowrap
|
||||
|
||||
.pagination-link
|
||||
&.is-current
|
||||
background-color: $pagination-current-background-color
|
||||
border-color: $pagination-current-border-color
|
||||
color: $pagination-current-color
|
||||
|
||||
.pagination-ellipsis
|
||||
color: $pagination-ellipsis-color
|
||||
pointer-events: none
|
||||
|
||||
.pagination-list
|
||||
flex-wrap: wrap
|
||||
|
||||
+mobile
|
||||
.pagination
|
||||
flex-wrap: wrap
|
||||
.pagination-previous,
|
||||
.pagination-next
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
.pagination-list
|
||||
li
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
|
||||
+tablet
|
||||
.pagination-list
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
justify-content: flex-start
|
||||
order: 1
|
||||
.pagination-previous
|
||||
order: 2
|
||||
.pagination-next
|
||||
order: 3
|
||||
.pagination
|
||||
justify-content: space-between
|
||||
&.is-centered
|
||||
.pagination-previous
|
||||
order: 1
|
||||
.pagination-list
|
||||
justify-content: center
|
||||
order: 2
|
||||
.pagination-next
|
||||
order: 3
|
||||
&.is-right
|
||||
.pagination-previous
|
||||
order: 1
|
||||
.pagination-next
|
||||
order: 2
|
||||
.pagination-list
|
||||
justify-content: flex-end
|
||||
order: 3
|
||||
101
hyperglass/static/sass/components/panel.sass
vendored
101
hyperglass/static/sass/components/panel.sass
vendored
|
|
@ -1,101 +0,0 @@
|
|||
$panel-item-border: 1px solid $border !default
|
||||
|
||||
$panel-heading-background-color: $background !default
|
||||
$panel-heading-color: $text-strong !default
|
||||
$panel-heading-line-height: 1.25 !default
|
||||
$panel-heading-padding: 0.5em 0.75em !default
|
||||
$panel-heading-radius: $radius !default
|
||||
$panel-heading-size: 1.25em !default
|
||||
$panel-heading-weight: $weight-light !default
|
||||
|
||||
$panel-tab-border-bottom: 1px solid $border !default
|
||||
$panel-tab-active-border-bottom-color: $link-active-border !default
|
||||
$panel-tab-active-color: $link-active !default
|
||||
|
||||
$panel-list-item-color: $text !default
|
||||
$panel-list-item-hover-color: $link !default
|
||||
|
||||
$panel-block-color: $text-strong !default
|
||||
$panel-block-hover-background-color: $background !default
|
||||
$panel-block-active-border-left-color: $link !default
|
||||
$panel-block-active-color: $link-active !default
|
||||
$panel-block-active-icon-color: $link !default
|
||||
|
||||
$panel-icon-color: $text-light !default
|
||||
|
||||
.panel
|
||||
font-size: $size-normal
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.panel-heading,
|
||||
.panel-tabs,
|
||||
.panel-block
|
||||
border-bottom: $panel-item-border
|
||||
border-left: $panel-item-border
|
||||
border-right: $panel-item-border
|
||||
&:first-child
|
||||
border-top: $panel-item-border
|
||||
|
||||
.panel-heading
|
||||
background-color: $panel-heading-background-color
|
||||
border-radius: $panel-heading-radius $panel-heading-radius 0 0
|
||||
color: $panel-heading-color
|
||||
font-size: $panel-heading-size
|
||||
font-weight: $panel-heading-weight
|
||||
line-height: $panel-heading-line-height
|
||||
padding: $panel-heading-padding
|
||||
|
||||
.panel-tabs
|
||||
align-items: flex-end
|
||||
display: flex
|
||||
font-size: 0.875em
|
||||
justify-content: center
|
||||
a
|
||||
border-bottom: $panel-tab-border-bottom
|
||||
margin-bottom: -1px
|
||||
padding: 0.5em
|
||||
// Modifiers
|
||||
&.is-active
|
||||
border-bottom-color: $panel-tab-active-border-bottom-color
|
||||
color: $panel-tab-active-color
|
||||
|
||||
.panel-list
|
||||
a
|
||||
color: $panel-list-item-color
|
||||
&:hover
|
||||
color: $panel-list-item-hover-color
|
||||
|
||||
.panel-block
|
||||
align-items: center
|
||||
color: $panel-block-color
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
padding: 0.5em 0.75em
|
||||
input[type="checkbox"]
|
||||
margin-right: 0.75em
|
||||
& > .control
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
width: 100%
|
||||
&.is-wrapped
|
||||
flex-wrap: wrap
|
||||
&.is-active
|
||||
border-left-color: $panel-block-active-border-left-color
|
||||
color: $panel-block-active-color
|
||||
.panel-icon
|
||||
color: $panel-block-active-icon-color
|
||||
|
||||
a.panel-block,
|
||||
label.panel-block
|
||||
cursor: pointer
|
||||
&:hover
|
||||
background-color: $panel-block-hover-background-color
|
||||
|
||||
.panel-icon
|
||||
+fa(14px, 1em)
|
||||
color: $panel-icon-color
|
||||
margin-right: 0.75em
|
||||
.fa
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
151
hyperglass/static/sass/components/tabs.sass
vendored
151
hyperglass/static/sass/components/tabs.sass
vendored
|
|
@ -1,151 +0,0 @@
|
|||
$tabs-border-bottom-color: $border !default
|
||||
$tabs-border-bottom-style: solid !default
|
||||
$tabs-border-bottom-width: 1px !default
|
||||
$tabs-link-color: $text !default
|
||||
$tabs-link-hover-border-bottom-color: $text-strong !default
|
||||
$tabs-link-hover-color: $text-strong !default
|
||||
$tabs-link-active-border-bottom-color: $link !default
|
||||
$tabs-link-active-color: $link !default
|
||||
$tabs-link-padding: 0.5em 1em !default
|
||||
|
||||
$tabs-boxed-link-radius: $radius !default
|
||||
$tabs-boxed-link-hover-background-color: $background !default
|
||||
$tabs-boxed-link-hover-border-bottom-color: $border !default
|
||||
|
||||
$tabs-boxed-link-active-background-color: $white !default
|
||||
$tabs-boxed-link-active-border-color: $border !default
|
||||
$tabs-boxed-link-active-border-bottom-color: transparent !default
|
||||
|
||||
$tabs-toggle-link-border-color: $border !default
|
||||
$tabs-toggle-link-border-style: solid !default
|
||||
$tabs-toggle-link-border-width: 1px !default
|
||||
$tabs-toggle-link-hover-background-color: $background !default
|
||||
$tabs-toggle-link-hover-border-color: $border-hover !default
|
||||
$tabs-toggle-link-radius: $radius !default
|
||||
$tabs-toggle-link-active-background-color: $link !default
|
||||
$tabs-toggle-link-active-border-color: $link !default
|
||||
$tabs-toggle-link-active-color: $link-invert !default
|
||||
|
||||
.tabs
|
||||
@extend %block
|
||||
+overflow-touch
|
||||
@extend %unselectable
|
||||
align-items: stretch
|
||||
display: flex
|
||||
font-size: $size-normal
|
||||
justify-content: space-between
|
||||
overflow: hidden
|
||||
overflow-x: auto
|
||||
white-space: nowrap
|
||||
a
|
||||
align-items: center
|
||||
border-bottom-color: $tabs-border-bottom-color
|
||||
border-bottom-style: $tabs-border-bottom-style
|
||||
border-bottom-width: $tabs-border-bottom-width
|
||||
color: $tabs-link-color
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-bottom: -#{$tabs-border-bottom-width}
|
||||
padding: $tabs-link-padding
|
||||
vertical-align: top
|
||||
&:hover
|
||||
border-bottom-color: $tabs-link-hover-border-bottom-color
|
||||
color: $tabs-link-hover-color
|
||||
li
|
||||
display: block
|
||||
&.is-active
|
||||
a
|
||||
border-bottom-color: $tabs-link-active-border-bottom-color
|
||||
color: $tabs-link-active-color
|
||||
ul
|
||||
align-items: center
|
||||
border-bottom-color: $tabs-border-bottom-color
|
||||
border-bottom-style: $tabs-border-bottom-style
|
||||
border-bottom-width: $tabs-border-bottom-width
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
justify-content: flex-start
|
||||
&.is-left
|
||||
padding-right: 0.75em
|
||||
&.is-center
|
||||
flex: none
|
||||
justify-content: center
|
||||
padding-left: 0.75em
|
||||
padding-right: 0.75em
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
padding-left: 0.75em
|
||||
.icon
|
||||
&:first-child
|
||||
margin-right: 0.5em
|
||||
&:last-child
|
||||
margin-left: 0.5em
|
||||
// Alignment
|
||||
&.is-centered
|
||||
ul
|
||||
justify-content: center
|
||||
&.is-right
|
||||
ul
|
||||
justify-content: flex-end
|
||||
// Styles
|
||||
&.is-boxed
|
||||
a
|
||||
border: 1px solid transparent
|
||||
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
|
||||
&:hover
|
||||
background-color: $tabs-boxed-link-hover-background-color
|
||||
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
|
||||
li
|
||||
&.is-active
|
||||
a
|
||||
background-color: $tabs-boxed-link-active-background-color
|
||||
border-color: $tabs-boxed-link-active-border-color
|
||||
border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
|
||||
&.is-fullwidth
|
||||
li
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
&.is-toggle
|
||||
a
|
||||
border-color: $tabs-toggle-link-border-color
|
||||
border-style: $tabs-toggle-link-border-style
|
||||
border-width: $tabs-toggle-link-border-width
|
||||
margin-bottom: 0
|
||||
position: relative
|
||||
&:hover
|
||||
background-color: $tabs-toggle-link-hover-background-color
|
||||
border-color: $tabs-toggle-link-hover-border-color
|
||||
z-index: 2
|
||||
li
|
||||
& + li
|
||||
margin-left: -#{$tabs-toggle-link-border-width}
|
||||
&:first-child a
|
||||
border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
|
||||
&:last-child a
|
||||
border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
|
||||
&.is-active
|
||||
a
|
||||
background-color: $tabs-toggle-link-active-background-color
|
||||
border-color: $tabs-toggle-link-active-border-color
|
||||
color: $tabs-toggle-link-active-color
|
||||
z-index: 1
|
||||
ul
|
||||
border-bottom: none
|
||||
&.is-toggle-rounded
|
||||
li
|
||||
&:first-child a
|
||||
border-bottom-left-radius: $radius-rounded
|
||||
border-top-left-radius: $radius-rounded
|
||||
padding-left: 1.25em
|
||||
&:last-child a
|
||||
border-bottom-right-radius: $radius-rounded
|
||||
border-top-right-radius: $radius-rounded
|
||||
padding-right: 1.25em
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
// Custom Elements
|
||||
|
||||
.select:not(.is-multiple):not(.is-loading)::after
|
||||
border-color: $grey-light
|
||||
|
||||
html, body
|
||||
height: 100%
|
||||
|
||||
body
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.footer
|
||||
margin-top: auto
|
||||
width: 100%
|
||||
flex-shrink: 0
|
||||
bottom: 0
|
||||
overflow: hidden
|
||||
|
||||
#lg-title, #lg-subtitle
|
||||
color: findColorInvert($body-background-color)
|
||||
|
||||
.has-background-danger
|
||||
.title, .subtitle, p, a
|
||||
color: findColorInvert($danger)
|
||||
|
||||
.has-background-danger .footer
|
||||
p, a
|
||||
color: findColorInvert($danger)
|
||||
|
||||
.footer
|
||||
p, a
|
||||
color: findColorInvert($body-background-color)
|
||||
|
||||
.has-background-danger .content
|
||||
p, a
|
||||
color: findColorInvert($danger)
|
||||
|
||||
.content
|
||||
p, a
|
||||
color: findColorInvert($body-background-color)
|
||||
|
||||
.navbar, .navbar-menu, .navbar-brand, .navbar-tabs
|
||||
background-color: $body-background-color
|
||||
|
||||
.navbar-item
|
||||
color: findColorInvert($body-background-color)
|
||||
|
||||
a.navbar-item:hover
|
||||
color: $lg-btn-submit
|
||||
background-color: transparent
|
||||
|
||||
.button.lg-btn-submit
|
||||
background-color: $lg-btn-submit
|
||||
border-color: transparent
|
||||
color: findColorInvert($lg-btn-submit)
|
||||
|
||||
.tag.lg-tag-loc-title
|
||||
background-color: $lg-tag-loc_title
|
||||
color: findColorInvert($lg-tag-loc_title)
|
||||
font-family: $family-monospace
|
||||
|
||||
.tag.lg-tag-loc
|
||||
background-color: $lg-tag-loc
|
||||
color: findColorInvert($lg-tag-loc)
|
||||
|
||||
.tag.lg-tag-type-title
|
||||
background-color: $lg-tag-type_title
|
||||
color: findColorInvert($lg-tag-type_title)
|
||||
|
||||
.tag.lg-tag-type
|
||||
background-color: $lg-tag-type
|
||||
color: findColorInvert($lg-tag-type)
|
||||
font-family: $family-monospace
|
||||
|
||||
.progress.lg-progressbar:indeterminate
|
||||
background-image: linear-gradient(to right,$lg-progressbar 30%,$grey-lighter 30%)
|
||||
|
||||
.message-body pre
|
||||
background-color: transparent!important
|
||||
|
||||
.query-output
|
||||
font-family: $family-monospace
|
||||
font-size: 0.95em
|
||||
width: 100%
|
||||
-webkit-overflow-scrolling: touch
|
||||
overflow-x: auto
|
||||
white-space: pre
|
||||
|
||||
.dropdown-content.lg-help
|
||||
width: 24rem
|
||||
|
||||
.dropdown-content.lg-help-mobile
|
||||
width: 20rem
|
||||
|
||||
.icon.lg-icon-help
|
||||
color: $grey-light
|
||||
|
||||
#target::-webkit-input-placeholder
|
||||
font-family: $family-sans-serif
|
||||
|
||||
#target:-ms-input-placeholder
|
||||
font-family: $family-sans-serif
|
||||
|
||||
#target:-moz-placeholder
|
||||
font-family: $family-sans-serif
|
||||
|
||||
#target::-moz-placeholder
|
||||
font-family: $family-sans-serif
|
||||
16
hyperglass/static/sass/elements/_all.sass
vendored
16
hyperglass/static/sass/elements/_all.sass
vendored
|
|
@ -1,16 +0,0 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "box.sass"
|
||||
@import "button.sass"
|
||||
@import "container.sass"
|
||||
@import "content.sass"
|
||||
@import "form.sass"
|
||||
@import "icon.sass"
|
||||
@import "image.sass"
|
||||
@import "notification.sass"
|
||||
@import "progress.sass"
|
||||
@import "table.sass"
|
||||
@import "tag.sass"
|
||||
@import "title.sass"
|
||||
|
||||
@import "other.sass"
|
||||
24
hyperglass/static/sass/elements/box.sass
vendored
24
hyperglass/static/sass/elements/box.sass
vendored
|
|
@ -1,24 +0,0 @@
|
|||
$box-color: $text !default
|
||||
$box-background-color: $white !default
|
||||
$box-radius: $radius-large !default
|
||||
$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||
$box-padding: 1.25rem !default
|
||||
|
||||
$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
|
||||
$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
|
||||
|
||||
.box
|
||||
@extend %block
|
||||
background-color: $box-background-color
|
||||
border-radius: $box-radius
|
||||
box-shadow: $box-shadow
|
||||
color: $box-color
|
||||
display: block
|
||||
padding: $box-padding
|
||||
|
||||
a.box
|
||||
&:hover,
|
||||
&:focus
|
||||
box-shadow: $box-link-hover-shadow
|
||||
&:active
|
||||
box-shadow: $box-link-active-shadow
|
||||
275
hyperglass/static/sass/elements/button.sass
vendored
275
hyperglass/static/sass/elements/button.sass
vendored
|
|
@ -1,275 +0,0 @@
|
|||
$button-color: $grey-darker !default
|
||||
$button-background-color: $white !default
|
||||
|
||||
$button-border-color: $grey-lighter !default
|
||||
$button-border-width: $control-border-width !default
|
||||
|
||||
$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default
|
||||
$button-padding-horizontal: 0.75em !default
|
||||
|
||||
$button-hover-color: $link-hover !default
|
||||
$button-hover-border-color: $link-hover-border !default
|
||||
|
||||
$button-focus-color: $link-focus !default
|
||||
$button-focus-border-color: $link-focus-border !default
|
||||
$button-focus-box-shadow-size: 0 0 0 0.125em !default
|
||||
$button-focus-box-shadow-color: rgba($link, 0.25) !default
|
||||
|
||||
$button-active-color: $link-active !default
|
||||
$button-active-border-color: $link-active-border !default
|
||||
|
||||
$button-text-color: $text !default
|
||||
$button-text-hover-background-color: $background !default
|
||||
$button-text-hover-color: $text-strong !default
|
||||
|
||||
$button-disabled-background-color: $white !default
|
||||
$button-disabled-border-color: $grey-lighter !default
|
||||
$button-disabled-shadow: none !default
|
||||
$button-disabled-opacity: 0.5 !default
|
||||
|
||||
$button-static-color: $grey !default
|
||||
$button-static-background-color: $white-ter !default
|
||||
$button-static-border-color: $grey-lighter !default
|
||||
|
||||
// The button sizes use mixins so they can be used at different breakpoints
|
||||
=button-small
|
||||
border-radius: $radius-small
|
||||
font-size: $size-small
|
||||
=button-normal
|
||||
font-size: $size-normal
|
||||
=button-medium
|
||||
font-size: $size-medium
|
||||
=button-large
|
||||
font-size: $size-large
|
||||
|
||||
.button
|
||||
@extend %control
|
||||
@extend %unselectable
|
||||
background-color: $button-background-color
|
||||
border-color: $button-border-color
|
||||
border-width: $button-border-width
|
||||
color: $button-color
|
||||
cursor: pointer
|
||||
justify-content: center
|
||||
padding-bottom: $button-padding-vertical
|
||||
padding-left: $button-padding-horizontal
|
||||
padding-right: $button-padding-horizontal
|
||||
padding-top: $button-padding-vertical
|
||||
text-align: center
|
||||
white-space: nowrap
|
||||
strong
|
||||
color: inherit
|
||||
.icon
|
||||
&,
|
||||
&.is-small,
|
||||
&.is-medium,
|
||||
&.is-large
|
||||
height: 1.5em
|
||||
width: 1.5em
|
||||
&:first-child:not(:last-child)
|
||||
margin-left: calc(-0.375em - #{$button-border-width})
|
||||
margin-right: 0.1875em
|
||||
&:last-child:not(:first-child)
|
||||
margin-left: 0.1875em
|
||||
margin-right: calc(-0.375em - #{$button-border-width})
|
||||
&:first-child:last-child
|
||||
margin-left: calc(-0.375em - #{$button-border-width})
|
||||
margin-right: calc(-0.375em - #{$button-border-width})
|
||||
// States
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: $button-hover-border-color
|
||||
color: $button-hover-color
|
||||
&:focus,
|
||||
&.is-focused
|
||||
border-color: $button-focus-border-color
|
||||
color: $button-focus-color
|
||||
&:not(:active)
|
||||
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
|
||||
&:active,
|
||||
&.is-active
|
||||
border-color: $button-active-border-color
|
||||
color: $button-active-color
|
||||
// Colors
|
||||
&.is-text
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $button-text-color
|
||||
text-decoration: underline
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
background-color: $button-text-hover-background-color
|
||||
color: $button-text-hover-color
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: darken($button-text-hover-background-color, 5%)
|
||||
color: $button-text-hover-color
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
box-shadow: none
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
background-color: darken($color, 2.5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:focus,
|
||||
&.is-focused
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:not(:active)
|
||||
box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: darken($color, 5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $color
|
||||
border-color: transparent
|
||||
box-shadow: none
|
||||
&.is-inverted
|
||||
background-color: $color-invert
|
||||
color: $color
|
||||
&:hover
|
||||
background-color: darken($color-invert, 5%)
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $color-invert
|
||||
border-color: transparent
|
||||
box-shadow: none
|
||||
color: $color
|
||||
&.is-loading
|
||||
&::after
|
||||
border-color: transparent transparent $color-invert $color-invert !important
|
||||
&.is-outlined
|
||||
background-color: transparent
|
||||
border-color: $color
|
||||
color: $color
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
color: $color-invert
|
||||
&.is-loading
|
||||
&::after
|
||||
border-color: transparent transparent $color $color !important
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: transparent
|
||||
border-color: $color
|
||||
box-shadow: none
|
||||
color: $color
|
||||
&.is-inverted.is-outlined
|
||||
background-color: transparent
|
||||
border-color: $color-invert
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: $color-invert
|
||||
color: $color
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: transparent
|
||||
border-color: $color-invert
|
||||
box-shadow: none
|
||||
color: $color-invert
|
||||
// Sizes
|
||||
&.is-small
|
||||
+button-small
|
||||
&.is-normal
|
||||
+button-normal
|
||||
&.is-medium
|
||||
+button-medium
|
||||
&.is-large
|
||||
+button-large
|
||||
// Modifiers
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $button-disabled-background-color
|
||||
border-color: $button-disabled-border-color
|
||||
box-shadow: $button-disabled-shadow
|
||||
opacity: $button-disabled-opacity
|
||||
&.is-fullwidth
|
||||
display: flex
|
||||
width: 100%
|
||||
&.is-loading
|
||||
color: transparent !important
|
||||
pointer-events: none
|
||||
&::after
|
||||
@extend %loader
|
||||
+center(1em)
|
||||
position: absolute !important
|
||||
&.is-static
|
||||
background-color: $button-static-background-color
|
||||
border-color: $button-static-border-color
|
||||
color: $button-static-color
|
||||
box-shadow: none
|
||||
pointer-events: none
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
padding-left: 1em
|
||||
padding-right: 1em
|
||||
|
||||
.buttons
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
.button
|
||||
margin-bottom: 0.5rem
|
||||
&:not(:last-child):not(.is-fullwidth)
|
||||
margin-right: 0.5rem
|
||||
&:last-child
|
||||
margin-bottom: -0.5rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1rem
|
||||
// Sizes
|
||||
&.are-small
|
||||
.button:not(.is-normal):not(.is-medium):not(.is-large)
|
||||
+button-small
|
||||
&.are-medium
|
||||
.button:not(.is-small):not(.is-normal):not(.is-large)
|
||||
+button-medium
|
||||
&.are-large
|
||||
.button:not(.is-small):not(.is-normal):not(.is-medium)
|
||||
+button-large
|
||||
&.has-addons
|
||||
.button
|
||||
&:not(:first-child)
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&:not(:last-child)
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
margin-right: -1px
|
||||
&:last-child
|
||||
margin-right: 0
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
z-index: 2
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active,
|
||||
&.is-selected
|
||||
z-index: 3
|
||||
&:hover
|
||||
z-index: 4
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
25
hyperglass/static/sass/elements/container.sass
vendored
25
hyperglass/static/sass/elements/container.sass
vendored
|
|
@ -1,25 +0,0 @@
|
|||
.container
|
||||
margin: 0 auto
|
||||
position: relative
|
||||
+desktop
|
||||
max-width: $desktop - (2 * $gap)
|
||||
width: $desktop - (2 * $gap)
|
||||
&.is-fluid
|
||||
margin-left: $gap
|
||||
margin-right: $gap
|
||||
max-width: none
|
||||
width: auto
|
||||
+until-widescreen
|
||||
&.is-widescreen
|
||||
max-width: $widescreen - (2 * $gap)
|
||||
width: auto
|
||||
+until-fullhd
|
||||
&.is-fullhd
|
||||
max-width: $fullhd - (2 * $gap)
|
||||
width: auto
|
||||
+widescreen
|
||||
max-width: $widescreen - (2 * $gap)
|
||||
width: $widescreen - (2 * $gap)
|
||||
+fullhd
|
||||
max-width: $fullhd - (2 * $gap)
|
||||
width: $fullhd - (2 * $gap)
|
||||
151
hyperglass/static/sass/elements/content.sass
vendored
151
hyperglass/static/sass/elements/content.sass
vendored
|
|
@ -1,151 +0,0 @@
|
|||
$content-heading-color: $text-strong !default
|
||||
$content-heading-weight: $weight-semibold !default
|
||||
$content-heading-line-height: 1.125 !default
|
||||
|
||||
$content-blockquote-background-color: $background !default
|
||||
$content-blockquote-border-left: 5px solid $border !default
|
||||
$content-blockquote-padding: 1.25em 1.5em !default
|
||||
|
||||
$content-pre-padding: 1.25em 1.5em !default
|
||||
|
||||
$content-table-cell-border: 1px solid $border !default
|
||||
$content-table-cell-border-width: 0 0 1px !default
|
||||
$content-table-cell-padding: 0.5em 0.75em !default
|
||||
$content-table-cell-heading-color: $text-strong !default
|
||||
$content-table-head-cell-border-width: 0 0 2px !default
|
||||
$content-table-head-cell-color: $text-strong !default
|
||||
$content-table-foot-cell-border-width: 2px 0 0 !default
|
||||
$content-table-foot-cell-color: $text-strong !default
|
||||
|
||||
.content
|
||||
@extend %block
|
||||
// Inline
|
||||
li + li
|
||||
margin-top: 0.25em
|
||||
// Block
|
||||
p,
|
||||
dl,
|
||||
ol,
|
||||
ul,
|
||||
blockquote,
|
||||
pre,
|
||||
table
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1em
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
color: $content-heading-color
|
||||
font-weight: $content-heading-weight
|
||||
line-height: $content-heading-line-height
|
||||
h1
|
||||
font-size: 2em
|
||||
margin-bottom: 0.5em
|
||||
&:not(:first-child)
|
||||
margin-top: 1em
|
||||
h2
|
||||
font-size: 1.75em
|
||||
margin-bottom: 0.5714em
|
||||
&:not(:first-child)
|
||||
margin-top: 1.1428em
|
||||
h3
|
||||
font-size: 1.5em
|
||||
margin-bottom: 0.6666em
|
||||
&:not(:first-child)
|
||||
margin-top: 1.3333em
|
||||
h4
|
||||
font-size: 1.25em
|
||||
margin-bottom: 0.8em
|
||||
h5
|
||||
font-size: 1.125em
|
||||
margin-bottom: 0.8888em
|
||||
h6
|
||||
font-size: 1em
|
||||
margin-bottom: 1em
|
||||
blockquote
|
||||
background-color: $content-blockquote-background-color
|
||||
border-left: $content-blockquote-border-left
|
||||
padding: $content-blockquote-padding
|
||||
ol
|
||||
list-style-position: outside
|
||||
margin-left: 2em
|
||||
margin-top: 1em
|
||||
&:not([type])
|
||||
list-style-type: decimal
|
||||
&.is-lower-alpha
|
||||
list-style-type: lower-alpha
|
||||
&.is-lower-roman
|
||||
list-style-type: lower-roman
|
||||
&.is-upper-alpha
|
||||
list-style-type: upper-alpha
|
||||
&.is-upper-roman
|
||||
list-style-type: upper-roman
|
||||
ul
|
||||
list-style: disc outside
|
||||
margin-left: 2em
|
||||
margin-top: 1em
|
||||
ul
|
||||
list-style-type: circle
|
||||
margin-top: 0.5em
|
||||
ul
|
||||
list-style-type: square
|
||||
dd
|
||||
margin-left: 2em
|
||||
figure
|
||||
margin-left: 2em
|
||||
margin-right: 2em
|
||||
text-align: center
|
||||
&:not(:first-child)
|
||||
margin-top: 2em
|
||||
&:not(:last-child)
|
||||
margin-bottom: 2em
|
||||
img
|
||||
display: inline-block
|
||||
figcaption
|
||||
font-style: italic
|
||||
pre
|
||||
+overflow-touch
|
||||
overflow-x: auto
|
||||
padding: $content-pre-padding
|
||||
white-space: pre
|
||||
word-wrap: normal
|
||||
sup,
|
||||
sub
|
||||
font-size: 75%
|
||||
table
|
||||
width: 100%
|
||||
td,
|
||||
th
|
||||
border: $content-table-cell-border
|
||||
border-width: $content-table-cell-border-width
|
||||
padding: $content-table-cell-padding
|
||||
vertical-align: top
|
||||
th
|
||||
color: $content-table-cell-heading-color
|
||||
text-align: left
|
||||
thead
|
||||
td,
|
||||
th
|
||||
border-width: $content-table-head-cell-border-width
|
||||
color: $content-table-head-cell-color
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
border-width: $content-table-foot-cell-border-width
|
||||
color: $content-table-foot-cell-color
|
||||
tbody
|
||||
tr
|
||||
&:last-child
|
||||
td,
|
||||
th
|
||||
border-bottom-width: 0
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
602
hyperglass/static/sass/elements/form.sass
vendored
602
hyperglass/static/sass/elements/form.sass
vendored
|
|
@ -1,602 +0,0 @@
|
|||
$input-color: $grey-darker !default
|
||||
$input-background-color: $white !default
|
||||
$input-border-color: $grey-lighter !default
|
||||
$input-height: $control-height !default
|
||||
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
|
||||
$input-placeholder-color: rgba($input-color, 0.3) !default
|
||||
|
||||
$input-hover-color: $grey-darker !default
|
||||
$input-hover-border-color: $grey-light !default
|
||||
|
||||
$input-focus-color: $grey-darker !default
|
||||
$input-focus-border-color: $link !default
|
||||
$input-focus-box-shadow-size: 0 0 0 0.125em !default
|
||||
$input-focus-box-shadow-color: rgba($link, 0.25) !default
|
||||
|
||||
$input-disabled-color: $text-light !default
|
||||
$input-disabled-background-color: $background !default
|
||||
$input-disabled-border-color: $background !default
|
||||
$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
|
||||
|
||||
$input-arrow: $link !default
|
||||
|
||||
$input-icon-color: $grey-lighter !default
|
||||
$input-icon-active-color: $grey !default
|
||||
|
||||
$input-radius: $radius !default
|
||||
|
||||
$file-border-color: $border !default
|
||||
$file-radius: $radius !default
|
||||
|
||||
$file-cta-background-color: $white-ter !default
|
||||
$file-cta-color: $grey-dark !default
|
||||
$file-cta-hover-color: $grey-darker !default
|
||||
$file-cta-active-color: $grey-darker !default
|
||||
|
||||
$file-name-border-color: $border !default
|
||||
$file-name-border-style: solid !default
|
||||
$file-name-border-width: 1px 1px 1px 0 !default
|
||||
$file-name-max-width: 16em !default
|
||||
|
||||
$label-color: $grey-darker !default
|
||||
$label-weight: $weight-bold !default
|
||||
|
||||
$help-size: $size-small !default
|
||||
|
||||
=input
|
||||
@extend %control
|
||||
background-color: $input-background-color
|
||||
border-color: $input-border-color
|
||||
color: $input-color
|
||||
+placeholder
|
||||
color: $input-placeholder-color
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: $input-hover-border-color
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
border-color: $input-focus-border-color
|
||||
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $input-disabled-background-color
|
||||
border-color: $input-disabled-border-color
|
||||
box-shadow: none
|
||||
color: $input-disabled-color
|
||||
+placeholder
|
||||
color: $input-disabled-placeholder-color
|
||||
|
||||
.input,
|
||||
.textarea
|
||||
+input
|
||||
box-shadow: $input-shadow
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
&[readonly]
|
||||
box-shadow: none
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
border-color: $color
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
&.is-medium
|
||||
+control-medium
|
||||
&.is-large
|
||||
+control-large
|
||||
// Modifiers
|
||||
&.is-fullwidth
|
||||
display: block
|
||||
width: 100%
|
||||
&.is-inline
|
||||
display: inline
|
||||
width: auto
|
||||
|
||||
.input
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
padding-left: 1em
|
||||
padding-right: 1em
|
||||
&.is-static
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
box-shadow: none
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
.textarea
|
||||
display: block
|
||||
max-width: 100%
|
||||
min-width: 100%
|
||||
padding: 0.625em
|
||||
resize: vertical
|
||||
&:not([rows])
|
||||
max-height: 600px
|
||||
min-height: 120px
|
||||
&[rows]
|
||||
height: initial
|
||||
// Modifiers
|
||||
&.has-fixed-size
|
||||
resize: none
|
||||
|
||||
.checkbox,
|
||||
.radio
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
line-height: 1.25
|
||||
position: relative
|
||||
input
|
||||
cursor: pointer
|
||||
&:hover
|
||||
color: $input-hover-color
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
color: $input-disabled-color
|
||||
cursor: not-allowed
|
||||
|
||||
.radio
|
||||
& + .radio
|
||||
margin-left: 0.5em
|
||||
|
||||
.select
|
||||
display: inline-block
|
||||
max-width: 100%
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&:not(.is-multiple)
|
||||
height: $input-height
|
||||
&:not(.is-multiple):not(.is-loading)
|
||||
&::after
|
||||
@extend %arrow
|
||||
border-color: $input-arrow
|
||||
right: 1.125em
|
||||
z-index: 4
|
||||
&.is-rounded
|
||||
select
|
||||
border-radius: $radius-rounded
|
||||
padding-left: 1em
|
||||
select
|
||||
+input
|
||||
cursor: pointer
|
||||
display: block
|
||||
font-size: 1em
|
||||
max-width: 100%
|
||||
outline: none
|
||||
&::-ms-expand
|
||||
display: none
|
||||
&[disabled]:hover,
|
||||
fieldset[disabled] &:hover
|
||||
border-color: $input-disabled-border-color
|
||||
&:not([multiple])
|
||||
padding-right: 2.5em
|
||||
&[multiple]
|
||||
height: auto
|
||||
padding: 0
|
||||
option
|
||||
padding: 0.5em 1em
|
||||
// States
|
||||
&:not(.is-multiple):not(.is-loading):hover
|
||||
&::after
|
||||
border-color: $input-hover-color
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
&:not(:hover)::after
|
||||
border-color: $color
|
||||
select
|
||||
border-color: $color
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: darken($color, 5%)
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
&.is-medium
|
||||
+control-medium
|
||||
&.is-large
|
||||
+control-large
|
||||
// Modifiers
|
||||
&.is-disabled
|
||||
&::after
|
||||
border-color: $input-disabled-color
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
select
|
||||
width: 100%
|
||||
&.is-loading
|
||||
&::after
|
||||
@extend %loader
|
||||
margin-top: 0
|
||||
position: absolute
|
||||
right: 0.625em
|
||||
top: 0.625em
|
||||
transform: none
|
||||
&.is-small:after
|
||||
font-size: $size-small
|
||||
&.is-medium:after
|
||||
font-size: $size-medium
|
||||
&.is-large:after
|
||||
font-size: $size-large
|
||||
|
||||
.file
|
||||
@extend %unselectable
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
position: relative
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
.file-cta
|
||||
background-color: $color
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
.file-cta
|
||||
background-color: darken($color, 2.5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:focus,
|
||||
&.is-focused
|
||||
.file-cta
|
||||
border-color: transparent
|
||||
box-shadow: 0 0 0.5em rgba($color, 0.25)
|
||||
color: $color-invert
|
||||
&:active,
|
||||
&.is-active
|
||||
.file-cta
|
||||
background-color: darken($color, 5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
.file-icon
|
||||
.fa
|
||||
font-size: 21px
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
.file-icon
|
||||
.fa
|
||||
font-size: 28px
|
||||
// Modifiers
|
||||
&.has-name
|
||||
.file-cta
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
.file-name
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&.is-empty
|
||||
.file-cta
|
||||
border-radius: $file-radius
|
||||
.file-name
|
||||
display: none
|
||||
&.is-boxed
|
||||
.file-label
|
||||
flex-direction: column
|
||||
.file-cta
|
||||
flex-direction: column
|
||||
height: auto
|
||||
padding: 1em 3em
|
||||
.file-name
|
||||
border-width: 0 1px 1px
|
||||
.file-icon
|
||||
height: 1.5em
|
||||
width: 1.5em
|
||||
.fa
|
||||
font-size: 21px
|
||||
&.is-small
|
||||
.file-icon .fa
|
||||
font-size: 14px
|
||||
&.is-medium
|
||||
.file-icon .fa
|
||||
font-size: 28px
|
||||
&.is-large
|
||||
.file-icon .fa
|
||||
font-size: 35px
|
||||
&.has-name
|
||||
.file-cta
|
||||
border-radius: $file-radius $file-radius 0 0
|
||||
.file-name
|
||||
border-radius: 0 0 $file-radius $file-radius
|
||||
border-width: 0 1px 1px
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&.is-fullwidth
|
||||
.file-label
|
||||
width: 100%
|
||||
.file-name
|
||||
flex-grow: 1
|
||||
max-width: none
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
.file-cta
|
||||
border-radius: 0 $file-radius $file-radius 0
|
||||
.file-name
|
||||
border-radius: $file-radius 0 0 $file-radius
|
||||
border-width: 1px 0 1px 1px
|
||||
order: -1
|
||||
|
||||
.file-label
|
||||
align-items: stretch
|
||||
display: flex
|
||||
cursor: pointer
|
||||
justify-content: flex-start
|
||||
overflow: hidden
|
||||
position: relative
|
||||
&:hover
|
||||
.file-cta
|
||||
background-color: darken($file-cta-background-color, 2.5%)
|
||||
color: $file-cta-hover-color
|
||||
.file-name
|
||||
border-color: darken($file-name-border-color, 2.5%)
|
||||
&:active
|
||||
.file-cta
|
||||
background-color: darken($file-cta-background-color, 5%)
|
||||
color: $file-cta-active-color
|
||||
.file-name
|
||||
border-color: darken($file-name-border-color, 5%)
|
||||
|
||||
.file-input
|
||||
height: 100%
|
||||
left: 0
|
||||
opacity: 0
|
||||
outline: none
|
||||
position: absolute
|
||||
top: 0
|
||||
width: 100%
|
||||
|
||||
.file-cta,
|
||||
.file-name
|
||||
@extend %control
|
||||
border-color: $file-border-color
|
||||
border-radius: $file-radius
|
||||
font-size: 1em
|
||||
padding-left: 1em
|
||||
padding-right: 1em
|
||||
white-space: nowrap
|
||||
|
||||
.file-cta
|
||||
background-color: $file-cta-background-color
|
||||
color: $file-cta-color
|
||||
|
||||
.file-name
|
||||
border-color: $file-name-border-color
|
||||
border-style: $file-name-border-style
|
||||
border-width: $file-name-border-width
|
||||
display: block
|
||||
max-width: $file-name-max-width
|
||||
overflow: hidden
|
||||
text-align: left
|
||||
text-overflow: ellipsis
|
||||
|
||||
.file-icon
|
||||
align-items: center
|
||||
display: flex
|
||||
height: 1em
|
||||
justify-content: center
|
||||
margin-right: 0.5em
|
||||
width: 1em
|
||||
.fa
|
||||
font-size: 14px
|
||||
|
||||
.label
|
||||
color: $label-color
|
||||
display: block
|
||||
font-size: $size-normal
|
||||
font-weight: $label-weight
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.5em
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
|
||||
.help
|
||||
display: block
|
||||
font-size: $help-size
|
||||
margin-top: 0.25rem
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
color: $color
|
||||
|
||||
// Containers
|
||||
|
||||
.field
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
// Modifiers
|
||||
&.has-addons
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
.control
|
||||
&:not(:last-child)
|
||||
margin-right: -1px
|
||||
&:not(:first-child):not(:last-child)
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
border-radius: 0
|
||||
&:first-child:not(:only-child)
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
&:last-child:not(:only-child)
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
&:not([disabled])
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
z-index: 2
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
z-index: 3
|
||||
&:hover
|
||||
z-index: 4
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
&.has-addons-centered
|
||||
justify-content: center
|
||||
&.has-addons-right
|
||||
justify-content: flex-end
|
||||
&.has-addons-fullwidth
|
||||
.control
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
&.is-grouped
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
& > .control
|
||||
flex-shrink: 0
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
margin-right: 0.75rem
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.is-grouped-centered
|
||||
justify-content: center
|
||||
&.is-grouped-right
|
||||
justify-content: flex-end
|
||||
&.is-grouped-multiline
|
||||
flex-wrap: wrap
|
||||
& > .control
|
||||
&:last-child,
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
&:last-child
|
||||
margin-bottom: -0.75rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
&.is-horizontal
|
||||
+tablet
|
||||
display: flex
|
||||
|
||||
.field-label
|
||||
.label
|
||||
font-size: inherit
|
||||
+mobile
|
||||
margin-bottom: 0.5rem
|
||||
+tablet
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
margin-right: 1.5rem
|
||||
text-align: right
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
padding-top: 0.375em
|
||||
&.is-normal
|
||||
padding-top: 0.375em
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
padding-top: 0.375em
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
padding-top: 0.375em
|
||||
|
||||
.field-body
|
||||
.field .field
|
||||
margin-bottom: 0
|
||||
+tablet
|
||||
display: flex
|
||||
flex-basis: 0
|
||||
flex-grow: 5
|
||||
flex-shrink: 1
|
||||
.field
|
||||
margin-bottom: 0
|
||||
& > .field
|
||||
flex-shrink: 1
|
||||
&:not(.is-narrow)
|
||||
flex-grow: 1
|
||||
&:not(:last-child)
|
||||
margin-right: 0.75rem
|
||||
|
||||
.control
|
||||
box-sizing: border-box
|
||||
clear: both //fixes the icon floating out of the input when help text is floated right
|
||||
font-size: $size-normal
|
||||
position: relative
|
||||
text-align: left
|
||||
// Modifiers
|
||||
&.has-icons-left,
|
||||
&.has-icons-right
|
||||
.input,
|
||||
.select
|
||||
&:focus
|
||||
& ~ .icon
|
||||
color: $input-icon-active-color
|
||||
&.is-small ~ .icon
|
||||
font-size: $size-small
|
||||
&.is-medium ~ .icon
|
||||
font-size: $size-medium
|
||||
&.is-large ~ .icon
|
||||
font-size: $size-large
|
||||
.icon
|
||||
color: $input-icon-color
|
||||
height: $input-height
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 0
|
||||
width: $input-height
|
||||
z-index: 4
|
||||
&.has-icons-left
|
||||
.input,
|
||||
.select select
|
||||
padding-left: $input-height
|
||||
.icon.is-left
|
||||
left: 0
|
||||
&.has-icons-right
|
||||
.input,
|
||||
.select select
|
||||
padding-right: $input-height
|
||||
.icon.is-right
|
||||
right: 0
|
||||
&.is-loading
|
||||
&::after
|
||||
@extend %loader
|
||||
position: absolute !important
|
||||
right: 0.625em
|
||||
top: 0.625em
|
||||
z-index: 4
|
||||
&.is-small:after
|
||||
font-size: $size-small
|
||||
&.is-medium:after
|
||||
font-size: $size-medium
|
||||
&.is-large:after
|
||||
font-size: $size-large
|
||||
21
hyperglass/static/sass/elements/icon.sass
vendored
21
hyperglass/static/sass/elements/icon.sass
vendored
|
|
@ -1,21 +0,0 @@
|
|||
$icon-dimensions: 1.5rem !default
|
||||
$icon-dimensions-small: 1rem !default
|
||||
$icon-dimensions-medium: 2rem !default
|
||||
$icon-dimensions-large: 3rem !default
|
||||
|
||||
.icon
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
justify-content: center
|
||||
height: $icon-dimensions
|
||||
width: $icon-dimensions
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: $icon-dimensions-small
|
||||
width: $icon-dimensions-small
|
||||
&.is-medium
|
||||
height: $icon-dimensions-medium
|
||||
width: $icon-dimensions-medium
|
||||
&.is-large
|
||||
height: $icon-dimensions-large
|
||||
width: $icon-dimensions-large
|
||||
69
hyperglass/static/sass/elements/image.sass
vendored
69
hyperglass/static/sass/elements/image.sass
vendored
|
|
@ -1,69 +0,0 @@
|
|||
$dimensions: 16 24 32 48 64 96 128 !default
|
||||
|
||||
.image
|
||||
display: block
|
||||
position: relative
|
||||
img
|
||||
display: block
|
||||
height: auto
|
||||
width: 100%
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
// Ratio
|
||||
&.is-square,
|
||||
&.is-1by1,
|
||||
&.is-5by4,
|
||||
&.is-4by3,
|
||||
&.is-3by2,
|
||||
&.is-5by3,
|
||||
&.is-16by9,
|
||||
&.is-2by1,
|
||||
&.is-3by1,
|
||||
&.is-4by5,
|
||||
&.is-3by4,
|
||||
&.is-2by3,
|
||||
&.is-3by5,
|
||||
&.is-9by16,
|
||||
&.is-1by2,
|
||||
&.is-1by3
|
||||
img,
|
||||
.has-ratio
|
||||
@extend %overlay
|
||||
height: 100%
|
||||
width: 100%
|
||||
&.is-square,
|
||||
&.is-1by1
|
||||
padding-top: 100%
|
||||
&.is-5by4
|
||||
padding-top: 80%
|
||||
&.is-4by3
|
||||
padding-top: 75%
|
||||
&.is-3by2
|
||||
padding-top: 66.6666%
|
||||
&.is-5by3
|
||||
padding-top: 60%
|
||||
&.is-16by9
|
||||
padding-top: 56.25%
|
||||
&.is-2by1
|
||||
padding-top: 50%
|
||||
&.is-3by1
|
||||
padding-top: 33.3333%
|
||||
&.is-4by5
|
||||
padding-top: 125%
|
||||
&.is-3by4
|
||||
padding-top: 133.3333%
|
||||
&.is-2by3
|
||||
padding-top: 150%
|
||||
&.is-3by5
|
||||
padding-top: 166.6666%
|
||||
&.is-9by16
|
||||
padding-top: 177.7777%
|
||||
&.is-1by2
|
||||
padding-top: 200%
|
||||
&.is-1by3
|
||||
padding-top: 300%
|
||||
// Sizes
|
||||
@each $dimension in $dimensions
|
||||
&.is-#{$dimension}x#{$dimension}
|
||||
height: $dimension * 1px
|
||||
width: $dimension * 1px
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
$notification-background-color: $background !default
|
||||
$notification-radius: $radius !default
|
||||
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
|
||||
.notification
|
||||
@extend %block
|
||||
background-color: $notification-background-color
|
||||
border-radius: $notification-radius
|
||||
padding: $notification-padding
|
||||
position: relative
|
||||
a:not(.button):not(.dropdown-item)
|
||||
color: currentColor
|
||||
text-decoration: underline
|
||||
strong
|
||||
color: currentColor
|
||||
code,
|
||||
pre
|
||||
background: $white
|
||||
pre code
|
||||
background: transparent
|
||||
& > .delete
|
||||
position: absolute
|
||||
right: 0.5rem
|
||||
top: 0.5rem
|
||||
.title,
|
||||
.subtitle,
|
||||
.content
|
||||
color: currentColor
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
39
hyperglass/static/sass/elements/other.sass
vendored
39
hyperglass/static/sass/elements/other.sass
vendored
|
|
@ -1,39 +0,0 @@
|
|||
.block
|
||||
@extend %block
|
||||
|
||||
.delete
|
||||
@extend %delete
|
||||
|
||||
.heading
|
||||
display: block
|
||||
font-size: 11px
|
||||
letter-spacing: 1px
|
||||
margin-bottom: 5px
|
||||
text-transform: uppercase
|
||||
|
||||
.highlight
|
||||
@extend %block
|
||||
font-weight: $weight-normal
|
||||
max-width: 100%
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
pre
|
||||
overflow: auto
|
||||
max-width: 100%
|
||||
|
||||
.loader
|
||||
@extend %loader
|
||||
|
||||
.number
|
||||
align-items: center
|
||||
background-color: $background
|
||||
border-radius: $radius-rounded
|
||||
display: inline-flex
|
||||
font-size: $size-medium
|
||||
height: 2em
|
||||
justify-content: center
|
||||
margin-right: 1.5rem
|
||||
min-width: 2.5em
|
||||
padding: 0.25rem 0.5rem
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
65
hyperglass/static/sass/elements/progress.sass
vendored
65
hyperglass/static/sass/elements/progress.sass
vendored
|
|
@ -1,65 +0,0 @@
|
|||
$progress-bar-background-color: $border !default
|
||||
$progress-value-background-color: $text !default
|
||||
|
||||
$progress-indeterminate-duration: 1.5s !default
|
||||
|
||||
.progress
|
||||
@extend %block
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
border: none
|
||||
border-radius: $radius-rounded
|
||||
display: block
|
||||
height: $size-normal
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
width: 100%
|
||||
&::-webkit-progress-bar
|
||||
background-color: $progress-bar-background-color
|
||||
&::-webkit-progress-value
|
||||
background-color: $progress-value-background-color
|
||||
&::-moz-progress-bar
|
||||
background-color: $progress-value-background-color
|
||||
&::-ms-fill
|
||||
background-color: $progress-value-background-color
|
||||
border: none
|
||||
&:indeterminate
|
||||
animation-duration: $progress-indeterminate-duration
|
||||
animation-iteration-count: infinite
|
||||
animation-name: moveIndeterminate
|
||||
animation-timing-function: linear
|
||||
background-color: $progress-bar-background-color
|
||||
background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
|
||||
background-position: top left
|
||||
background-repeat: no-repeat
|
||||
background-size: 150% 150%
|
||||
&::-webkit-progress-bar
|
||||
background-color: transparent
|
||||
&::-moz-progress-bar
|
||||
background-color: transparent
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
&::-webkit-progress-value
|
||||
background-color: $color
|
||||
&::-moz-progress-bar
|
||||
background-color: $color
|
||||
&::-ms-fill
|
||||
background-color: $color
|
||||
&:indeterminate
|
||||
background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
|
||||
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: $size-small
|
||||
&.is-medium
|
||||
height: $size-medium
|
||||
&.is-large
|
||||
height: $size-large
|
||||
|
||||
@keyframes moveIndeterminate
|
||||
from
|
||||
background-position: 200% 0
|
||||
to
|
||||
background-position: -200% 0
|
||||
126
hyperglass/static/sass/elements/table.sass
vendored
126
hyperglass/static/sass/elements/table.sass
vendored
|
|
@ -1,126 +0,0 @@
|
|||
$table-color: $grey-darker !default
|
||||
$table-background-color: $white !default
|
||||
|
||||
$table-cell-border: 1px solid $grey-lighter !default
|
||||
$table-cell-border-width: 0 0 1px !default
|
||||
$table-cell-padding: 0.5em 0.75em !default
|
||||
$table-cell-heading-color: $text-strong !default
|
||||
|
||||
$table-head-cell-border-width: 0 0 2px !default
|
||||
$table-head-cell-color: $text-strong !default
|
||||
$table-foot-cell-border-width: 2px 0 0 !default
|
||||
$table-foot-cell-color: $text-strong !default
|
||||
|
||||
$table-head-background-color: transparent !default
|
||||
$table-body-background-color: transparent !default
|
||||
$table-foot-background-color: transparent !default
|
||||
|
||||
$table-row-hover-background-color: $white-bis !default
|
||||
|
||||
$table-row-active-background-color: $primary !default
|
||||
$table-row-active-color: $primary-invert !default
|
||||
|
||||
$table-striped-row-even-background-color: $white-bis !default
|
||||
$table-striped-row-even-hover-background-color: $white-ter !default
|
||||
|
||||
.table
|
||||
@extend %block
|
||||
background-color: $table-background-color
|
||||
color: $table-color
|
||||
td,
|
||||
th
|
||||
border: $table-cell-border
|
||||
border-width: $table-cell-border-width
|
||||
padding: $table-cell-padding
|
||||
vertical-align: top
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
color: $color-invert
|
||||
// Modifiers
|
||||
&.is-narrow
|
||||
white-space: nowrap
|
||||
width: 1%
|
||||
&.is-selected
|
||||
background-color: $table-row-active-background-color
|
||||
color: $table-row-active-color
|
||||
a,
|
||||
strong
|
||||
color: currentColor
|
||||
th
|
||||
color: $table-cell-heading-color
|
||||
text-align: left
|
||||
tr
|
||||
&.is-selected
|
||||
background-color: $table-row-active-background-color
|
||||
color: $table-row-active-color
|
||||
a,
|
||||
strong
|
||||
color: currentColor
|
||||
td,
|
||||
th
|
||||
border-color: $table-row-active-color
|
||||
color: currentColor
|
||||
thead
|
||||
background-color: $table-head-background-color
|
||||
td,
|
||||
th
|
||||
border-width: $table-head-cell-border-width
|
||||
color: $table-head-cell-color
|
||||
tfoot
|
||||
background-color: $table-foot-background-color
|
||||
td,
|
||||
th
|
||||
border-width: $table-foot-cell-border-width
|
||||
color: $table-foot-cell-color
|
||||
tbody
|
||||
background-color: $table-body-background-color
|
||||
tr
|
||||
&:last-child
|
||||
td,
|
||||
th
|
||||
border-bottom-width: 0
|
||||
// Modifiers
|
||||
&.is-bordered
|
||||
td,
|
||||
th
|
||||
border-width: 1px
|
||||
tr
|
||||
&:last-child
|
||||
td,
|
||||
th
|
||||
border-bottom-width: 1px
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
&.is-hoverable
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:hover
|
||||
background-color: $table-row-hover-background-color
|
||||
&.is-striped
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:hover
|
||||
background-color: $table-row-hover-background-color
|
||||
&:nth-child(even)
|
||||
background-color: $table-striped-row-even-hover-background-color
|
||||
&.is-narrow
|
||||
td,
|
||||
th
|
||||
padding: 0.25em 0.5em
|
||||
&.is-striped
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:nth-child(even)
|
||||
background-color: $table-striped-row-even-background-color
|
||||
|
||||
.table-container
|
||||
@extend %block
|
||||
+overflow-touch
|
||||
overflow: auto
|
||||
overflow-y: hidden
|
||||
max-width: 100%
|
||||
130
hyperglass/static/sass/elements/tag.sass
vendored
130
hyperglass/static/sass/elements/tag.sass
vendored
|
|
@ -1,130 +0,0 @@
|
|||
$tag-background-color: $background !default
|
||||
$tag-color: $text !default
|
||||
$tag-radius: $radius !default
|
||||
$tag-delete-margin: 1px !default
|
||||
|
||||
.tags
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
.tag
|
||||
margin-bottom: 0.5rem
|
||||
&:not(:last-child)
|
||||
margin-right: 0.5rem
|
||||
&:last-child
|
||||
margin-bottom: -0.5rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1rem
|
||||
// Sizes
|
||||
&.are-medium
|
||||
.tag:not(.is-normal):not(.is-large)
|
||||
font-size: $size-normal
|
||||
&.are-large
|
||||
.tag:not(.is-normal):not(.is-medium)
|
||||
font-size: $size-medium
|
||||
&.has-addons
|
||||
.tag
|
||||
margin-right: 0
|
||||
&:not(:first-child)
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&:not(:last-child)
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
.tag
|
||||
margin-right: 0.25rem
|
||||
margin-left: 0.25rem
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
.tag
|
||||
&:not(:first-child)
|
||||
margin-left: 0.5rem
|
||||
&:not(:last-child)
|
||||
margin-right: 0
|
||||
&.has-addons
|
||||
.tag
|
||||
margin-right: 0
|
||||
&:not(:first-child)
|
||||
margin-left: 0
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&:not(:last-child)
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
|
||||
.tag:not(body)
|
||||
align-items: center
|
||||
background-color: $tag-background-color
|
||||
border-radius: $tag-radius
|
||||
color: $tag-color
|
||||
display: inline-flex
|
||||
font-size: $size-small
|
||||
height: 2em
|
||||
justify-content: center
|
||||
line-height: 1.5
|
||||
padding-left: 0.75em
|
||||
padding-right: 0.75em
|
||||
white-space: nowrap
|
||||
.delete
|
||||
margin-left: 0.25rem
|
||||
margin-right: -0.375rem
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
// Sizes
|
||||
&.is-normal
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-normal
|
||||
&.is-large
|
||||
font-size: $size-medium
|
||||
.icon
|
||||
&:first-child:not(:last-child)
|
||||
margin-left: -0.375em
|
||||
margin-right: 0.1875em
|
||||
&:last-child:not(:first-child)
|
||||
margin-left: 0.1875em
|
||||
margin-right: -0.375em
|
||||
&:first-child:last-child
|
||||
margin-left: -0.375em
|
||||
margin-right: -0.375em
|
||||
// Modifiers
|
||||
&.is-delete
|
||||
margin-left: $tag-delete-margin
|
||||
padding: 0
|
||||
position: relative
|
||||
width: 2em
|
||||
&::before,
|
||||
&::after
|
||||
background-color: currentColor
|
||||
content: ""
|
||||
display: block
|
||||
left: 50%
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg)
|
||||
transform-origin: center center
|
||||
&::before
|
||||
height: 1px
|
||||
width: 50%
|
||||
&::after
|
||||
height: 50%
|
||||
width: 1px
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: darken($tag-background-color, 5%)
|
||||
&:active
|
||||
background-color: darken($tag-background-color, 10%)
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
|
||||
a.tag
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
64
hyperglass/static/sass/elements/title.sass
vendored
64
hyperglass/static/sass/elements/title.sass
vendored
|
|
@ -1,64 +0,0 @@
|
|||
$title-color: $grey-darker !default
|
||||
$title-size: $size-3 !default
|
||||
$title-weight: $weight-semibold !default
|
||||
$title-line-height: 1.125 !default
|
||||
$title-strong-color: inherit !default
|
||||
$title-strong-weight: inherit !default
|
||||
$title-sub-size: 0.75em !default
|
||||
$title-sup-size: 0.75em !default
|
||||
|
||||
$subtitle-color: $grey-dark !default
|
||||
$subtitle-size: $size-5 !default
|
||||
$subtitle-weight: $weight-normal !default
|
||||
$subtitle-line-height: 1.25 !default
|
||||
$subtitle-strong-color: $grey-darker !default
|
||||
$subtitle-strong-weight: $weight-semibold !default
|
||||
$subtitle-negative-margin: -1.25rem !default
|
||||
|
||||
.title,
|
||||
.subtitle
|
||||
@extend %block
|
||||
word-break: break-word
|
||||
em,
|
||||
span
|
||||
font-weight: inherit
|
||||
sub
|
||||
font-size: $title-sub-size
|
||||
sup
|
||||
font-size: $title-sup-size
|
||||
.tag
|
||||
vertical-align: middle
|
||||
|
||||
.title
|
||||
color: $title-color
|
||||
font-size: $title-size
|
||||
font-weight: $title-weight
|
||||
line-height: $title-line-height
|
||||
strong
|
||||
color: $title-strong-color
|
||||
font-weight: $title-strong-weight
|
||||
& + .highlight
|
||||
margin-top: -0.75rem
|
||||
&:not(.is-spaced) + .subtitle
|
||||
margin-top: $subtitle-negative-margin
|
||||
// Sizes
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
&.is-#{$i}
|
||||
font-size: $size
|
||||
|
||||
.subtitle
|
||||
color: $subtitle-color
|
||||
font-size: $subtitle-size
|
||||
font-weight: $subtitle-weight
|
||||
line-height: $subtitle-line-height
|
||||
strong
|
||||
color: $subtitle-strong-color
|
||||
font-weight: $subtitle-strong-weight
|
||||
&:not(.is-spaced) + .title
|
||||
margin-top: $subtitle-negative-margin
|
||||
// Sizes
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
&.is-#{$i}
|
||||
font-size: $size
|
||||
4
hyperglass/static/sass/grid/_all.sass
vendored
4
hyperglass/static/sass/grid/_all.sass
vendored
|
|
@ -1,4 +0,0 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "columns.sass"
|
||||
@import "tiles.sass"
|
||||
504
hyperglass/static/sass/grid/columns.sass
vendored
504
hyperglass/static/sass/grid/columns.sass
vendored
|
|
@ -1,504 +0,0 @@
|
|||
$column-gap: 0.75rem !default
|
||||
|
||||
.column
|
||||
display: block
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
padding: $column-gap
|
||||
.columns.is-mobile > &.is-narrow
|
||||
flex: none
|
||||
.columns.is-mobile > &.is-full
|
||||
flex: none
|
||||
width: 100%
|
||||
.columns.is-mobile > &.is-three-quarters
|
||||
flex: none
|
||||
width: 75%
|
||||
.columns.is-mobile > &.is-two-thirds
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
.columns.is-mobile > &.is-half
|
||||
flex: none
|
||||
width: 50%
|
||||
.columns.is-mobile > &.is-one-third
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
.columns.is-mobile > &.is-one-quarter
|
||||
flex: none
|
||||
width: 25%
|
||||
.columns.is-mobile > &.is-one-fifth
|
||||
flex: none
|
||||
width: 20%
|
||||
.columns.is-mobile > &.is-two-fifths
|
||||
flex: none
|
||||
width: 40%
|
||||
.columns.is-mobile > &.is-three-fifths
|
||||
flex: none
|
||||
width: 60%
|
||||
.columns.is-mobile > &.is-four-fifths
|
||||
flex: none
|
||||
width: 80%
|
||||
.columns.is-mobile > &.is-offset-three-quarters
|
||||
margin-left: 75%
|
||||
.columns.is-mobile > &.is-offset-two-thirds
|
||||
margin-left: 66.6666%
|
||||
.columns.is-mobile > &.is-offset-half
|
||||
margin-left: 50%
|
||||
.columns.is-mobile > &.is-offset-one-third
|
||||
margin-left: 33.3333%
|
||||
.columns.is-mobile > &.is-offset-one-quarter
|
||||
margin-left: 25%
|
||||
.columns.is-mobile > &.is-offset-one-fifth
|
||||
margin-left: 20%
|
||||
.columns.is-mobile > &.is-offset-two-fifths
|
||||
margin-left: 40%
|
||||
.columns.is-mobile > &.is-offset-three-fifths
|
||||
margin-left: 60%
|
||||
.columns.is-mobile > &.is-offset-four-fifths
|
||||
margin-left: 80%
|
||||
@for $i from 1 through 12
|
||||
.columns.is-mobile > &.is-#{$i}
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
.columns.is-mobile > &.is-offset-#{$i}
|
||||
margin-left: percentage($i / 12)
|
||||
+mobile
|
||||
&.is-narrow-mobile
|
||||
flex: none
|
||||
&.is-full-mobile
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters-mobile
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds-mobile
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half-mobile
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third-mobile
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter-mobile
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-one-fifth-mobile
|
||||
flex: none
|
||||
width: 20%
|
||||
&.is-two-fifths-mobile
|
||||
flex: none
|
||||
width: 40%
|
||||
&.is-three-fifths-mobile
|
||||
flex: none
|
||||
width: 60%
|
||||
&.is-four-fifths-mobile
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-mobile
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds-mobile
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half-mobile
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third-mobile
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter-mobile
|
||||
margin-left: 25%
|
||||
&.is-offset-one-fifth-mobile
|
||||
margin-left: 20%
|
||||
&.is-offset-two-fifths-mobile
|
||||
margin-left: 40%
|
||||
&.is-offset-three-fifths-mobile
|
||||
margin-left: 60%
|
||||
&.is-offset-four-fifths-mobile
|
||||
margin-left: 80%
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i}-mobile
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-mobile
|
||||
margin-left: percentage($i / 12)
|
||||
+tablet
|
||||
&.is-narrow,
|
||||
&.is-narrow-tablet
|
||||
flex: none
|
||||
&.is-full,
|
||||
&.is-full-tablet
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters,
|
||||
&.is-three-quarters-tablet
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds,
|
||||
&.is-two-thirds-tablet
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half,
|
||||
&.is-half-tablet
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third,
|
||||
&.is-one-third-tablet
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter,
|
||||
&.is-one-quarter-tablet
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-one-fifth,
|
||||
&.is-one-fifth-tablet
|
||||
flex: none
|
||||
width: 20%
|
||||
&.is-two-fifths,
|
||||
&.is-two-fifths-tablet
|
||||
flex: none
|
||||
width: 40%
|
||||
&.is-three-fifths,
|
||||
&.is-three-fifths-tablet
|
||||
flex: none
|
||||
width: 60%
|
||||
&.is-four-fifths,
|
||||
&.is-four-fifths-tablet
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters,
|
||||
&.is-offset-three-quarters-tablet
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds,
|
||||
&.is-offset-two-thirds-tablet
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half,
|
||||
&.is-offset-half-tablet
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third,
|
||||
&.is-offset-one-third-tablet
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter,
|
||||
&.is-offset-one-quarter-tablet
|
||||
margin-left: 25%
|
||||
&.is-offset-one-fifth,
|
||||
&.is-offset-one-fifth-tablet
|
||||
margin-left: 20%
|
||||
&.is-offset-two-fifths,
|
||||
&.is-offset-two-fifths-tablet
|
||||
margin-left: 40%
|
||||
&.is-offset-three-fifths,
|
||||
&.is-offset-three-fifths-tablet
|
||||
margin-left: 60%
|
||||
&.is-offset-four-fifths,
|
||||
&.is-offset-four-fifths-tablet
|
||||
margin-left: 80%
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i},
|
||||
&.is-#{$i}-tablet
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i},
|
||||
&.is-offset-#{$i}-tablet
|
||||
margin-left: percentage($i / 12)
|
||||
+touch
|
||||
&.is-narrow-touch
|
||||
flex: none
|
||||
&.is-full-touch
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters-touch
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds-touch
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half-touch
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third-touch
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter-touch
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-one-fifth-touch
|
||||
flex: none
|
||||
width: 20%
|
||||
&.is-two-fifths-touch
|
||||
flex: none
|
||||
width: 40%
|
||||
&.is-three-fifths-touch
|
||||
flex: none
|
||||
width: 60%
|
||||
&.is-four-fifths-touch
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-touch
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds-touch
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half-touch
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third-touch
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter-touch
|
||||
margin-left: 25%
|
||||
&.is-offset-one-fifth-touch
|
||||
margin-left: 20%
|
||||
&.is-offset-two-fifths-touch
|
||||
margin-left: 40%
|
||||
&.is-offset-three-fifths-touch
|
||||
margin-left: 60%
|
||||
&.is-offset-four-fifths-touch
|
||||
margin-left: 80%
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i}-touch
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-touch
|
||||
margin-left: percentage($i / 12)
|
||||
+desktop
|
||||
&.is-narrow-desktop
|
||||
flex: none
|
||||
&.is-full-desktop
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters-desktop
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds-desktop
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half-desktop
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third-desktop
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter-desktop
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-one-fifth-desktop
|
||||
flex: none
|
||||
width: 20%
|
||||
&.is-two-fifths-desktop
|
||||
flex: none
|
||||
width: 40%
|
||||
&.is-three-fifths-desktop
|
||||
flex: none
|
||||
width: 60%
|
||||
&.is-four-fifths-desktop
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-desktop
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds-desktop
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half-desktop
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third-desktop
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter-desktop
|
||||
margin-left: 25%
|
||||
&.is-offset-one-fifth-desktop
|
||||
margin-left: 20%
|
||||
&.is-offset-two-fifths-desktop
|
||||
margin-left: 40%
|
||||
&.is-offset-three-fifths-desktop
|
||||
margin-left: 60%
|
||||
&.is-offset-four-fifths-desktop
|
||||
margin-left: 80%
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i}-desktop
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-desktop
|
||||
margin-left: percentage($i / 12)
|
||||
+widescreen
|
||||
&.is-narrow-widescreen
|
||||
flex: none
|
||||
&.is-full-widescreen
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters-widescreen
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds-widescreen
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half-widescreen
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third-widescreen
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter-widescreen
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-one-fifth-widescreen
|
||||
flex: none
|
||||
width: 20%
|
||||
&.is-two-fifths-widescreen
|
||||
flex: none
|
||||
width: 40%
|
||||
&.is-three-fifths-widescreen
|
||||
flex: none
|
||||
width: 60%
|
||||
&.is-four-fifths-widescreen
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-widescreen
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds-widescreen
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half-widescreen
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third-widescreen
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter-widescreen
|
||||
margin-left: 25%
|
||||
&.is-offset-one-fifth-widescreen
|
||||
margin-left: 20%
|
||||
&.is-offset-two-fifths-widescreen
|
||||
margin-left: 40%
|
||||
&.is-offset-three-fifths-widescreen
|
||||
margin-left: 60%
|
||||
&.is-offset-four-fifths-widescreen
|
||||
margin-left: 80%
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i}-widescreen
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-widescreen
|
||||
margin-left: percentage($i / 12)
|
||||
+fullhd
|
||||
&.is-narrow-fullhd
|
||||
flex: none
|
||||
&.is-full-fullhd
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters-fullhd
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds-fullhd
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half-fullhd
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third-fullhd
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter-fullhd
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-one-fifth-fullhd
|
||||
flex: none
|
||||
width: 20%
|
||||
&.is-two-fifths-fullhd
|
||||
flex: none
|
||||
width: 40%
|
||||
&.is-three-fifths-fullhd
|
||||
flex: none
|
||||
width: 60%
|
||||
&.is-four-fifths-fullhd
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-fullhd
|
||||
margin-left: 75%
|
||||
&.is-offset-two-thirds-fullhd
|
||||
margin-left: 66.6666%
|
||||
&.is-offset-half-fullhd
|
||||
margin-left: 50%
|
||||
&.is-offset-one-third-fullhd
|
||||
margin-left: 33.3333%
|
||||
&.is-offset-one-quarter-fullhd
|
||||
margin-left: 25%
|
||||
&.is-offset-one-fifth-fullhd
|
||||
margin-left: 20%
|
||||
&.is-offset-two-fifths-fullhd
|
||||
margin-left: 40%
|
||||
&.is-offset-three-fifths-fullhd
|
||||
margin-left: 60%
|
||||
&.is-offset-four-fifths-fullhd
|
||||
margin-left: 80%
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i}-fullhd
|
||||
flex: none
|
||||
width: percentage($i / 12)
|
||||
&.is-offset-#{$i}-fullhd
|
||||
margin-left: percentage($i / 12)
|
||||
|
||||
.columns
|
||||
margin-left: (-$column-gap)
|
||||
margin-right: (-$column-gap)
|
||||
margin-top: (-$column-gap)
|
||||
&:last-child
|
||||
margin-bottom: (-$column-gap)
|
||||
&:not(:last-child)
|
||||
margin-bottom: calc(1.5rem - #{$column-gap})
|
||||
// Modifiers
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&.is-gapless
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
margin-top: 0
|
||||
& > .column
|
||||
margin: 0
|
||||
padding: 0 !important
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
&.is-mobile
|
||||
display: flex
|
||||
&.is-multiline
|
||||
flex-wrap: wrap
|
||||
&.is-vcentered
|
||||
align-items: center
|
||||
// Responsiveness
|
||||
+tablet
|
||||
&:not(.is-desktop)
|
||||
display: flex
|
||||
+desktop
|
||||
// Modifiers
|
||||
&.is-desktop
|
||||
display: flex
|
||||
|
||||
@if $variable-columns
|
||||
.columns.is-variable
|
||||
--columnGap: 0.75rem
|
||||
margin-left: calc(-1 * var(--columnGap))
|
||||
margin-right: calc(-1 * var(--columnGap))
|
||||
.column
|
||||
padding-left: var(--columnGap)
|
||||
padding-right: var(--columnGap)
|
||||
@for $i from 0 through 8
|
||||
&.is-#{$i}
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+mobile
|
||||
&.is-#{$i}-mobile
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+tablet
|
||||
&.is-#{$i}-tablet
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+tablet-only
|
||||
&.is-#{$i}-tablet-only
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+touch
|
||||
&.is-#{$i}-touch
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+desktop
|
||||
&.is-#{$i}-desktop
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+desktop-only
|
||||
&.is-#{$i}-desktop-only
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+widescreen
|
||||
&.is-#{$i}-widescreen
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+widescreen-only
|
||||
&.is-#{$i}-widescreen-only
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+fullhd
|
||||
&.is-#{$i}-fullhd
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
32
hyperglass/static/sass/grid/tiles.sass
vendored
32
hyperglass/static/sass/grid/tiles.sass
vendored
|
|
@ -1,32 +0,0 @@
|
|||
.tile
|
||||
align-items: stretch
|
||||
display: block
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
min-height: min-content
|
||||
// Modifiers
|
||||
&.is-ancestor
|
||||
margin-left: -0.75rem
|
||||
margin-right: -0.75rem
|
||||
margin-top: -0.75rem
|
||||
&:last-child
|
||||
margin-bottom: -0.75rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
&.is-child
|
||||
margin: 0 !important
|
||||
&.is-parent
|
||||
padding: 0.75rem
|
||||
&.is-vertical
|
||||
flex-direction: column
|
||||
& > .tile.is-child:not(:last-child)
|
||||
margin-bottom: 1.5rem !important
|
||||
// Responsiveness
|
||||
+tablet
|
||||
&:not(.is-child)
|
||||
display: flex
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i}
|
||||
flex: none
|
||||
width: ($i / 12) * 100%
|
||||
5
hyperglass/static/sass/layout/_all.sass
vendored
5
hyperglass/static/sass/layout/_all.sass
vendored
|
|
@ -1,5 +0,0 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "hero.sass"
|
||||
@import "section.sass"
|
||||
@import "footer.sass"
|
||||
6
hyperglass/static/sass/layout/footer.sass
vendored
6
hyperglass/static/sass/layout/footer.sass
vendored
|
|
@ -1,6 +0,0 @@
|
|||
$footer-background-color: $white-bis !default
|
||||
$footer-padding: 3rem 1.5rem 6rem !default
|
||||
|
||||
.footer
|
||||
background-color: $footer-background-color
|
||||
padding: $footer-padding
|
||||
156
hyperglass/static/sass/layout/hero.sass
vendored
156
hyperglass/static/sass/layout/hero.sass
vendored
|
|
@ -1,156 +0,0 @@
|
|||
// Main container
|
||||
|
||||
.hero
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: space-between
|
||||
.navbar
|
||||
background: none
|
||||
.tabs
|
||||
ul
|
||||
border-bottom: none
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
a:not(.button):not(.dropdown-item):not(.tag),
|
||||
strong
|
||||
color: inherit
|
||||
.title
|
||||
color: $color-invert
|
||||
.subtitle
|
||||
color: rgba($color-invert, 0.9)
|
||||
a:not(.button),
|
||||
strong
|
||||
color: $color-invert
|
||||
.navbar-menu
|
||||
+touch
|
||||
background-color: $color
|
||||
.navbar-item,
|
||||
.navbar-link
|
||||
color: rgba($color-invert, 0.7)
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
.tabs
|
||||
a
|
||||
color: $color-invert
|
||||
opacity: 0.9
|
||||
&:hover
|
||||
opacity: 1
|
||||
li
|
||||
&.is-active a
|
||||
opacity: 1
|
||||
&.is-boxed,
|
||||
&.is-toggle
|
||||
a
|
||||
color: $color-invert
|
||||
&:hover
|
||||
background-color: rgba($black, 0.1)
|
||||
li.is-active a
|
||||
&,
|
||||
&:hover
|
||||
background-color: $color-invert
|
||||
border-color: $color-invert
|
||||
color: $color
|
||||
// Modifiers
|
||||
&.is-bold
|
||||
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
|
||||
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
|
||||
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
||||
+mobile
|
||||
.navbar-menu
|
||||
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
||||
// Responsiveness
|
||||
// +mobile
|
||||
// .nav-toggle
|
||||
// span
|
||||
// background-color: $color-invert
|
||||
// &:hover
|
||||
// background-color: rgba($black, 0.1)
|
||||
// &.is-active
|
||||
// span
|
||||
// background-color: $color-invert
|
||||
// .nav-menu
|
||||
// .nav-item
|
||||
// border-top-color: rgba($color-invert, 0.2)
|
||||
// Sizes
|
||||
&.is-small
|
||||
.hero-body
|
||||
padding-bottom: 1.5rem
|
||||
padding-top: 1.5rem
|
||||
&.is-medium
|
||||
+tablet
|
||||
.hero-body
|
||||
padding-bottom: 9rem
|
||||
padding-top: 9rem
|
||||
&.is-large
|
||||
+tablet
|
||||
.hero-body
|
||||
padding-bottom: 18rem
|
||||
padding-top: 18rem
|
||||
&.is-halfheight,
|
||||
&.is-fullheight,
|
||||
&.is-fullheight-with-navbar
|
||||
.hero-body
|
||||
align-items: center
|
||||
display: flex
|
||||
& > .container
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.is-halfheight
|
||||
min-height: 50vh
|
||||
&.is-fullheight
|
||||
min-height: 100vh
|
||||
|
||||
// Components
|
||||
|
||||
.hero-video
|
||||
@extend %overlay
|
||||
overflow: hidden
|
||||
video
|
||||
left: 50%
|
||||
min-height: 100%
|
||||
min-width: 100%
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translate3d(-50%, -50%, 0)
|
||||
// Modifiers
|
||||
&.is-transparent
|
||||
opacity: 0.3
|
||||
// Responsiveness
|
||||
+mobile
|
||||
display: none
|
||||
|
||||
.hero-buttons
|
||||
margin-top: 1.5rem
|
||||
// Responsiveness
|
||||
+mobile
|
||||
.button
|
||||
display: flex
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
+tablet
|
||||
display: flex
|
||||
justify-content: center
|
||||
.button:not(:last-child)
|
||||
margin-right: 1.5rem
|
||||
|
||||
// Containers
|
||||
|
||||
.hero-head,
|
||||
.hero-foot
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
|
||||
.hero-body
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
padding: 3rem 1.5rem
|
||||
13
hyperglass/static/sass/layout/section.sass
vendored
13
hyperglass/static/sass/layout/section.sass
vendored
|
|
@ -1,13 +0,0 @@
|
|||
$section-padding: 3rem 1.5rem !default
|
||||
$section-padding-medium: 9rem 1.5rem !default
|
||||
$section-padding-large: 18rem 1.5rem !default
|
||||
|
||||
.section
|
||||
padding: $section-padding
|
||||
// Responsiveness
|
||||
+desktop
|
||||
// Sizes
|
||||
&.is-medium
|
||||
padding: $section-padding-medium
|
||||
&.is-large
|
||||
padding: $section-padding-large
|
||||
8
hyperglass/static/sass/utilities/_all.sass
vendored
8
hyperglass/static/sass/utilities/_all.sass
vendored
|
|
@ -1,8 +0,0 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "initial-variables.sass"
|
||||
@import "functions.sass"
|
||||
@import "derived-variables.sass"
|
||||
@import "animations.sass"
|
||||
@import "mixins.sass"
|
||||
@import "controls.sass"
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@keyframes spinAround
|
||||
from
|
||||
transform: rotate(0deg)
|
||||
to
|
||||
transform: rotate(359deg)
|
||||
50
hyperglass/static/sass/utilities/controls.sass
vendored
50
hyperglass/static/sass/utilities/controls.sass
vendored
|
|
@ -1,50 +0,0 @@
|
|||
$control-radius: $radius !default
|
||||
$control-radius-small: $radius-small !default
|
||||
|
||||
$control-border-width: 1px !default
|
||||
|
||||
$control-height: 2.25em !default
|
||||
$control-line-height: 1.5 !default
|
||||
|
||||
$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
|
||||
$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
|
||||
|
||||
=control
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
align-items: center
|
||||
border: $control-border-width solid transparent
|
||||
border-radius: $control-radius
|
||||
box-shadow: none
|
||||
display: inline-flex
|
||||
font-size: $size-normal
|
||||
height: $control-height
|
||||
justify-content: flex-start
|
||||
line-height: $control-line-height
|
||||
padding-bottom: $control-padding-vertical
|
||||
padding-left: $control-padding-horizontal
|
||||
padding-right: $control-padding-horizontal
|
||||
padding-top: $control-padding-vertical
|
||||
position: relative
|
||||
vertical-align: top
|
||||
// States
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
outline: none
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
cursor: not-allowed
|
||||
|
||||
%control
|
||||
+control
|
||||
|
||||
// The controls sizes use mixins so they can be used at different breakpoints
|
||||
=control-small
|
||||
border-radius: $control-radius-small
|
||||
font-size: $size-small
|
||||
=control-medium
|
||||
font-size: $size-medium
|
||||
=control-large
|
||||
font-size: $size-large
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
$primary: $turquoise !default
|
||||
|
||||
$info: $cyan !default
|
||||
$success: $green !default
|
||||
$warning: $yellow !default
|
||||
$danger: $red !default
|
||||
|
||||
$light: $white-ter !default
|
||||
$dark: $grey-darker !default
|
||||
|
||||
// Invert colors
|
||||
|
||||
$orange-invert: findColorInvert($orange) !default
|
||||
$yellow-invert: findColorInvert($yellow) !default
|
||||
$green-invert: findColorInvert($green) !default
|
||||
$turquoise-invert: findColorInvert($turquoise) !default
|
||||
$cyan-invert: findColorInvert($cyan) !default
|
||||
$blue-invert: findColorInvert($blue) !default
|
||||
$purple-invert: findColorInvert($purple) !default
|
||||
$red-invert: findColorInvert($red) !default
|
||||
|
||||
$primary-invert: $turquoise-invert !default
|
||||
$info-invert: $cyan-invert !default
|
||||
$success-invert: $green-invert !default
|
||||
$warning-invert: $yellow-invert !default
|
||||
$danger-invert: $red-invert !default
|
||||
$light-invert: $dark !default
|
||||
$dark-invert: $light !default
|
||||
|
||||
// General colors
|
||||
|
||||
$background: $white-ter !default
|
||||
|
||||
$border: $grey-lighter !default
|
||||
$border-hover: $grey-light !default
|
||||
|
||||
// Text colors
|
||||
|
||||
$text: $grey-dark !default
|
||||
$text-invert: findColorInvert($text) !default
|
||||
$text-light: $grey !default
|
||||
$text-strong: $grey-darker !default
|
||||
|
||||
// Code colors
|
||||
|
||||
$code: $red !default
|
||||
$code-background: $background !default
|
||||
|
||||
$pre: $text !default
|
||||
$pre-background: $background !default
|
||||
|
||||
// Link colors
|
||||
|
||||
$link: $blue !default
|
||||
$link-invert: $blue-invert !default
|
||||
$link-visited: $purple !default
|
||||
|
||||
$link-hover: $grey-darker !default
|
||||
$link-hover-border: $grey-light !default
|
||||
|
||||
$link-focus: $grey-darker !default
|
||||
$link-focus-border: $blue !default
|
||||
|
||||
$link-active: $grey-darker !default
|
||||
$link-active-border: $grey-dark !default
|
||||
|
||||
// Typography
|
||||
|
||||
$family-primary: $family-sans-serif !default
|
||||
$family-secondary: $family-sans-serif !default
|
||||
$family-code: $family-monospace !default
|
||||
|
||||
$size-small: $size-7 !default
|
||||
$size-normal: $size-6 !default
|
||||
$size-medium: $size-5 !default
|
||||
$size-large: $size-4 !default
|
||||
|
||||
// Lists and maps
|
||||
$custom-colors: null !default
|
||||
$custom-shades: null !default
|
||||
|
||||
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
|
||||
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
|
||||
|
||||
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
|
||||
62
hyperglass/static/sass/utilities/functions.sass
vendored
62
hyperglass/static/sass/utilities/functions.sass
vendored
|
|
@ -1,62 +0,0 @@
|
|||
@function mergeColorMaps($bulma-colors, $custom-colors)
|
||||
// we return at least bulma hardcoded colors
|
||||
$merged-colors: $bulma-colors
|
||||
|
||||
// we want a map as input
|
||||
@if type-of($custom-colors) == 'map'
|
||||
@each $name, $components in $custom-colors
|
||||
// color name should be a string and colors pair a list with at least one element
|
||||
@if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
|
||||
$color-base: null
|
||||
|
||||
// the param can either be a single color
|
||||
// or a list of 2 colors
|
||||
@if type-of($components) == 'color'
|
||||
$color-base: $components
|
||||
@else if type-of($components) == 'list'
|
||||
$color-base: nth($components, 1)
|
||||
|
||||
$color-invert: null
|
||||
// is an inverted color provided in the list
|
||||
@if length($components) > 1
|
||||
$color-invert: nth($components, 2)
|
||||
|
||||
// we only want a color as base color
|
||||
@if type-of($color-base) == 'color'
|
||||
// if inverted color is not provided or is not a color we compute it
|
||||
@if type-of($color-invert) != 'color'
|
||||
$color-invert: findColorInvert($color-base)
|
||||
|
||||
// we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
|
||||
$merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
|
||||
|
||||
@return $merged-colors
|
||||
|
||||
@function powerNumber($number, $exp)
|
||||
$value: 1
|
||||
@if $exp > 0
|
||||
@for $i from 1 through $exp
|
||||
$value: $value * $number
|
||||
@else if $exp < 0
|
||||
@for $i from 1 through -$exp
|
||||
$value: $value / $number
|
||||
@return $value
|
||||
|
||||
@function colorLuminance($color)
|
||||
$color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
|
||||
@each $name, $value in $color-rgb
|
||||
$adjusted: 0
|
||||
$value: $value / 255
|
||||
@if $value < 0.03928
|
||||
$value: $value / 12.92
|
||||
@else
|
||||
$value: ($value + .055) / 1.055
|
||||
$value: powerNumber($value, 2)
|
||||
$color-rgb: map-merge($color-rgb, ($name: $value))
|
||||
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
|
||||
|
||||
@function findColorInvert($color)
|
||||
@if (colorLuminance($color) > 0.55)
|
||||
@return rgba(#000, 0.7)
|
||||
@else
|
||||
@return #fff
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
// Colors
|
||||
|
||||
$black: hsl(0, 0%, 4%) !default
|
||||
$black-bis: hsl(0, 0%, 7%) !default
|
||||
$black-ter: hsl(0, 0%, 14%) !default
|
||||
|
||||
$grey-darker: hsl(0, 0%, 21%) !default
|
||||
$grey-dark: hsl(0, 0%, 29%) !default
|
||||
$grey: hsl(0, 0%, 48%) !default
|
||||
$grey-light: hsl(0, 0%, 71%) !default
|
||||
$grey-lighter: hsl(0, 0%, 86%) !default
|
||||
|
||||
$white-ter: hsl(0, 0%, 96%) !default
|
||||
$white-bis: hsl(0, 0%, 98%) !default
|
||||
$white: hsl(0, 0%, 100%) !default
|
||||
|
||||
$orange: hsl(14, 100%, 53%) !default
|
||||
$yellow: hsl(48, 100%, 67%) !default
|
||||
$green: hsl(141, 71%, 48%) !default
|
||||
$turquoise: hsl(171, 100%, 41%) !default
|
||||
$cyan: hsl(204, 86%, 53%) !default
|
||||
$blue: hsl(217, 71%, 53%) !default
|
||||
$purple: hsl(271, 100%, 71%) !default
|
||||
$red: hsl(348, 100%, 61%) !default
|
||||
|
||||
// Typography
|
||||
|
||||
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
|
||||
$family-monospace: monospace !default
|
||||
$render-mode: optimizeLegibility !default
|
||||
|
||||
$size-1: 3rem !default
|
||||
$size-2: 2.5rem !default
|
||||
$size-3: 2rem !default
|
||||
$size-4: 1.5rem !default
|
||||
$size-5: 1.25rem !default
|
||||
$size-6: 1rem !default
|
||||
$size-7: 0.75rem !default
|
||||
|
||||
$weight-light: 300 !default
|
||||
$weight-normal: 400 !default
|
||||
$weight-medium: 500 !default
|
||||
$weight-semibold: 600 !default
|
||||
$weight-bold: 700 !default
|
||||
|
||||
// Responsiveness
|
||||
|
||||
// The container horizontal gap, which acts as the offset for breakpoints
|
||||
$gap: 64px !default
|
||||
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
|
||||
$tablet: 769px !default
|
||||
// 960px container + 4rem
|
||||
$desktop: 960px + (2 * $gap) !default
|
||||
// 1152px container + 4rem
|
||||
$widescreen: 1152px + (2 * $gap) !default
|
||||
$widescreen-enabled: true !default
|
||||
// 1344px container + 4rem
|
||||
$fullhd: 1344px + (2 * $gap) !default
|
||||
$fullhd-enabled: true !default
|
||||
|
||||
// Miscellaneous
|
||||
|
||||
$easing: ease-out !default
|
||||
$radius-small: 2px !default
|
||||
$radius: 4px !default
|
||||
$radius-large: 6px !default
|
||||
$radius-rounded: 290486px !default
|
||||
$speed: 86ms !default
|
||||
|
||||
// Flags
|
||||
|
||||
$variable-columns: true !default
|
||||
261
hyperglass/static/sass/utilities/mixins.sass
vendored
261
hyperglass/static/sass/utilities/mixins.sass
vendored
|
|
@ -1,261 +0,0 @@
|
|||
@import "initial-variables"
|
||||
|
||||
=clearfix
|
||||
&::after
|
||||
clear: both
|
||||
content: " "
|
||||
display: table
|
||||
|
||||
=center($width, $height: 0)
|
||||
position: absolute
|
||||
@if $height != 0
|
||||
left: calc(50% - (#{$width} / 2))
|
||||
top: calc(50% - (#{$height} / 2))
|
||||
@else
|
||||
left: calc(50% - (#{$width} / 2))
|
||||
top: calc(50% - (#{$width} / 2))
|
||||
|
||||
=fa($size, $dimensions)
|
||||
display: inline-block
|
||||
font-size: $size
|
||||
height: $dimensions
|
||||
line-height: $dimensions
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
width: $dimensions
|
||||
|
||||
=hamburger($dimensions)
|
||||
cursor: pointer
|
||||
display: block
|
||||
height: $dimensions
|
||||
position: relative
|
||||
width: $dimensions
|
||||
span
|
||||
background-color: currentColor
|
||||
display: block
|
||||
height: 1px
|
||||
left: calc(50% - 8px)
|
||||
position: absolute
|
||||
transform-origin: center
|
||||
transition-duration: $speed
|
||||
transition-property: background-color, opacity, transform
|
||||
transition-timing-function: $easing
|
||||
width: 16px
|
||||
&:nth-child(1)
|
||||
top: calc(50% - 6px)
|
||||
&:nth-child(2)
|
||||
top: calc(50% - 1px)
|
||||
&:nth-child(3)
|
||||
top: calc(50% + 4px)
|
||||
&:hover
|
||||
background-color: rgba(black, 0.05)
|
||||
// Modifers
|
||||
&.is-active
|
||||
span
|
||||
&:nth-child(1)
|
||||
transform: translateY(5px) rotate(45deg)
|
||||
&:nth-child(2)
|
||||
opacity: 0
|
||||
&:nth-child(3)
|
||||
transform: translateY(-5px) rotate(-45deg)
|
||||
|
||||
=overflow-touch
|
||||
-webkit-overflow-scrolling: touch
|
||||
|
||||
=placeholder
|
||||
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
|
||||
@each $placeholder in $placeholders
|
||||
&:#{$placeholder}-placeholder
|
||||
@content
|
||||
|
||||
// Responsiveness
|
||||
|
||||
=from($device)
|
||||
@media screen and (min-width: $device)
|
||||
@content
|
||||
|
||||
=until($device)
|
||||
@media screen and (max-width: $device - 1px)
|
||||
@content
|
||||
|
||||
=mobile
|
||||
@media screen and (max-width: $tablet - 1px)
|
||||
@content
|
||||
|
||||
=tablet
|
||||
@media screen and (min-width: $tablet), print
|
||||
@content
|
||||
|
||||
=tablet-only
|
||||
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
|
||||
@content
|
||||
|
||||
=touch
|
||||
@media screen and (max-width: $desktop - 1px)
|
||||
@content
|
||||
|
||||
=desktop
|
||||
@media screen and (min-width: $desktop)
|
||||
@content
|
||||
|
||||
=desktop-only
|
||||
@if $widescreen-enabled
|
||||
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
|
||||
@content
|
||||
|
||||
=until-widescreen
|
||||
@if $widescreen-enabled
|
||||
@media screen and (max-width: $widescreen - 1px)
|
||||
@content
|
||||
|
||||
=widescreen
|
||||
@if $widescreen-enabled
|
||||
@media screen and (min-width: $widescreen)
|
||||
@content
|
||||
|
||||
=widescreen-only
|
||||
@if $widescreen-enabled and $fullhd-enabled
|
||||
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
|
||||
@content
|
||||
|
||||
=until-fullhd
|
||||
@if $fullhd-enabled
|
||||
@media screen and (max-width: $fullhd - 1px)
|
||||
@content
|
||||
|
||||
=fullhd
|
||||
@if $fullhd-enabled
|
||||
@media screen and (min-width: $fullhd)
|
||||
@content
|
||||
|
||||
// Placeholders
|
||||
|
||||
=unselectable
|
||||
-webkit-touch-callout: none
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
user-select: none
|
||||
|
||||
%unselectable
|
||||
+unselectable
|
||||
|
||||
=arrow($color: transparent)
|
||||
border: 3px solid $color
|
||||
border-radius: 2px
|
||||
border-right: 0
|
||||
border-top: 0
|
||||
content: " "
|
||||
display: block
|
||||
height: 0.625em
|
||||
margin-top: -0.4375em
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: rotate(-45deg)
|
||||
transform-origin: center
|
||||
width: 0.625em
|
||||
|
||||
%arrow
|
||||
+arrow
|
||||
|
||||
=block
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
%block
|
||||
+block
|
||||
|
||||
=delete
|
||||
@extend %unselectable
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
background-color: rgba($black, 0.2)
|
||||
border: none
|
||||
border-radius: $radius-rounded
|
||||
cursor: pointer
|
||||
pointer-events: auto
|
||||
display: inline-block
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
font-size: 0
|
||||
height: 20px
|
||||
max-height: 20px
|
||||
max-width: 20px
|
||||
min-height: 20px
|
||||
min-width: 20px
|
||||
outline: none
|
||||
position: relative
|
||||
vertical-align: top
|
||||
width: 20px
|
||||
&::before,
|
||||
&::after
|
||||
background-color: $white
|
||||
content: ""
|
||||
display: block
|
||||
left: 50%
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg)
|
||||
transform-origin: center center
|
||||
&::before
|
||||
height: 2px
|
||||
width: 50%
|
||||
&::after
|
||||
height: 50%
|
||||
width: 2px
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: rgba($black, 0.3)
|
||||
&:active
|
||||
background-color: rgba($black, 0.4)
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: 16px
|
||||
max-height: 16px
|
||||
max-width: 16px
|
||||
min-height: 16px
|
||||
min-width: 16px
|
||||
width: 16px
|
||||
&.is-medium
|
||||
height: 24px
|
||||
max-height: 24px
|
||||
max-width: 24px
|
||||
min-height: 24px
|
||||
min-width: 24px
|
||||
width: 24px
|
||||
&.is-large
|
||||
height: 32px
|
||||
max-height: 32px
|
||||
max-width: 32px
|
||||
min-height: 32px
|
||||
min-width: 32px
|
||||
width: 32px
|
||||
|
||||
%delete
|
||||
+delete
|
||||
|
||||
=loader
|
||||
animation: spinAround 500ms infinite linear
|
||||
border: 2px solid $grey-lighter
|
||||
border-radius: $radius-rounded
|
||||
border-right-color: transparent
|
||||
border-top-color: transparent
|
||||
content: ""
|
||||
display: block
|
||||
height: 1em
|
||||
position: relative
|
||||
width: 1em
|
||||
|
||||
%loader
|
||||
+loader
|
||||
|
||||
=overlay($offset: 0)
|
||||
bottom: $offset
|
||||
left: $offset
|
||||
position: absolute
|
||||
right: $offset
|
||||
top: $offset
|
||||
|
||||
%overlay
|
||||
+overlay
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
{
|
||||
"base": "semantic/",
|
||||
"paths": {
|
||||
"source": {
|
||||
"config": "src/theme.config",
|
||||
"definitions": "src/definitions/",
|
||||
"site": "src/site/",
|
||||
"themes": "src/themes/"
|
||||
},
|
||||
"output": {
|
||||
"packaged": "dist/",
|
||||
"uncompressed": "dist/components/",
|
||||
"compressed": "dist/components/",
|
||||
"themes": "dist/themes/"
|
||||
},
|
||||
"clean": "dist/"
|
||||
},
|
||||
"permission": false,
|
||||
"autoInstall": false,
|
||||
"rtl": false,
|
||||
"version": "2.7.7"
|
||||
}
|
||||
0
hyperglass/static/ui/custom/.gitkeep
Normal file
0
hyperglass/static/ui/custom/.gitkeep
Normal file
22
hyperglass/static/ui/hyperglass.css
Normal file
22
hyperglass/static/ui/hyperglass.css
Normal file
File diff suppressed because one or more lines are too long
1
hyperglass/static/ui/hyperglass.css.map
Normal file
1
hyperglass/static/ui/hyperglass.css.map
Normal file
File diff suppressed because one or more lines are too long
29
hyperglass/static/ui/hyperglass.js
Normal file
29
hyperglass/static/ui/hyperglass.js
Normal file
File diff suppressed because one or more lines are too long
1
hyperglass/static/ui/hyperglass.js.map
Normal file
1
hyperglass/static/ui/hyperglass.js.map
Normal file
File diff suppressed because one or more lines are too long
0
hyperglass/static/images/brand.svg → hyperglass/static/ui/images/brand.svg
Normal file → Executable file
0
hyperglass/static/images/brand.svg → hyperglass/static/ui/images/brand.svg
Normal file → Executable file
|
Before Width: | Height: | Size: 577 B After Width: | Height: | Size: 577 B |
0
hyperglass/static/images/favicons/android-chrome-192x192.png → hyperglass/static/ui/images/favicons/android-chrome-192x192.png
Normal file → Executable file
0
hyperglass/static/images/favicons/android-chrome-192x192.png → hyperglass/static/ui/images/favicons/android-chrome-192x192.png
Normal file → Executable file
|
Before Width: | Height: | Size: 8 KiB After Width: | Height: | Size: 8 KiB |
0
hyperglass/static/images/favicons/android-chrome-512x512.png → hyperglass/static/ui/images/favicons/android-chrome-512x512.png
Normal file → Executable file
0
hyperglass/static/images/favicons/android-chrome-512x512.png → hyperglass/static/ui/images/favicons/android-chrome-512x512.png
Normal file → Executable file
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
0
hyperglass/static/images/favicons/apple-touch-icon.png → hyperglass/static/ui/images/favicons/apple-touch-icon.png
Normal file → Executable file
0
hyperglass/static/images/favicons/apple-touch-icon.png → hyperglass/static/ui/images/favicons/apple-touch-icon.png
Normal file → Executable file
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
0
hyperglass/static/images/favicons/browserconfig.xml → hyperglass/static/ui/images/favicons/browserconfig.xml
Normal file → Executable file
0
hyperglass/static/images/favicons/browserconfig.xml → hyperglass/static/ui/images/favicons/browserconfig.xml
Normal file → Executable file
0
hyperglass/static/images/favicons/favicon-16x16.png → hyperglass/static/ui/images/favicons/favicon-16x16.png
Normal file → Executable file
0
hyperglass/static/images/favicons/favicon-16x16.png → hyperglass/static/ui/images/favicons/favicon-16x16.png
Normal file → Executable file
|
Before Width: | Height: | Size: 849 B After Width: | Height: | Size: 849 B |
0
hyperglass/static/images/favicons/favicon-32x32.png → hyperglass/static/ui/images/favicons/favicon-32x32.png
Normal file → Executable file
0
hyperglass/static/images/favicons/favicon-32x32.png → hyperglass/static/ui/images/favicons/favicon-32x32.png
Normal file → Executable file
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
0
hyperglass/static/images/favicons/favicon.ico → hyperglass/static/ui/images/favicons/favicon.ico
Normal file → Executable file
0
hyperglass/static/images/favicons/favicon.ico → hyperglass/static/ui/images/favicons/favicon.ico
Normal file → Executable file
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
0
hyperglass/static/images/favicons/mstile-150x150.png → hyperglass/static/ui/images/favicons/mstile-150x150.png
Normal file → Executable file
0
hyperglass/static/images/favicons/mstile-150x150.png → hyperglass/static/ui/images/favicons/mstile-150x150.png
Normal file → Executable file
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
0
hyperglass/static/images/favicons/safari-pinned-tab.svg → hyperglass/static/ui/images/favicons/safari-pinned-tab.svg
Normal file → Executable file
0
hyperglass/static/images/favicons/safari-pinned-tab.svg → hyperglass/static/ui/images/favicons/safari-pinned-tab.svg
Normal file → Executable file
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
0
hyperglass/static/images/favicons/site.webmanifest → hyperglass/static/ui/images/favicons/site.webmanifest
Normal file → Executable file
0
hyperglass/static/images/favicons/site.webmanifest → hyperglass/static/ui/images/favicons/site.webmanifest
Normal file → Executable file
0
hyperglass/static/images/hyperglass-dark.png → hyperglass/static/ui/images/hyperglass-dark.png
Normal file → Executable file
0
hyperglass/static/images/hyperglass-dark.png → hyperglass/static/ui/images/hyperglass-dark.png
Normal file → Executable file
|
Before Width: | Height: | Size: 253 KiB After Width: | Height: | Size: 253 KiB |
0
hyperglass/static/images/hyperglass-light.png → hyperglass/static/ui/images/hyperglass-light.png
Normal file → Executable file
0
hyperglass/static/images/hyperglass-light.png → hyperglass/static/ui/images/hyperglass-light.png
Normal file → Executable file
|
Before Width: | Height: | Size: 255 KiB After Width: | Height: | Size: 255 KiB |
BIN
hyperglass/static/ui/remixicon.0773c4ad.woff
Normal file
BIN
hyperglass/static/ui/remixicon.0773c4ad.woff
Normal file
Binary file not shown.
BIN
hyperglass/static/ui/remixicon.18408445.woff2
Normal file
BIN
hyperglass/static/ui/remixicon.18408445.woff2
Normal file
Binary file not shown.
5125
hyperglass/static/ui/remixicon.ac00b585.svg
Normal file
5125
hyperglass/static/ui/remixicon.ac00b585.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.5 MiB |
BIN
hyperglass/static/ui/remixicon.ed3cd447.eot
Normal file
BIN
hyperglass/static/ui/remixicon.ed3cd447.eot
Normal file
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue