refactor: repo (#1070)
This commit is contained in:
Mo
16
packages/web/src/stylesheets/_columns.scss
Normal file
16
packages/web/src/stylesheets/_columns.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
.app-column-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 2fr;
|
||||
}
|
||||
|
||||
.app-column-first {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.app-column-second {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.app-column {
|
||||
overflow: hidden;
|
||||
}
|
||||
158
packages/web/src/stylesheets/_editor.scss
Normal file
158
packages/web/src/stylesheets/_editor.scss
Normal file
@@ -0,0 +1,158 @@
|
||||
$heading-height: 75px;
|
||||
|
||||
#editor-column {
|
||||
.locked {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.section.editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: hidden;
|
||||
background-color: var(--editor-background-color);
|
||||
color: var(--editor-foreground-color);
|
||||
}
|
||||
|
||||
#error-decrypting-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#error-decrypting-panel {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.content-title-bar {
|
||||
width: 100%;
|
||||
|
||||
padding-top: 14px;
|
||||
padding-left: 14px;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 14px;
|
||||
|
||||
border-bottom: 1px solid var(--editor-title-bar-border-bottom-color);
|
||||
z-index: $z-index-editor-title-bar;
|
||||
|
||||
height: auto;
|
||||
|
||||
.title {
|
||||
font-size: var(--sn-stylekit-font-size-h1);
|
||||
font-weight: bold;
|
||||
padding-top: 0px;
|
||||
padding-right: 20px; /* make room for save status */
|
||||
|
||||
> .input {
|
||||
float: left;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
color: var(--editor-title-input-color);
|
||||
|
||||
&:disabled {
|
||||
color: var(--editor-title-input-color);
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#save-status-container {
|
||||
position: relative;
|
||||
min-width: 16ch;
|
||||
max-width: 16ch;
|
||||
overflow: visible;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#save-status {
|
||||
font-size: calc(var(--sn-stylekit-base-font-size) - 2px);
|
||||
text-transform: none;
|
||||
font-weight: normal;
|
||||
text-align: right;
|
||||
|
||||
.desc,
|
||||
.message:not(.warning):not(.danger) {
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-tags {
|
||||
clear: left;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-content,
|
||||
#editor-content {
|
||||
flex: 1;
|
||||
z-index: $z-index-editor-content;
|
||||
overflow-y: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
tab-size: 2;
|
||||
background-color: var(--editor-pane-background-color);
|
||||
|
||||
position: relative;
|
||||
|
||||
#editor-iframe {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-content .editable,
|
||||
#editor-content .editable,
|
||||
#file-text-preview {
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
background-color: var(--editor-pane-editor-background-color);
|
||||
color: var(--editor-pane-editor-foreground-color);
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 15px;
|
||||
font-size: var(--sn-stylekit-font-size-editor);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#editor-pane-component-stack {
|
||||
width: 100%;
|
||||
// To keep glued to bottom when editor is in loading state and not visible.
|
||||
margin-top: auto;
|
||||
|
||||
// When two component stack items are expired and eat up full screen, this is required to scroll them.
|
||||
// overflow: auto;
|
||||
// When expired components, without this, requires scroll
|
||||
overflow: visible;
|
||||
|
||||
#component-stack-menu-bar {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.component-stack-item {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
background-color: var(--editor-pane-component-stack-item-background-color);
|
||||
// we moved the border top from the .component-stack-item to the .iframe, as on parent,
|
||||
// it increases its height and caused unneccessary scrollbars on windows.
|
||||
border-top: 1px solid var(--sn-stylekit-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#note-text-editor:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
85
packages/web/src/stylesheets/_focused.scss
Normal file
85
packages/web/src/stylesheets/_focused.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
.focus-mode {
|
||||
.mac-desktop #editor-column {
|
||||
// To offset colored circles in Mac
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.mac-desktop #editor-column:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
#editor-title-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#editor-menu-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#editor-pane-component-stack {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#footer-bar {
|
||||
opacity: 0.08;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
#footer-bar:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#navigation,
|
||||
#items-column {
|
||||
will-change: opacity;
|
||||
animation: fade-out 1.25s forwards;
|
||||
transition: width 1.25s;
|
||||
transition-delay: 0s;
|
||||
width: 0px !important;
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
#navigation:hover {
|
||||
flex: initial;
|
||||
width: 0px !important;
|
||||
}
|
||||
|
||||
#items-column:hover {
|
||||
flex: initial;
|
||||
width: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.disable-focus-mode {
|
||||
#navigation,
|
||||
#items-column {
|
||||
transition: width 1.25s;
|
||||
will-change: opacity;
|
||||
animation: fade-in 1.25s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
51
packages/web/src/stylesheets/_footer.scss
Normal file
51
packages/web/src/stylesheets/_footer.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
#footer-bar {
|
||||
position: relative;
|
||||
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,
|
||||
#sync-resolution-menu {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.sk-panel {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#lock-item {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
#footer-lock-icon {
|
||||
margin-left: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
167
packages/web/src/stylesheets/_items-column.scss
Normal file
167
packages/web/src/stylesheets/_items-column.scss
Normal file
@@ -0,0 +1,167 @@
|
||||
@import './scrollbar';
|
||||
|
||||
#items-column {
|
||||
background-color: var(--items-column-background-color);
|
||||
border-left: 1px solid var(--items-column-border-left-color);
|
||||
border-right: 1px solid var(--items-column-border-right-color);
|
||||
font-size: var(--sn-stylekit-font-size-h2);
|
||||
user-select: none;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
.empty-items-list {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#items-title-bar-container {
|
||||
padding: 0.8125rem;
|
||||
}
|
||||
|
||||
#items-title-bar {
|
||||
font-weight: normal;
|
||||
overflow: visible;
|
||||
|
||||
.section-title-bar-header .title {
|
||||
width: calc(90% - 45px);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: var(--sn-stylekit-font-size-p);
|
||||
}
|
||||
}
|
||||
|
||||
#items-menu-bar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#notes-options-menu {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
clear: left;
|
||||
max-height: 80px;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.filter-bar {
|
||||
background-color: var(--items-column-search-background-color);
|
||||
border-radius: var(--sn-stylekit-general-border-radius);
|
||||
height: 100%;
|
||||
color: #909090;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.search-options {
|
||||
margin-top: 10px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5rem;
|
||||
|
||||
font-size: var(--sn-stylekit-font-size-p);
|
||||
white-space: nowrap;
|
||||
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#search-clear-button {
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
cursor: default;
|
||||
background-color: var(--sn-stylekit-neutral-color);
|
||||
color: var(--sn-stylekit-neutral-contrast-color);
|
||||
font-size: 10px;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
transform: translateY(-50%);
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
transition: background-color 0.15s linear;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sn-stylekit-info-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infinite-scroll {
|
||||
@include minimal_scrollbar();
|
||||
height: inherit;
|
||||
background-color: var(--items-column-items-background-color);
|
||||
}
|
||||
|
||||
.content-list-item {
|
||||
&.selected, &:hover {
|
||||
background-color: var(--item-cell-selected-background-color);
|
||||
}
|
||||
|
||||
progress {
|
||||
background-color: var(--note-preview-progress-background-color);
|
||||
color: var(--note-preview-progress-color);
|
||||
border: none;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: var(--note-preview-progress-background-color);
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: var(--note-preview-progress-color);
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(--note-preview-progress-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--item-cell-selected-background-color);
|
||||
border-left: 2px solid var(--item-cell-selected-border-left-color);
|
||||
|
||||
progress {
|
||||
background-color: var(--note-preview-selected-progress-background-color);
|
||||
color: var(--note-preview-selected-progress-color);
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: var(--note-preview-selected-progress-background-color);
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: var(--note-preview-progress-color);
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(--note-preview-progress-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
233
packages/web/src/stylesheets/_main.scss
Normal file
233
packages/web/src/stylesheets/_main.scss
Normal file
@@ -0,0 +1,233 @@
|
||||
$z-index-editor-content: 10;
|
||||
|
||||
$z-index-editor-title-bar: 100;
|
||||
$z-index-dropdown-menu: 1002;
|
||||
|
||||
$z-index-resizer-overlay: 1000;
|
||||
$z-index-panel-resizer: 1001;
|
||||
|
||||
$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;
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: var(--sn-stylekit-base-font-size);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
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;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
line-height: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--sn-stylekit-font-size-h1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--sn-stylekit-font-size-h2);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&.no-decoration {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
||||
&.no-decoration {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--text-selection-background-color) !important;
|
||||
color: var(--text-selection-color);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--text-selection-background-color) !important;
|
||||
color: var(--text-selection-color);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--sn-stylekit-paragraph-text-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main-ui-view {
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
background-color: var(--editor-header-bar-background-color);
|
||||
}
|
||||
|
||||
$footer-height: 2rem;
|
||||
|
||||
#resizer-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
z-index: $z-index-resizer-overlay;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.app {
|
||||
height: calc(100% - #{$footer-height});
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
|
||||
panel-resizer,
|
||||
.panel-resizer {
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: $z-index-panel-resizer;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
cursor: col-resize;
|
||||
background-color: var(--panel-resizer-background-color);
|
||||
opacity: 0;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
left: 0;
|
||||
right: none;
|
||||
}
|
||||
|
||||
&.always-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.animate-opacity {
|
||||
animation-duration: 1.6s;
|
||||
animation-name: fade;
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
&.hoverable {
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-bottom: 0px;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - #{$footer-height});
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
> .content {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title-bar {
|
||||
.add-button {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.section-title-bar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// This was causing problems with tags + button cutting off on right when the panel is a certain size
|
||||
// overflow: hidden;
|
||||
|
||||
> .title {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.z-index-preferences {
|
||||
z-index: $z-index-preferences;
|
||||
}
|
||||
|
||||
.z-index-purchase-flow {
|
||||
z-index: $z-index-purchase-flow;
|
||||
}
|
||||
31
packages/web/src/stylesheets/_menus.scss
Normal file
31
packages/web/src/stylesheets/_menus.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
.sk-app-bar {
|
||||
.sk-app-bar-item {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
float: left;
|
||||
min-width: 160px;
|
||||
z-index: $z-index-dropdown-menu;
|
||||
|
||||
margin-top: 5px;
|
||||
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;
|
||||
}
|
||||
175
packages/web/src/stylesheets/_modals.scss
Normal file
175
packages/web/src/stylesheets/_modals.scss
Normal file
@@ -0,0 +1,175 @@
|
||||
#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;
|
||||
|
||||
.prompt,
|
||||
.subprompt {
|
||||
text-align: center;
|
||||
}
|
||||
.sk-panel .sk-panel-header {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
#account-switcher {
|
||||
min-width: 400px;
|
||||
max-width: 580px;
|
||||
input,
|
||||
input:disabled {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background-color: transparent !important;
|
||||
color: inherit;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
input.clickable:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
#item-preview-modal {
|
||||
> .sk-modal-content {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.header .subtitle {
|
||||
font-size: 0.89375rem;
|
||||
}
|
||||
|
||||
.sk-modal {
|
||||
position: absolute;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: $z-index-modal;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.sn-component {
|
||||
height: 100%;
|
||||
.sk-panel {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.auto-height {
|
||||
> .sk-modal-content {
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
> .sk-modal-content {
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
&.medium {
|
||||
> .sk-modal-content {
|
||||
width: 700px;
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
> .sk-modal-content {
|
||||
width: 700px;
|
||||
height: 344px;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-modal-background {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--sn-stylekit-contrast-background-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> .sk-modal-content {
|
||||
overflow-y: auto;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
padding-bottom: 0;
|
||||
min-width: 300px;
|
||||
|
||||
-webkit-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);
|
||||
-moz-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);
|
||||
box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
}
|
||||
|
||||
// Optionally use if .component-view container is not flex-based
|
||||
.component-view-container {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.component-view {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// required so that .loading-overlay absolute works properly wrt to modal components. However, seems to break #note-tags-component-container.
|
||||
// I couldn't find any solution to this other than to customize .component-view position back to inherit for note-tags-component-container.
|
||||
position: relative;
|
||||
|
||||
// not sure why we need this. Removed because it creates unncessary scroll bars. Tested on folders extension, creates horizontal scrollbar at bottom on windows
|
||||
// overflow: auto;
|
||||
// Update: we needed that because when we display the expired Extended view, it allows it to scroll vertically.
|
||||
overflow-y: auto;
|
||||
|
||||
.sn-component {
|
||||
min-width: 100%;
|
||||
z-index: $z-index-component-view;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
background-color: var(--sn-stylekit-editor-background-color);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
// We're disabling flex: 1; because on Firefox, it causes weird sizing issues with component stack items.
|
||||
// Not sure yet if totally required.
|
||||
// Update: The extensions manager doesn't display correctly without it
|
||||
// flex-grow: 1 should fix that.
|
||||
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
198
packages/web/src/stylesheets/_navigation.scss
Normal file
198
packages/web/src/stylesheets/_navigation.scss
Normal file
@@ -0,0 +1,198 @@
|
||||
@import './scrollbar';
|
||||
|
||||
#navigation .scrollable {
|
||||
@include minimal_scrollbar();
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
$content-horizontal-padding: 16px;
|
||||
|
||||
#navigation {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
&,
|
||||
#navigation-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--navigation-column-background-color);
|
||||
}
|
||||
|
||||
.section-title-bar {
|
||||
color: var(--navigation-section-title-color);
|
||||
padding-top: 0.8125rem;
|
||||
padding-bottom: 8px;
|
||||
padding-left: $content-horizontal-padding;
|
||||
padding-right: $content-horizontal-padding;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.no-tags-placeholder {
|
||||
padding: 0px $content-horizontal-padding;
|
||||
font-size: 12px;
|
||||
opacity: 0.4;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.root-drop {
|
||||
width: '100%';
|
||||
padding: 12px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.sn-icon {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.tag,
|
||||
.root-drop {
|
||||
font-size: 14px;
|
||||
padding: 4px 14px;
|
||||
cursor: pointer;
|
||||
transition: height 0.1s ease-in-out;
|
||||
position: relative;
|
||||
|
||||
> .tag-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.sn-icon {
|
||||
display: block;
|
||||
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;
|
||||
height: 100%;
|
||||
|
||||
&.draggable {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
&.propose-folders {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
@extend .focus\:outline-none;
|
||||
@extend .focus\:shadow-none;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
|
||||
width: 80%;
|
||||
background-color: transparent;
|
||||
font-weight: 600;
|
||||
color: var(--navigation-item-text-color);
|
||||
-webkit-text-fill-color: var(--navigation-item-text-color);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-overflow: ellipsis;
|
||||
width: 75%;
|
||||
flex-grow: 1;
|
||||
|
||||
// Required for Safari to avoid highlighting when dragging panel resizers
|
||||
// Make sure to undo if it's selected (for editing)
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
&.editing {
|
||||
pointer-events: auto;
|
||||
user-select: text;
|
||||
-moz-user-select: text;
|
||||
-khtml-user-select: text;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
padding-right: 4px;
|
||||
padding-top: 1px;
|
||||
font-weight: bold;
|
||||
color: var(--navigation-item-count-color);
|
||||
min-width: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
padding-left: 3px;
|
||||
|
||||
&.with-folders {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
> .menu {
|
||||
font-size: 11px;
|
||||
|
||||
> .item {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
opacity: 0.5;
|
||||
font-weight: bold;
|
||||
clear: both;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
> .tag-info {
|
||||
.title {
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.selected),
|
||||
&.selected,
|
||||
&.is-drag-over {
|
||||
background-color: var(--navigation-item-selected-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
52
packages/web/src/stylesheets/_preferences.scss
Normal file
52
packages/web/src/stylesheets/_preferences.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
.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 {
|
||||
iframe {
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
46
packages/web/src/stylesheets/_reach-sub.scss
Normal file
46
packages/web/src/stylesheets/_reach-sub.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
[data-reach-dialog-overlay] {
|
||||
z-index: $z-index-modal;
|
||||
background: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
[data-reach-dialog-overlay]::before {
|
||||
background-color: var(--sn-stylekit-contrast-background-color);
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.challenge-modal-overlay::before {
|
||||
background-color: var(--sn-stylekit-passive-color-5);
|
||||
}
|
||||
|
||||
[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,
|
||||
[data-reach-dialog-content] .sn-component,
|
||||
[data-reach-dialog-content] .sk-panel {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
[data-reach-alert-dialog-content] {
|
||||
width: auto;
|
||||
}
|
||||
9
packages/web/src/stylesheets/_scrollbar.scss
Normal file
9
packages/web/src/stylesheets/_scrollbar.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@mixin minimal_scrollbar() {
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
|
||||
&:hover {
|
||||
overflow-y: auto;
|
||||
overflow-y: overlay;
|
||||
}
|
||||
}
|
||||
53
packages/web/src/stylesheets/_sessions-modal.scss
Normal file
53
packages/web/src/stylesheets/_sessions-modal.scss
Normal file
@@ -0,0 +1,53 @@
|
||||
.sessions-modal {
|
||||
min-width: 40vw;
|
||||
width: auto;
|
||||
|
||||
h2,
|
||||
ul,
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--sn-stylekit-font-size-h2);
|
||||
}
|
||||
ul {
|
||||
grid-column: 1 / 3;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-gap: 16px;
|
||||
}
|
||||
li {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr max-content;
|
||||
border-bottom: 1px solid var(--sn-stylekit-border-color);
|
||||
padding-bottom: 16px;
|
||||
grid-column-gap: 12px;
|
||||
column-gap: 12px;
|
||||
}
|
||||
li:last-of-type {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
li > * {
|
||||
grid-column: 1;
|
||||
}
|
||||
li button {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / span 3;
|
||||
align-self: center;
|
||||
}
|
||||
.sn-component .sk-panel-content {
|
||||
padding-bottom: 1.3rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
grid-gap: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.sessions-modal-refreshing {
|
||||
grid-column: 2;
|
||||
font-weight: normal;
|
||||
}
|
||||
496
packages/web/src/stylesheets/_sn.scss
Normal file
496
packages/web/src/stylesheets/_sn.scss
Normal file
@@ -0,0 +1,496 @@
|
||||
/* 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: $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;
|
||||
}
|
||||
}
|
||||
|
||||
.sn-dropdown-popover {
|
||||
z-index: 3001;
|
||||
max-height: 40%;
|
||||
overflow: auto;
|
||||
|
||||
&[data-reach-listbox-popover] {
|
||||
background: var(--sn-stylekit-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
transform: scaleY(0);
|
||||
height: 0;
|
||||
|
||||
&[data-is-expanded='true'] {
|
||||
height: auto;
|
||||
transform-origin: top;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/** 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;
|
||||
}
|
||||
|
||||
&.toggled {
|
||||
border-color: transparent;
|
||||
@extend .bg-info;
|
||||
@extend .color-info-contrast;
|
||||
|
||||
&:focus {
|
||||
background-color: var(--sn-stylekit-info-color) !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sn-stylekit-contrast-background-color) !important;
|
||||
@extend .color-info;
|
||||
@extend .border-info;
|
||||
}
|
||||
|
||||
&:focus:hover {
|
||||
background-color: var(--sn-stylekit-contrast-background-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sn-button {
|
||||
&.normal-focus-brightness {
|
||||
&:hover,
|
||||
&:focus {
|
||||
filter: brightness(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.sn-component .progress-bar {
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--sn-stylekit-contrast-background-color);
|
||||
border: 0;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: var(--sn-stylekit-contrast-background-color);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: var(--sn-stylekit-info-color);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(--sn-stylekit-info-color);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.line-clamp-1 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.sn-component .flex-row-reverse {
|
||||
flex-flow: row-reverse;
|
||||
}
|
||||
108
packages/web/src/stylesheets/_stylekit-sub.scss
Normal file
108
packages/web/src/stylesheets/_stylekit-sub.scss
Normal file
@@ -0,0 +1,108 @@
|
||||
:root {
|
||||
--sn-stylekit-font-size-editor: 0.9375rem;
|
||||
}
|
||||
|
||||
.sn-component {
|
||||
.sk-app-bar {
|
||||
&.dynamic-height {
|
||||
min-height: 1.625rem !important;
|
||||
height: inherit !important;
|
||||
padding-top: 0.40625rem;
|
||||
padding-bottom: 0.40625rem;
|
||||
}
|
||||
|
||||
&.no-top-edge {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-horizontal-group.tight > *:not(:first-child) {
|
||||
margin-left: 0.24375rem;
|
||||
}
|
||||
|
||||
.sk-horizontal-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sk-panel-section {
|
||||
&:last-child {
|
||||
padding-bottom: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-panel {
|
||||
.sk-panel-header {
|
||||
.close-button {
|
||||
border-radius: var(--sn-stylekit-general-border-radius);
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-button-group.stretch {
|
||||
.sk-button:not(.featured) {
|
||||
// Default buttons that are not featured and stretched should have larger vertical padding
|
||||
padding: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-menu-panel-header {
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-menu-panel .sk-menu-panel-row .sk-sublabel.opaque {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
button.sk-button {
|
||||
border: none;
|
||||
}
|
||||
|
||||
a,
|
||||
.sk-a {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--link-element-color);
|
||||
}
|
||||
|
||||
button.sk-a {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
box-shadow: 0 0 0 1px var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
.sk-button:focus,
|
||||
button:focus {
|
||||
box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
.sk-button:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sk-spinner {
|
||||
&.normal {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
44
packages/web/src/stylesheets/_theme.scss
Normal file
44
packages/web/src/stylesheets/_theme.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
:root {
|
||||
--modal-background-color: var(--sn-stylekit-background-color);
|
||||
|
||||
--editor-header-bar-background-color: var(--sn-stylekit-background-color);
|
||||
--editor-background-color: var(--sn-stylekit-editor-background-color);
|
||||
--editor-foreground-color: var(--sn-stylekit-editor-foreground-color);
|
||||
--editor-title-bar-border-bottom-color: var(--sn-stylekit-border-color);
|
||||
--editor-title-input-color: var(--sn-stylekit-editor-foreground-color);
|
||||
--editor-pane-background-color: var(--sn-stylekit-background-color);
|
||||
--editor-pane-editor-background-color: var(--sn-stylekit-editor-background-color);
|
||||
--editor-pane-editor-foreground-color: var(--sn-stylekit-editor-foreground-color);
|
||||
--editor-pane-component-stack-item-background-color: var(--sn-stylekit-background-color);
|
||||
|
||||
--text-selection-color: var(--sn-stylekit-info-contrast-color);
|
||||
--text-selection-background-color: var(--sn-stylekit-info-color);
|
||||
|
||||
--note-preview-progress-color: var(--sn-stylekit-info-color);
|
||||
--note-preview-progress-background-color: var(--sn-stylekit-passive-color-4-opacity-variant);
|
||||
|
||||
--note-preview-selected-progress-color: var(--sn-stylekit-secondary-background-color);
|
||||
--note-preview-selected-progress-background-color:var(--sn-stylekit-passive-color-4-opacity-variant);
|
||||
|
||||
--items-column-background-color: var(--sn-stylekit-background-color);
|
||||
--items-column-items-background-color: var(--sn-stylekit-background-color);
|
||||
--items-column-border-left-color: var(--sn-stylekit-border-color);
|
||||
--items-column-border-right-color: var(--sn-stylekit-border-color);
|
||||
--items-column-search-background-color: var(--sn-stylekit-contrast-background-color);
|
||||
--item-cell-selected-background-color: var(--sn-stylekit-contrast-background-color);
|
||||
--item-cell-selected-border-left-color: var(--sn-stylekit-info-color);
|
||||
|
||||
--navigation-column-background-color: var(--sn-stylekit-secondary-background-color);
|
||||
--navigation-section-title-color: var(--sn-stylekit-secondary-foreground-color);
|
||||
--navigation-item-text-color: var(--sn-stylekit-secondary-foreground-color);
|
||||
--navigation-item-count-color: var(--sn-stylekit-neutral-color);
|
||||
--navigation-item-selected-background-color: var(--sn-stylekit-secondary-contrast-background-color);
|
||||
|
||||
--preferences-navigation-icon-color: var(--sn-stylekit-neutral-color);
|
||||
--preferences-navigation-selected-background-color: var(--sn-stylekit-info-backdrop-color);
|
||||
|
||||
--dropdown-menu-radio-button-inactive-color: var(--sn-stylekit-passive-color-1);
|
||||
|
||||
--panel-resizer-background-color: var(--sn-stylekit-secondary-contrast-background-color);
|
||||
--link-element-color: var(--sn-stylekit-info-color);
|
||||
}
|
||||
199
packages/web/src/stylesheets/_ui.scss
Normal file
199
packages/web/src/stylesheets/_ui.scss
Normal file
@@ -0,0 +1,199 @@
|
||||
//== 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;
|
||||
word-break: break-all;
|
||||
}
|
||||
28
packages/web/src/stylesheets/index.css.scss
Normal file
28
packages/web/src/stylesheets/index.css.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
@import '@standardnotes/stylekit/dist/stylekit';
|
||||
@import 'theme';
|
||||
@import 'main';
|
||||
@import 'ui';
|
||||
@import 'footer';
|
||||
@import 'navigation';
|
||||
@import 'items-column';
|
||||
@import 'editor';
|
||||
@import 'menus';
|
||||
@import 'modals';
|
||||
@import 'stylekit-sub';
|
||||
@import 'reach-sub';
|
||||
@import 'sessions-modal';
|
||||
@import 'preferences';
|
||||
@import 'focused';
|
||||
@import 'sn';
|
||||
@import 'columns';
|
||||
|
||||
.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';
|
||||
}
|
||||
52
packages/web/src/stylesheets/utils/_border.scss
Normal file
52
packages/web/src/stylesheets/utils/_border.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
.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;
|
||||
}
|
||||
86
packages/web/src/stylesheets/utils/_color.scss
Normal file
86
packages/web/src/stylesheets/utils/_color.scss
Normal file
@@ -0,0 +1,86 @@
|
||||
@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);
|
||||
}
|
||||
63
packages/web/src/stylesheets/utils/_height.scss
Normal file
63
packages/web/src/stylesheets/utils/_height.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
.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;
|
||||
}
|
||||
11
packages/web/src/stylesheets/utils/_leading.scss
Normal file
11
packages/web/src/stylesheets/utils/_leading.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
.leading-140\% {
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.leading-1\.3 {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.leading-1\.4 {
|
||||
line-height: 1.4;
|
||||
}
|
||||
100
packages/web/src/stylesheets/utils/_margin.scss
Normal file
100
packages/web/src/stylesheets/utils/_margin.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
.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;
|
||||
}
|
||||
162
packages/web/src/stylesheets/utils/_padding.scss
Normal file
162
packages/web/src/stylesheets/utils/_padding.scss
Normal file
@@ -0,0 +1,162 @@
|
||||
.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;
|
||||
}
|
||||
139
packages/web/src/stylesheets/utils/_position.scss
Normal file
139
packages/web/src/stylesheets/utils/_position.scss
Normal file
@@ -0,0 +1,139 @@
|
||||
.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%);
|
||||
}
|
||||
131
packages/web/src/stylesheets/utils/_width.scss
Normal file
131
packages/web/src/stylesheets/utils/_width.scss
Normal file
@@ -0,0 +1,131 @@
|
||||
.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