♻️ Major code restructuring
This commit is contained in:
parent
a96e203bb3
commit
fa66d628a0
221 changed files with 228 additions and 315 deletions
3
static/base/css/basic.css
Normal file
3
static/base/css/basic.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.pt-body__skip {
|
||||
display: none;
|
||||
}
|
||||
1289
static/base/css/buttons.css
Normal file
1289
static/base/css/buttons.css
Normal file
File diff suppressed because it is too large
Load diff
356
static/base/css/chassis.css
Normal file
356
static/base/css/chassis.css
Normal file
|
|
@ -0,0 +1,356 @@
|
|||
html {
|
||||
background-color: white;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
body {
|
||||
padding: 1px 3px;
|
||||
}
|
||||
div {
|
||||
padding: 1px 3px;
|
||||
margin: 5px;
|
||||
}
|
||||
h1, h2, h3, h4,h5, h6, p {
|
||||
background-color: snow;
|
||||
}
|
||||
* * {
|
||||
outline: 5px solid rgba(255,0,0,.1);
|
||||
}
|
||||
* * * {
|
||||
outline: 3px dashed rgba(255,0,0,.4);
|
||||
}
|
||||
* * * * {
|
||||
outline: 2px dotted rgba(255,0,0,.6);
|
||||
}
|
||||
* * * * * {
|
||||
outline: 1px dotted rgba(255,0,0,.9);
|
||||
}
|
||||
* * * * * * {
|
||||
outline-color: gray;
|
||||
}
|
||||
|
||||
*::before, *::after {
|
||||
background: #faa;
|
||||
border-radius: 3px;
|
||||
font: normal normal 400 10px/1.2 monospace;
|
||||
vertical-align: middle;
|
||||
padding: 1px 3px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
*::before {
|
||||
content: "(";
|
||||
}
|
||||
*::after {
|
||||
content: ")";
|
||||
}
|
||||
|
||||
a::before { content: "<a>"; }
|
||||
a::after { content: "</a>"; }
|
||||
abbr::before { content: "<abbr>"; }
|
||||
abbr::after { content: "</abbr>"; }
|
||||
acronym::before { content: "<acronym>"; }
|
||||
acronym::after { content: "</acronym>"; }
|
||||
address::before { content: "<address>"; }
|
||||
address::after { content: "</address>"; }
|
||||
applet::before { content: "<applet>"; }
|
||||
applet::after { content: "</applet>"; }
|
||||
area::before { content: "<area>"; }
|
||||
area::after { content: "</area>"; }
|
||||
article::before { content: "<article>"; }
|
||||
article::after { content: "</article>"; }
|
||||
aside::before { content: "<aside>"; }
|
||||
aside::after { content: "</aside>"; }
|
||||
audio::before { content: "<audio>"; }
|
||||
audio::after { content: "</audio>"; }
|
||||
|
||||
b::before { content: "<b>"; }
|
||||
b::after { content: "</b>"; }
|
||||
base::before { content: "<base>"; }
|
||||
base::after { content: "</base>"; }
|
||||
basefont::before { content: "<basefont>"; }
|
||||
basefont::after { content: "</basefont>"; }
|
||||
bdi::before { content: "<bdi>"; }
|
||||
bdi::after { content: "</bdi>"; }
|
||||
bdo::before { content: "<bdo>"; }
|
||||
bdo::after { content: "</bdo>"; }
|
||||
bgsound::before { content: "<bgsound>"; }
|
||||
bgsound::after { content: "</bgsound>"; }
|
||||
big::before { content: "<big>"; }
|
||||
big::after { content: "</big>"; }
|
||||
blink::before { content: "<blink>"; }
|
||||
blink::after { content: "</blink>"; }
|
||||
blockquote::before { content: "<blockquote>"; }
|
||||
blockquote::after { content: "</blockquote>"; }
|
||||
body::before { content: "<body>"; }
|
||||
body::after { content: "</body>"; }
|
||||
br::before { content: "<br>"; }
|
||||
br::after { content: "</br>"; }
|
||||
button::before { content: "<button>"; }
|
||||
button::after { content: "</button>"; }
|
||||
|
||||
caption::before { content: "<caption>"; }
|
||||
caption::after { content: "</caption>"; }
|
||||
canvas::before { content: "<canvas>"; }
|
||||
canvas::after { content: "</canvas>"; }
|
||||
center::before { content: "<center>"; }
|
||||
center::after { content: "</center>"; }
|
||||
cite::before { content: "<cite>"; }
|
||||
cite::after { content: "</cite>"; }
|
||||
code::before { content: "<code>"; }
|
||||
code::after { content: "</code>"; }
|
||||
col::before { content: "<col>"; }
|
||||
col::after { content: "</col>"; }
|
||||
colgroup::before { content: "<colgroup>"; }
|
||||
colgroup::after { content: "</colgroup>"; }
|
||||
command::before { content: "<command>"; }
|
||||
command::after { content: "</command>"; }
|
||||
content::before { content: "<content>"; }
|
||||
content::after { content: "</content>"; }
|
||||
|
||||
data::before { content: "<data>"; }
|
||||
data::after { content: "</data>"; }
|
||||
datalist::before { content: "<datalist>"; }
|
||||
datalist::after { content: "</datalist>"; }
|
||||
dd::before { content: "<dd>"; }
|
||||
dd::after { content: "</dd>"; }
|
||||
del::before { content: "<del>"; }
|
||||
del::after { content: "</del>"; }
|
||||
details::before { content: "<details>"; }
|
||||
details::after { content: "</details>"; }
|
||||
dfn::before { content: "<dfn>"; }
|
||||
dfn::after { content: "</dfn>"; }
|
||||
dialog::before { content: "<dialog>"; }
|
||||
dialog::after { content: "</dialog>"; }
|
||||
dir::before { content: "<dir>"; }
|
||||
dir::after { content: "</dir>"; }
|
||||
div::before { content: "<div>"; }
|
||||
div::after { content: "</div>"; }
|
||||
dl::before { content: "<dl>"; }
|
||||
dl::after { content: "</dl>"; }
|
||||
dt::before { content: "<dt>"; }
|
||||
dt::after { content: "</dt>"; }
|
||||
|
||||
element::before { content: "<element>"; }
|
||||
element::after { content: "</element>"; }
|
||||
em::before { content: "<em>"; }
|
||||
em::after { content: "</em>"; }
|
||||
embed::before { content: "<embed>"; }
|
||||
embed::after { content: "</embed>"; }
|
||||
|
||||
fieldset::before { content: "<fieldset>"; }
|
||||
fieldset::after { content: "</fieldset>"; }
|
||||
figcaption::before { content: "<figcaption>"; }
|
||||
figcaption::after { content: "</figcaption>"; }
|
||||
figure::before { content: "<figure>"; }
|
||||
figure::after { content: "</figure>"; }
|
||||
font::before { content: "<font>"; }
|
||||
font::after { content: "</font>"; }
|
||||
footer::before { content: "<footer>"; }
|
||||
footer::after { content: "</footer>"; }
|
||||
form::before { content: "<form>"; }
|
||||
form::after { content: "</form>"; }
|
||||
frame::before { content: "<frame>"; }
|
||||
frame::after { content: "</frame>"; }
|
||||
frameset::before { content: "<frameset>"; }
|
||||
frameset::after { content: "</frameset>"; }
|
||||
|
||||
h1::before { content: "<h1>"; }
|
||||
h1::after { content: "</h1>"; }
|
||||
h2::before { content: "<h2>"; }
|
||||
h2::after { content: "</h2>"; }
|
||||
h3::before { content: "<h3>"; }
|
||||
h3::after { content: "</h3>"; }
|
||||
h4::before { content: "<h4>"; }
|
||||
h4::after { content: "</h4>"; }
|
||||
h5::before { content: "<h5>"; }
|
||||
h5::after { content: "</h5>"; }
|
||||
h6::before { content: "<h6>"; }
|
||||
h6::after { content: "</h6>"; }
|
||||
head::before { content: "<head>"; }
|
||||
head::after { content: "</head>"; }
|
||||
header::before { content: "<header>"; }
|
||||
header::after { content: "</header>"; }
|
||||
hgroup::before { content: "<hgroup>"; }
|
||||
hgroup::after { content: "</hgroup>"; }
|
||||
hr::before { content: "<hr>"; }
|
||||
hr::after { content: "</hr>"; }
|
||||
html::before { content: "<html>"; }
|
||||
html::after { content: "</html>"; }
|
||||
|
||||
i::before { content: "<i>"; }
|
||||
i::after { content: "</i>"; }
|
||||
iframe::before { content: "<iframe>"; }
|
||||
iframe::after { content: "</iframe>"; }
|
||||
image::before { content: "<image>"; }
|
||||
image::after { content: "</image>"; }
|
||||
img::before { content: "<img>"; }
|
||||
img::after { content: "</img>"; }
|
||||
input::before { content: "<input>"; }
|
||||
input::after { content: "</input>"; }
|
||||
ins::before { content: "<ins>"; }
|
||||
ins::after { content: "</ins>"; }
|
||||
isindex::before { content: "<isindex>"; }
|
||||
isindex::after { content: "</isindex>"; }
|
||||
|
||||
kbd::before { content: "<kbd>"; }
|
||||
kbd::after { content: "</kbd>"; }
|
||||
keygen::before { content: "<keygen>"; }
|
||||
keygen::after { content: "</keygen>"; }
|
||||
|
||||
label::before { content: "<label>"; }
|
||||
label::after { content: "</label>"; }
|
||||
legend::before { content: "<legend>"; }
|
||||
legend::after { content: "</legend>"; }
|
||||
li::before { content: "<li>"; }
|
||||
li::after { content: "</li>"; }
|
||||
link::before { content: "<link>"; }
|
||||
link::after { content: "</link>"; }
|
||||
listing::before { content: "<listing>"; }
|
||||
listing::after { content: "</listing>"; }
|
||||
|
||||
main::before { content: "<main>"; }
|
||||
main::after { content: "</main>"; }
|
||||
map::before { content: "<map>"; }
|
||||
map::after { content: "</map>"; }
|
||||
mark::before { content: "<mark>"; }
|
||||
mark::after { content: "</mark>"; }
|
||||
marquee::before { content: "<marquee>"; }
|
||||
marquee::after { content: "</marquee>"; }
|
||||
menu::before { content: "<menu>"; }
|
||||
menu::after { content: "</menu>"; }
|
||||
menuitem::before { content: "<menuitem>"; }
|
||||
menuitem::after { content: "</menuitem>"; }
|
||||
meta::before { content: "<meta>"; }
|
||||
meta::after { content: "</meta>"; }
|
||||
meter::before { content: "<meter>"; }
|
||||
meter::after { content: "</meter>"; }
|
||||
multicol::before { content: "<multicol>"; }
|
||||
multicol::after { content: "</multicol>"; }
|
||||
|
||||
nav::before { content: "<nav>"; }
|
||||
nav::after { content: "</nav>"; }
|
||||
nextid::before { content: "<nextid>"; }
|
||||
nextid::after { content: "</nextid>"; }
|
||||
nobr::before { content: "<nobr>"; }
|
||||
nobr::after { content: "</nobr>"; }
|
||||
noembed::before { content: "<noembed>"; }
|
||||
noembed::after { content: "</noembed>"; }
|
||||
noframes::before { content: "<noframes>"; }
|
||||
noframes::after { content: "</noframes>"; }
|
||||
noscript::before { content: "<noscript>"; }
|
||||
noscript::after { content: "</noscript>"; }
|
||||
|
||||
object::before { content: "<object>"; }
|
||||
object::after { content: "</object>"; }
|
||||
ol::before { content: "<ol>"; }
|
||||
ol::after { content: "</ol>"; }
|
||||
optgroup::before { content: "<optgroup>"; }
|
||||
optgroup::after { content: "</optgroup>"; }
|
||||
option::before { content: "<option>"; }
|
||||
option::after { content: "</option>"; }
|
||||
output::before { content: "<output>"; }
|
||||
output::after { content: "</output>"; }
|
||||
|
||||
p::before { content: "<p>"; }
|
||||
p::after { content: "</p>"; }
|
||||
param::before { content: "<param>"; }
|
||||
param::after { content: "</param>"; }
|
||||
picture::before { content: "<picture>"; }
|
||||
picture::after { content: "</picture>"; }
|
||||
plaintext::before { content: "<plaintext>"; }
|
||||
plaintext::after { content: "</plaintext>"; }
|
||||
pre::before { content: "<pre>"; }
|
||||
pre::after { content: "</pre>"; }
|
||||
progress::before { content: "<progress>"; }
|
||||
progress::after { content: "</progress>"; }
|
||||
|
||||
q::before { content: "<q>"; }
|
||||
q::after { content: "</q>"; }
|
||||
|
||||
rb::before { content: "<rb>"; }
|
||||
rb::after { content: "</rb>"; }
|
||||
rp::before { content: "<rp>"; }
|
||||
rp::after { content: "</rp>"; }
|
||||
rt::before { content: "<rt>"; }
|
||||
rt::after { content: "</rt>"; }
|
||||
rtc::before { content: "<rtc>"; }
|
||||
rtc::after { content: "</rtc>"; }
|
||||
ruby::before { content: "<ruby>"; }
|
||||
ruby::after { content: "</ruby>"; }
|
||||
|
||||
s::before { content: "<s>"; }
|
||||
s::after { content: "</s>"; }
|
||||
samp::before { content: "<samp>"; }
|
||||
samp::after { content: "</samp>"; }
|
||||
script::before { content: "<script>"; }
|
||||
script::after { content: "</script>"; }
|
||||
section::before { content: "<section>"; }
|
||||
section::after { content: "</section>"; }
|
||||
select::before { content: "<select>"; }
|
||||
select::after { content: "</select>"; }
|
||||
shadow::before { content: "<shadow>"; }
|
||||
shadow::after { content: "</shadow>"; }
|
||||
slot::before { content: "<slot>"; }
|
||||
slot::after { content: "</slot>"; }
|
||||
small::before { content: "<small>"; }
|
||||
small::after { content: "</small>"; }
|
||||
source::before { content: "<source>"; }
|
||||
source::after { content: "</source>"; }
|
||||
spacer::before { content: "<spacer>"; }
|
||||
spacer::after { content: "</spacer>"; }
|
||||
span::before { content: "<span>"; }
|
||||
span::after { content: "</span>"; }
|
||||
strike::before { content: "<strike>"; }
|
||||
strike::after { content: "</strike>"; }
|
||||
strong::before { content: "<strong>"; }
|
||||
strong::after { content: "</strong>"; }
|
||||
style::before { content: "<style>"; }
|
||||
style::after { content: "<\/style>"; }
|
||||
sub::before { content: "<sub>"; }
|
||||
sub::after { content: "</sub>"; }
|
||||
summary::before { content: "<summary>"; }
|
||||
summary::after { content: "</summary>"; }
|
||||
sup::before { content: "<sup>"; }
|
||||
sup::after { content: "</sup>"; }
|
||||
|
||||
table::before { content: "<table>"; }
|
||||
table::after { content: "</table>"; }
|
||||
tbody::before { content: "<tbody>"; }
|
||||
tbody::after { content: "</tbody>"; }
|
||||
td::before { content: "<td>"; }
|
||||
td::after { content: "</td>"; }
|
||||
template::before { content: "<template>"; }
|
||||
template::after { content: "</template>"; }
|
||||
textarea::before { content: "<textarea>"; }
|
||||
textarea::after { content: "</textarea>"; }
|
||||
tfoot::before { content: "<tfoot>"; }
|
||||
tfoot::after { content: "</tfoot>"; }
|
||||
th::before { content: "<th>"; }
|
||||
th::after { content: "</th>"; }
|
||||
thead::before { content: "<thead>"; }
|
||||
thead::after { content: "</thead>"; }
|
||||
time::before { content: "<time>"; }
|
||||
time::after { content: "</time>"; }
|
||||
title::before { content: "<title>"; }
|
||||
title::after { content: "</title>"; }
|
||||
tr::before { content: "<tr>"; }
|
||||
tr::after { content: "</tr>"; }
|
||||
track::before { content: "<track>"; }
|
||||
track::after { content: "</track>"; }
|
||||
tt::before { content: "<tt>"; }
|
||||
tt::after { content: "</tt>"; }
|
||||
|
||||
u::before { content: "<u>"; }
|
||||
u::after { content: "</u>"; }
|
||||
ul::before { content: "<ul>"; }
|
||||
ul::after { content: "</ul>"; }
|
||||
|
||||
var::before { content: "<var>"; }
|
||||
var::after { content: "</var>"; }
|
||||
video::before { content: "<video>"; }
|
||||
video::after { content: "</video>"; }
|
||||
|
||||
wbr::before { content: "<wbr>"; }
|
||||
wbr::after { content: "</wbr>"; }
|
||||
|
||||
xmp::before { content: "<xmp>"; }
|
||||
xmp::after { content: "</xmp>"; }
|
||||
381
static/base/css/flex.css
Normal file
381
static/base/css/flex.css
Normal file
|
|
@ -0,0 +1,381 @@
|
|||
/* CONTAINERS */
|
||||
|
||||
.pt-flex__container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.pt-flex__row,
|
||||
.pt-flex__col.pt-bp__none {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse,
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__none {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col,
|
||||
.pt-flex__row.pt-bp__none {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse,
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__none {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.pt-flex__wrap {
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.pt-flex__wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.pt-flex__align-end {
|
||||
align-content: flex-end;
|
||||
}
|
||||
.pt-flex__align-center {
|
||||
align-content: center;
|
||||
}
|
||||
.pt-flex__align-stretch {
|
||||
align-content: stretch;
|
||||
}
|
||||
.pt-flex__align-space-between {
|
||||
align-content: space-between;
|
||||
}
|
||||
.pt-flex__align-space-around {
|
||||
align-content: space-around;
|
||||
}
|
||||
|
||||
.pt-flex__justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.pt-flex__justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.pt-flex__justify-space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.pt-flex__justify-space-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.pt-flex__justify-space-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.pt-flex__container.pt-flex__item-bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.pt-flex__container.pt-flex__item-middle {
|
||||
align-items: center;
|
||||
}
|
||||
.pt-flex__container.pt-flex__item-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
.pt-flex__container.pt-flex__item-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
/* ITEMS */
|
||||
|
||||
.pt-flex__item {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.pt-flex__grow-1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.pt-flex__grow-2 {
|
||||
flex-grow: 2;
|
||||
}
|
||||
.pt-flex__grow-3 {
|
||||
flex-grow: 3;
|
||||
}
|
||||
.pt-flex__grow-4 {
|
||||
flex-grow: 4;
|
||||
}
|
||||
.pt-flex__grow-5 {
|
||||
flex-grow: 5;
|
||||
}
|
||||
.pt-flex__grow-6 {
|
||||
flex-grow: 6;
|
||||
}
|
||||
.pt-flex__grow-7 {
|
||||
flex-grow: 7;
|
||||
}
|
||||
.pt-flex__grow-8 {
|
||||
flex-grow: 8;
|
||||
}
|
||||
.pt-flex__grow-9 {
|
||||
flex-grow: 9;
|
||||
}
|
||||
|
||||
.pt-flex__shrink-1 {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.pt-flex__shrink-2 {
|
||||
flex-shrink: 2;
|
||||
}
|
||||
.pt-flex__shrink-3 {
|
||||
flex-shrink: 3;
|
||||
}
|
||||
.pt-flex__shrink-4 {
|
||||
flex-shrink: 4;
|
||||
}
|
||||
.pt-flex__shrink-5 {
|
||||
flex-shrink: 5;
|
||||
}
|
||||
.pt-flex__shrink-6 {
|
||||
flex-shrink: 6;
|
||||
}
|
||||
.pt-flex__shrink-7 {
|
||||
flex-shrink: 7;
|
||||
}
|
||||
.pt-flex__shrink-8 {
|
||||
flex-shrink: 8;
|
||||
}
|
||||
.pt-flex__shrink-9 {
|
||||
flex-shrink: 9;
|
||||
}
|
||||
|
||||
.pt-flex__width-10 {
|
||||
flex: 0 0 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
.pt-flex__width-20 {
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
}
|
||||
.pt-flex__width-25 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.pt-flex__width-33 {
|
||||
flex: 0 0 33.3333%;
|
||||
max-width: 33.3333%;
|
||||
}
|
||||
.pt-flex__width-40 {
|
||||
flex: 0 0 40%;
|
||||
max-width: 40%;
|
||||
}
|
||||
.pt-flex__width-50 {
|
||||
flex: 0 0 60%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.pt-flex__width-60 {
|
||||
flex: 0 0 60%;
|
||||
max-width: 60%;
|
||||
}
|
||||
.pt-flex__width-66 {
|
||||
flex: 0 0 66.6666%;
|
||||
max-width: 66.6666%;
|
||||
}
|
||||
.pt-flex__width-75 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.pt-flex__width-80 {
|
||||
flex: 0 0 80%;
|
||||
max-width: 80%;
|
||||
}
|
||||
.pt-flex__width-90 {
|
||||
flex: 0 0 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.pt-flex__offset-10 {
|
||||
margin-left: 10%;
|
||||
}
|
||||
.pt-flex__offset-20 {
|
||||
margin-left: 20%;
|
||||
}
|
||||
.pt-flex__offset-25 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.pt-flex__offset-33 {
|
||||
margin-left: 33.3333%;
|
||||
}
|
||||
.pt-flex__offset-40 {
|
||||
margin-left: 40%;
|
||||
}
|
||||
.pt-flex__offset-50 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.pt-flex__offset-60 {
|
||||
margin-left: 60%;
|
||||
}
|
||||
.pt-flex__offset-66 {
|
||||
margin-left: 66.6666%;
|
||||
}
|
||||
.pt-flex__offset-75 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.pt-flex__offset-80 {
|
||||
margin-left: 80%;
|
||||
}
|
||||
.pt-flex__offset-90 {
|
||||
margin-left: 90%;
|
||||
}
|
||||
|
||||
.pt-flex__item.pt-flex__item-top {
|
||||
align-self: flex-start;
|
||||
}
|
||||
.pt-flex__item.pt-flex__item-bottom {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.pt-flex__item.pt-flex__item-middle {
|
||||
align-self: center;
|
||||
}
|
||||
.pt-flex__item.pt-flex__item-stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
.pt-flex__item.pt-flex__item-baseline {
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
/* BREAKPOINTS */
|
||||
|
||||
/* SM - Applies <= 568px */
|
||||
@media screen and (max-width: 35.5em) {
|
||||
.pt-flex__row.pt-bp__sm {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__sm {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__sm {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__sm {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__sm .pt-flex__item {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* MD - Applies <= 768px */
|
||||
@media screen and (max-width: 48em) {
|
||||
.pt-flex__row.pt-bp__md {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__md {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__md {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__md {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__md .pt-flex__item {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* LG - Applies <= 992px */
|
||||
@media screen and (max-width: 62em) {
|
||||
.pt-flex__row.pt-bp__lg {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__lg {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__lg {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__lg {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__lg .pt-flex__item {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* XL - Applies <= 1280px */
|
||||
@media screen and (max-width: 80em) {
|
||||
.pt-flex__row.pt-bp__xl {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__xl {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__xl {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__xl {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__xl .pt-flex__item {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* X2L - Applies <= 1440px */
|
||||
@media screen and (max-width: 90em) {
|
||||
.pt-flex__row.pt-bp__x2l {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__x2l {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__x2l {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__x2l {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__x2l .pt-flex__item {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* X3L - Applies <= 1920px */
|
||||
@media screen and (max-width: 120em) {
|
||||
.pt-flex__row.pt-bp__x3l {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__x3l {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__x3l {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__x3l {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__x3l .pt-flex__item {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* X2K - Applies <= 2560px */
|
||||
@media screen and (max-width: 120em) {
|
||||
.pt-flex__row.pt-bp__x2k {
|
||||
flex-direction: row;
|
||||
}
|
||||
.pt-flex__row.pt-flex__reverse.pt-bp__x2k {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__x2k {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pt-flex__col.pt-flex__reverse.pt-bp__x2k {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.pt-flex__col.pt-bp__x2k .pt-flex__item {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
5
static/base/css/icons.min.css
vendored
Normal file
5
static/base/css/icons.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
102
static/base/css/inception.css
Normal file
102
static/base/css/inception.css
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--pt-font-family);
|
||||
font-size: var(--pt-fs--base);
|
||||
font-weight: var(--pt-fw--base);
|
||||
line-height: var(--pt-lh--base);
|
||||
color: var(--pt-color--text);
|
||||
background-color: var(--pt-color--bg);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--pt-gap-0-35);
|
||||
font-weight: var(--pt-fw--bold);
|
||||
line-height: var(--pt-lh--header);
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--pt-fs--x3l);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--pt-fs--x2l);
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--pt-fs--xl);
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--pt-fs--l);
|
||||
}
|
||||
h5 {
|
||||
font-size: var(--pt-fs--m);
|
||||
}
|
||||
h6 {
|
||||
font-size: var(--pt-fs--base);
|
||||
}
|
||||
/* LG - Applies <= 992px */
|
||||
@media screen and (max-width: 62em) {
|
||||
h1 {
|
||||
font-size: calc(var(--pt-fs--l) + 1.25vw);
|
||||
}
|
||||
h2 {
|
||||
font-size: calc(var(--pt-fs--l) + 0.6vw);
|
||||
}
|
||||
h3 {
|
||||
font-size: calc(var(--pt-fs--m) + 0.6vw);
|
||||
}
|
||||
h4 {
|
||||
font-size: calc(var(--pt-fs--m) + 0.3vw);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--pt-gap-0-75);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--pt-color--default);
|
||||
transition: color .15s ease-in-out;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--pt-color--default-dark);
|
||||
}
|
||||
a:active {
|
||||
color: var(--pt-color--default-light);
|
||||
}
|
||||
|
||||
/* LAYOUT */
|
||||
|
||||
#header__inner,
|
||||
.pt-content__wrapper,
|
||||
#footer__inner {
|
||||
width: 100%;
|
||||
max-width: var(--pt-max-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#header {
|
||||
background: var(--pt-color--white);
|
||||
}
|
||||
.pt-content__wrapper {
|
||||
background: var(--pt-color--white);
|
||||
}
|
||||
|
||||
#footer {
|
||||
background: linear-gradient(180deg, var(--pt-color--gray-5) 0%, var(--pt-color--gray-10) 100%);
|
||||
}
|
||||
#footer__inner {
|
||||
color: var(--pt-color--gray-65);
|
||||
background: var(--pt-color--gray-20);
|
||||
padding: calc(3 * var(--pt-gap)) 0 calc(12 * var(--pt-gap));
|
||||
}
|
||||
#footer__inner a {
|
||||
color: var(--pt-color--white);
|
||||
}
|
||||
165
static/base/css/looks.css
Normal file
165
static/base/css/looks.css
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
/* SKIP TO MAIN CONTENT */
|
||||
|
||||
.pt-body__skip {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.pt-body__skip a {
|
||||
display: block;
|
||||
padding: var(--pt-gap-0-5) var(--pt-gap-1-5);
|
||||
color: var(--pt-color--white);
|
||||
background-color: var(--pt-color--gray-5);
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
position: absolute;
|
||||
transform: translateY(-100%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
z-index: 9999;
|
||||
}
|
||||
.pt-body__skip a:after {
|
||||
content: "\0020 ➔";
|
||||
}
|
||||
.pt-body__skip a:focus {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
|
||||
.pt-fs__x3l {
|
||||
font-size: var(--pt-fs--x3l) !important;
|
||||
}
|
||||
.pt-fs__x2l {
|
||||
font-size: var(--pt-fs--x2l) !important;
|
||||
}
|
||||
.pt-fs__xl {
|
||||
font-size: var(--pt-fs--xl) !important;
|
||||
}
|
||||
.pt-fs__l {
|
||||
font-size: var(--pt-fs--l) !important;
|
||||
}
|
||||
.pt-fs__m {
|
||||
font-size: var(--pt-fs--m) !important;
|
||||
}
|
||||
.pt-fs__s {
|
||||
font-size: var(--pt-fs--s) !important;
|
||||
}
|
||||
.pt-fs__xs {
|
||||
font-size: var(--pt-fs--xs) !important;
|
||||
}
|
||||
.pt-fs__x2s {
|
||||
font-size: var(--pt-fs--x2s) !important;
|
||||
}
|
||||
.pt-fs__x3s {
|
||||
font-size: var(--pt-fs--x3s) !important;
|
||||
}
|
||||
/* LG - Applies <= 992px */
|
||||
@media screen and (max-width: 62em) {
|
||||
.pt-fs__x3l {
|
||||
font-size: calc(var(--pt-fs--l) + 1.25vw) !important;
|
||||
}
|
||||
.pt-fs__x2l {
|
||||
font-size: calc(var(--pt-fs--l) + 0.6vw) !important;
|
||||
}
|
||||
.pt-fs__xl {
|
||||
font-size: calc(var(--pt-fs--m) + 0.6vw) !important;
|
||||
}
|
||||
.pt-fs__l {
|
||||
font-size: calc(var(--pt-fs--m) + 0.3vw) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* COMPONENT STYLES */
|
||||
|
||||
/* Heading component */
|
||||
|
||||
.pt-heading__title-x3l,
|
||||
.pt-heading__title-x2l,
|
||||
.pt-heading__title-xl,
|
||||
.pt-heading__title-l,
|
||||
.pt-heading__title-m,
|
||||
.pt-heading__subtitle {
|
||||
font-weight: var(--pt-fw--light);
|
||||
}
|
||||
.pt-heading__title-x3l {
|
||||
font-size: calc(var(--pt-fs--x3l) * 2);
|
||||
}
|
||||
.pt-heading__title-x2l {
|
||||
font-size: calc(var(--pt-fs--x3l) * 1.8);
|
||||
}
|
||||
.pt-heading__title-xl {
|
||||
font-size: calc(var(--pt-fs--x3l) * 1.6);
|
||||
}
|
||||
.pt-heading__title-l {
|
||||
font-size: calc(var(--pt-fs--x3l) * 1.4);
|
||||
}
|
||||
.pt-heading__title-m {
|
||||
font-size: calc(var(--pt-fs--x3l) * 1.2);
|
||||
}
|
||||
.pt-heading__subtitle {
|
||||
margin-top: calc(-1 * var(--pt-gap-0-5));
|
||||
}
|
||||
/* LG - Applies <= 992px */
|
||||
@media screen and (max-width: 62em) {
|
||||
.pt-heading__title-x3l {
|
||||
font-size: calc((var(--pt-fs--x3l) / 1.5) + 4.5vw);
|
||||
}
|
||||
.pt-heading__title-x2l {
|
||||
font-size: calc((var(--pt-fs--x3l) / 1.6) + 3.9vw);
|
||||
}
|
||||
.pt-heading__title-xl {
|
||||
font-size: calc((var(--pt-fs--x3l) / 1.6) + 3.3vw);
|
||||
}
|
||||
.pt-heading__title-l {
|
||||
font-size: calc((var(--pt-fs--x3l) / 1.7) + 2.7vw);
|
||||
}
|
||||
.pt-heading__title-m {
|
||||
font-size: calc((var(--pt-fs--x3l) / 1.7) + 2.1vw);
|
||||
}
|
||||
}
|
||||
|
||||
/* Image component */
|
||||
|
||||
.pt-img__fluid {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Branding component */
|
||||
|
||||
.pt-branding__wrapper {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
column-gap: var(--pt-gap-0-75);
|
||||
}
|
||||
.pt-branding__name {
|
||||
letter-spacing: 0.02em;
|
||||
font-size: var(--pt-fs--l);
|
||||
}
|
||||
.pt-branding__slogan {
|
||||
font-size: var(--pt-fs--m);
|
||||
}
|
||||
|
||||
/* SM - Applies <= 568px */
|
||||
@media (max-width: 35.5em) {
|
||||
.pt-branding__logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* LG - Applies <= 992px */
|
||||
@media (max-width: 62em) {
|
||||
.pt-branding__slogan {
|
||||
font-size: var(--pt-fs--base);
|
||||
}
|
||||
}
|
||||
|
||||
/* PoweredBy component */
|
||||
|
||||
#pt-poweredby {
|
||||
text-align: center;
|
||||
}
|
||||
.pt-poweredby__logo img,
|
||||
.pt-poweredby__logo svg {
|
||||
margin-left: .275em;
|
||||
height: 1.275em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
304
static/base/css/menu.css
Normal file
304
static/base/css/menu.css
Normal file
|
|
@ -0,0 +1,304 @@
|
|||
.pt-menu__container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: var(--pt-menu--color-bg);
|
||||
}
|
||||
|
||||
.pt-menu__wrapper {
|
||||
margin-right: var(--pt-menu--item-gap);
|
||||
}
|
||||
.pt-menu__wrapper a,
|
||||
.pt-menu__wrapper button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pt-menu__nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.pt-menu__nav li {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 1.5rem;
|
||||
padding: var(--pt-menu--line-padding) 0;
|
||||
line-height: var(--pt-menu--line-height);
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.pt-menu__nav li.pt-menu__label,
|
||||
.pt-menu__nav li > a {
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
color: var(--pt-color--text);
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.pt-menu__nav li > a {
|
||||
border: none;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
.pt-menu__nav li:hover > a,
|
||||
.pt-menu__nav li > a:focus {
|
||||
color: var(--pt-menu--color-highlight);
|
||||
}
|
||||
.pt-menu__nav li > a > i.pt-menu__icon {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__subs {
|
||||
position: absolute;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: var(--pt-menu--color-bg);
|
||||
border-radius: var(--pt-menu--border-radius);
|
||||
border-top: 3px solid var(--pt-menu--color-highlight);
|
||||
z-index: 500;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
box-shadow: 0 4px 6px -1px var(--pt-menu--color-border), 0 2px 4px -1px var(--pt-menu--color-shadow);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.pt-menu__nav li.pt-menu__children:hover > .pt-menu__subs,
|
||||
.pt-menu__nav li.pt-menu__children > a:focus + .pt-menu__subs,
|
||||
.pt-menu__nav li.pt-menu__children .pt-menu__subs:focus-within {
|
||||
margin-top: 0.4rem;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__items {
|
||||
min-width: var(--pt-menu--item-width-min);
|
||||
max-width: var(--pt-menu--item-width-max);
|
||||
}
|
||||
.pt-menu__nav li .pt-menu__items .pt-menu__title {
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: var(--pt-menu--line-padding) 0;
|
||||
line-height: var(--pt-menu--line-height);
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--pt-menu--color-highlight);
|
||||
text-transform: uppercase;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.pt-menu__nav li .pt-menu__items li {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__mega {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__groups {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.pt-menu__header,
|
||||
.pt-menu__trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Applies <= 992px */
|
||||
@media only screen and (max-width: 62em) {
|
||||
.pt-menu__wrapper {
|
||||
margin-left: var(--pt-menu--item-gap);
|
||||
}
|
||||
.pt-menu__trigger {
|
||||
cursor: pointer;
|
||||
width: var(--pt-menu--trigger-width);
|
||||
height: var(--pt-menu--item-height);
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.pt-menu__trigger span {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
margin: 12.675% 0;
|
||||
border-radius: var(--pt-border-radius);
|
||||
background: var(--pt-color--text);
|
||||
}
|
||||
|
||||
.pt-menu__nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--pt-menu--side-width);
|
||||
height: 100%;
|
||||
z-index: 1099;
|
||||
overflow: hidden;
|
||||
background: var(--pt-menu--color-bg);
|
||||
transform: translate(-100%);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.pt-menu__main .pt-menu__nav.active {
|
||||
transform: translate(0%);
|
||||
}
|
||||
|
||||
.pt-menu__nav li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.pt-menu__nav li.pt-menu__label,
|
||||
.pt-menu__nav li > a {
|
||||
display: block;
|
||||
padding: var(--pt-menu--line-padding) var(--pt-menu--item-height) var(--pt-menu--line-padding) var(--pt-menu--item-gap);
|
||||
border-bottom: 1px solid var(--pt-menu--color-border);
|
||||
}
|
||||
.pt-menu__nav li ul li.pt-menu__label,
|
||||
.pt-menu__nav li ul li > a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.pt-menu__nav li > a > i.pt-menu__icon {
|
||||
position: absolute;
|
||||
top: var(--pt-menu--line-padding);
|
||||
right: var(--pt-menu--line-padding);
|
||||
font-size: 1.25rem;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__subs {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: none;
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 4rem 0 0;
|
||||
border-top: 0;
|
||||
opacity: 1;
|
||||
overflow-y: auto;
|
||||
visibility: visible;
|
||||
transform: translateX(0%);
|
||||
box-shadow: none;
|
||||
}
|
||||
.pt-menu__nav li .pt-menu__subs.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pt-menu__nav li.pt-menu__children:hover > .pt-menu__subs {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__items .pt-menu__title {
|
||||
padding: var(--pt-menu--line-padding) var(--pt-menu--item-height) var(--pt-menu--line-padding) var(--pt-menu--item-gap);
|
||||
}
|
||||
|
||||
.pt-menu__nav li .pt-menu__groups {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pt-menu__nav .pt-menu__header {
|
||||
position: sticky;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
height: var(--pt-menu--item-height);
|
||||
border-bottom: 1px solid var(--pt-menu--color-border);
|
||||
background: var(--pt-menu--color-bg);
|
||||
z-index: 501;
|
||||
}
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__title {
|
||||
padding: var(--pt-menu--line-padding);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__close,
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__arrow {
|
||||
width: var(--pt-menu--item-height);
|
||||
min-width: var(--pt-menu--item-height);
|
||||
height: var(--pt-menu--item-height);
|
||||
line-height: var(--pt-menu--item-height);
|
||||
color: var(--pt-color--text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__close {
|
||||
font-size: 2.25rem;
|
||||
border-left: 1px solid var(--pt-menu--color-border);
|
||||
}
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__arrow {
|
||||
font-size: 1.25rem;
|
||||
border-right: 1px solid var(--pt-menu--color-border);
|
||||
display: none;
|
||||
}
|
||||
.pt-menu__nav .pt-menu__header.active .pt-menu__arrow {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pt-menu__nav .pt-menu__section {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pt-menu__overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1098;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.pt-menu__overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* ANIMATIONS */
|
||||
|
||||
@keyframes slideLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRight {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
2
static/base/css/normalize.min.css
vendored
Normal file
2
static/base/css/normalize.min.css
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}
|
||||
193
static/base/css/root.css
Normal file
193
static/base/css/root.css
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
:root {
|
||||
--pt-font-sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
--pt-font-serif: "Lora","georgia",serif;
|
||||
--pt-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
|
||||
--pt-font-family: var(--pt-font-sans);
|
||||
|
||||
/* Font size */
|
||||
--pt-fs--x3l: 2.5rem;
|
||||
--pt-fs--x2l: 2rem;
|
||||
--pt-fs--xl: 1.75rem;
|
||||
--pt-fs--l: 1.5rem;
|
||||
--pt-fs--m: 1.25rem;
|
||||
--pt-fs--base: 1rem;
|
||||
--pt-fs--s: 0.875rem;
|
||||
--pt-fs--xs: 0.75rem;
|
||||
--pt-fs--x2s: 0.5625rem;
|
||||
--pt-fs--x3s: 0.375rem;
|
||||
|
||||
/* Font weight */
|
||||
--pt-fw--light: 300;
|
||||
--pt-fw--base: 400;
|
||||
--pt-fw--bold: 500;
|
||||
|
||||
/* Line height */
|
||||
--pt-lh--base: 1.5;
|
||||
--pt-lh--header: 1.2;
|
||||
|
||||
--pt-max-width: 90rem;
|
||||
/*
|
||||
--pt-color-rgb: 33,37,41;
|
||||
--pt-main--bg-rgb: 255,255,255;
|
||||
--pt-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
|
||||
--line-height-base: 1.6875rem;
|
||||
--line-height-s: 1.125rem;
|
||||
--max-bg-color: 98.125rem;
|
||||
*/
|
||||
--pt-gap: 1.125em;
|
||||
/*
|
||||
--content-left: 5.625rem;
|
||||
--site-header-height-wide: var(--pt-gap10);
|
||||
--container-padding: var(--pt-gap);
|
||||
*/
|
||||
}
|
||||
/*
|
||||
@media (min-width: 75rem) {
|
||||
:root {
|
||||
--container-padding:var(--pt-gap2);
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--scrollbar-width: 0px;
|
||||
--grid-col-count: 6;
|
||||
--grid-gap: var(--pt-gap);
|
||||
--grid-gap-count: calc(var(--grid-col-count) - 1);
|
||||
--grid-full-width: calc(100vw - var(--pt-gap2) - var(--scrollbar-width));
|
||||
--grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count));
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
:root {
|
||||
--grid-col-count:14;
|
||||
--grid-gap: var(--pt-gap2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
:root {
|
||||
--scrollbar-width:0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
:root {
|
||||
--grid-full-width:calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--pt-gap4));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 90rem) {
|
||||
:root {
|
||||
--grid-full-width:calc(var(--max-width) - var(--pt-gap4));
|
||||
}
|
||||
}
|
||||
*/
|
||||
:root {
|
||||
--pt-gap-0-15: calc(0.15 * var(--pt-gap));
|
||||
--pt-gap-0-25: calc(0.25 * var(--pt-gap));
|
||||
--pt-gap-0-35: calc(0.35 * var(--pt-gap));
|
||||
--pt-gap-0-5: calc(0.5 * var(--pt-gap));
|
||||
--pt-gap-0-75: calc(0.75 * var(--pt-gap));
|
||||
--pt-gap-1-5: calc(1.5 * var(--pt-gap));
|
||||
--pt-gap-2: calc(2 * var(--pt-gap));
|
||||
|
||||
--pt-color--default-hue: 216;
|
||||
--pt-color--default-sat: 60%;
|
||||
--pt-color--default-light: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 60%);
|
||||
--pt-color--default-dark: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 40%);
|
||||
--pt-color--default: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 50%);
|
||||
|
||||
--pt-color--info-hue: 190;
|
||||
--pt-color--info-sat: 90%;
|
||||
--pt-color--info-light: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 60%);
|
||||
--pt-color--info-dark: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 40%);
|
||||
--pt-color--info: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 50%);
|
||||
|
||||
--pt-color--success-hue: 150;
|
||||
--pt-color--success-sat: 50%;
|
||||
--pt-color--success-light: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 60%);
|
||||
--pt-color--success-dark: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 40%);
|
||||
--pt-color--success: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 50%);
|
||||
|
||||
--pt-color--warning-hue: 44;
|
||||
--pt-color--warning-sat: 100%;
|
||||
--pt-color--warning-light: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 60%);
|
||||
--pt-color--warning-dark: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 48%);
|
||||
--pt-color--warning: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 50%);
|
||||
|
||||
--pt-color--danger-hue: 348;
|
||||
--pt-color--danger-sat: 86%;
|
||||
--pt-color--danger-light: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 60%);
|
||||
--pt-color--danger-dark: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 40%);
|
||||
--pt-color--danger: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 50%);
|
||||
|
||||
--pt-color--light-hue: 0;
|
||||
--pt-color--light-sat: 0%;
|
||||
--pt-color--light-light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 98%);
|
||||
--pt-color--light-dark: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 92%);
|
||||
--pt-color--light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 96%);
|
||||
|
||||
--pt-color--dark-hue: 0;
|
||||
--pt-color--dark-sat: 0%;
|
||||
--pt-color--dark-light: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 40%);
|
||||
--pt-color--dark-dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 8%);
|
||||
--pt-color--dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 25%);
|
||||
|
||||
|
||||
|
||||
|
||||
--pt-color--gray-hue: 201;
|
||||
--pt-color--gray-sat: 15%;
|
||||
--pt-color--gray-5: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 5%);
|
||||
--pt-color--gray-10: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat) ,11%);
|
||||
--pt-color--gray-20: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat),20%);
|
||||
--pt-color--gray-45: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 44%);
|
||||
--pt-color--gray-60: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 57%);
|
||||
--pt-color--gray-65: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 63%);
|
||||
--pt-color--gray-70: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 72%);
|
||||
--pt-color--gray-90: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 88%);
|
||||
--pt-color--gray-95: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 93%);
|
||||
--pt-color--gray-100: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 97%);
|
||||
|
||||
|
||||
|
||||
|
||||
--pt-color--bg: #fafafa;
|
||||
--pt-color--text: #212529;
|
||||
--pt-color--white: #fff;
|
||||
|
||||
/*
|
||||
|
||||
|
||||
--color-text-neutral-soft: var(--color--gray-45);
|
||||
--color-text-neutral-medium: var(--color--gray-20);
|
||||
--color-text-neutral-loud: var(--color--gray-5);
|
||||
--color-text-primary-medium: var(--pt-color--default-40);
|
||||
--color-text-primary-loud: var(--pt-color--default-30);
|
||||
--color--black: #000;
|
||||
*/
|
||||
/*
|
||||
--color--red: #e33f1e;
|
||||
--color--gold: #fdca40;
|
||||
--color--green: #3fa21c;
|
||||
--header-height-wide-when-fixed: calc(6 * var(--pt-gap));
|
||||
--mobile-nav-width: 31.25rem;
|
||||
*/
|
||||
--pt-border-radius: 0.375rem;
|
||||
|
||||
/* Menu component */
|
||||
--pt-menu--color-bg: var(--pt-color--bg);
|
||||
--pt-menu--color-highlight: #e91e63;
|
||||
--pt-menu--color-border: rgba(0, 0, 0, 0.1);
|
||||
--pt-menu--color-shadow: rgba(0, 0, 0, 0.06);
|
||||
--pt-menu--line-padding: 0.625rem;
|
||||
--pt-menu--line-height: 1.875rem;
|
||||
--pt-menu--item-height: calc(var(--pt-menu--line-padding) + var(--pt-menu--line-height));
|
||||
--pt-menu--item-width-min: 14rem;
|
||||
--pt-menu--item-width-max: 20rem;
|
||||
--pt-menu--item-gap: 1rem;
|
||||
--pt-menu--border-radius: 0.625rem;
|
||||
--pt-menu--trigger-width: var(--pt-menu--item-height);
|
||||
--pt-menu--side-width: 20rem;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue