feat(web): tailwind css (#1147)
This commit is contained in:
Aman Harwara
63
packages/web/src/stylesheets/_animation.scss
Normal file
63
packages/web/src/stylesheets/_animation.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
.animate-slide-in-top {
|
||||
animation: slide-in-top 0.1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slide-in-top {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-40%);
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-up-animation {
|
||||
animation: slide-up 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-down-animation {
|
||||
animation: slide-down 0.2s ease;
|
||||
}
|
||||
|
||||
.animate-fade-from-top {
|
||||
animation: fade-from-top 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fade-from-top {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
@@ -35,8 +35,6 @@ $heading-height: 75px;
|
||||
padding-right: 14px;
|
||||
|
||||
border-bottom: 1px solid var(--editor-title-bar-border-bottom-color);
|
||||
z-index: $z-index-editor-title-bar;
|
||||
|
||||
height: auto;
|
||||
|
||||
.title {
|
||||
@@ -95,7 +93,6 @@ $heading-height: 75px;
|
||||
.editor-content,
|
||||
#editor-content {
|
||||
flex: 1;
|
||||
z-index: $z-index-editor-content;
|
||||
overflow-y: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
@@ -3,29 +3,6 @@
|
||||
width: 100%;
|
||||
height: $footer-height;
|
||||
max-height: $footer-height;
|
||||
z-index: $z-index-footer-bar;
|
||||
}
|
||||
|
||||
#footer-bar .sk-app-bar-item {
|
||||
z-index: $z-index-footer-bar-item;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
||||
.sk-panel {
|
||||
max-height: 85vh;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
left: 10px;
|
||||
bottom: 40px;
|
||||
min-width: 300px;
|
||||
z-index: $z-index-footer-bar-item-panel;
|
||||
margin-top: 15px;
|
||||
|
||||
&.sk-panel-right {
|
||||
right: 0;
|
||||
left: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#account-panel,
|
||||
@@ -41,10 +18,6 @@ a.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#lock-item {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
#footer-lock-icon {
|
||||
margin-left: 5px;
|
||||
padding-left: 5px;
|
||||
|
||||
@@ -36,10 +36,6 @@
|
||||
.section-title-bar-header .title {
|
||||
width: calc(90% - 45px);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: var(--sn-stylekit-font-size-p);
|
||||
}
|
||||
}
|
||||
|
||||
#items-menu-bar {
|
||||
@@ -120,10 +116,15 @@
|
||||
}
|
||||
|
||||
.content-list-item {
|
||||
&.selected, &:hover {
|
||||
&.selected,
|
||||
&:hover {
|
||||
background-color: var(--item-cell-selected-background-color);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
progress {
|
||||
background-color: var(--note-preview-progress-background-color);
|
||||
color: var(--note-preview-progress-color);
|
||||
|
||||
@@ -1,25 +1,28 @@
|
||||
$z-index-editor-content: 10;
|
||||
|
||||
$z-index-editor-title-bar: 100;
|
||||
|
||||
$z-index-resizer-overlay: 1000;
|
||||
|
||||
$z-index-component-view: 1000;
|
||||
|
||||
$z-index-footer-bar: 2000;
|
||||
$z-index-footer-bar-item: 2000;
|
||||
$z-index-footer-bar-item-panel: 2000;
|
||||
|
||||
$z-index-preferences: 3000;
|
||||
|
||||
$z-index-purchase-flow: 4000;
|
||||
|
||||
$z-index-lock-screen: 10000;
|
||||
$z-index-modal: 10000;
|
||||
|
||||
:root {
|
||||
--z-index-editor-content: 10;
|
||||
--z-index-editor-title-bar: 100;
|
||||
--z-index-resizer-overlay: 1000;
|
||||
--z-index-component-view: 1000;
|
||||
--z-index-panel-resizer: 1001;
|
||||
--z-index-dropdown-menu: 1002;
|
||||
--z-index-footer-bar: 2000;
|
||||
--z-index-footer-bar-item: 2000;
|
||||
--z-index-footer-bar-item-panel: 2000;
|
||||
--z-index-preferences: 3000;
|
||||
--z-index-purchase-flow: 4000;
|
||||
--z-index-lock-screen: 10000;
|
||||
--z-index-modal: 10000;
|
||||
--z-index-toast: 11000;
|
||||
|
||||
--sn-stylekit-base-font-size: 0.813rem;
|
||||
--sn-stylekit-simplified-chinese-font: 'Microsoft Yahei', '微软雅黑体';
|
||||
--sn-stylekit-monospace-font: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Ubuntu Mono', 'Courier New',
|
||||
monospace;
|
||||
--sn-stylekit-sans-serif-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
||||
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', var(--sn-stylekit-simplified-chinese-font), sans-serif;
|
||||
--sn-stylekit-editor-font-family: var(--sn-stylekit-sans-serif-font);
|
||||
|
||||
--reach-checkbox: 1;
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -28,12 +31,13 @@ html {
|
||||
|
||||
body {
|
||||
font-size: var(--sn-stylekit-base-font-size);
|
||||
color: var(--sn-stylekit-foreground-color);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
||||
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
|
||||
'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -118,7 +122,7 @@ $footer-height: 2rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
z-index: $z-index-resizer-overlay;
|
||||
z-index: var(--z-index-resizer-overlay);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -168,11 +172,3 @@ $footer-height: 2rem;
|
||||
.icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.z-index-preferences {
|
||||
z-index: $z-index-preferences;
|
||||
}
|
||||
|
||||
.z-index-purchase-flow {
|
||||
z-index: $z-index-purchase-flow;
|
||||
}
|
||||
|
||||
@@ -16,16 +16,3 @@
|
||||
width: 280px;
|
||||
max-height: calc(85vh - 90px);
|
||||
}
|
||||
|
||||
.sn-account-menu,
|
||||
.sn-quick-settings-menu {
|
||||
z-index: $z-index-footer-bar-item-panel;
|
||||
@extend .bottom-100\%;
|
||||
@extend .left-0;
|
||||
@extend .cursor-auto;
|
||||
}
|
||||
|
||||
.sn-account-menu-headline {
|
||||
@extend .sk-h2;
|
||||
@extend .sk-bold;
|
||||
}
|
||||
|
||||
@@ -1,26 +1,10 @@
|
||||
#permissions-modal {
|
||||
width: 350px;
|
||||
.sk-panel {
|
||||
border-radius: 0;
|
||||
}
|
||||
.sk-panel-content {
|
||||
padding-top: 0.89375rem;
|
||||
}
|
||||
.sk-panel-footer {
|
||||
padding-bottom: 1.1375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.challenge-modal {
|
||||
min-width: 0 !important;
|
||||
width: auto;
|
||||
|
||||
.prompt,
|
||||
.subprompt {
|
||||
text-align: center;
|
||||
}
|
||||
.sk-panel .sk-panel-header {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
#account-switcher {
|
||||
@@ -59,7 +43,7 @@
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: $z-index-modal;
|
||||
z-index: var(--z-index-modal);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -149,7 +133,7 @@
|
||||
|
||||
.sn-component {
|
||||
min-width: 100%;
|
||||
z-index: $z-index-component-view;
|
||||
z-index: var(--z-index-component-view);
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
|
||||
@@ -68,6 +68,7 @@ $content-horizontal-padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: height 0.1s ease-in-out;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
> .tag-info {
|
||||
display: flex;
|
||||
@@ -80,17 +81,6 @@ $content-horizontal-padding: 16px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tag-fold {
|
||||
min-width: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
@extend .border-0;
|
||||
@extend .bg-transparent;
|
||||
@extend .p-0;
|
||||
}
|
||||
|
||||
> .tag-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -106,8 +96,6 @@ $content-horizontal-padding: 16px;
|
||||
}
|
||||
|
||||
> .title {
|
||||
@extend .focus\:outline-none;
|
||||
@extend .focus\:shadow-none;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
|
||||
|
||||
@@ -1,48 +1,5 @@
|
||||
.preferences-menu-item {
|
||||
@extend .border-box;
|
||||
@extend .w-auto;
|
||||
@extend .h-auto;
|
||||
@extend .rounded;
|
||||
@extend .min-w-42;
|
||||
|
||||
@extend .py-2;
|
||||
@extend .px-4;
|
||||
|
||||
@extend .flex;
|
||||
@extend .flex-row;
|
||||
@extend .items-center;
|
||||
@extend .justify-start;
|
||||
|
||||
@extend .text-sm;
|
||||
@extend .cursor-pointer;
|
||||
|
||||
@extend .border-transparent;
|
||||
@extend .border-solid;
|
||||
@extend .border-1;
|
||||
|
||||
.icon {
|
||||
color: var(--preferences-navigation-icon-color);
|
||||
@extend .text-base;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@extend .border-main;
|
||||
@extend .border-solid;
|
||||
@extend .border-1;
|
||||
@extend .bg-default;
|
||||
}
|
||||
}
|
||||
|
||||
.preferences-menu-item.selected {
|
||||
@extend .border-info;
|
||||
@extend .color-info;
|
||||
@extend .font-bold;
|
||||
|
||||
background-color: var(--preferences-navigation-selected-background-color);
|
||||
|
||||
.icon {
|
||||
@extend .color-info;
|
||||
}
|
||||
}
|
||||
|
||||
.preferences-extension-pane {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
[data-reach-dialog-overlay] {
|
||||
z-index: $z-index-modal;
|
||||
z-index: var(--z-index-modal);
|
||||
background: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -24,15 +24,7 @@
|
||||
}
|
||||
|
||||
[data-reach-dialog-content] {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
overflow: unset;
|
||||
flex-basis: 0;
|
||||
min-width: 400px;
|
||||
max-width: 600px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
[data-reach-dialog-content] .sk-modal-content,
|
||||
|
||||
@@ -8,9 +8,6 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--sn-stylekit-font-size-h2);
|
||||
}
|
||||
ul {
|
||||
grid-column: 1 / 3;
|
||||
display: grid;
|
||||
|
||||
@@ -1,42 +1,4 @@
|
||||
/* Components and utilities that are good candidates for extraction to StyleKit. */
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hover\:underline:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sn-dropdown {
|
||||
@extend .bg-default;
|
||||
@extend .rounded;
|
||||
@extend .box-shadow;
|
||||
|
||||
z-index: var(--z-index-dropdown-menu);
|
||||
|
||||
&.sn-dropdown--anchor-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&[data-state='collapsed'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.sn-dropdown--animated {
|
||||
@extend .transition-transform;
|
||||
@extend .duration-150;
|
||||
@extend .slide-down-animation;
|
||||
}
|
||||
|
||||
&.sn-dropdown--small {
|
||||
@extend .min-w-40;
|
||||
}
|
||||
}
|
||||
@use 'sass:math';
|
||||
|
||||
.sn-dropdown-popover {
|
||||
z-index: 3001;
|
||||
@@ -48,38 +10,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sn-dropdown-button {
|
||||
@extend .rounded;
|
||||
@extend .px-3\.5;
|
||||
@extend .py-1\.75;
|
||||
@extend .fit-content;
|
||||
@extend .bg-default;
|
||||
@extend .text-input;
|
||||
@extend .color-text;
|
||||
@extend .border-solid;
|
||||
@extend .border-main;
|
||||
@extend .border-1;
|
||||
@extend .min-w-55;
|
||||
}
|
||||
|
||||
.sn-dropdown-button-label {
|
||||
@extend .flex;
|
||||
@extend .items-center;
|
||||
}
|
||||
|
||||
.sn-dropdown-arrow {
|
||||
@extend .flex;
|
||||
|
||||
&.sn-dropdown-arrow-flipped {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.sn-accordion-arrow-icon {
|
||||
&[data-is-expanded='true'] {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-contents-container {
|
||||
transition: all 0.23s ease-out;
|
||||
transform-origin: top;
|
||||
@@ -93,243 +29,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
/** Lesser specificity will give priority to reach's styles */
|
||||
[data-reach-custom-checkbox-container].sn-switch {
|
||||
@extend .duration-150;
|
||||
@extend .ease-out;
|
||||
@extend .rounded-full;
|
||||
@extend .transition-background;
|
||||
@extend .bg-clip-padding;
|
||||
@extend .cursor-pointer;
|
||||
@extend .border-transparent;
|
||||
@extend .w-8;
|
||||
@extend .h-4\.5;
|
||||
@extend .border-2;
|
||||
@extend .border-solid;
|
||||
@extend .focus-within\:ring-info;
|
||||
@extend .focus-within\:outline-none;
|
||||
@extend .focus-within\:border-background;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.sn-switch-handle {
|
||||
@extend .absolute;
|
||||
@extend .block;
|
||||
@extend .bg-default;
|
||||
@extend .rounded-full;
|
||||
|
||||
@extend .ease-out;
|
||||
@extend .transition-transform;
|
||||
@extend .duration-150;
|
||||
|
||||
left: 2px;
|
||||
@extend .w-3\.5;
|
||||
@extend .h-3\.5;
|
||||
top: 50%;
|
||||
transform: translate(0px, -50%);
|
||||
|
||||
&.sn-switch-handle--right {
|
||||
transform: translate(calc(2rem - 1.125rem), -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.sn-component .sk-app-bar .sk-app-bar-item {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.sn-dropdown-item {
|
||||
@extend .flex;
|
||||
@extend .items-center;
|
||||
@extend .border-0;
|
||||
@extend .focus\:shadow-none;
|
||||
@extend .cursor-pointer;
|
||||
@extend .hover\:bg-contrast;
|
||||
@extend .hover\:color-foreground;
|
||||
@extend .color-text;
|
||||
@extend .bg-transparent;
|
||||
@extend .px-3;
|
||||
@extend .py-1\.5;
|
||||
@extend .text-left;
|
||||
@extend .w-full;
|
||||
|
||||
&.sn-dropdown-item--no-icon {
|
||||
@extend .py-2;
|
||||
}
|
||||
|
||||
.sn-dropdown-popover & {
|
||||
@extend .bg-default;
|
||||
}
|
||||
|
||||
&[data-current-nav] {
|
||||
color: var(--sn-stylekit-contrast-foreground-color);
|
||||
@extend .bg-contrast;
|
||||
@extend .hover\:color-text;
|
||||
}
|
||||
|
||||
.sn-dropdown-popover &[data-current-selected] {
|
||||
background-color: var(--sn-stylekit-info-backdrop-color);
|
||||
@extend .color-info;
|
||||
}
|
||||
}
|
||||
|
||||
.sn-tag {
|
||||
@extend .h-6;
|
||||
@extend .bg-contrast;
|
||||
@extend .border-0;
|
||||
@extend .rounded;
|
||||
@extend .text-xs;
|
||||
@extend .color-text;
|
||||
@extend .py-1;
|
||||
@extend .py-2;
|
||||
@extend .pr-2;
|
||||
@extend .flex;
|
||||
@extend .items-center;
|
||||
@extend .mt-2;
|
||||
@extend .cursor-pointer;
|
||||
@extend .hover\:bg-secondary-contrast;
|
||||
@extend .focus\:bg-secondary-contrast;
|
||||
}
|
||||
|
||||
.sn-titlebar {
|
||||
@extend .w-full;
|
||||
@extend .bg-default;
|
||||
@extend .h-14;
|
||||
|
||||
@extend .border-bottom-solid;
|
||||
@extend .border-b-1;
|
||||
@extend .border-main;
|
||||
|
||||
@extend .py-3;
|
||||
@extend .px-3;
|
||||
|
||||
@extend .flex;
|
||||
@extend .flex-row;
|
||||
}
|
||||
|
||||
.sn-title {
|
||||
@extend .font-bold;
|
||||
}
|
||||
|
||||
.placeholder-dark-red::placeholder {
|
||||
@extend .color-danger;
|
||||
}
|
||||
|
||||
.placeholder-medium::placeholder {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.z-index-1 {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.-z-index-1 {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.sn-component .btn-w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sn-component .cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-up-animation {
|
||||
animation: slide-up 0.2s ease;
|
||||
}
|
||||
|
||||
.cursor-auto {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.pseudo-radio-btn {
|
||||
@extend .w-4;
|
||||
@extend .h-4;
|
||||
@extend .border-2;
|
||||
@extend .border-solid;
|
||||
@extend .rounded-full;
|
||||
@extend .relative;
|
||||
border-color: var(--dropdown-menu-radio-button-inactive-color);
|
||||
|
||||
&--checked {
|
||||
@extend .border-info;
|
||||
}
|
||||
}
|
||||
|
||||
.pseudo-radio-btn--checked::after {
|
||||
content: '';
|
||||
@extend .bg-info;
|
||||
@extend .absolute;
|
||||
@extend .top-1\/2;
|
||||
@extend .left-1\/2;
|
||||
@extend .-translate-1\/2;
|
||||
@extend .w-2;
|
||||
@extend .h-2;
|
||||
@extend .rounded-full;
|
||||
}
|
||||
|
||||
.list-style-none {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.rounded-0\.5 {
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.sn-component {
|
||||
.xs\:items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.xs\:px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.xs\:px-8 {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.xs\:mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.xs\:min-w-auto {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.xs\:flex-col-reverse {
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
|
||||
.xs\:rounded-0 {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sn-icon-button {
|
||||
&:focus {
|
||||
border-color: transparent;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
&.toggled {
|
||||
border-color: transparent;
|
||||
@extend .bg-info;
|
||||
@extend .color-info-contrast;
|
||||
background-color: var(--sn-stylekit-info-color) !important;
|
||||
color: var(--sn-stylekit-info-contrast-color) !important;
|
||||
border-color: transparent !important;
|
||||
|
||||
&:focus {
|
||||
background-color: var(--sn-stylekit-info-color) !important;
|
||||
@@ -338,8 +50,8 @@
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sn-stylekit-contrast-background-color) !important;
|
||||
@extend .color-info;
|
||||
@extend .border-info;
|
||||
color: var(--sn-stylekit-info-color) !important;
|
||||
border-color: var(--sn-stylekit-info-color) !important;
|
||||
}
|
||||
|
||||
&:focus:hover {
|
||||
@@ -357,108 +69,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $screen-md-min) {
|
||||
.sn-component {
|
||||
.md\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md\:mr-0 {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dimmed {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.last\:hidden:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shadow-bottom {
|
||||
box-shadow: currentcolor 0px -1px 0px 0px inset, currentcolor 0px 1px 0px 0px;
|
||||
}
|
||||
|
||||
.focus\:shadow-inner:focus {
|
||||
box-shadow: var(--sn-stylekit-info-color) 1px 1px 0px 0px inset, var(--sn-stylekit-info-color) -1px -1px 0px 0px inset;
|
||||
}
|
||||
|
||||
.focus\:shadow-bottom:focus {
|
||||
box-shadow: currentcolor 0px -1px 0px 0px inset, currentcolor 0px 1px 0px 0px;
|
||||
}
|
||||
|
||||
.overflow-x-hidden {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.text-editor {
|
||||
font-size: var(--sn-stylekit-font-size-editor);
|
||||
}
|
||||
|
||||
.resize-none {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.break-word {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
|
||||
transform, filter, backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
.animate-fade-from-top {
|
||||
animation: fade-from-top 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fade-from-top {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.z-index-1001 {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.vertical-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.shadow-overlay-light {
|
||||
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.sn-component .focus\:brightness-default:focus {
|
||||
filter: brightness(100%);
|
||||
}
|
||||
|
||||
.sn-component .hover\:brightness-default:hover {
|
||||
filter: brightness(100%);
|
||||
}
|
||||
|
||||
.appearance-none {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
@@ -491,6 +113,108 @@
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.sn-component .flex-row-reverse {
|
||||
flex-flow: row-reverse;
|
||||
@mixin DimmedBackground($color, $opacity) {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $color;
|
||||
opacity: $opacity;
|
||||
}
|
||||
|
||||
.bg-warning-faded::after {
|
||||
@include DimmedBackground(var(--sn-stylekit-warning-color), 0.08);
|
||||
}
|
||||
|
||||
.bg-info-faded::after {
|
||||
@include DimmedBackground(var(--sn-stylekit-info-color), 0.08);
|
||||
}
|
||||
|
||||
svg.sk-circular-progress {
|
||||
$pi: 3.14159265358979;
|
||||
|
||||
$circle-size: 18px;
|
||||
$stroke-width: $circle-size * math.div(0.1, 100) * 100 + 1;
|
||||
$radius: math.div($circle-size - $stroke-width, 2);
|
||||
$circumference: ($radius * $pi * 2);
|
||||
|
||||
height: $circle-size;
|
||||
width: $circle-size;
|
||||
|
||||
circle.background {
|
||||
cx: math.div($circle-size, 2);
|
||||
cy: math.div($circle-size, 2);
|
||||
r: $radius;
|
||||
fill: none;
|
||||
stroke: var(--sn-stylekit-contrast-border-color);
|
||||
stroke-width: $stroke-width;
|
||||
}
|
||||
|
||||
circle.progress {
|
||||
cx: math.div($circle-size, 2);
|
||||
cy: math.div($circle-size, 2);
|
||||
r: $radius;
|
||||
fill: none;
|
||||
stroke: var(--sn-stylekit-info-color);
|
||||
stroke-linecap: round;
|
||||
stroke-width: $stroke-width;
|
||||
transition: all 0.5s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 50% 50%;
|
||||
|
||||
@mixin set-progress($progress) {
|
||||
$dash: math.div($progress * $circumference, 100);
|
||||
stroke-dasharray: $dash $circumference - $dash;
|
||||
}
|
||||
|
||||
&.p-0 {
|
||||
@include set-progress(0);
|
||||
}
|
||||
|
||||
&.p-10 {
|
||||
@include set-progress(10);
|
||||
}
|
||||
|
||||
&.p-20 {
|
||||
@include set-progress(20);
|
||||
}
|
||||
|
||||
&.p-30 {
|
||||
@include set-progress(30);
|
||||
}
|
||||
|
||||
&.p-40 {
|
||||
@include set-progress(40);
|
||||
}
|
||||
|
||||
&.p-50 {
|
||||
@include set-progress(50);
|
||||
}
|
||||
|
||||
&.p-60 {
|
||||
@include set-progress(60);
|
||||
}
|
||||
|
||||
&.p-70 {
|
||||
@include set-progress(70);
|
||||
}
|
||||
|
||||
&.p-80 {
|
||||
@include set-progress(80);
|
||||
}
|
||||
|
||||
&.p-90 {
|
||||
@include set-progress(90);
|
||||
}
|
||||
|
||||
&.p-100 {
|
||||
@include set-progress(100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.animation-fill-forwards {
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@@ -98,11 +98,3 @@ button:focus {
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sk-spinner {
|
||||
&.normal {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,197 +1,6 @@
|
||||
//== Media queries breakpoints
|
||||
//
|
||||
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
|
||||
|
||||
// Extra small screen / phone
|
||||
//** Deprecated `$screen-xs` as of v3.0.1
|
||||
$screen-xs: 480px !default;
|
||||
//** Deprecated `$screen-xs-min` as of v3.2.0
|
||||
$screen-xs-min: $screen-xs !default;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `$screen-sm` as of v3.0.1
|
||||
$screen-sm: 768px !default;
|
||||
$screen-sm-min: $screen-sm !default;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `$screen-md` as of v3.0.1
|
||||
$screen-md: 992px !default;
|
||||
$screen-md-min: $screen-md !default;
|
||||
//** Deprecated `$screen-desktop` as of v3.0.1
|
||||
$screen-desktop: $screen-md-min !default;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `$screen-lg` as of v3.0.1
|
||||
$screen-lg: 1200px !default;
|
||||
$screen-lg-min: $screen-lg !default;
|
||||
//** Deprecated `$screen-lg-desktop` as of v3.0.1
|
||||
$screen-lg-desktop: $screen-lg-min !default;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
$screen-xs-max: ($screen-sm-min - 1) !default;
|
||||
$screen-sm-max: ($screen-md-min - 1) !default;
|
||||
$screen-md-max: ($screen-lg-min - 1) !default;
|
||||
|
||||
@mixin MQ-Xsmall() {
|
||||
@media (max-width: $screen-xs-max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin MQ-Small() {
|
||||
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin MQ-Medium() {
|
||||
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin MQ-Large() {
|
||||
@media (min-width: $screen-lg-min) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.normal {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.medium-text {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.faded {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.self-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.justify-self-start {
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
.animate-slide-in-top {
|
||||
animation: slide-in-top 0.1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slide-in-top {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-40%);
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.border-0 {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: var(--sn-stylekit-general-border-radius);
|
||||
}
|
||||
.rounded-md {
|
||||
border-radius: 0.3046875rem;
|
||||
}
|
||||
|
||||
.bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.col-start-1 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.col-start-2 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.col-end-3 {
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.hover\:color-info:hover {
|
||||
color: var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
.hover\:brightness-130:hover {
|
||||
filter: brightness(130%);
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.font-editor {
|
||||
font-family: var(--sn-stylekit-editor-font-family);
|
||||
}
|
||||
.font-semibold {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
.font-bold {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.grid-template-cols-1fr {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.row-start-1 {
|
||||
grid-row-start: 1;
|
||||
}
|
||||
|
||||
.selectable {
|
||||
user-select: text !important;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 1px 4px 0px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: var(--sn-stylekit-font-size-h5);
|
||||
}
|
||||
|
||||
.wrap {
|
||||
word-wrap: break-word;
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
@import '../../../styles/src/Styles/main.scss';
|
||||
@import '../../../styles/src/Styles/_colors.scss';
|
||||
@import '../../../styles/src/Styles/_panels.scss';
|
||||
@import '../../../styles/src/Styles/utils/_animation.scss';
|
||||
@import 'theme';
|
||||
@import 'main';
|
||||
@import 'ui';
|
||||
@@ -15,14 +17,8 @@
|
||||
@import 'focused';
|
||||
@import 'sn';
|
||||
@import 'columns';
|
||||
@import 'animation';
|
||||
|
||||
.sn-component {
|
||||
@import './utils/padding';
|
||||
@import './utils/margin';
|
||||
@import './utils/width';
|
||||
@import './utils/height';
|
||||
@import './utils/color';
|
||||
@import './utils/border';
|
||||
@import './utils/position';
|
||||
@import './utils/leading';
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -1,52 +0,0 @@
|
||||
.border-danger {
|
||||
border-color: var(--sn-stylekit-danger-color);
|
||||
}
|
||||
|
||||
.border-neutral-contrast-bg {
|
||||
border-color: var(--sn-stylekit-neutral-contrast-color);
|
||||
}
|
||||
|
||||
.border-secondary {
|
||||
border-color: var(--sn-stylekit-secondary-border-color);
|
||||
}
|
||||
|
||||
.border-contrast {
|
||||
border-color: var(--sn-stylekit-contrast-border-color);
|
||||
}
|
||||
|
||||
.active\:border-info:active {
|
||||
border-color: var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
.border-t-0 {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.border-t-1px {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.border-b-0 {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.border-l-1px {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.border-l-2px {
|
||||
border-left-width: 2px;
|
||||
}
|
||||
|
||||
.border-r-1px {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.border-y-1px {
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
@mixin DimmedBackground($color, $opacity) {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $color;
|
||||
opacity: $opacity;
|
||||
}
|
||||
|
||||
.bg-passive-super-light {
|
||||
background-color: var(--sn-stylekit-passive-color-super-light);
|
||||
}
|
||||
|
||||
.bg-inverted-default {
|
||||
background-color: var(--sn-stylekit-contrast-foreground-color);
|
||||
}
|
||||
|
||||
.hover\:bg-passive-4:hover {
|
||||
background: var(--sn-stylekit-passive-color-4);
|
||||
}
|
||||
|
||||
.focus\:bg-info:focus {
|
||||
@extend .bg-info;
|
||||
}
|
||||
|
||||
.bg-info-backdrop {
|
||||
background-color: var(--sn-stylekit-info-backdrop-color);
|
||||
}
|
||||
|
||||
.focus\:bg-info-backdrop:focus {
|
||||
background-color: var(--sn-stylekit-info-backdrop-color);
|
||||
}
|
||||
|
||||
.active\:bg-info:active {
|
||||
background-color: var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
.focus\:bg-default:focus {
|
||||
background-color: var(--sn-stylekit-background-color);
|
||||
}
|
||||
|
||||
.hover\:bg-default:hover {
|
||||
background-color: var(--sn-stylekit-background-color);
|
||||
}
|
||||
|
||||
.hover\:bg-passive-5:hover {
|
||||
background-color: var(--sn-stylekit-passive-color-5);
|
||||
}
|
||||
|
||||
.bg-warning-faded::after {
|
||||
@include DimmedBackground(var(--sn-stylekit-warning-color), 0.08);
|
||||
}
|
||||
|
||||
.bg-info-faded::after {
|
||||
@include DimmedBackground(var(--sn-stylekit-info-color), 0.08);
|
||||
}
|
||||
|
||||
.color-inverted-default {
|
||||
color: var(--sn-stylekit-background-color);
|
||||
}
|
||||
|
||||
.focus\:color-info-contrast:focus {
|
||||
@extend .color-info-contrast;
|
||||
}
|
||||
|
||||
.hover\:color-foreground:hover {
|
||||
color: var(--sn-stylekit-foreground-color) !important;
|
||||
}
|
||||
|
||||
.color-neutral-contrast {
|
||||
color: var(--sn-stylekit-neutral-contrast-color);
|
||||
}
|
||||
|
||||
.color-warning {
|
||||
color: var(--sn-stylekit-warning-color);
|
||||
}
|
||||
|
||||
.active\:color-neutral-contrast:active {
|
||||
color: var(--sn-stylekit-neutral-contrast-color);
|
||||
}
|
||||
|
||||
.color-danger-contrast {
|
||||
color: var(--sn-stylekit-danger-contrast-color);
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
.h-3 {
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.h-3\.5 {
|
||||
height: 0.875rem;
|
||||
}
|
||||
|
||||
.h-26 {
|
||||
width: 6.5rem;
|
||||
}
|
||||
|
||||
.h-30 {
|
||||
width: 7.5rem;
|
||||
}
|
||||
|
||||
.h-33 {
|
||||
height: 8.25rem;
|
||||
}
|
||||
|
||||
.h-90vh {
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.min-h-1px {
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.min-h-1 {
|
||||
min-height: 0.25rem;
|
||||
}
|
||||
|
||||
.min-h-2 {
|
||||
min-height: 0.5rem;
|
||||
}
|
||||
|
||||
.min-h-3 {
|
||||
min-height: 0.75rem;
|
||||
}
|
||||
|
||||
.min-h-4 {
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
.min-h-6 {
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
.min-h-8 {
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.min-h-16 {
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
.max-h-5 {
|
||||
max-height: 1.25rem;
|
||||
}
|
||||
|
||||
.max-h-110 {
|
||||
max-height: 27.5rem;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
.leading-140\% {
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.leading-1\.3 {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.leading-1\.4 {
|
||||
line-height: 1.4;
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
.mt-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mt-0\.5 {
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.mt-1\.5 {
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
.mt-2\.5 {
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-3\.5 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.ml-0-important {
|
||||
margin-left: 0rem !important;
|
||||
}
|
||||
|
||||
.ml-0\.5 {
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
|
||||
.ml-1\.5 {
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.ml-3 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.mr-0 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mr-2\.5 {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
|
||||
.mr-3 {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.mr-12 {
|
||||
margin-right: 3rem;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.my-0\.5 {
|
||||
margin-top: 0.125rem;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.my-1\.5 {
|
||||
margin-top: 0.375rem;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -1,162 +0,0 @@
|
||||
.p-0 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.p-1\.5 {
|
||||
padding: 0.375rem;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.p-4\.5 {
|
||||
padding: 1.125rem;
|
||||
}
|
||||
|
||||
.p-6 {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.p-8 {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.p-12 {
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.pt-0\.5 {
|
||||
padding-top: 0.125rem;
|
||||
}
|
||||
|
||||
.pt-1 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.pt-1\.5 {
|
||||
padding-top: 0.375rem;
|
||||
}
|
||||
|
||||
.pt-2 {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.pt-3 {
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.pt-6 {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.pb-0 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.pb-0\.5 {
|
||||
padding-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.pb-1 {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pb-2\.5 {
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.pl-0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.pr-4 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.px-0 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.px-1\.5 {
|
||||
padding-left: 0.375rem;
|
||||
padding-right: 0.375rem;
|
||||
}
|
||||
|
||||
.px-2\.5 {
|
||||
padding-left: 0.625rem;
|
||||
padding-right: 0.625rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.px-4\.5,
|
||||
.sk-panel .px-4\.5 {
|
||||
padding-left: 1.125rem;
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
.px-5 {
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
|
||||
.px-9 {
|
||||
padding-left: 2.25rem;
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
.px-12 {
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.py-0\.5 {
|
||||
padding-top: 0.125rem;
|
||||
padding-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.py-1\.35 {
|
||||
padding-top: 0.3375rem;
|
||||
padding-bottom: 0.3375rem;
|
||||
}
|
||||
|
||||
.py-2\.5 {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.py-3\.5 {
|
||||
padding-top: 0.875rem;
|
||||
padding-bottom: 0.875rem;
|
||||
}
|
||||
|
||||
.py-9 {
|
||||
padding-top: 2.25rem;
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.py-12 {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
@@ -1,139 +0,0 @@
|
||||
.sticky {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.top-4 {
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.top-30\% {
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
.top-35\% {
|
||||
top: 35%;
|
||||
}
|
||||
|
||||
.top-40\% {
|
||||
top: 40%;
|
||||
}
|
||||
|
||||
.top-1\/2 {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.top-full {
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.-top-0\.25 {
|
||||
top: -0.0625rem;
|
||||
}
|
||||
|
||||
.bottom-20\% {
|
||||
bottom: 20%;
|
||||
}
|
||||
|
||||
.bottom-25\% {
|
||||
bottom: 25%;
|
||||
}
|
||||
|
||||
.bottom-30\% {
|
||||
bottom: 30%;
|
||||
}
|
||||
|
||||
.bottom-35\% {
|
||||
bottom: 35%;
|
||||
}
|
||||
|
||||
.bottom-40\% {
|
||||
bottom: 40%;
|
||||
}
|
||||
|
||||
.bottom-100\% {
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.-bottom-5 {
|
||||
bottom: -1.25rem;
|
||||
}
|
||||
|
||||
.left-2 {
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
.left-1\/2 {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.-left-10 {
|
||||
left: -2.5rem;
|
||||
}
|
||||
|
||||
.-left-28 {
|
||||
left: -7rem;
|
||||
}
|
||||
|
||||
.-left-16 {
|
||||
left: -4rem;
|
||||
}
|
||||
|
||||
.-left-40 {
|
||||
left: -10rem;
|
||||
}
|
||||
|
||||
.-left-56 {
|
||||
left: -14rem;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.right-2 {
|
||||
right: 0.5rem;
|
||||
}
|
||||
|
||||
.right-4 {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.-right-2 {
|
||||
right: -0.5rem;
|
||||
}
|
||||
|
||||
.-right-10 {
|
||||
right: -2.5rem;
|
||||
}
|
||||
|
||||
.-right-20 {
|
||||
right: -5rem;
|
||||
}
|
||||
|
||||
.-right-24 {
|
||||
right: -6rem;
|
||||
}
|
||||
|
||||
.-right-44 {
|
||||
right: -11rem;
|
||||
}
|
||||
|
||||
.-right-56 {
|
||||
right: -14rem;
|
||||
}
|
||||
|
||||
.translate-x-1\/2 {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
.-translate-1\/2 {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.-translate-x-1\/2 {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.-translate-y-1\/2 {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
.w-3 {
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
.w-3\.5 {
|
||||
width: 0.875rem;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.w-18 {
|
||||
width: 4.5rem;
|
||||
}
|
||||
|
||||
.w-26 {
|
||||
width: 6.5rem;
|
||||
}
|
||||
|
||||
.w-30 {
|
||||
width: 7.5rem;
|
||||
}
|
||||
|
||||
.w-92 {
|
||||
width: 23rem;
|
||||
}
|
||||
|
||||
.w-200 {
|
||||
width: 50rem;
|
||||
}
|
||||
|
||||
.min-w-1 {
|
||||
min-width: 0.25rem;
|
||||
}
|
||||
|
||||
.min-w-2 {
|
||||
min-width: 0.5rem;
|
||||
}
|
||||
|
||||
.min-w-3 {
|
||||
min-width: 0.75rem;
|
||||
}
|
||||
|
||||
.min-w-5 {
|
||||
min-width: 1.25rem;
|
||||
}
|
||||
|
||||
.min-w-6 {
|
||||
min-width: 1.5rem;
|
||||
}
|
||||
|
||||
.min-w-7 {
|
||||
min-width: 1.75rem;
|
||||
}
|
||||
|
||||
.min-w-15 {
|
||||
min-width: 3.75rem;
|
||||
}
|
||||
|
||||
.min-w-24 {
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
.min-w-30 {
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
|
||||
.min-w-60 {
|
||||
min-width: 15rem;
|
||||
}
|
||||
|
||||
.min-w-68 {
|
||||
min-width: 17rem;
|
||||
}
|
||||
|
||||
.min-w-70 {
|
||||
min-width: 17.5rem;
|
||||
}
|
||||
|
||||
.min-w-76 {
|
||||
min-width: 19rem;
|
||||
}
|
||||
|
||||
.min-w-90 {
|
||||
min-width: 22.5rem;
|
||||
}
|
||||
|
||||
.max-w-68 {
|
||||
max-width: 17rem;
|
||||
}
|
||||
|
||||
.max-w-72 {
|
||||
max-width: 18rem;
|
||||
}
|
||||
|
||||
.max-w-76 {
|
||||
max-width: 19rem;
|
||||
}
|
||||
|
||||
.max-w-89 {
|
||||
max-width: 22.25rem;
|
||||
}
|
||||
|
||||
.max-w-200 {
|
||||
max-width: 50rem;
|
||||
}
|
||||
|
||||
.max-w-35ch {
|
||||
max-width: 35ch;
|
||||
}
|
||||
|
||||
.max-w-40\% {
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.max-w-1\/2 {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.max-w-3\/4 {
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.max-w-80\% {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.max-w-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user