mirror of
https://github.com/safing/web
synced 2025-04-11 22:49:08 +00:00
Update safingTailwind-1.5.1
This commit is contained in:
Luke
parent
c429690204
commit
0e631e56a0
6 changed files with 134 additions and 55 deletions
|
|
@ -39,5 +39,5 @@
|
|||
<meta name="theme-color" content="#f7f7f7">
|
||||
|
||||
<link rel="stylesheet" href="{{ site.vendor_url }}css/fonts-roboto.css" type="text/css">
|
||||
<link rel="stylesheet" href="{{ site.vendor_url }}safingTailwind/safingTailwind-1.5.css" type="text/css">
|
||||
<link rel="stylesheet" href="{{ site.vendor_url }}safingTailwind/safingTailwind-1.5.1.css" type="text/css">
|
||||
<link rel="stylesheet" href="{{ site.assets_url }}css/main.css" type="text/css">
|
||||
|
|
|
|||
BIN
vendor/safingTailwind-1.5.1.zip
vendored
Normal file
BIN
vendor/safingTailwind-1.5.1.zip
vendored
Normal file
Binary file not shown.
BIN
vendor/safingTailwind-1.5.zip
vendored
BIN
vendor/safingTailwind-1.5.zip
vendored
Binary file not shown.
70
vendor/safingTailwind/docs/docs.html
vendored
70
vendor/safingTailwind/docs/docs.html
vendored
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../docs/css/highlight.min.css">
|
||||
<link rel="stylesheet" href="../docs/css/style.css">
|
||||
<link rel="stylesheet" href="../safingTailwind-1.5.css">
|
||||
<link rel="stylesheet" href="../safingTailwind-1.5.1.css">
|
||||
<script src="../docs/js/vendor/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../docs/js/vendor/jquery-resizable.js"></script>
|
||||
<script src="../docs/js/vendor/highlight.min.js"></script>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</head>
|
||||
<body class="antialiased font-sans font-medium">
|
||||
<div class="alert-primary rounded-none text-md">
|
||||
<span>There will be some stuff missing in this, and also some bugs. <strong>v1.5</strong></span>
|
||||
<span>There will be some stuff missing in this, and also some bugs. <strong>v1.5.1</strong></span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<nav class="overflow-y-auto pb-10 pt-20 ml-20 w-56">
|
||||
|
|
@ -1645,6 +1645,54 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="compoent space-y-2">
|
||||
<div id="tabMenu" class="space-y-4">
|
||||
<div class="flex">
|
||||
<div>
|
||||
<span class="title block text-md">Backoffice</span>
|
||||
</div>
|
||||
<ul class="tabs flex space-x-3 ml-auto">
|
||||
<li><a href="#preview-Backoffice-Tag">preview</a></li>
|
||||
<li><a href="#html-Backoffice-Tag">html</a></li>
|
||||
|
||||
<li><a href="#scss-Backoffice-Tag">scss</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="tabs-content">
|
||||
<li id="preview-Backoffice-Tag" class="active">
|
||||
<div class="preview-container">
|
||||
<div class="preview-panel-left">
|
||||
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
|
||||
<div class="data items-center flex h-full" style="height: fit-content;">
|
||||
<div class="w-full h-full" style="height: fit-content;">
|
||||
<span class="tag-backoffice">
|
||||
Community
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-panel-splitter"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="html-Backoffice-Tag">
|
||||
<pre><code style="min-height: 200px;" class="language-html"><span class="tag-backoffice">
|
||||
Community
|
||||
</span></code></pre>
|
||||
</li>
|
||||
|
||||
<li id="scss-Backoffice-Tag">
|
||||
<pre><code style="min-height: 200px;" class="language-scss">.tag-backoffice {
|
||||
@apply tag;
|
||||
@apply bg-gray-200;
|
||||
@apply text-gray-800;
|
||||
}</code></pre>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="compoent space-y-2">
|
||||
<div id="tabMenu" class="space-y-4">
|
||||
<div class="flex">
|
||||
|
|
@ -1787,8 +1835,8 @@
|
|||
<li id="scss-Marketing-Tag">
|
||||
<pre><code style="min-height: 200px;" class="language-scss">.tag-marketing {
|
||||
@apply tag;
|
||||
@apply bg-orange-100;
|
||||
@apply text-orange-800;
|
||||
@apply bg-yellow-200;
|
||||
@apply text-yellow-800;
|
||||
}</code></pre>
|
||||
</li>
|
||||
|
||||
|
|
@ -1931,8 +1979,8 @@
|
|||
<li id="scss-Website-Tag">
|
||||
<pre><code style="min-height: 200px;" class="language-scss">.tag-website {
|
||||
@apply tag;
|
||||
@apply bg-gray-200;
|
||||
@apply text-gray-800;
|
||||
@apply bg-pink-200;
|
||||
@apply text-pink-800;
|
||||
}</code></pre>
|
||||
</li>
|
||||
|
||||
|
|
@ -3459,14 +3507,20 @@
|
|||
}
|
||||
|
||||
.markdown-container > hr {
|
||||
margin-bottom: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.markdown-container > [class^=' alert'],
|
||||
.markdown-container > [class*='alert'] {
|
||||
margin-bottom: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.markdown-container > a {
|
||||
@apply block;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.markdown-container > p:not(:first-of-type):not(:last-of-type) {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ function SetUpIframeData() {
|
|||
innerHtml = iframeContents.find('html');
|
||||
innerBody = iframeContents.find('body');
|
||||
innerHead = iframeContents.find('head');
|
||||
innerHead.append('<link rel="stylesheet" href="../safingTailwind-1.5.css">');
|
||||
innerHead.append('<link rel="stylesheet" href="../safingTailwind-1.5.1.css">');
|
||||
innerBody.append(data)
|
||||
});
|
||||
setTimeout(function(){
|
||||
|
|
|
|||
|
|
@ -59,9 +59,9 @@ em {
|
|||
line-height: 1.25rem;
|
||||
margin-right: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(235, 179, 158, var(--tw-bg-opacity));
|
||||
background-color: rgba(253, 230, 138, var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(30, 13, 6, var(--tw-text-opacity));
|
||||
color: rgba(146, 64, 14, var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.tag-portmaster {
|
||||
|
|
@ -103,6 +103,25 @@ em {
|
|||
}
|
||||
|
||||
.tag-website {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.25rem;
|
||||
margin-right: 0.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(251, 207, 232, var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(157, 23, 77, var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.tag-backoffice {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-left: 0.75rem;
|
||||
|
|
@ -6995,14 +7014,20 @@ em {
|
|||
}
|
||||
|
||||
.markdown-container > hr {
|
||||
margin-bottom: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.markdown-container > [class^=' alert'],
|
||||
.markdown-container > [class*='alert'] {
|
||||
margin-bottom: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.markdown-container > a {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.markdown-container > p:not(:first-of-type):not(:last-of-type) {
|
||||
|
|
@ -7430,41 +7455,41 @@ em {
|
|||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.advert-container {
|
||||
.plug-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.advert-container, .card-extended {
|
||||
.plug-container, .card-extended {
|
||||
height: -webkit-max-content;
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.advert-container, .card-extended {
|
||||
.plug-container, .card-extended {
|
||||
max-width: 80rem;
|
||||
}
|
||||
|
||||
.advert-container, .card-extended {
|
||||
.plug-container, .card-extended {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.advert-container, .card-extended {
|
||||
.plug-container, .card-extended {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.advert-container, .card-extended {
|
||||
.plug-container, .card-extended {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.advert-container, .card-extended {
|
||||
.plug-container, .card-extended {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.advert-container::after, .card-extended::after {
|
||||
.plug-container::after, .card-extended::after {
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0), 0 0 90px 0 rgba(59, 93, 199, 0.1);
|
||||
content: '';
|
||||
height: 100%;
|
||||
|
|
@ -7475,7 +7500,7 @@ em {
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
.card-extended .advert-container {
|
||||
.card-extended .plug-container {
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.15);
|
||||
border-top: solid 1px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0px;
|
||||
|
|
@ -7510,7 +7535,7 @@ em {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-extended .advert-container .card-label {
|
||||
.card-extended .plug-container .card-label {
|
||||
padding-bottom: 1rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1.5rem;
|
||||
|
|
@ -7537,7 +7562,7 @@ em {
|
|||
padding: 0px;
|
||||
}
|
||||
|
||||
.card-extended .advert-container .card-title {
|
||||
.card-extended .plug-container .card-title {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
|
|
@ -7591,7 +7616,7 @@ em {
|
|||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.card-extended .advert-container .title {
|
||||
.card-extended .plug-container .title {
|
||||
padding-left: 0px;
|
||||
font-size: 0.975rem;
|
||||
}
|
||||
|
|
@ -7659,7 +7684,7 @@ em {
|
|||
--tw-rotate: 180deg;
|
||||
}
|
||||
|
||||
.card-extended .advert-container .card-dropdown-toggle {
|
||||
.card-extended .plug-container .card-dropdown-toggle {
|
||||
padding-bottom: 0px;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
|
|
@ -7702,34 +7727,34 @@ em {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card-extended .advert-container p {
|
||||
.card-extended .plug-container p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card-extended .card-dropdown-content .advert-container .title{
|
||||
.card-extended .card-dropdown-content .plug-container .title{
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.advert-container .card-dropdown-content {
|
||||
.plug-container .card-dropdown-content {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
||||
font-size: 0.975rem;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.card-faq .advert-container .card-title {
|
||||
.card-faq .plug-container .card-title {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.card-faq .advert-container .title {
|
||||
.card-faq .plug-container .title {
|
||||
padding-left: 0px;
|
||||
font-size: 0.975rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.advert-container {
|
||||
.plug-container {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(148, 174, 255, var(--tw-bg-opacity));
|
||||
background-color: rgba(97, 136, 255, var(--tw-bg-opacity));
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -7739,36 +7764,36 @@ em {
|
|||
margin-top: 3rem !important; /* this is dirty but atm it works */
|
||||
}
|
||||
|
||||
.advert-container > .advert-container-left {
|
||||
.plug-container > .plug-container-left {
|
||||
width: 100%;
|
||||
height: -webkit-max-content;
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.advert-container > .advert-container-left > :not([hidden]) ~ :not([hidden]) {
|
||||
.plug-container > .plug-container-left > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.advert-container > .advert-container-left {
|
||||
.plug-container > .plug-container-left {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.advert-container > .advert-container-left {
|
||||
.plug-container > .plug-container-left {
|
||||
margin-left: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.advert-container > .advert-container-left {
|
||||
.plug-container > .plug-container-left {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.advert-container .advert-container-left-title {
|
||||
.plug-container .plug-container-left-title {
|
||||
display: block;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(255, 255, 255, var(--tw-text-opacity));
|
||||
|
|
@ -7778,12 +7803,12 @@ em {
|
|||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.advert-container .advert-container-left-title {
|
||||
.plug-container .plug-container-left-title {
|
||||
max-width: 24rem;
|
||||
}
|
||||
}
|
||||
|
||||
.advert-container .advert-container-left-sub {
|
||||
.plug-container .plug-container-left-sub {
|
||||
display: block;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(255, 255, 255, var(--tw-text-opacity));
|
||||
|
|
@ -7791,7 +7816,7 @@ em {
|
|||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.advert-container .advert-container-left-button {
|
||||
.plug-container .plug-container-left-button {
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem;
|
||||
padding-top : 0.8rem;
|
||||
|
|
@ -7821,12 +7846,12 @@ em {
|
|||
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.advert-container .advert-container-left-button:hover {
|
||||
.plug-container .plug-container-left-button:hover {
|
||||
--tw-scale-x: .95;
|
||||
--tw-scale-y: .95;
|
||||
}
|
||||
|
||||
.advert-container .advert-container-left-button {
|
||||
.plug-container .plug-container-left-button {
|
||||
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
|
|
@ -7836,17 +7861,17 @@ em {
|
|||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled] {
|
||||
.plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(216, 216, 216, var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled] {
|
||||
.plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(140, 140, 140, var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled], .advert-container .advert-container-left-button[disabled] {
|
||||
.plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled], .plug-container .plug-container-left-button[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
|
@ -7892,7 +7917,7 @@ em {
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.advert-container .advert-container-left-button[disabled] i, .advert-container .advert-container-left-button[disabled] i, .advert-container .advert-container-left-button[disabled] i, .advert-container .advert-container-left-button[disabled] i {
|
||||
.plug-container .plug-container-left-button[disabled] i, .plug-container .plug-container-left-button[disabled] i, .plug-container .plug-container-left-button[disabled] i, .plug-container .plug-container-left-button[disabled] i {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(140, 140, 140, var(--tw-text-opacity));
|
||||
}
|
||||
|
|
@ -7912,7 +7937,7 @@ em {
|
|||
color: rgba(140, 140, 140, var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.advert-container .advert-container-left-button[disabled]:hover, .advert-container .advert-container-left-button[disabled]:hover, .advert-container .advert-container-left-button[disabled]:hover, .advert-container .advert-container-left-button[disabled]:hover {
|
||||
.plug-container .plug-container-left-button[disabled]:hover, .plug-container .plug-container-left-button[disabled]:hover, .plug-container .plug-container-left-button[disabled]:hover, .plug-container .plug-container-left-button[disabled]:hover {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
|
|
@ -7923,7 +7948,7 @@ em {
|
|||
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.advert-container .advert-container-left-button[disabled]:hover, .advert-container .advert-container-left-button[disabled]:hover, .advert-container .advert-container-left-button[disabled]:hover, .advert-container .advert-container-left-button[disabled]:hover {
|
||||
.plug-container .plug-container-left-button[disabled]:hover, .plug-container .plug-container-left-button[disabled]:hover, .plug-container .plug-container-left-button[disabled]:hover, .plug-container .plug-container-left-button[disabled]:hover {
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
}
|
||||
|
|
@ -7976,7 +8001,7 @@ em {
|
|||
--tw-scale-y: 1;
|
||||
}
|
||||
|
||||
.advert-container .advert-container-left-button i, .advert-container .advert-container-left-button i, .advert-container .advert-container-left-button i, .advert-container .advert-container-left-button i {
|
||||
.plug-container .plug-container-left-button i, .plug-container .plug-container-left-button i, .plug-container .plug-container-left-button i, .plug-container .plug-container-left-button i {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
|
|
@ -7992,11 +8017,11 @@ em {
|
|||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.advert-container .advert-container-left-button {
|
||||
.plug-container .plug-container-left-button {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(148, 174, 255, var(--tw-text-opacity));
|
||||
color: rgba(97, 136, 255, var(--tw-text-opacity));
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
|
|
@ -8010,7 +8035,7 @@ em {
|
|||
margin-left: -0.75rem;
|
||||
}
|
||||
|
||||
.advert-container:hover .advert-container-left-button {
|
||||
.plug-container:hover .plug-container-left-button {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
Loading…
Add table
Reference in a new issue