feat: styles package (#1074)
This commit is contained in:
Mo
3
packages/styles/.eslintignore
Normal file
3
packages/styles/.eslintignore
Normal file
@@ -0,0 +1,3 @@
|
||||
node_modules
|
||||
dist
|
||||
webpack.config.js
|
||||
4
packages/styles/.eslintrc.json
Normal file
4
packages/styles/.eslintrc.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": ["../../node_modules/@standardnotes/config/src/.eslintrc"],
|
||||
"ignorePatterns": [".eslintrc.js", "webpack.config.js"]
|
||||
}
|
||||
1
packages/styles/.gitignore
vendored
Normal file
1
packages/styles/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
dist
|
||||
3
packages/styles/linter.tsconfig.json
Normal file
3
packages/styles/linter.tsconfig.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "../../node_modules/@standardnotes/config/src/linter.tsconfig.json"
|
||||
}
|
||||
24
packages/styles/package.json
Normal file
24
packages/styles/package.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "@standardnotes/styles",
|
||||
"version": "1.0.0",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack --mode='production' && yarn run tsc",
|
||||
"start": "webpack --watch --mode='development'",
|
||||
"lint": "prettier --check *.js"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"css-loader": "~6.6.0",
|
||||
"mini-css-extract-plugin": "^2.5.3",
|
||||
"node-sass": "^7.0.1",
|
||||
"sass-loader": "^12.6.0",
|
||||
"style-loader": "~3.3.1",
|
||||
"webpack": "^5.69.1",
|
||||
"webpack-cli": "^4.9.2"
|
||||
}
|
||||
}
|
||||
127
packages/styles/src/Alert/Alert.ts
Normal file
127
packages/styles/src/Alert/Alert.ts
Normal file
@@ -0,0 +1,127 @@
|
||||
type AlertButtonStyle = 'small' | 'outlined' | 'contrast' | 'neutral' | 'info' | 'warning' | 'danger' | 'success'
|
||||
|
||||
type AlertButton = {
|
||||
text: string
|
||||
style: AlertButtonStyle
|
||||
action: () => void
|
||||
primary?: boolean
|
||||
}
|
||||
|
||||
export class SKAlert {
|
||||
private title?: string
|
||||
private text: string
|
||||
private buttons: AlertButton[]
|
||||
private element!: HTMLDivElement
|
||||
private onElement!: HTMLElement
|
||||
|
||||
constructor({ title, text, buttons }: { title?: string; text: string; buttons?: AlertButton[] }) {
|
||||
this.title = title
|
||||
this.text = text
|
||||
this.buttons = buttons || []
|
||||
}
|
||||
|
||||
buttonsString() {
|
||||
const genButton = function (buttonDesc: AlertButton, index: number) {
|
||||
return `
|
||||
<button id='button-${index}' class='sn-button small ${buttonDesc.style}'>
|
||||
<div class='sk-label'>${buttonDesc.text}</div>
|
||||
</button>
|
||||
`
|
||||
}
|
||||
|
||||
const buttonString = this.buttons
|
||||
.map(function (buttonDesc, index) {
|
||||
return genButton(buttonDesc, index)
|
||||
})
|
||||
.join('')
|
||||
|
||||
const str = `
|
||||
<div class='sk-button-group'>
|
||||
${buttonString}
|
||||
</div>
|
||||
`
|
||||
return str
|
||||
}
|
||||
|
||||
templateString() {
|
||||
let buttonsTemplate: string
|
||||
let panelStyle: string
|
||||
if (this.buttons) {
|
||||
buttonsTemplate = `
|
||||
<div class="sk-panel-row" style='margin-top: 8px;'>
|
||||
${this.buttonsString()}
|
||||
</div>
|
||||
`
|
||||
panelStyle = ''
|
||||
} else {
|
||||
buttonsTemplate = ''
|
||||
panelStyle = 'style="padding-bottom: 8px"'
|
||||
}
|
||||
const titleTemplate = this.title ? `<div class='sk-h3 sk-panel-section-title'>${this.title}</div>` : ''
|
||||
const messageTemplate = this.text ? `<p class='sk-p'>${this.text}</p>` : ''
|
||||
|
||||
const template = `
|
||||
<div class="sk-modal">
|
||||
<div class="sk-modal-background"></div>
|
||||
<div class="sk-modal-content">
|
||||
<div class="sn-component">
|
||||
<div class="sk-panel" style='max-width: 500px;'>
|
||||
<div class="sk-panel-content" ${panelStyle}>
|
||||
<div class="sk-panel-section">
|
||||
${titleTemplate}
|
||||
|
||||
<div class="sk-panel-row">
|
||||
${messageTemplate}
|
||||
</div>
|
||||
|
||||
${buttonsTemplate}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
return template
|
||||
}
|
||||
|
||||
dismiss() {
|
||||
this.onElement.removeChild(this.element)
|
||||
}
|
||||
|
||||
primaryButton() {
|
||||
let primary = this.buttons.find((button) => button.primary === true)
|
||||
if (!primary) {
|
||||
primary = this.buttons[this.buttons.length - 1]
|
||||
}
|
||||
return primary
|
||||
}
|
||||
|
||||
present(onElement?: HTMLElement) {
|
||||
if (!onElement) {
|
||||
onElement = document.body
|
||||
}
|
||||
|
||||
this.onElement = onElement
|
||||
|
||||
this.element = document.createElement('div')
|
||||
this.element.className = 'sn-component'
|
||||
this.element.innerHTML = this.templateString().trim()
|
||||
|
||||
onElement.appendChild(this.element)
|
||||
|
||||
if (this.buttons && this.buttons.length) {
|
||||
this.buttons.forEach((buttonDesc, index) => {
|
||||
const buttonElem = this.element.querySelector(`#button-${index}`) as HTMLButtonElement
|
||||
buttonElem.onclick = () => {
|
||||
buttonDesc.action && buttonDesc.action()
|
||||
this.dismiss()
|
||||
}
|
||||
if (index === 0) {
|
||||
buttonElem.focus()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
90
packages/styles/src/Styles/_app-bar.scss
Normal file
90
packages/styles/src/Styles/_app-bar.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
.sk-app-bar {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 1.625rem;
|
||||
padding: 0 0.65rem;
|
||||
background-color: var(--sn-stylekit-contrast-background-color);
|
||||
color: var(--sn-stylekit-contrast-foreground-color);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid var(--sn-stylekit-contrast-border-color);
|
||||
user-select: none;
|
||||
|
||||
&.no-edges {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&.no-bottom-edge {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sk-app-bar-item {
|
||||
flex-grow: 1;
|
||||
&:not(:first-child) {
|
||||
margin-left: 0.8125rem;
|
||||
}
|
||||
|
||||
&.border {
|
||||
border-left: 1px solid var(--sn-stylekit-contrast-border-color);
|
||||
}
|
||||
|
||||
> .sk-app-bar-item-column {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 0.40625rem;
|
||||
}
|
||||
&.underline {
|
||||
border-bottom: 2px solid var(--sn-stylekit-info-color);
|
||||
}
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.no-pointer {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .sk-label,
|
||||
> .sk-sublabel,
|
||||
> .sk-app-bar-item-column > .sk-label,
|
||||
> .sk-app-bar-item-column > .sk-sublabel {
|
||||
&:not(.subtle) {
|
||||
color: var(--sn-stylekit-info-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .sk-label,
|
||||
> .sk-app-bar-item-column > .sk-label {
|
||||
font-weight: bold;
|
||||
font-size: var(--sn-stylekit-font-size-h5);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> .sk-sublabel,
|
||||
> .sk-app-bar-item-column > .sk-sublabel {
|
||||
font-size: var(--sn-stylekit-font-size-h5);
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.subtle {
|
||||
font-weight: normal;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
96
packages/styles/src/Styles/_menu-panel.scss
Normal file
96
packages/styles/src/Styles/_menu-panel.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
.sk-menu-panel {
|
||||
// box-shadow: 0px 4px 4px var(--sn-stylekit-shadow-color);
|
||||
background-color: var(--sn-stylekit-background-color);
|
||||
border: 1px solid var(--sn-stylekit-contrast-border-color);
|
||||
border-radius: var(--sn-stylekit-general-border-radius);
|
||||
overflow: scroll;
|
||||
user-select: none;
|
||||
|
||||
// For Windows to hide needless scrollbars
|
||||
overflow-y: auto !important;
|
||||
overflow-x: auto !important;
|
||||
|
||||
.sk-menu-panel-header {
|
||||
padding: 0.65rem 0.8125rem;
|
||||
border-bottom: 1px solid var(--sn-stylekit-contrast-border-color);
|
||||
background-color: var(--sn-stylekit-contrast-background-color);
|
||||
color: var(--sn-stylekit-contrast-foreground-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sk-menu-panel-header-title {
|
||||
font-weight: bold;
|
||||
font-size: var(--sn-stylekit-font-size-h4);
|
||||
}
|
||||
|
||||
.sk-menu-panel-header-subtitle {
|
||||
margin-top: 0.1625rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.sk-menu-panel-row {
|
||||
padding: 0.8125rem 0.8125rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--sn-stylekit-border-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sn-stylekit-contrast-background-color);
|
||||
color: var(--sn-stylekit-contrast-foreground-color);
|
||||
border-color: var(--sn-stylekit-contrast-border-color);
|
||||
}
|
||||
|
||||
.sk-menu-panel-column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-left: 1rem;
|
||||
padding-right: 0.121875rem;
|
||||
}
|
||||
|
||||
&.stretch {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sk-menu-panel-subrows {
|
||||
margin-top: 0.8125rem;
|
||||
}
|
||||
|
||||
/* Nested row */
|
||||
.sk-menu-panel-row,
|
||||
.sk-menu-panel-subrow {
|
||||
border: 1px solid var(--sn-stylekit-contrast-border-color);
|
||||
margin-top: -1px;
|
||||
&:hover {
|
||||
background-color: var(--sn-stylekit-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-button .sk-label {
|
||||
font-size: var(--sn-stylekit-font-size-h6);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.sk-label {
|
||||
font-size: var(--sn-stylekit-font-size-p);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sk-sublabel {
|
||||
font-size: var(--sn-stylekit-font-size-h5);
|
||||
margin-top: 0.1625rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
73
packages/styles/src/Styles/_modal.scss
Normal file
73
packages/styles/src/Styles/_modal.scss
Normal file
@@ -0,0 +1,73 @@
|
||||
.sk-modal {
|
||||
position: fixed;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
background-color: transparent;
|
||||
color: var(--sn-stylekit-contrast-foreground-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
349
packages/styles/src/Styles/_normalize.scss
Normal file
349
packages/styles/src/Styles/_normalize.scss
Normal file
@@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
219
packages/styles/src/Styles/_panels.scss
Normal file
219
packages/styles/src/Styles/_panels.scss
Normal file
@@ -0,0 +1,219 @@
|
||||
.sk-panel {
|
||||
$h-content-padding: 1.625rem;
|
||||
box-shadow: 0px 2px 5px var(--sn-stylekit-shadow-color);
|
||||
background-color: var(--sn-stylekit-background-color);
|
||||
border: 1px solid var(--sn-stylekit-border-color);
|
||||
border-radius: var(--sn-stylekit-general-border-radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto; // to hide border-radius
|
||||
flex-grow: 1;
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&.static {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
.sk-panel-content {
|
||||
// padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-panel-header {
|
||||
flex-shrink: 0; /* Don't allow to condense in height */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.89375rem $h-content-padding;
|
||||
border-bottom: 1px solid var(--sn-stylekit-contrast-border-color);
|
||||
background-color: var(--sn-stylekit-contrast-background-color);
|
||||
color: var(--sn-stylekit-contrast-foreground-color);
|
||||
align-items: center;
|
||||
|
||||
.sk-panel-header-title {
|
||||
font-size: var(--sn-stylekit-font-size-h1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-footer,
|
||||
.sk-panel-footer {
|
||||
padding: 0.8125rem $h-content-padding;
|
||||
border-top: 1px solid var(--sn-stylekit-border-color);
|
||||
box-sizing: border-box;
|
||||
|
||||
&.extra-padding {
|
||||
padding: 1.625rem $h-content-padding;
|
||||
}
|
||||
|
||||
.left {
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-panel-content {
|
||||
padding: 1.3rem $h-content-padding;
|
||||
padding-bottom: 0;
|
||||
flex-grow: 1;
|
||||
overflow: scroll;
|
||||
height: 100%;
|
||||
|
||||
// For Windows to hide needless scrollbars
|
||||
overflow-y: auto !important;
|
||||
overflow-x: auto !important;
|
||||
|
||||
.sk-p,
|
||||
.sk-li {
|
||||
color: var(--sn-stylekit-paragraph-text-color);
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-panel-section {
|
||||
padding-bottom: 1.3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.sk-panel-hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sk-p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.21875rem;
|
||||
border-bottom: 1px solid var(--sn-stylekit-border-color);
|
||||
|
||||
&.no-border {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&.no-bottom-pad {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sk-panel-section-title {
|
||||
margin-bottom: 0.40625rem;
|
||||
font-weight: bold;
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
}
|
||||
|
||||
.sk-panel-section-outer-title {
|
||||
border-bottom: 1px solid var(--sn-stylekit-border-color);
|
||||
padding-bottom: 0.73125rem;
|
||||
margin-top: 1.70625rem;
|
||||
margin-bottom: 15px;
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
}
|
||||
|
||||
.sk-panel-section-subtitle {
|
||||
@extend .sk-label;
|
||||
font-size: var(--sn-stylekit-font-size-h5);
|
||||
margin-bottom: 2px;
|
||||
|
||||
&.subtle {
|
||||
font-weight: normal;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.text-content {
|
||||
.sk-p {
|
||||
margin-bottom: 0.8175rem;
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
margin-top: 0.24375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-panel-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 0.325rem;
|
||||
|
||||
&.centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.justify-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&.justify-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&.align-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.sk-panel-column {
|
||||
&.stretch {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.default-padding,
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 0.325rem;
|
||||
}
|
||||
|
||||
&.condensed {
|
||||
padding-top: 0.1625rem;
|
||||
padding-bottom: 0.1625rem;
|
||||
}
|
||||
|
||||
.sk-p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-rule {
|
||||
background-color: var(--sn-stylekit-border-color);
|
||||
height: 1.21875rem;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.sk-panel-form {
|
||||
width: 100%;
|
||||
&.half {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
margin-top: 0.121875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right-aligned {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
3
packages/styles/src/Styles/_reach-overrides.scss
Normal file
3
packages/styles/src/Styles/_reach-overrides.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
[data-reach-custom-checkbox-container] {
|
||||
margin: 0;
|
||||
}
|
||||
32
packages/styles/src/Styles/_scrollbar.scss
Normal file
32
packages/styles/src/Styles/_scrollbar.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
.windows-web,
|
||||
.windows-desktop,
|
||||
.linux-web,
|
||||
.linux-desktop {
|
||||
$thumb-width: 4px;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: $thumb-width solid rgba(0, 0, 0, 0);
|
||||
background-clip: padding-box;
|
||||
-webkit-border-radius: 10px;
|
||||
background-color: var(--sn-stylekit-scrollbar-thumb-color);
|
||||
-webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
282
packages/styles/src/Styles/_sn.scss
Normal file
282
packages/styles/src/Styles/_sn.scss
Normal file
@@ -0,0 +1,282 @@
|
||||
.sn-button {
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.609375rem;
|
||||
min-height: 1.8125rem;
|
||||
@extend .border-0;
|
||||
@extend .rounded;
|
||||
@extend .border-solid;
|
||||
@extend .cursor-pointer;
|
||||
@extend .capitalize;
|
||||
@extend .font-bold;
|
||||
|
||||
@extend .hover\:brightness-130;
|
||||
@extend .focus\:brightness-130;
|
||||
@extend .focus\:outline-none;
|
||||
}
|
||||
|
||||
.sn-button.small {
|
||||
font-size: 0.7109375rem;
|
||||
padding: 0.40625rem 0.609375rem;
|
||||
}
|
||||
|
||||
.sn-button.outlined {
|
||||
@extend .bg-default;
|
||||
@extend .border-1;
|
||||
@extend .border-main;
|
||||
@extend .color-text;
|
||||
@extend .hover\:bg-highlight;
|
||||
@extend .focus\:bg-highlight;
|
||||
@extend .focus\:shadow-none;
|
||||
@extend .focus\:outline-none;
|
||||
}
|
||||
|
||||
.sn-button.contrast {
|
||||
@extend .hover\:brightness-130;
|
||||
background-color: var(--sn-stylekit-contrast-foreground-color);
|
||||
color: var(--sn-stylekit-contrast-background-color);
|
||||
}
|
||||
|
||||
.sn-button.neutral {
|
||||
@extend .hover\:brightness-130;
|
||||
@extend .focus\:brightness-130;
|
||||
background-color: var(--sn-stylekit-neutral-color);
|
||||
color: var(--sn-stylekit-neutral-contrast-color);
|
||||
}
|
||||
|
||||
.sn-button.info {
|
||||
@extend .bg-info;
|
||||
@extend .color-info-contrast;
|
||||
}
|
||||
|
||||
.sn-button.warning {
|
||||
background-color: var(--sn-stylekit-warning-color);
|
||||
color: var(--sn-stylekit-warning-contrast-color);
|
||||
}
|
||||
|
||||
.sn-button.danger {
|
||||
background-color: var(--sn-stylekit-danger-color);
|
||||
color: var(--sn-stylekit-danger-contrast-color);
|
||||
}
|
||||
|
||||
.sn-button.success {
|
||||
background-color: var(--sn-stylekit-success-color);
|
||||
color: var(--sn-stylekit-success-contrast-color);
|
||||
}
|
||||
|
||||
.sn-dropdown-menu {
|
||||
@extend .items-center;
|
||||
@extend .bg-default;
|
||||
@extend .border-0;
|
||||
@extend .border-main;
|
||||
@extend .rounded;
|
||||
@extend .border-solid;
|
||||
@extend .border-1;
|
||||
@extend .cursor-pointer;
|
||||
@extend .font-normal;
|
||||
@extend .m-h-32;
|
||||
@extend .hover\:bg-highlight;
|
||||
@extend .inline-flex;
|
||||
@extend .justify-center;
|
||||
@extend .leading-4;
|
||||
@extend .focus\:outline-none;
|
||||
@extend .focus\:shadow-none;
|
||||
@extend .px-2;
|
||||
@extend .py-1;
|
||||
@extend .color-text;
|
||||
@extend .text-sm;
|
||||
@extend .w-auto;
|
||||
}
|
||||
|
||||
.sn-dropdown-menu > .sn-icon:first-child {
|
||||
@extend .mr-2;
|
||||
}
|
||||
|
||||
.sn-dropdown-menu > .sn-icon:last-child {
|
||||
@extend .ml-2;
|
||||
}
|
||||
|
||||
.sn-dropdown-menu-list {
|
||||
@extend .absolute;
|
||||
@extend .bg-default;
|
||||
@extend .border-main;
|
||||
@extend .rounded;
|
||||
@extend .box-shadow;
|
||||
@extend .font-normal;
|
||||
@extend .min-w-265px;
|
||||
@extend .mt-2;
|
||||
@extend .focus\:outline-none;
|
||||
@extend .origin-top-right;
|
||||
@extend .py-2;
|
||||
@extend .slide-down-animation;
|
||||
@extend .color-text;
|
||||
@extend .w-56;
|
||||
}
|
||||
|
||||
.sn-dropdown-menu-list-item {
|
||||
@extend .items-center;
|
||||
@extend .cursor-pointer;
|
||||
@extend .flex;
|
||||
@extend .hover\:bg-highlight;
|
||||
@extend .focus\:outline-none;
|
||||
@extend .focus\:shadow-none;
|
||||
@extend .px-2;
|
||||
@extend .selected\:bg-color;
|
||||
@extend .selected\:fg-color;
|
||||
@extend .text-sm;
|
||||
@extend .m-h-32;
|
||||
}
|
||||
|
||||
.sn-dropdown-menu-list-item > .sn-icon {
|
||||
@extend .mr-2;
|
||||
}
|
||||
|
||||
.sn-select {
|
||||
@extend .items-center;
|
||||
@extend .bg-default;
|
||||
@extend .border-0;
|
||||
@extend .border-main;
|
||||
@extend .border-solid;
|
||||
@extend .border-1;
|
||||
@extend .border-box;
|
||||
@extend .rounded;
|
||||
@extend .cursor-pointer;
|
||||
@extend .font-normal;
|
||||
@extend .m-h-32;
|
||||
@extend .hover\:bg-highlight;
|
||||
@extend .inline-flex;
|
||||
@extend .justify-center;
|
||||
@extend .leading-4;
|
||||
@extend .focus\:outline-none;
|
||||
@extend .focus\:shadow-none;
|
||||
@extend .color-text;
|
||||
@extend .text-sm;
|
||||
@extend .w-auto;
|
||||
}
|
||||
|
||||
.sn-select-button {
|
||||
@extend .items-center;
|
||||
@extend .border-0;
|
||||
@extend .cursor-pointer;
|
||||
@extend .inline-flex;
|
||||
@extend .justify-center;
|
||||
@extend .py-1;
|
||||
@extend .focus\:outline-none;
|
||||
@extend .focus\:shadow-none;
|
||||
}
|
||||
|
||||
.sn-select-button > .sn-icon:last-child {
|
||||
@extend .ml-2;
|
||||
}
|
||||
|
||||
.sn-select-list {
|
||||
@extend .bg-default;
|
||||
@extend .border-main;
|
||||
@extend .rounded;
|
||||
@extend .focus\:outline-none;
|
||||
@extend .focus\:shadow-none;
|
||||
@extend .origin-top-right;
|
||||
@extend .color-text;
|
||||
@extend .text-sm;
|
||||
}
|
||||
|
||||
.sn-select-list-option {
|
||||
@extend .cursor-pointer;
|
||||
@extend .selected\:bg-color;
|
||||
@extend .selected\:fg-color;
|
||||
@extend .font-normal;
|
||||
@extend .text-sm;
|
||||
@extend .py-2;
|
||||
}
|
||||
|
||||
.sn-select-popover {
|
||||
@extend .border-main;
|
||||
@extend .rounded;
|
||||
@extend .box-shadow;
|
||||
@extend .mt-2;
|
||||
@extend .focus\:outline-none;
|
||||
@extend .focus\:shadow-none;
|
||||
@extend .border-0;
|
||||
@extend .slide-down-animation;
|
||||
}
|
||||
|
||||
/**
|
||||
* A button that is just an icon. Separated from .sn-button because there
|
||||
* is almost no style overlap.
|
||||
*/
|
||||
.sn-icon-button {
|
||||
@extend .color-neutral;
|
||||
@extend .min-w-8;
|
||||
@extend .h-8;
|
||||
@extend .flex;
|
||||
@extend .justify-center;
|
||||
@extend .items-center;
|
||||
@extend .border-solid;
|
||||
@extend .border-1;
|
||||
@extend .border-main;
|
||||
@extend .bg-clip-padding;
|
||||
@extend .m-0;
|
||||
@extend .p-0;
|
||||
@extend .bg-transparent;
|
||||
@extend .cursor-pointer;
|
||||
@extend .rounded-full;
|
||||
@extend .hover\:color-text;
|
||||
@extend .focus\:color-text;
|
||||
@extend .hover\:bg-contrast;
|
||||
@extend .focus\:bg-contrast;
|
||||
@extend .focus\:outline-none;
|
||||
@extend .focus\:ring-info;
|
||||
}
|
||||
|
||||
.sn-icon {
|
||||
@extend .h-5;
|
||||
@extend .w-5;
|
||||
@extend .fill-current;
|
||||
|
||||
&.sn-icon--small {
|
||||
@extend .h-3\.5;
|
||||
@extend .w-3\.5;
|
||||
}
|
||||
|
||||
&.sn-icon--mid {
|
||||
@extend .w-4;
|
||||
@extend .h-4;
|
||||
}
|
||||
}
|
||||
|
||||
.sn-icon-button.info {
|
||||
@extend .bg-info;
|
||||
@extend .color-info-contrast;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@extend .color-info-contrast;
|
||||
@extend .bg-info-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.sn-full-screen {
|
||||
@extend .h-100vh;
|
||||
@extend .w-100vw;
|
||||
|
||||
@extend .absolute;
|
||||
@extend .top-left-0;
|
||||
}
|
||||
|
||||
.toast-progress-bar {
|
||||
@extend .rounded;
|
||||
@extend .w-full;
|
||||
@extend .bg-default;
|
||||
@extend .overflow-hidden;
|
||||
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
&__value {
|
||||
@extend .rounded;
|
||||
@extend .h-2;
|
||||
@extend .bg-info;
|
||||
|
||||
border-top-left-radius: 0;
|
||||
transition: width 0.1s;
|
||||
}
|
||||
}
|
||||
58
packages/styles/src/Styles/_table.scss
Normal file
58
packages/styles/src/Styles/_table.scss
Normal file
@@ -0,0 +1,58 @@
|
||||
.sk-panel-table {
|
||||
$border-width: 1px;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: $border-width;
|
||||
padding-top: $border-width;
|
||||
|
||||
.sk-panel-table-item {
|
||||
flex: 45%;
|
||||
flex-flow: wrap;
|
||||
border: 1px solid var(--sn-stylekit-border-color);
|
||||
padding: 0.8125rem;
|
||||
margin-left: -$border-width;
|
||||
margin-top: -$border-width;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
margin-bottom: 0.8125rem;
|
||||
}
|
||||
|
||||
.sk-panel-table-item-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sk-panel-table-item-column {
|
||||
align-items: center;
|
||||
|
||||
&.stretch {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-left: 0.609375rem;
|
||||
}
|
||||
|
||||
&.quarter {
|
||||
flex-basis: 25%;
|
||||
}
|
||||
|
||||
&.three-quarters {
|
||||
flex-basis: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-panel-table-item-footer {
|
||||
margin-top: 1.015625rem;
|
||||
}
|
||||
|
||||
&.no-border {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
782
packages/styles/src/Styles/_ui.scss
Normal file
782
packages/styles/src/Styles/_ui.scss
Normal file
@@ -0,0 +1,782 @@
|
||||
.red {
|
||||
color: var(--sn-stylekit-danger-color);
|
||||
}
|
||||
|
||||
.tinted {
|
||||
color: var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
.selectable {
|
||||
user-select: text !important;
|
||||
-ms-user-select: text !important;
|
||||
-moz-user-select: text !important;
|
||||
-webkit-user-select: text !important;
|
||||
}
|
||||
|
||||
.sk-h1,
|
||||
.sk-h2,
|
||||
.sk-h3,
|
||||
.sk-h4,
|
||||
.sk-h5 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.sk-h1 {
|
||||
font-weight: 500;
|
||||
font-size: var(--sn-stylekit-font-size-h1);
|
||||
line-height: 1.54375rem;
|
||||
}
|
||||
|
||||
.sk-h2 {
|
||||
font-size: var(--sn-stylekit-font-size-h2);
|
||||
line-height: 1.4625rem;
|
||||
}
|
||||
|
||||
.sk-h3 {
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
line-height: 1.38125rem;
|
||||
}
|
||||
|
||||
.sk-h4 {
|
||||
font-size: var(--sn-stylekit-font-size-p);
|
||||
line-height: 1.1375rem;
|
||||
}
|
||||
|
||||
.sk-h5 {
|
||||
font-size: var(--sn-stylekit-font-size-h5);
|
||||
}
|
||||
|
||||
.sk-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sk-font-small {
|
||||
font-size: var(--sn-stylekit-font-size-h5);
|
||||
}
|
||||
|
||||
.sk-font-normal {
|
||||
font-size: var(--sn-stylekit-font-size-p);
|
||||
}
|
||||
|
||||
.sk-font-large {
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
}
|
||||
|
||||
a.sk-a {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&.disabled {
|
||||
color: var(--sn-stylekit-neutral-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&.boxed {
|
||||
border-radius: var(--sn-stylekit-general-border-radius);
|
||||
padding: 0.24375rem 0.325rem;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.neutral {
|
||||
background-color: var(--sn-stylekit-neutral-color);
|
||||
color: var(--sn-stylekit-neutral-contrast-color);
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: var(--sn-stylekit-info-color);
|
||||
color: var(--sn-stylekit-info-contrast-color);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: var(--sn-stylekit-warning-color);
|
||||
color: var(--sn-stylekit-warning-contrast-color);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: var(--sn-stylekit-danger-color);
|
||||
color: var(--sn-stylekit-danger-contrast-color);
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: var(--sn-stylekit-success-color);
|
||||
color: var(--sn-stylekit-success-contrast-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
* {
|
||||
&.sk-base {
|
||||
color: var(--sn-stylekit-foreground-color);
|
||||
}
|
||||
|
||||
&.contrast {
|
||||
color: var(--sn-stylekit-contrast-foreground-color);
|
||||
}
|
||||
|
||||
&.neutral {
|
||||
color: var(--sn-stylekit-neutral-color);
|
||||
}
|
||||
|
||||
&.info {
|
||||
color: var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
&.info-contrast {
|
||||
color: var(--sn-stylekit-info-contrast-color);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: var(--sn-stylekit-warning-color);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: var(--sn-stylekit-danger-color);
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: var(--sn-stylekit-success-color);
|
||||
}
|
||||
|
||||
&.info-i {
|
||||
color: var(--sn-stylekit-info-color) !important;
|
||||
}
|
||||
|
||||
&.warning-i {
|
||||
color: var(--sn-stylekit-warning-color) !important;
|
||||
}
|
||||
|
||||
&.danger-i {
|
||||
color: var(--sn-stylekit-danger-color) !important;
|
||||
}
|
||||
|
||||
&.success-i {
|
||||
color: var(--sn-stylekit-success-color) !important;
|
||||
}
|
||||
|
||||
&.clear {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.center-text {
|
||||
text-align: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
p.sk-p {
|
||||
margin: 0.40625rem 0;
|
||||
}
|
||||
|
||||
input.sk-input {
|
||||
box-sizing: border-box;
|
||||
padding: 0.56875rem 0.65rem;
|
||||
margin: 0.24375rem 0;
|
||||
border: none;
|
||||
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
resize: none;
|
||||
|
||||
&.clear {
|
||||
// usually sk-inputs should have ui-rect classes like info, warning, etc. If clear, no text color will be assigned unless we do it explicitely.
|
||||
color: var(--sn-stylekit-foreground-color);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.no-border {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-label {
|
||||
font-weight: bold;
|
||||
|
||||
&.no-bold {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
label.sk-label {
|
||||
margin: 0.56875rem 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
label.sk-label input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
width: auto;
|
||||
margin-right: 0.365625rem; /* Space after checkbox */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sk-horizontal-group {
|
||||
> * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 0.73125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-border-bottom {
|
||||
border-bottom: 1px solid var(--sn-stylekit-border-color);
|
||||
}
|
||||
|
||||
.sk-input-group {
|
||||
@extend .sk-horizontal-group;
|
||||
}
|
||||
|
||||
.sk-checkbox-group {
|
||||
padding-top: 0.40625rem;
|
||||
padding-bottom: 0.24375rem;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
/* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: var(--sn-stylekit-input-placeholder-color);
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
/* Internet Explorer 10-11 */
|
||||
color: var(--sn-stylekit-input-placeholder-color);
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
/* Microsoft Edge */
|
||||
color: var(--sn-stylekit-input-placeholder-color);
|
||||
}
|
||||
|
||||
.sk-button-group {
|
||||
&.stretch {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.sk-button {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.sk-button {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
// margin-bottom: 5px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
&.featured {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-segmented-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.sk-button {
|
||||
border-radius: 0;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: var(--sn-stylekit-general-border-radius);
|
||||
border-bottom-left-radius: var(--sn-stylekit-general-border-radius);
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: var(--sn-stylekit-general-border-radius);
|
||||
border-bottom-right-radius: var(--sn-stylekit-general-border-radius);
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-box-group {
|
||||
.sk-box {
|
||||
display: inline-block;
|
||||
// margin-bottom: 5px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-a.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sk-button {
|
||||
display: table;
|
||||
padding: 0.40625rem 0.56875rem;
|
||||
font-size: var(--sn-stylekit-font-size-h5);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
|
||||
&:after {
|
||||
// uncomment to disable hover borders on buttons
|
||||
// color: transparent !important; // no borders for buttons, looks nicer
|
||||
}
|
||||
|
||||
&.no-hover-border {
|
||||
&:after {
|
||||
color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.wide {
|
||||
padding: 0.24375rem 1.38125rem;
|
||||
}
|
||||
|
||||
> .sk-label {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.big {
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
padding: 0.56875rem 2.03125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-box {
|
||||
@extend .sk-button;
|
||||
padding: 2.03125rem 1.21875rem;
|
||||
}
|
||||
|
||||
@mixin ui-rect($color, $contrast-color, $hoverable, $border-color: '') {
|
||||
/*
|
||||
If $border-color is supplied, we use traditional borders for rect.
|
||||
Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders.
|
||||
If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders
|
||||
*/
|
||||
color: $contrast-color;
|
||||
position: relative;
|
||||
background-color: $color;
|
||||
overflow: hidden;
|
||||
border-radius: var(--sn-stylekit-general-border-radius);
|
||||
/*
|
||||
We use box-shadow instead of border so that the borders are rounded properly around the rect.
|
||||
We keep border-color as well incase the individual elements want a border in some cases.
|
||||
*/
|
||||
@if $border-color != '' {
|
||||
// box-shadow: inset 0 0 0 1px $border-color;
|
||||
border-color: $border-color;
|
||||
border: 1px solid $border-color;
|
||||
} @else {
|
||||
// box-shadow: inset 0 0 0 1px $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
// Make background separately layer so we can set its color using CSS vars
|
||||
// (as opposed to CSS vars in SASS functions, which is impossible).
|
||||
|
||||
* {
|
||||
// required to correctly position other layers on top of background layer.
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $color;
|
||||
opacity: 1;
|
||||
border-radius: var(--sn-stylekit-general-border-radius);
|
||||
}
|
||||
|
||||
// Border shadow. Needs to be separate element so that the before element on hover brightness filter doesn't affect border,
|
||||
// and gives contrasting effect
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: var(--sn-stylekit-general-border-radius);
|
||||
pointer-events: none; // otherwise this rect would block clickable elements
|
||||
// color here refers to shadow color
|
||||
@if $border-color != '' {
|
||||
color: $border-color;
|
||||
border-color: $border-color;
|
||||
} @else {
|
||||
box-shadow: inset 0 0 0 1px;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@if $hoverable == true {
|
||||
&:hover {
|
||||
&:before {
|
||||
filter: brightness(130%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.no-bg {
|
||||
background-color: transparent;
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.featured {
|
||||
border: none;
|
||||
padding: 0.609375rem 1.015625rem;
|
||||
font-size: var(--sn-stylekit-font-size-h3);
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sk-button.sk-base,
|
||||
.sk-box.sk-base,
|
||||
.sk-circle.sk-base {
|
||||
@include ui-rect(var(--sn-stylekit-background-color), var(--sn-stylekit-foreground-color), true);
|
||||
}
|
||||
|
||||
.sk-button.contrast,
|
||||
.sk-box.contrast,
|
||||
.sk-circle.contrast {
|
||||
@include ui-rect(var(--sn-stylekit-contrast-background-color), var(--sn-stylekit-contrast-foreground-color), true);
|
||||
}
|
||||
|
||||
.sk-button.sk-secondary,
|
||||
.sk-box.sk-secondary,
|
||||
.sk-circle.sk-secondary {
|
||||
@include ui-rect(var(--sn-stylekit-secondary-background-color), var(--sn-stylekit-secondary-foreground-color), true);
|
||||
}
|
||||
|
||||
.sk-button.sk-secondary-contrast,
|
||||
.sk-box.sk-secondary-contrast,
|
||||
.sk-circle.sk-secondary-contrast {
|
||||
@include ui-rect(
|
||||
var(--sn-stylekit-secondary-contrast-background-color),
|
||||
var(--sn-stylekit-secondary-contrast-foreground-color),
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
.sk-button.neutral,
|
||||
.sk-box.neutral,
|
||||
.sk-circle.neutral {
|
||||
@include ui-rect(var(--sn-stylekit-neutral-color), var(--sn-stylekit-neutral-contrast-color), true);
|
||||
}
|
||||
|
||||
.sk-button.info,
|
||||
.sk-box.info,
|
||||
.sk-circle.info {
|
||||
@include ui-rect(var(--sn-stylekit-info-color), var(--sn-stylekit-info-contrast-color), true);
|
||||
}
|
||||
|
||||
.sk-button.warning,
|
||||
.sk-box.warning,
|
||||
.sk-circle.warning {
|
||||
@include ui-rect(var(--sn-stylekit-warning-color), var(--sn-stylekit-warning-contrast-color), true);
|
||||
}
|
||||
|
||||
.sk-button.danger,
|
||||
.sk-box.danger,
|
||||
.sk-circle.danger {
|
||||
@include ui-rect(var(--sn-stylekit-danger-color), var(--sn-stylekit-danger-contrast-color), true);
|
||||
}
|
||||
|
||||
.sk-button.success,
|
||||
.sk-box.success,
|
||||
.sk-circle.success {
|
||||
@include ui-rect(var(--sn-stylekit-success-color), var(--sn-stylekit-success-contrast-color), true);
|
||||
}
|
||||
|
||||
.sk-notification.contrast,
|
||||
.sk-input.contrast {
|
||||
@include ui-rect(
|
||||
var(--sn-stylekit-contrast-background-color),
|
||||
var(--sn-stylekit-contrast-foreground-color),
|
||||
false,
|
||||
var(--sn-stylekit-contrast-border-color)
|
||||
);
|
||||
}
|
||||
|
||||
.sk-notification.sk-secondary,
|
||||
.sk-input.sk-secondary {
|
||||
@include ui-rect(
|
||||
var(--sn-stylekit-secondary-background-color),
|
||||
var(--sn-stylekit-secondary-foreground-color),
|
||||
false,
|
||||
var(--sn-stylekit-secondary-border-color)
|
||||
);
|
||||
}
|
||||
|
||||
.sk-notification.sk-secondary-contrast,
|
||||
.sk-input.sk-secondary-contrast {
|
||||
@include ui-rect(
|
||||
var(--sn-stylekit-secondary-contrast-background-color),
|
||||
var(--sn-stylekit-secondary-contrast-foreground-color),
|
||||
false,
|
||||
var(--sn-stylekit-secondary-contrast-border-color)
|
||||
);
|
||||
}
|
||||
|
||||
.sk-notification.sk-base,
|
||||
.sk-input.sk-base {
|
||||
@include ui-rect(
|
||||
var(--sn-stylekit-background-color),
|
||||
var(--sn-stylekit-foreground-color),
|
||||
false,
|
||||
var(--sn-stylekit-border-color)
|
||||
);
|
||||
}
|
||||
|
||||
.sk-notification.neutral,
|
||||
.sk-input.neutral {
|
||||
@include ui-rect(var(--sn-stylekit-neutral-color), var(--sn-stylekit-neutral-contrast-color), false);
|
||||
}
|
||||
|
||||
.sk-notification.info,
|
||||
.sk-input.info {
|
||||
@include ui-rect(var(--sn-stylekit-info-color), var(--sn-stylekit-info-contrast-color), false);
|
||||
}
|
||||
|
||||
.sk-notification.warning,
|
||||
.sk-input.warning {
|
||||
@include ui-rect(var(--sn-stylekit-warning-color), var(--sn-stylekit-warning-contrast-color), false);
|
||||
}
|
||||
|
||||
.sk-notification.danger,
|
||||
.sk-input.danger {
|
||||
@include ui-rect(var(--sn-stylekit-danger-color), var(--sn-stylekit-danger-contrast-color), false);
|
||||
}
|
||||
|
||||
.sk-notification.success,
|
||||
.sk-input.success {
|
||||
@include ui-rect(var(--sn-stylekit-success-color), var(--sn-stylekit-success-contrast-color), false);
|
||||
}
|
||||
|
||||
.sk-notification {
|
||||
padding: 0.89375rem 0.8125rem;
|
||||
margin: 1.1375rem 0;
|
||||
text-align: left;
|
||||
cursor: default;
|
||||
|
||||
&.one-line {
|
||||
padding: 0rem 0.325rem;
|
||||
}
|
||||
|
||||
&.stretch {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.dashed {
|
||||
border-style: dashed;
|
||||
border-width: 2px;
|
||||
|
||||
// represents border element
|
||||
&:after {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-notification-title {
|
||||
font-size: var(--sn-stylekit-font-size-h1);
|
||||
font-weight: bold;
|
||||
line-height: 1.54375rem;
|
||||
}
|
||||
|
||||
.sk-notification-text {
|
||||
line-height: 1.21875rem;
|
||||
font-size: var(--sn-stylekit-font-size-p);
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-circle {
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
|
||||
border-color: var(--sn-stylekit-contrast-foreground-color);
|
||||
background-color: var(--sn-stylekit-contrast-background-color);
|
||||
|
||||
padding: 0;
|
||||
border-radius: 50% !important;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:before {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.sk-spinner {
|
||||
border: 1px solid var(--sn-stylekit-neutral-color);
|
||||
border-radius: 50%;
|
||||
animation: rotate 0.8s infinite linear;
|
||||
border-right-color: transparent;
|
||||
|
||||
&.small {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&.info-contrast {
|
||||
border-color: var(--sn-stylekit-info-contrast-color);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
&.info {
|
||||
border-color: var(--sn-stylekit-info-color);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-color: var(--sn-stylekit-warning-color);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
border-color: var(--sn-stylekit-danger-color);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
&.success {
|
||||
border-color: var(--sn-stylekit-success-color);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-info {
|
||||
border-color: var(--sn-stylekit-info-color);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
svg.sk-circular-progress {
|
||||
$pi: 3.14159265358979;
|
||||
|
||||
$circle-size: 18px;
|
||||
$stroke-width: $circle-size * (0.1 / 100) * 100 + 1;
|
||||
$radius: ($circle-size - $stroke-width) / 2;
|
||||
$circumference: ($radius * $pi * 2);
|
||||
|
||||
height: $circle-size;
|
||||
width: $circle-size;
|
||||
|
||||
circle.background {
|
||||
cx: $circle-size / 2;
|
||||
cy: $circle-size / 2;
|
||||
r: $radius;
|
||||
fill: none;
|
||||
stroke: var(--sn-stylekit-contrast-border-color);
|
||||
stroke-width: $stroke-width;
|
||||
}
|
||||
|
||||
circle.progress {
|
||||
cx: $circle-size / 2;
|
||||
cy: $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: ($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);
|
||||
}
|
||||
}
|
||||
}
|
||||
13
packages/styles/src/Styles/_utils.scss
Normal file
13
packages/styles/src/Styles/_utils.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
@import 'utils/animation';
|
||||
@import 'utils/border';
|
||||
@import 'utils/color';
|
||||
@import 'utils/display';
|
||||
@import 'utils/hover_focus';
|
||||
@import 'utils/typography';
|
||||
@import 'utils/height';
|
||||
@import 'utils/margin';
|
||||
@import 'utils/padding';
|
||||
@import 'utils/width';
|
||||
@import 'utils/transition';
|
||||
@import 'utils/cursor';
|
||||
@import 'utils/position';
|
||||
124
packages/styles/src/Styles/main.scss
Normal file
124
packages/styles/src/Styles/main.scss
Normal file
@@ -0,0 +1,124 @@
|
||||
@import 'normalize';
|
||||
|
||||
:root {
|
||||
--sn-stylekit-base-font-size: 0.8125rem;
|
||||
|
||||
--sn-stylekit-font-size-p: 0.8125rem;
|
||||
--sn-stylekit-font-size-editor: 0.983125rem;
|
||||
|
||||
--sn-stylekit-font-size-h6: 0.65rem;
|
||||
--sn-stylekit-font-size-h5: 0.73125rem;
|
||||
--sn-stylekit-font-size-h4: 0.8125rem;
|
||||
--sn-stylekit-font-size-h3: 0.89375rem;
|
||||
--sn-stylekit-font-size-h2: 0.975rem;
|
||||
--sn-stylekit-font-size-h1: 1.05625rem;
|
||||
|
||||
--sn-stylekit-neutral-color: #989898;
|
||||
--sn-stylekit-neutral-contrast-color: #ffffff;
|
||||
|
||||
--sn-stylekit-info-color: #086DD6;
|
||||
--sn-stylekit-info-color-darkened: #065cb5;
|
||||
--sn-stylekit-info-contrast-color: #ffffff;
|
||||
--sn-stylekit-info-backdrop-color: #2b6fcf0f;
|
||||
|
||||
--sn-stylekit-success-color: #007662;
|
||||
--sn-stylekit-success-contrast-color: #ffffff;
|
||||
|
||||
--sn-stylekit-warning-color: #EBAD00;
|
||||
--sn-stylekit-warning-contrast-color: #ffffff;
|
||||
|
||||
--sn-stylekit-danger-color: #cc2128;
|
||||
--sn-stylekit-danger-contrast-color: #ffffff;
|
||||
|
||||
--sn-stylekit-shadow-color: #c8c8c8;
|
||||
--sn-stylekit-background-color: #ffffff;
|
||||
// For borders inside background-color
|
||||
--sn-stylekit-border-color: #dfe1e4;
|
||||
--sn-stylekit-foreground-color: #000000;
|
||||
// Colors for layers placed on top of non-prefixed background, border, and foreground
|
||||
--sn-stylekit-contrast-background-color: #f6f6f6;
|
||||
--sn-stylekit-contrast-foreground-color: #2e2e2e;
|
||||
--sn-stylekit-contrast-border-color: #e3e3e3; // For borders inside contrast-background-color
|
||||
|
||||
// Alternative set of background and contrast options
|
||||
--sn-stylekit-secondary-background-color: #f6f6f6;
|
||||
--sn-stylekit-secondary-foreground-color: #2e2e2e;
|
||||
--sn-stylekit-secondary-border-color: #e3e3e3;
|
||||
|
||||
--sn-stylekit-secondary-contrast-background-color: #e3e3e3;
|
||||
--sn-stylekit-secondary-contrast-foreground-color: #2e2e2e;
|
||||
--sn-stylekit-secondary-contrast-border-color: #a2a2a2;
|
||||
|
||||
--sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);
|
||||
--sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);
|
||||
|
||||
--sn-stylekit-paragraph-text-color: #454545;
|
||||
|
||||
--sn-stylekit-input-placeholder-color: #a8a8a8;
|
||||
--sn-stylekit-input-border-color: #e3e3e3;
|
||||
|
||||
--sn-stylekit-scrollbar-thumb-color: #dfdfdf;
|
||||
--sn-stylekit-scrollbar-track-border-color: #e7e7e7;
|
||||
|
||||
--sn-stylekit-menu-border: none;
|
||||
|
||||
--sn-stylekit-general-border-radius: 2px;
|
||||
|
||||
--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);
|
||||
|
||||
--sn-stylekit-theme-type: light;
|
||||
--sn-stylekit-theme-name: sn-light;
|
||||
|
||||
--sn-stylekit-passive-color-0: #515357;
|
||||
--sn-stylekit-passive-color-1: #72767e;
|
||||
--sn-stylekit-passive-color-2: #bbbec4;
|
||||
--sn-stylekit-passive-color-3: #dfe1e4;
|
||||
--sn-stylekit-passive-color-4: #eeeff1;
|
||||
--sn-stylekit-passive-color-4-opacity-variant: #bbbec43d;
|
||||
--sn-stylekit-passive-color-5: #f4f5f7;
|
||||
--sn-stylekit-passive-color-6: #e5e5e5;
|
||||
--sn-stylekit-passive-color-super-light: #f9f9f9;
|
||||
|
||||
--sn-stylekit-accessory-tint-color-1: #086dd6;
|
||||
--sn-stylekit-accessory-tint-color-2: #ea6595;
|
||||
--sn-stylekit-accessory-tint-color-3: #ebad00;
|
||||
--sn-stylekit-accessory-tint-color-4: #7049cf;
|
||||
--sn-stylekit-accessory-tint-color-5: #1aa772;
|
||||
--sn-stylekit-accessory-tint-color-6: #f28c52;
|
||||
}
|
||||
|
||||
.sn-component {
|
||||
@import 'panels';
|
||||
@import 'menu-panel';
|
||||
@import 'ui';
|
||||
@import 'app-bar';
|
||||
@import 'table';
|
||||
@import 'modal';
|
||||
@import 'utils';
|
||||
@import 'sn';
|
||||
@import 'reach-overrides';
|
||||
|
||||
font-family: var(--sn-stylekit-sans-serif-font);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&.no-select,
|
||||
.select-none {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
color: var(--sn-stylekit-foreground-color);
|
||||
}
|
||||
|
||||
/* Goes outside of .sn-component declaration, as following properties are global */
|
||||
input,
|
||||
textarea,
|
||||
[contenteditable] {
|
||||
caret-color: var(--sn-stylekit-editor-foreground-color);
|
||||
}
|
||||
|
||||
@import 'scrollbar';
|
||||
74
packages/styles/src/Styles/utils/_animation.scss
Normal file
74
packages/styles/src/Styles/utils/_animation.scss
Normal file
@@ -0,0 +1,74 @@
|
||||
@keyframes slide-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-down-animation {
|
||||
animation: slide-down 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in-right-animation {
|
||||
animation: slide-in-right 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes slide-out-left {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-out-left-animation {
|
||||
animation: slide-out-left 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-out-animation {
|
||||
animation: fade-out 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-animation {
|
||||
animation: fade-in 0.2s ease;
|
||||
}
|
||||
|
||||
.animation-fill-forwards {
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
79
packages/styles/src/Styles/utils/_border.scss
Normal file
79
packages/styles/src/Styles/utils/_border.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
.no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.border-0 {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.border-1 {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border-b-1 {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.border-main {
|
||||
border-color: var(--sn-stylekit-border-color);
|
||||
}
|
||||
|
||||
.border-background {
|
||||
border-color: var(--sn-stylekit-background-color);
|
||||
}
|
||||
|
||||
.border-transparent {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.border-info {
|
||||
border-color: var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
.border-neutral {
|
||||
border-color: var(--sn-stylekit-neutral-color);
|
||||
}
|
||||
|
||||
.border-rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.border-solid {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.border-bottom-solid {
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
.border-box {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ring-info {
|
||||
box-shadow: 0 0 0 2px var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
.inner-ring-info {
|
||||
box-shadow: inset 0 0 0 2px var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
.shadow-overlay {
|
||||
box-shadow: 0px 4px 24px 0px #00000029;
|
||||
}
|
||||
|
||||
.border-bottom-1-gray {
|
||||
border-bottom-color: var(--sn-stylekit-border-color);
|
||||
}
|
||||
70
packages/styles/src/Styles/utils/_color.scss
Normal file
70
packages/styles/src/Styles/utils/_color.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
.bg-default {
|
||||
background-color: var(--sn-stylekit-background-color);
|
||||
}
|
||||
|
||||
.bg-contrast {
|
||||
background-color: var(--sn-stylekit-contrast-background-color);
|
||||
}
|
||||
|
||||
.bg-border {
|
||||
background-color: var(--sn-stylekit-border-color);
|
||||
}
|
||||
|
||||
.bg-secondary-contrast {
|
||||
background-color: var(--sn-stylekit-secondary-contrast-background-color);
|
||||
}
|
||||
|
||||
.bg-clip-padding {
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@mixin define-color($name, $source: null) {
|
||||
.bg-#{$name} {
|
||||
background-color: var(--sn-stylekit-#{if($source, $source, $name)});
|
||||
}
|
||||
|
||||
.color-#{$name} {
|
||||
color: var(--sn-stylekit-#{if($source, $source, $name)});
|
||||
}
|
||||
}
|
||||
|
||||
@include define-color('neutral', 'neutral-color');
|
||||
@include define-color('text', 'contrast-foreground-color');
|
||||
@include define-color('foreground', 'foreground-color');
|
||||
@include define-color('danger', 'danger-color');
|
||||
@include define-color('info', 'info-color');
|
||||
@include define-color('info-contrast', 'info-contrast-color');
|
||||
@include define-color('info-dark', 'info-color-darkened');
|
||||
@include define-color('success', 'success-color');
|
||||
|
||||
@include define-color('passive-0', 'passive-color-0');
|
||||
@include define-color('passive-1', 'passive-color-1');
|
||||
@include define-color('passive-2', 'passive-color-2');
|
||||
@include define-color('passive-3', 'passive-color-3');
|
||||
@include define-color('passive-4', 'passive-color-4');
|
||||
@include define-color('passive-4-opacity-variant', 'passive-color-4-opacity-variant');
|
||||
@include define-color('passive-5', 'passive-color-5');
|
||||
@include define-color('passive-6', 'passive-color-6');
|
||||
@include define-color('passive-super-light', 'passive-color-super-light');
|
||||
|
||||
@for $i from 1 to 7 {
|
||||
@include define-color('accessory-tint-#{$i}', 'accessory-tint-color-#{$i}');
|
||||
}
|
||||
|
||||
.selected\:bg-color[data-selected],
|
||||
.selected\:bg-color[aria-selected='true'] {
|
||||
background-color: var(--sn-stylekit-passive-color-5);
|
||||
}
|
||||
|
||||
.selected\:fg-color[data-selected],
|
||||
.selected\:fg-color[aria-selected='true'] {
|
||||
color: var(--sn-stylekit-contrast-foreground-color);
|
||||
}
|
||||
|
||||
.fill-current {
|
||||
fill: currentColor;
|
||||
}
|
||||
3
packages/styles/src/Styles/utils/_cursor.scss
Normal file
3
packages/styles/src/Styles/utils/_cursor.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
118
packages/styles/src/Styles/utils/_display.scss
Normal file
118
packages/styles/src/Styles/utils/_display.scss
Normal file
@@ -0,0 +1,118 @@
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
grid-gap: 0.25rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.gap-2 {
|
||||
grid-gap: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.gap-3 {
|
||||
grid-gap: 0.75rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.gap-4 {
|
||||
grid-gap: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.origin-top-right {
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.overflow-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.flex-basis-55 {
|
||||
flex-basis: 13.75rem;
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
84
packages/styles/src/Styles/utils/_height.scss
Normal file
84
packages/styles/src/Styles/utils/_height.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-100vh {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-90vh {
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.h-0 {
|
||||
height: 0;
|
||||
}
|
||||
.h-2 {
|
||||
height: 0.5rem;
|
||||
}
|
||||
.h-3\.5 {
|
||||
height: 0.875rem;
|
||||
}
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
.h-4\.5 {
|
||||
height: 1.125rem;
|
||||
}
|
||||
.h-5 {
|
||||
height: 1.25rem;
|
||||
}
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
.h-7 {
|
||||
height: 1.75rem;
|
||||
}
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
.h-9 {
|
||||
height: 2.25rem;
|
||||
}
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
.h-14 {
|
||||
height: 3.5rem;
|
||||
}
|
||||
.h-18 {
|
||||
height: 4.5rem;
|
||||
}
|
||||
.h-25 {
|
||||
height: 6.25rem;
|
||||
}
|
||||
|
||||
.h-1px {
|
||||
height: 1px;
|
||||
}
|
||||
.h-20px {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.min-h-0 {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.min-h-5 {
|
||||
min-height: 1.25rem;
|
||||
}
|
||||
.m-h-32 {
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.min-h-20px {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.max-h-120 {
|
||||
max-height: 30rem;
|
||||
}
|
||||
101
packages/styles/src/Styles/utils/_hover_focus.scss
Normal file
101
packages/styles/src/Styles/utils/_hover_focus.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
.hover\:bg-passive-3:hover {
|
||||
background-color: var(--sn-stylekit-passive-color-3);
|
||||
}
|
||||
|
||||
.hover\:brightness-130:hover {
|
||||
filter: brightness(130%);
|
||||
}
|
||||
|
||||
.focus\:brightness-130:focus {
|
||||
filter: brightness(130%);
|
||||
}
|
||||
|
||||
.hover\:bg-highlight:hover {
|
||||
background-color: var(--sn-stylekit-passive-color-5);
|
||||
}
|
||||
|
||||
.focus\:bg-highlight:focus {
|
||||
background-color: var(--sn-stylekit-passive-color-5);
|
||||
}
|
||||
|
||||
.hover\:bg-contrast:hover {
|
||||
@extend .bg-contrast;
|
||||
}
|
||||
|
||||
.hover\:bg-info-dark:hover {
|
||||
@extend .bg-info-dark;
|
||||
}
|
||||
.focus\:bg-info-dark:focus {
|
||||
@extend .bg-info-dark;
|
||||
}
|
||||
|
||||
.focus\:padded-ring-info:focus {
|
||||
box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
.focus\:border-bottom:focus {
|
||||
border-bottom: 2px solid var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
.focus-within\:padded-ring-info:focus-within {
|
||||
box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color);
|
||||
}
|
||||
|
||||
.focus-within\:border-background:focus-within {
|
||||
border-color: var(--sn-stylekit-background-color);
|
||||
}
|
||||
|
||||
.box-shadow,
|
||||
.box-shadow:focus,
|
||||
.box-shadow:focus-within {
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12), 0px 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.focus\:bg-contrast:focus {
|
||||
@extend .bg-contrast;
|
||||
}
|
||||
|
||||
.hover\:color-text:hover {
|
||||
@extend .color-text;
|
||||
}
|
||||
|
||||
.focus\:color-text:focus {
|
||||
@extend .color-text;
|
||||
}
|
||||
|
||||
.hover\:bg-secondary-contrast:hover {
|
||||
@extend .bg-secondary-contrast;
|
||||
}
|
||||
|
||||
.focus\:bg-secondary-contrast:focus {
|
||||
@extend .bg-secondary-contrast;
|
||||
}
|
||||
|
||||
.focus\:inner-ring-info:focus {
|
||||
@extend .inner-ring-info;
|
||||
}
|
||||
|
||||
.focus\:ring-info:focus {
|
||||
@extend .ring-info;
|
||||
}
|
||||
|
||||
.focus-within\:ring-info:focus-within {
|
||||
@extend .ring-info;
|
||||
}
|
||||
|
||||
/**
|
||||
* Do not use these rules without explicitly handling focus in a different
|
||||
* way, otherwise keyboard focus will break.
|
||||
*/
|
||||
.focus\:outline-none:focus {
|
||||
outline: none;
|
||||
}
|
||||
.focus\:shadow-none:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
.focus-within\:outline-none:focus-within {
|
||||
outline: none;
|
||||
}
|
||||
.focus-within\:shadow-none:focus-within {
|
||||
box-shadow: none;
|
||||
}
|
||||
86
packages/styles/src/Styles/utils/_margin.scss
Normal file
86
packages/styles/src/Styles/utils/_margin.scss
Normal file
@@ -0,0 +1,86 @@
|
||||
.m-0 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.my-1 {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.my-2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.my-3 {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.-mt-1 {
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.-mr-2 {
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
|
||||
.mr-1 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mr-1\.5 {
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mr-10 {
|
||||
margin-right: 2.5rem;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.ml-1\.5 {
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.ml-6 {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
103
packages/styles/src/Styles/utils/_padding.scss
Normal file
103
packages/styles/src/Styles/utils/_padding.scss
Normal file
@@ -0,0 +1,103 @@
|
||||
.p-0 {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.py-1\.5 {
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.py-1\.75 {
|
||||
padding-top: 0.4375rem;
|
||||
padding-bottom: 0.4375rem;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.py-3 {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
.py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.py-6 {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.py-8 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.px-1 {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.px-3\.5 {
|
||||
padding-left: 0.875rem;
|
||||
padding-right: 0.875rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.pb-3 {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.pl-1 {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.pl-3 {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
40
packages/styles/src/Styles/utils/_position.scss
Normal file
40
packages/styles/src/Styles/utils/_position.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
.top-0 {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.bottom-0 {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.bottom-6 {
|
||||
bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.right-6 {
|
||||
right: 1.5rem;
|
||||
}
|
||||
|
||||
.top-left-0 {
|
||||
@extend .top-0;
|
||||
@extend .left-0;
|
||||
}
|
||||
|
||||
.-top-10 {
|
||||
top: -2.5rem;
|
||||
}
|
||||
|
||||
.-left-51 {
|
||||
left: -12.75rem;
|
||||
}
|
||||
|
||||
.z-index-toast {
|
||||
z-index: 11000;
|
||||
}
|
||||
15
packages/styles/src/Styles/utils/_transition.scss
Normal file
15
packages/styles/src/Styles/utils/_transition.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.duration-150 {
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.ease-out {
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.transition-background {
|
||||
transition-property: background;
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition-property: transform;
|
||||
}
|
||||
73
packages/styles/src/Styles/utils/_typography.scss
Normal file
73
packages/styles/src/Styles/utils/_typography.scss
Normal file
@@ -0,0 +1,73 @@
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.font-normal {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-input {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.leading-4 {
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.whitespace-pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
128
packages/styles/src/Styles/utils/_width.scss
Normal file
128
packages/styles/src/Styles/utils/_width.scss
Normal file
@@ -0,0 +1,128 @@
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-100vw {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.fit-content {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.w-0 {
|
||||
width: 0;
|
||||
}
|
||||
.w-2 {
|
||||
width: 0.5rem;
|
||||
}
|
||||
.w-3\.5 {
|
||||
width: 0.875rem;
|
||||
}
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
.w-5 {
|
||||
width: 1.25rem;
|
||||
}
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
.w-25 {
|
||||
width: 6.25rem;
|
||||
}
|
||||
.w-30 {
|
||||
width: 7.5rem;
|
||||
}
|
||||
.w-55 {
|
||||
width: 13.75rem;
|
||||
}
|
||||
.w-56 {
|
||||
width: 14rem;
|
||||
}
|
||||
.w-70 {
|
||||
width: 17.5rem;
|
||||
}
|
||||
.w-80 {
|
||||
width: 20rem;
|
||||
}
|
||||
.w-103 {
|
||||
width: 25.75rem;
|
||||
}
|
||||
.w-125 {
|
||||
width: 31.25rem;
|
||||
}
|
||||
.w-160 {
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
.w-20px {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.min-w-265px {
|
||||
min-width: 265px;
|
||||
}
|
||||
|
||||
.min-w-20px {
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.min-w-0 {
|
||||
min-width: 0;
|
||||
}
|
||||
.min-w-4 {
|
||||
min-width: 1rem;
|
||||
}
|
||||
.min-w-5 {
|
||||
min-width: 1.25rem;
|
||||
}
|
||||
.min-w-8 {
|
||||
min-width: 2rem;
|
||||
}
|
||||
.min-w-20 {
|
||||
min-width: 5rem;
|
||||
}
|
||||
.min-w-40 {
|
||||
min-width: 10rem;
|
||||
}
|
||||
.min-w-42 {
|
||||
min-width: 10.5rem;
|
||||
}
|
||||
.min-w-55 {
|
||||
min-width: 13.75rem;
|
||||
}
|
||||
.min-w-80 {
|
||||
min-width: 20rem;
|
||||
}
|
||||
.min-w-max {
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.max-w-xs {
|
||||
max-width: 20rem;
|
||||
}
|
||||
.max-w-md {
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.max-w-40 {
|
||||
max-width: 10rem;
|
||||
}
|
||||
|
||||
.max-w-80 {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.max-w-125 {
|
||||
max-width: 31.25rem;
|
||||
}
|
||||
|
||||
.max-w-290px {
|
||||
max-width: 290px;
|
||||
}
|
||||
1
packages/styles/src/index.ts
Normal file
1
packages/styles/src/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './Alert/Alert'
|
||||
13
packages/styles/tsconfig.json
Normal file
13
packages/styles/tsconfig.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": "../../node_modules/@standardnotes/config/src/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"rootDir": "src",
|
||||
"outDir": "dist",
|
||||
"jsx": "react-jsx",
|
||||
"skipLibCheck": true,
|
||||
"module": "es2022"
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["dist", "node_modules"]
|
||||
}
|
||||
49
packages/styles/webpack.config.js
Normal file
49
packages/styles/webpack.config.js
Normal file
@@ -0,0 +1,49 @@
|
||||
const path = require('path')
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||
|
||||
module.exports = (_, { mode }) => ({
|
||||
entry: {
|
||||
styles: path.resolve(__dirname, 'src/Styles/main.scss'),
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
},
|
||||
optimization: {
|
||||
minimize: false,
|
||||
splitChunks: {
|
||||
cacheGroups: {
|
||||
styles: {
|
||||
name: 'styles',
|
||||
type: 'css/mini-extract',
|
||||
chunks: 'all',
|
||||
enforce: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(scss|css)$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sassOptions: {
|
||||
outputStyle: 'expanded',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: 'stylekit.css',
|
||||
}),
|
||||
],
|
||||
})
|
||||
@@ -13,10 +13,10 @@ module.exports = {
|
||||
}),
|
||||
'\\.(css|less|scss|sass)$': 'identity-obj-proxy',
|
||||
'@standardnotes/toast': 'identity-obj-proxy',
|
||||
'@standardnotes/styles': 'identity-obj-proxy',
|
||||
},
|
||||
globals: {
|
||||
__WEB_VERSION__: '1.0.0',
|
||||
self: {}, // fixes error happening on `import { SKAlert } from 'sn-stylekit'`
|
||||
},
|
||||
transform: {
|
||||
'^.+\\.(ts|tsx)?$': 'ts-jest',
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
"@standardnotes/services": "^1.13.11",
|
||||
"@standardnotes/sncrypto-web": "1.10.1",
|
||||
"@standardnotes/snjs": "^2.115.6",
|
||||
"@standardnotes/stylekit": "5.29.3",
|
||||
"@standardnotes/styles": "1.0.0",
|
||||
"@standardnotes/toast": "1.0.0",
|
||||
"@zip.js/zip.js": "^2.4.10",
|
||||
"mobx": "^6.5.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ButtonType, sanitizeHtmlString } from '@standardnotes/snjs'
|
||||
import { AlertService } from '@standardnotes/services'
|
||||
import { SKAlert } from '@standardnotes/stylekit'
|
||||
import { SKAlert } from '@standardnotes/styles'
|
||||
|
||||
/** @returns a promise resolving to true if the user confirmed, false if they canceled */
|
||||
export function confirmDialog({
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '@standardnotes/stylekit/dist/stylekit';
|
||||
@import '../../../styles/src/Styles/main.scss';
|
||||
@import 'theme';
|
||||
@import 'main';
|
||||
@import 'ui';
|
||||
|
||||
137
yarn.lock
137
yarn.lock
@@ -2517,14 +2517,6 @@
|
||||
"@reach/utils" "0.16.0"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/auto-id@0.17.0":
|
||||
version "0.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.17.0.tgz#60cce65eb7a0d6de605820727f00dfe2b03b5f17"
|
||||
integrity sha512-ud8iPwF52RVzEmkHq1twuqGuPA+moreumUHdtgvU3sr3/15BNhwp3KyDLrKKSz0LP1r3V4pSdyF9MbYM8BoSjA==
|
||||
dependencies:
|
||||
"@reach/utils" "0.17.0"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/checkbox@^0.16.0":
|
||||
version "0.16.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/checkbox/-/checkbox-0.16.0.tgz#198223a14182f318fdbd01289a2073e191f878cc"
|
||||
@@ -2545,14 +2537,6 @@
|
||||
"@reach/utils" "0.16.0"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/descendants@0.17.0":
|
||||
version "0.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.17.0.tgz#3fb087125a67870acd4dee1528449ed546829b67"
|
||||
integrity sha512-c7lUaBfjgcmKFZiAWqhG+VnXDMEhPkI4kAav/82XKZD6NVvFjsQOTH+v3tUkskrAPV44Yuch0mFW/u5Ntifr7Q==
|
||||
dependencies:
|
||||
"@reach/utils" "0.17.0"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/dialog@0.16.2", "@reach/dialog@^0.16.2":
|
||||
version "0.16.2"
|
||||
resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.16.2.tgz#567e6f59d0a6dabe84b2ba4c456404efa6cb7d03"
|
||||
@@ -2576,17 +2560,6 @@
|
||||
tiny-warning "^1.0.3"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/dropdown@0.17.0":
|
||||
version "0.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/dropdown/-/dropdown-0.17.0.tgz#8140bb2e6a045f91e07c6d5a6ff960958df2ef33"
|
||||
integrity sha512-qBTIGInhxtPHtdj4Pl2XZgZMz3e37liydh0xR3qc48syu7g71sL4nqyKjOzThykyfhA3Pb3/wFgsFJKGTSdaig==
|
||||
dependencies:
|
||||
"@reach/auto-id" "0.17.0"
|
||||
"@reach/descendants" "0.17.0"
|
||||
"@reach/popover" "0.17.0"
|
||||
"@reach/utils" "0.17.0"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/listbox@^0.16.2":
|
||||
version "0.16.2"
|
||||
resolved "https://registry.yarnpkg.com/@reach/listbox/-/listbox-0.16.2.tgz#2ed4b30ebdf9ce0addffb0207f843b8232a7db1c"
|
||||
@@ -2599,18 +2572,6 @@
|
||||
"@reach/utils" "0.16.0"
|
||||
prop-types "^15.7.2"
|
||||
|
||||
"@reach/listbox@^0.17.0":
|
||||
version "0.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/listbox/-/listbox-0.17.0.tgz#e709f31056bb77781e74c9f0b69bf9ec8efbbc8b"
|
||||
integrity sha512-AMnH1P6/3VKy2V/nPb4Es441arYR+t4YRdh9jdcFVrCOD6y7CQrlmxsYjeg9Ocdz08XpdoEBHM3PKLJqNAUr7A==
|
||||
dependencies:
|
||||
"@reach/auto-id" "0.17.0"
|
||||
"@reach/descendants" "0.17.0"
|
||||
"@reach/machine" "0.17.0"
|
||||
"@reach/popover" "0.17.0"
|
||||
"@reach/utils" "0.17.0"
|
||||
prop-types "^15.7.2"
|
||||
|
||||
"@reach/machine@0.16.0":
|
||||
version "0.16.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.16.0.tgz#0504ba47ac09ed495bd341bf5fdd6625bcade0e3"
|
||||
@@ -2620,27 +2581,6 @@
|
||||
"@xstate/fsm" "1.4.0"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/machine@0.17.0":
|
||||
version "0.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.17.0.tgz#4e4bbf66e3c3934e65243485ac84f6f8fa3d9a24"
|
||||
integrity sha512-9EHnuPgXzkbRENvRUzJvVvYt+C2jp7PGN0xon7ffmKoK8rTO6eA/bb7P0xgloyDDQtu88TBUXKzW0uASqhTXGA==
|
||||
dependencies:
|
||||
"@reach/utils" "0.17.0"
|
||||
"@xstate/fsm" "1.4.0"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/menu-button@^0.17.0":
|
||||
version "0.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.17.0.tgz#9f40979129b61f8bdc19590c527f7ed4883d2dce"
|
||||
integrity sha512-YyuYVyMZKamPtivoEI6D0UEILYH3qZtg4kJzEAuzPmoR/aHN66NZO75Fx0gtjG1S6fZfbiARaCOZJC0VEiDOtQ==
|
||||
dependencies:
|
||||
"@reach/dropdown" "0.17.0"
|
||||
"@reach/popover" "0.17.0"
|
||||
"@reach/utils" "0.17.0"
|
||||
prop-types "^15.7.2"
|
||||
tiny-warning "^1.0.3"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/observe-rect@1.2.0":
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
|
||||
@@ -2657,17 +2597,6 @@
|
||||
tabbable "^4.0.0"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/popover@0.17.0":
|
||||
version "0.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.17.0.tgz#feda6961f37d17b8738d2d52af6bfc5c4584464f"
|
||||
integrity sha512-yYbBF4fMz4Ml4LB3agobZjcZ/oPtPsNv70ZAd7lEC2h7cvhF453pA+zOBGYTPGupKaeBvgAnrMjj7RnxDU5hoQ==
|
||||
dependencies:
|
||||
"@reach/portal" "0.17.0"
|
||||
"@reach/rect" "0.17.0"
|
||||
"@reach/utils" "0.17.0"
|
||||
tabbable "^4.0.0"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/portal@0.16.2":
|
||||
version "0.16.2"
|
||||
resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.2.tgz#ca83696215ee03acc2bb25a5ae5d8793eaaf2f64"
|
||||
@@ -2677,15 +2606,6 @@
|
||||
tiny-warning "^1.0.3"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/portal@0.17.0":
|
||||
version "0.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.17.0.tgz#1dd69ffc8ffc8ba3e26dd127bf1cc4b15f0c6bdc"
|
||||
integrity sha512-+IxsgVycOj+WOeNPL2NdgooUdHPSY285wCtj/iWID6akyr4FgGUK7sMhRM9aGFyrGpx2vzr+eggbUmAVZwOz+A==
|
||||
dependencies:
|
||||
"@reach/utils" "0.17.0"
|
||||
tiny-warning "^1.0.3"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/rect@0.16.0":
|
||||
version "0.16.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.16.0.tgz#78cf6acefe2e83d3957fa84f938f6e1fc5700f16"
|
||||
@@ -2697,17 +2617,6 @@
|
||||
tiny-warning "^1.0.3"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/rect@0.17.0":
|
||||
version "0.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.17.0.tgz#804f0cfb211e0beb81632c64d4532ec9d1d73c48"
|
||||
integrity sha512-3YB7KA5cLjbLc20bmPkJ06DIfXSK06Cb5BbD2dHgKXjUkT9WjZaLYIbYCO8dVjwcyO3GCNfOmPxy62VsPmZwYA==
|
||||
dependencies:
|
||||
"@reach/observe-rect" "1.2.0"
|
||||
"@reach/utils" "0.17.0"
|
||||
prop-types "^15.7.2"
|
||||
tiny-warning "^1.0.3"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/tooltip@^0.16.2":
|
||||
version "0.16.2"
|
||||
resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.16.2.tgz#8448cee341476e4f795fa7192f7a0864f06b8085"
|
||||
@@ -2730,14 +2639,6 @@
|
||||
tiny-warning "^1.0.3"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/utils@0.17.0":
|
||||
version "0.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.17.0.tgz#3d1d2ec56d857f04fe092710d8faee2b2b121303"
|
||||
integrity sha512-M5y8fCBbrWeIsxedgcSw6oDlAMQDkl5uv3VnMVJ7guwpf4E48Xlh1v66z/1BgN/WYe2y8mB/ilFD2nysEfdGeA==
|
||||
dependencies:
|
||||
tiny-warning "^1.0.3"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/visually-hidden@0.16.0", "@reach/visually-hidden@^0.16.0":
|
||||
version "0.16.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.16.0.tgz#2a5e834af9e93c554065ff8cbb0907fbeb26ad02"
|
||||
@@ -2944,19 +2845,6 @@
|
||||
"@standardnotes/sncrypto-common" "^1.9.0"
|
||||
"@standardnotes/utils" "^1.6.10"
|
||||
|
||||
"@standardnotes/stylekit@5.29.3":
|
||||
version "5.29.3"
|
||||
resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.29.3.tgz#8db39196d99ee4039eff5bf0d1bd408c4892e39b"
|
||||
integrity sha512-BMJE+YEbC4xOvSXlUx23FAnoNtrVLW2Thcf2wkkF9lpc8ZbQJAF5Np7mcmtgBRFyR8apbz2jEVFaq7pYPOeVKg==
|
||||
dependencies:
|
||||
"@nanostores/react" "^0.2.0"
|
||||
"@reach/listbox" "^0.17.0"
|
||||
"@reach/menu-button" "^0.17.0"
|
||||
"@standardnotes/icons" "^1.1.8"
|
||||
nanoid "^3.3.4"
|
||||
nanostores "^0.5.12"
|
||||
prop-types "^15.8.1"
|
||||
|
||||
"@standardnotes/utils@^1.6.10":
|
||||
version "1.6.10"
|
||||
resolved "https://registry.yarnpkg.com/@standardnotes/utils/-/utils-1.6.10.tgz#25816fd072ebe4b0e83585237bfd7ba528b4faef"
|
||||
@@ -5582,6 +5470,20 @@ css-loader@^6.7.1:
|
||||
postcss-value-parser "^4.2.0"
|
||||
semver "^7.3.5"
|
||||
|
||||
css-loader@~6.6.0:
|
||||
version "6.6.0"
|
||||
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.6.0.tgz#c792ad5510bd1712618b49381bd0310574fafbd3"
|
||||
integrity sha512-FK7H2lisOixPT406s5gZM1S3l8GrfhEBT3ZiL2UX1Ng1XWs0y2GPllz/OTyvbaHe12VgQrIXIzuEGVlbUhodqg==
|
||||
dependencies:
|
||||
icss-utils "^5.1.0"
|
||||
postcss "^8.4.5"
|
||||
postcss-modules-extract-imports "^3.0.0"
|
||||
postcss-modules-local-by-default "^4.0.0"
|
||||
postcss-modules-scope "^3.0.0"
|
||||
postcss-modules-values "^4.0.0"
|
||||
postcss-value-parser "^4.2.0"
|
||||
semver "^7.3.5"
|
||||
|
||||
css-select@^4.1.3:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
|
||||
@@ -10137,7 +10039,7 @@ min-indent@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
|
||||
integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
|
||||
|
||||
mini-css-extract-plugin@^2.6.0:
|
||||
mini-css-extract-plugin@^2.5.3, mini-css-extract-plugin@^2.6.0:
|
||||
version "2.6.0"
|
||||
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.0.tgz#578aebc7fc14d32c0ad304c2c34f08af44673f5e"
|
||||
integrity sha512-ndG8nxCEnAemsg4FSgS+yNyHKgkTB4nPKqCOgh65j3/30qqC5RaSQQXMm++Y6sb6E1zRSxPkztj9fqxhS1Eo6w==
|
||||
@@ -11595,7 +11497,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
|
||||
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
|
||||
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
|
||||
|
||||
postcss@^8.4.7:
|
||||
postcss@^8.4.5, postcss@^8.4.7:
|
||||
version "8.4.14"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
|
||||
integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
|
||||
@@ -13412,6 +13314,11 @@ strong-log-transformer@^2.0.0:
|
||||
minimist "^1.2.0"
|
||||
through "^2.3.4"
|
||||
|
||||
style-loader@~3.3.1:
|
||||
version "3.3.1"
|
||||
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
|
||||
integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
|
||||
|
||||
sumchecker@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"
|
||||
@@ -14381,7 +14288,7 @@ webpack-sources@^3.2.3:
|
||||
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
|
||||
integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
|
||||
|
||||
webpack@^5.72.0:
|
||||
webpack@^5.69.1, webpack@^5.72.0:
|
||||
version "5.73.0"
|
||||
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.73.0.tgz#bbd17738f8a53ee5760ea2f59dce7f3431d35d38"
|
||||
integrity sha512-svjudQRPPa0YiOYa2lM/Gacw0r6PvxptHj4FuEKQ2kX05ZLkjbVc5MnPs6its5j7IZljnIqSVo/OsY2X0IpHGA==
|
||||
|
||||
Reference in New Issue
Block a user