зеркало из https://github.com/microsoft/fast.git
Fix docusaurus site by removing frontpage (#6945)
This commit is contained in:
Jane Chu
GitHub
Родитель
543a69ce71
Коммит
4998650795
|
|
@ -1,13 +0,0 @@
|
|||
module.exports = {
|
||||
extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
|
||||
rules: {
|
||||
"@typescript-eslint/no-unused-vars": "off",
|
||||
"@typescript-eslint/no-non-null-assertion": "off",
|
||||
"@typescript-eslint/typedef": [
|
||||
"error",
|
||||
{
|
||||
arrowParameter: "false",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
@ -1 +0,0 @@
|
|||
temp
|
||||
|
|
@ -1 +0,0 @@
|
|||
package-lock=false
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
dist/*
|
||||
temp/*
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -1,59 +0,0 @@
|
|||
{
|
||||
"name": "@microsoft/fast-website",
|
||||
"version": "1.3.16",
|
||||
"description": "fast website",
|
||||
"main": "temp/index-rollup.js",
|
||||
"types": "temp/index-rollup.d.ts",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fluentui/svg-icons": "^1.1.139",
|
||||
"@microsoft/fast-element": "1.12.0",
|
||||
"@microsoft/fast-foundation": "2.49.0",
|
||||
"@microsoft/fast-components": "2.30.6",
|
||||
"@microsoft/fast-web-utilities": "^5.4.1",
|
||||
"@microsoft/site-utilities": "file:../site-utilities",
|
||||
"lodash-es": "4.17.21",
|
||||
"ts-loader": "^9.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-alias": "^3.1.1",
|
||||
"clean-webpack-plugin": "^4.0.0",
|
||||
"ejs-loader": "^0.5.0",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
"css-minimizer-webpack-plugin": "^4.0.0",
|
||||
"prettier": "2.8.8",
|
||||
"rollup": "^2.7.6",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"rollup-plugin-jst": "^1.2.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-svg": "^2.0.0",
|
||||
"rollup-plugin-typescript2": "^0.27.1",
|
||||
"svg-inline-loader": "^0.8.2",
|
||||
"terser-webpack-plugin": "^5.3.1",
|
||||
"ts-loader": "^9.3.0",
|
||||
"typescript": "^4.7.3",
|
||||
"webpack": "^5.73.0",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.9.2",
|
||||
"webpack-merge": "^5.8.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build:all": "yarn build:rollup && yarn build:webpack",
|
||||
"build:rollup": "rollup -c",
|
||||
"build:webpack": "webpack --config=./webpack.prod.js --progress",
|
||||
"clean": "rimraf dist temp",
|
||||
"prepare": "yarn clean && yarn build:rollup",
|
||||
"start": "webpack-dev-server --config=./webpack.dev.js --history-api-fallback --progress",
|
||||
"build": "yarn build:webpack",
|
||||
"prettier": "prettier --config ../../.prettierrc --write \"**/*.{ts,html}\"",
|
||||
"prettier:diff": "prettier --config ../../.prettierrc \"**/*.{ts,html}\" --list-different",
|
||||
"test": "yarn build"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/Microsoft/fast.git"
|
||||
},
|
||||
"author": "Microsoft"
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import alias from "@rollup/plugin-alias";
|
||||
import path from "path";
|
||||
import commonJS from "rollup-plugin-commonjs";
|
||||
import jst from "rollup-plugin-jst";
|
||||
import resolve from "rollup-plugin-node-resolve";
|
||||
import svg from "rollup-plugin-svg";
|
||||
import typescript from "rollup-plugin-typescript2";
|
||||
|
||||
export default [
|
||||
{
|
||||
input: "src/index-rollup.ts",
|
||||
output: [
|
||||
{
|
||||
file: "temp/index-rollup.js",
|
||||
format: "es",
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
alias({
|
||||
entries: {
|
||||
svg: path.resolve(__dirname, "src/app/svg"),
|
||||
},
|
||||
}),
|
||||
resolve(),
|
||||
commonJS(),
|
||||
jst(),
|
||||
svg(),
|
||||
typescript({
|
||||
tsconfigOverride: {
|
||||
compilerOptions: {
|
||||
declaration: true,
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import { fillColor } from "@microsoft/fast-components";
|
||||
import { css } from "@microsoft/fast-element";
|
||||
import { display } from "@microsoft/fast-foundation";
|
||||
|
||||
export const BackgroundDesignStyles = css`
|
||||
${display("block")} :host {
|
||||
contain: content;
|
||||
height: 99vh; /* https://developers.google.com/web/updates/2016/12/url-bar-resizing */
|
||||
isolation: isolate;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
:host .background-image {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:host .background-image::after {
|
||||
background: ${fillColor};
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0.45;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
transition: opacity 450ms ease-in-out;
|
||||
}
|
||||
|
||||
:host .background-image.is-faded::after {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
:host .background-image canvas {
|
||||
height: auto;
|
||||
min-width: 1440px;
|
||||
object-fit: cover;
|
||||
object-position: 50% 50%;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { html, ref } from "@microsoft/fast-element";
|
||||
import { BackgroundDesign } from "./background-design";
|
||||
|
||||
export const BackgroundDesignTemplate = html<BackgroundDesign>`
|
||||
<template>
|
||||
<div class="background-image ${x => (x.faded ? "is-faded" : "")}">
|
||||
<canvas ${ref("canvas")}></canvas>
|
||||
</div>
|
||||
</template>
|
||||
`;
|
||||
|
|
@ -1,279 +0,0 @@
|
|||
import { fillColor } from "@microsoft/fast-components";
|
||||
import { FASTElement, observable } from "@microsoft/fast-element";
|
||||
import { waveData } from "../../data/wave.data";
|
||||
|
||||
type BezierCurveTo = [number, number, number, number, number, number];
|
||||
type MoveTo = [number, number];
|
||||
|
||||
interface PathData {
|
||||
C: BezierCurveTo[];
|
||||
color?: [number, number, number];
|
||||
M: MoveTo;
|
||||
}
|
||||
|
||||
export class BackgroundDesign extends FASTElement {
|
||||
@observable
|
||||
public faded: boolean = false;
|
||||
|
||||
canvas: HTMLCanvasElement;
|
||||
context: CanvasRenderingContext2D;
|
||||
|
||||
waveSim = {
|
||||
scale: 1.0,
|
||||
size: { width: 0.0, height: 0.0 },
|
||||
center: { x: 0, y: 0 },
|
||||
origin: { x: 0, y: 0 },
|
||||
percent: { x: 0.5, y: 0.5 },
|
||||
};
|
||||
|
||||
time = {
|
||||
loop: 0.0,
|
||||
scale: 1.0,
|
||||
speed: 0.35,
|
||||
total: 0.0,
|
||||
};
|
||||
|
||||
increments = {
|
||||
bg: 20,
|
||||
waves: 30,
|
||||
};
|
||||
|
||||
steps = {
|
||||
bg: [],
|
||||
waves: [],
|
||||
};
|
||||
|
||||
lineWidths = {
|
||||
bg: 1.5,
|
||||
waves: 10.0,
|
||||
};
|
||||
|
||||
waveData = {};
|
||||
|
||||
frame: number;
|
||||
|
||||
prevPerf: number = 0;
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.context = this.canvas.getContext("2d", {
|
||||
alpha: false,
|
||||
}) as CanvasRenderingContext2D;
|
||||
|
||||
this.setup();
|
||||
this.reflowCanvas();
|
||||
|
||||
let resizeTimeout;
|
||||
|
||||
window.addEventListener(
|
||||
"resize",
|
||||
() => {
|
||||
if (resizeTimeout) {
|
||||
resizeTimeout = clearTimeout(resizeTimeout);
|
||||
}
|
||||
resizeTimeout = window.setTimeout(() => this.reflowCanvas(), 100);
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
const performAnimation = perf => {
|
||||
const frametime = perf - this.prevPerf;
|
||||
this.update(frametime);
|
||||
this.frame = requestAnimationFrame(performAnimation);
|
||||
this.prevPerf = perf;
|
||||
};
|
||||
performAnimation(window.performance.now());
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => this.setupFadeObserver());
|
||||
}
|
||||
|
||||
setupFadeObserver() {
|
||||
const observer = new IntersectionObserver(
|
||||
entries => {
|
||||
entries.forEach(entry => {
|
||||
this.faded = entry.intersectionRatio < 0.5;
|
||||
});
|
||||
},
|
||||
{ threshold: 0.5, root: null }
|
||||
);
|
||||
|
||||
const heroSection = document.getElementById("hero");
|
||||
if (heroSection) {
|
||||
observer.observe(heroSection);
|
||||
}
|
||||
}
|
||||
|
||||
setup() {
|
||||
Object.entries(waveData.layers).map(([key, list]) =>
|
||||
list.map(({ from, to, color }, i) => {
|
||||
const waveBlendData = {
|
||||
path: this.convertPath(from, color),
|
||||
start: this.convertPath(from),
|
||||
end: this.convertPath(to),
|
||||
};
|
||||
if (!this.waveData.hasOwnProperty(key)) {
|
||||
this.waveData[key] = [];
|
||||
}
|
||||
this.waveData[key].push(waveBlendData);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
convertPath(rawPath, color?: number[]): PathData {
|
||||
let M: MoveTo | undefined;
|
||||
let C: BezierCurveTo[] | MoveTo | undefined = rawPath
|
||||
.split(/(?=[MCS])/)
|
||||
.map(d => {
|
||||
let points = d
|
||||
.slice(1, d.length)
|
||||
.split(",")
|
||||
.map(p => ~~p);
|
||||
|
||||
let pairs: number[] = [];
|
||||
if (points.length === 2) {
|
||||
M = points.map(p => ~~p) as MoveTo;
|
||||
return;
|
||||
}
|
||||
for (let i = 0; i < points.length; i++) {
|
||||
pairs.push(~~points[i]);
|
||||
}
|
||||
return pairs as BezierCurveTo | MoveTo;
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
return { C, M, ...(color && { color }) } as PathData;
|
||||
}
|
||||
|
||||
stepPoint(from, to, increments, step) {
|
||||
return from + ((to - from) / increments) * step;
|
||||
}
|
||||
|
||||
generateWave(from, to, cache, inc) {
|
||||
let colorBlend: number = 0;
|
||||
for (let step = 0; step < inc; step++) {
|
||||
colorBlend += 1 / inc;
|
||||
const newWave = {
|
||||
color: from.color.map(
|
||||
(c, i) => c * colorBlend + (1 - colorBlend) * to.color[i]
|
||||
),
|
||||
C: from.C.map((c, n) =>
|
||||
c.map((v, i) => this.stepPoint(v, to.C[n][i], inc, step))
|
||||
),
|
||||
M: from.M.map((p, i) => this.stepPoint(p, to.M[i], inc, step)),
|
||||
};
|
||||
|
||||
cache.push(newWave);
|
||||
}
|
||||
}
|
||||
|
||||
updateWave(thisWave, startPoints, endPoints, modifier) {
|
||||
// sin wave drives animation
|
||||
let blend = this.easeInOut(1)(Math.sin(this.time.total / 2 + modifier));
|
||||
for (let i = 0; i < thisWave.C.length; i++) {
|
||||
const points = thisWave.C[i];
|
||||
for (let j = 0; j < points.length; j++) {
|
||||
let pointStart = startPoints.C[i][j];
|
||||
let pointEnd = endPoints.C[i][j];
|
||||
thisWave.C[i][j] =
|
||||
((blend + 1) * (pointEnd - pointStart)) / 2 + pointStart;
|
||||
}
|
||||
}
|
||||
|
||||
return thisWave;
|
||||
}
|
||||
|
||||
draw({ color, C, M }, lineWidth) {
|
||||
this.context.beginPath();
|
||||
this.context.moveTo(M[0], M[1]);
|
||||
|
||||
for (let i = 0; i < C.length; i++) {
|
||||
this.context.bezierCurveTo(...(C[i] as BezierCurveTo));
|
||||
}
|
||||
|
||||
this.context.lineWidth = lineWidth;
|
||||
this.context.strokeStyle = `rgb(${color!.join(",")})`;
|
||||
this.context.stroke();
|
||||
this.context.closePath();
|
||||
}
|
||||
|
||||
update(frametime) {
|
||||
// you're too slow!
|
||||
if (frametime > 33.34) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.time.loop = frametime / 1000;
|
||||
this.time.scale = this.time.loop * 60.0 * this.time.speed;
|
||||
this.time.total += this.time.loop * this.time.scale;
|
||||
|
||||
this.steps.bg.length = 0;
|
||||
this.steps.waves.length = 0;
|
||||
|
||||
this.context.fillStyle = fillColor.getValueFor(this).toColorString();
|
||||
this.context.fillRect(0, 0, this.waveSim.size.width, this.waveSim.size.height);
|
||||
this.context.save();
|
||||
this.context.translate(
|
||||
~~((this.waveSim.size.width - waveData.viewbox.width) / 2),
|
||||
~~((this.waveSim.size.height - waveData.viewbox.height) / 2)
|
||||
);
|
||||
|
||||
const keys = Object.keys(this.waveData);
|
||||
|
||||
// for-loops for performance
|
||||
for (let g = 0; g < keys.length; g++) {
|
||||
const key = keys[g];
|
||||
const waves = this.waveData[key];
|
||||
|
||||
for (let i = 0; i < waves.length; i++) {
|
||||
let wave = waves[i];
|
||||
const modifier = i * 2 + (g + 1);
|
||||
if (i < waves.length - 1) {
|
||||
this.generateWave(
|
||||
this.waveData[key][i].path,
|
||||
this.waveData[key][i + 1].path,
|
||||
this.steps[key],
|
||||
this.increments[key]
|
||||
);
|
||||
}
|
||||
wave = this.updateWave(wave.path, wave.start, wave.end, modifier);
|
||||
}
|
||||
|
||||
const steps = this.steps[key];
|
||||
for (let i = 0; i < steps.length; i++) {
|
||||
const step = steps[i];
|
||||
this.draw(step, this.lineWidths[key]);
|
||||
}
|
||||
}
|
||||
|
||||
this.context.restore();
|
||||
}
|
||||
|
||||
easeIn = p => t => Math.pow(t, p);
|
||||
easeOut = p => t => 1 - Math.abs(Math.pow(t - 1, p));
|
||||
easeInOut = p => t =>
|
||||
t < 0.5 ? this.easeIn(p)(t * 2) / 2 : this.easeOut(p)(t * 2 - 1) / 2 + 0.5;
|
||||
|
||||
reflowCanvas() {
|
||||
let styles = window.getComputedStyle(this);
|
||||
|
||||
const w = parseInt(styles.getPropertyValue("width"), 10);
|
||||
const h = parseInt(styles.getPropertyValue("height"), 10);
|
||||
|
||||
this.waveSim.scale = w / waveData.viewbox.width;
|
||||
|
||||
this.waveSim.size.width = w / this.waveSim.scale;
|
||||
this.waveSim.size.height = h / this.waveSim.scale;
|
||||
|
||||
this.canvas.style.width = `${this.waveSim.size.width * this.waveSim.scale}px`;
|
||||
this.canvas.style.height = `${this.waveSim.size.height * this.waveSim.scale}px`;
|
||||
this.canvas.width = this.waveSim.size.width;
|
||||
this.canvas.height = this.waveSim.size.height;
|
||||
|
||||
this.waveSim.origin.x = Math.ceil(
|
||||
this.waveSim.size.width * this.waveSim.percent.x
|
||||
);
|
||||
this.waveSim.origin.y = Math.ceil(
|
||||
this.waveSim.size.height * this.waveSim.percent.y
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { customElement } from "@microsoft/fast-element";
|
||||
import { BackgroundDesign } from "./background-design";
|
||||
import { BackgroundDesignTemplate as template } from "./background-design.template";
|
||||
import { BackgroundDesignStyles as styles } from "./background-design.styles";
|
||||
|
||||
@customElement({
|
||||
name: "background-design",
|
||||
styles,
|
||||
template,
|
||||
})
|
||||
export class SiteBackgroundDesign extends BackgroundDesign {}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { css } from "@microsoft/fast-element";
|
||||
import { display } from "@microsoft/fast-foundation";
|
||||
import { neutralFillHover } from "@microsoft/fast-components";
|
||||
|
||||
export const CardSectionStyles = css`
|
||||
:host {
|
||||
--flow: row;
|
||||
}
|
||||
|
||||
${display("grid")} :host {
|
||||
grid-template-rows: repeat(4, min-content);
|
||||
grid-auto-flow: var(--flow);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:host(:hover) ::slotted(site-feature-card) {
|
||||
filter: saturate(0);
|
||||
}
|
||||
|
||||
:host ::slotted(site-feature-card:hover),
|
||||
:host ::slotted(site-feature-card:focus-within) {
|
||||
cursor: pointer;
|
||||
color: currentColor;
|
||||
background-color: ${neutralFillHover};
|
||||
filter: saturate(1);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
:host {
|
||||
--flow: column;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { html } from "@microsoft/fast-element";
|
||||
import { CardSection } from "./card-section";
|
||||
|
||||
export const CardSectionTemplate = html<CardSection>`
|
||||
<slot></slot>
|
||||
`;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import { FASTElement } from "@microsoft/fast-element";
|
||||
|
||||
export class CardSection extends FASTElement {}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { customElement } from "@microsoft/fast-element";
|
||||
import { CardSectionTemplate as template } from "./card-section.template";
|
||||
import { CardSectionStyles as styles } from "./card-section.styles";
|
||||
import { CardSection } from "./card-section";
|
||||
|
||||
@customElement({
|
||||
name: "site-card-section",
|
||||
template,
|
||||
styles,
|
||||
})
|
||||
export class SiteCardSection extends CardSection {}
|
||||
export * from "./card-section.template";
|
||||
export * from "./card-section.styles";
|
||||
export * from "./card-section";
|
||||
|
|
@ -1,157 +0,0 @@
|
|||
import {
|
||||
accentFillRest,
|
||||
bodyFont,
|
||||
controlCornerRadius,
|
||||
density,
|
||||
designUnit,
|
||||
disabledOpacity,
|
||||
focusStrokeOuter,
|
||||
foregroundOnAccentRest,
|
||||
neutralForegroundRest,
|
||||
neutralStrokeHover,
|
||||
neutralStrokeRest,
|
||||
strokeWidth,
|
||||
} from "@microsoft/fast-components";
|
||||
import { heightNumber } from "@microsoft/fast-components/dist/esm/styles/size";
|
||||
import { css } from "@microsoft/fast-element";
|
||||
import {
|
||||
disabledCursor,
|
||||
display,
|
||||
focusVisible,
|
||||
forcedColorsStylesheetBehavior,
|
||||
} from "@microsoft/fast-foundation";
|
||||
import { SystemColors } from "@microsoft/fast-web-utilities";
|
||||
|
||||
export const ColorSwatchStyles = css`
|
||||
${display("inline-flex")} :host {
|
||||
--input-size: calc((${heightNumber} / 2) + ${designUnit});
|
||||
align-items: center;
|
||||
outline: none;
|
||||
margin: calc(${designUnit} * 1px) 0;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.control {
|
||||
background: ${accentFillRest};
|
||||
color: ${neutralForegroundRest};
|
||||
position: relative;
|
||||
width: calc(var(--input-size) * 1px);
|
||||
height: calc(var(--input-size) * 1px);
|
||||
box-sizing: border-box;
|
||||
border-radius: calc(${controlCornerRadius} * 1px);
|
||||
border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.label-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: ${bodyFont};
|
||||
color: ${neutralForegroundRest};
|
||||
/* TODO: Need to discuss with Brian how HorizontalSpacingNumber can work.
|
||||
https://github.com/microsoft/fast/issues/2766 */
|
||||
padding-inline-start: calc(${designUnit} * 2px + 2px);
|
||||
margin-inline-end: calc(${designUnit} * 2px + 2px);
|
||||
cursor: pointer;
|
||||
/* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
|
||||
font-size: calc(1rem + (${density} * 2px));
|
||||
}
|
||||
|
||||
.checked-indicator {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
border-radius: calc(${controlCornerRadius} * 1px);
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid ${neutralForegroundRest};
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
::slotted([slot="checked-indicator"]) {
|
||||
align-items: center;
|
||||
color: ${foregroundOnAccentRest};
|
||||
display: flex;
|
||||
fill: currentColor;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.control:hover {
|
||||
border-color: ${neutralStrokeHover};
|
||||
}
|
||||
|
||||
:host(:${focusVisible}) .control {
|
||||
box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;
|
||||
border-color: ${focusStrokeOuter};
|
||||
}
|
||||
|
||||
:host(.disabled) .label,
|
||||
:host(.readonly) .label,
|
||||
:host(.readonly) .control,
|
||||
:host(.disabled) .control {
|
||||
cursor: ${disabledCursor};
|
||||
}
|
||||
|
||||
:host(.checked) .checked-indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:host(.disabled) {
|
||||
opacity: ${disabledOpacity};
|
||||
}
|
||||
`.withBehaviors(
|
||||
forcedColorsStylesheetBehavior(
|
||||
css`
|
||||
.control,
|
||||
.control:hover,
|
||||
.control:active {
|
||||
forced-color-adjust: none;
|
||||
border-color: ${SystemColors.FieldText};
|
||||
background: ${SystemColors.Field};
|
||||
}
|
||||
:host(:${focusVisible}) .control {
|
||||
border-color: ${SystemColors.Highlight};
|
||||
}
|
||||
:host(.checked) .control:hover,
|
||||
.control:active {
|
||||
border-color: ${SystemColors.Highlight};
|
||||
background: ${SystemColors.Highlight};
|
||||
}
|
||||
:host(.checked) .checked-indicator {
|
||||
background: ${SystemColors.Highlight};
|
||||
fill: ${SystemColors.Highlight};
|
||||
}
|
||||
:host(.checked) .control:hover .checked-indicator {
|
||||
background: ${SystemColors.HighlightText};
|
||||
fill: ${SystemColors.HighlightText};
|
||||
}
|
||||
:host(.disabled) {
|
||||
forced-color-adjust: none;
|
||||
opacity: 1;
|
||||
}
|
||||
:host(.disabled) .label {
|
||||
color: ${SystemColors.GrayText};
|
||||
}
|
||||
:host(.disabled) .control,
|
||||
:host(.checked.disabled) .control:hover,
|
||||
.control:active {
|
||||
background: ${SystemColors.Field};
|
||||
border-color: ${SystemColors.GrayText};
|
||||
}
|
||||
:host(.disabled) .checked-indicator,
|
||||
:host(.checked.disabled) .control:hover .checked-indicator {
|
||||
fill: ${SystemColors.GrayText};
|
||||
background: ${SystemColors.GrayText};
|
||||
}
|
||||
`
|
||||
)
|
||||
);
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import { html, slotted } from "@microsoft/fast-element";
|
||||
import { whitespaceFilter } from "@microsoft/fast-foundation";
|
||||
import { ColorSwatch } from "./color-swatch";
|
||||
|
||||
export const ColorSwatchTemplate = html<ColorSwatch>`
|
||||
<template
|
||||
role="radio"
|
||||
class="${x =>
|
||||
[x.checked && "checked", x.readOnly && "readonly"].filter(Boolean).join("")}"
|
||||
aria-checked="${x => x.checked}"
|
||||
aria-required="${x => x.required}"
|
||||
aria-disabled="${x => x.disabled}"
|
||||
aria-readonly="${x => x.readOnly}"
|
||||
@keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
|
||||
@click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
|
||||
>
|
||||
<div part="control" class="control">
|
||||
<slot name="checked-indicator">
|
||||
<div part="checked-indicator" class="checked-indicator"></div>
|
||||
</slot>
|
||||
</div>
|
||||
<label
|
||||
part="label"
|
||||
class="label ${x => (!x.defaultSlottedNodes?.length ? "label-hidden" : "")}"
|
||||
>
|
||||
<slot
|
||||
${slotted({
|
||||
property: "defaultSlottedNodes",
|
||||
filter: whitespaceFilter,
|
||||
})}
|
||||
></slot>
|
||||
</label>
|
||||
</template>
|
||||
`;
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
import { parseColorHexRGB } from "@microsoft/fast-colors";
|
||||
import { accentPalette, PaletteRGB } from "@microsoft/fast-components";
|
||||
import { attr, observable } from "@microsoft/fast-element";
|
||||
import { Radio } from "@microsoft/fast-foundation";
|
||||
import { keyEnter } from "@microsoft/fast-web-utilities";
|
||||
|
||||
export declare interface ColorSelectionResult {
|
||||
sRGBHex: string;
|
||||
}
|
||||
|
||||
export declare class EyeDropper {
|
||||
constructor();
|
||||
public open(): Promise<ColorSelectionResult>;
|
||||
}
|
||||
|
||||
export class ColorSwatch extends Radio {
|
||||
private palette: PaletteRGB;
|
||||
|
||||
@observable
|
||||
public defaultSlottedNodes: Node[];
|
||||
|
||||
private eyedropper: EyeDropper;
|
||||
|
||||
@attr({
|
||||
attribute: "custom-value",
|
||||
mode: "boolean",
|
||||
})
|
||||
customValue: boolean = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
if ("EyeDropper" in globalThis) {
|
||||
this.eyedropper = new EyeDropper();
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
if (this.eyedropper && this.customValue) {
|
||||
this.addEventListener("keydown", this.keydownHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public keydownHandler(e: KeyboardEvent): boolean | void {
|
||||
if (e.key === keyEnter) {
|
||||
this.getColorFromEyeDropper();
|
||||
}
|
||||
}
|
||||
|
||||
public clickHandler(e: MouseEvent): boolean | void {
|
||||
if (!this.customValue || !this.eyedropper) {
|
||||
return super.clickHandler(e);
|
||||
}
|
||||
|
||||
this.getColorFromEyeDropper().then(() => {
|
||||
return super.clickHandler(e);
|
||||
});
|
||||
}
|
||||
|
||||
public async getColorFromEyeDropper() {
|
||||
try {
|
||||
const colorSelectionResult = await this.eyedropper.open();
|
||||
this.value = colorSelectionResult.sRGBHex;
|
||||
this.$emit("change");
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
|
||||
public valueChanged(prev: unknown, next: string): void {
|
||||
const parsedColor = parseColorHexRGB(next);
|
||||
if (parsedColor) {
|
||||
this.palette = PaletteRGB.from(parsedColor);
|
||||
accentPalette.setValueFor(this, this.palette);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { customElement } from "@microsoft/fast-element";
|
||||
import { ColorSwatch } from "./color-swatch";
|
||||
import { ColorSwatchTemplate as template } from "./color-swatch.template";
|
||||
import { ColorSwatchStyles as styles } from "./color-swatch.styles";
|
||||
|
||||
@customElement({
|
||||
name: "site-color-swatch",
|
||||
template,
|
||||
styles,
|
||||
})
|
||||
export class SiteColorSwatch extends ColorSwatch {}
|
||||
export * from "./color-swatch.template";
|
||||
export * from "./color-swatch.styles";
|
||||
export * from "./color-swatch";
|
||||
|
|
@ -1,199 +0,0 @@
|
|||
import { css } from "@microsoft/fast-element";
|
||||
import { display } from "@microsoft/fast-foundation";
|
||||
import { elevation } from "@microsoft/fast-components/dist/esm/styles/elevation.js";
|
||||
import {
|
||||
accentForegroundRest,
|
||||
controlCornerRadius,
|
||||
designUnit,
|
||||
neutralFillFocus,
|
||||
neutralForegroundRest,
|
||||
typeRampBaseFontSize,
|
||||
typeRampMinus1FontSize,
|
||||
typeRampPlus2FontSize,
|
||||
} from "@microsoft/fast-components";
|
||||
|
||||
export const ContentPlacementContainerStyles = css`
|
||||
${display("grid")}:host {
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
fast-anchor {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
:host * {
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
:host([section="framework"]) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
contain: content;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:host([section="feature"]) {
|
||||
--flow: column;
|
||||
grid-template-rows: repeat(3, min-content);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-flow: var(--flow);
|
||||
justify-content: center;
|
||||
counter-reset: feature-counter;
|
||||
}
|
||||
|
||||
/* this creates the numbering for feature*/
|
||||
|
||||
:host([section="feature"]) site-feature-card {
|
||||
counter-increment: feature-counter;
|
||||
}
|
||||
|
||||
:host([section="feature"]) site-feature-card :first-child::before {
|
||||
display: block;
|
||||
content: counter(feature-counter, decimal-leading-zero);
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
margin-bottom: calc(${designUnit} * 2px);
|
||||
}
|
||||
|
||||
/* end */
|
||||
|
||||
/* This creates the color, background, and elevation changes on hover */
|
||||
|
||||
:host(:hover) site-feature-card,
|
||||
:host(:focus-within) site-feature-card,
|
||||
:host(:hover) site-content-placement,
|
||||
:host(:focus-within) site-content-placement {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
:host site-feature-card:hover,
|
||||
:host site-feature-card:focus-within,
|
||||
:host site-content-placement:hover,
|
||||
:host site-content-placement:focus-within {
|
||||
--elevation: 16;
|
||||
background: ${neutralFillFocus};
|
||||
border-radius: calc(${controlCornerRadius} * 1px);
|
||||
color: currentColor;
|
||||
opacity: 1;
|
||||
${elevation}
|
||||
}
|
||||
|
||||
:host([section="framework"]) site-content-placement:hover h3,
|
||||
:host([section="framework"]) site-content-placement:focus-within h3,
|
||||
:host([section="feature"]) site-feature-card:hover :first-child::before,
|
||||
:host([section="feature"]) site-feature-card:focus-within :first-child::before,
|
||||
:host([section="feature"]) site-feature-card:hover fast-anchor,
|
||||
:host([section="feature"]) site-feature-card:focus-within fast-anchor,
|
||||
:host([section="community"]) site-content-placement:hover ::part(content),
|
||||
:host([section="community"]) site-content-placement:focus-within ::part(content) {
|
||||
color: ${neutralForegroundRest};
|
||||
}
|
||||
|
||||
:host([section="framework"]) site-content-placement:hover h3 .headerSubscript,
|
||||
:host([section="framework"]) site-content-placement:focus-within h3 .headerSubscript {
|
||||
color: ${neutralForegroundRest};
|
||||
}
|
||||
|
||||
fast-anchor::part(content)::before {
|
||||
background: ${neutralForegroundRest};
|
||||
}
|
||||
|
||||
site-feature-card:hover fast-anchor::part(content)::before,
|
||||
site-feature-card:focus-within fast-anchor::part(content)::before,
|
||||
site-content-placement:hover fast-anchor::part(content)::before,
|
||||
site-content-placement:focus-within fast-anchor::part(content)::before {
|
||||
background: ${accentForegroundRest};
|
||||
}
|
||||
|
||||
/* end */
|
||||
|
||||
.headerSubscript {
|
||||
font-size: ${typeRampMinus1FontSize};
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: currentColor;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 calc(${designUnit} * 5px) 0;
|
||||
font-size: ${typeRampPlus2FontSize};
|
||||
}
|
||||
|
||||
site-feature-card:not(:nth-of-type(4n)):hover + site-feature-card::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:host([section="community"]) {
|
||||
padding-bottom: 94px;
|
||||
}
|
||||
|
||||
:host([section="designSystem"]) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fast-design-system svg {
|
||||
height: 40px;
|
||||
width: 80px;
|
||||
fill: white;
|
||||
stroke: white;
|
||||
margin: 15px 40px 15px;
|
||||
}
|
||||
|
||||
.fast-design-system svg rect {
|
||||
fill: white;
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
.fast-design-system path {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.fast-design-system-link {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
}
|
||||
|
||||
.fast-design-system-link:hover,
|
||||
.fast-design-system-link:focus {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--accent-foreground-rest);
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1330px) {
|
||||
:host([section="feature"]) {
|
||||
--flow: row;
|
||||
grid-template-columns: unset;
|
||||
}
|
||||
|
||||
site-feature-card:hover + site-feature-card::before {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
:host([section="community"]) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 899px) {
|
||||
:host([section="feature"]) site-feature-card :first-child {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
:host([section="feature"]) site-feature-card :first-child::before {
|
||||
color: ${accentForegroundRest};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { html, repeat } from "@microsoft/fast-element";
|
||||
import { ContentPlacementContainer } from "./content-placement-container";
|
||||
import { SiteContentPlacement } from "../content-placement";
|
||||
|
||||
const template = html<SiteContentPlacement>`
|
||||
${(x, c) => c.parent.selectTemplate()}
|
||||
`;
|
||||
|
||||
export const ContentPlacementContainerTemplate = html<ContentPlacementContainer>`
|
||||
${repeat(x => x.selectData(), template)}
|
||||
`;
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import { attr, FASTElement } from "@microsoft/fast-element";
|
||||
import {
|
||||
CommunityContentPlacementData,
|
||||
communityContentPlacementData,
|
||||
} from "../../data/community.data";
|
||||
import {
|
||||
FrameworkContentPlacementData,
|
||||
frameworkContentPlacementData,
|
||||
} from "../../data/framework.data";
|
||||
import { FeatureCardData, featureCardData } from "../../data/feature.data";
|
||||
import { DesignSystemData, designSystemData } from "../../data/design-system.data";
|
||||
import frameworkTemplate from "./templates/framework.template";
|
||||
import featureTemplate from "./templates/feature.template";
|
||||
import communityTemplate from "./templates/community.template";
|
||||
import designSystemTemplate from "./templates/design-system.template";
|
||||
export class ContentPlacementContainer extends FASTElement {
|
||||
@attr section: string;
|
||||
|
||||
frameworkData: FrameworkContentPlacementData[] = frameworkContentPlacementData;
|
||||
featureData: FeatureCardData[] = featureCardData;
|
||||
communityData: CommunityContentPlacementData[] = communityContentPlacementData.filter(
|
||||
x => x.header !== "Medium"
|
||||
);
|
||||
designSystemData: DesignSystemData[] = designSystemData;
|
||||
|
||||
dataByType = {
|
||||
framework: this.frameworkData,
|
||||
feature: this.featureData,
|
||||
community: this.communityData,
|
||||
designSystem: this.designSystemData,
|
||||
};
|
||||
|
||||
templateByType = {
|
||||
framework: frameworkTemplate,
|
||||
feature: featureTemplate,
|
||||
community: communityTemplate,
|
||||
designSystem: designSystemTemplate,
|
||||
};
|
||||
|
||||
selectTemplate() {
|
||||
return this.templateByType[this.section];
|
||||
}
|
||||
|
||||
selectData() {
|
||||
return this.dataByType[this.section];
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { customElement } from "@microsoft/fast-element";
|
||||
import { ContentPlacementContainer } from "./content-placement-container";
|
||||
import { ContentPlacementContainerTemplate as template } from "./content-placement-container.template";
|
||||
import { ContentPlacementContainerStyles as styles } from "./content-placement-container.styles";
|
||||
|
||||
@customElement({
|
||||
name: "site-content-placement-container",
|
||||
template,
|
||||
styles,
|
||||
})
|
||||
export class SiteContentPlacementContainer extends ContentPlacementContainer {}
|
||||
export * from "./content-placement-container.template";
|
||||
export * from "./content-placement-container.styles";
|
||||
export * from "./content-placement-container";
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { html } from "@microsoft/fast-element";
|
||||
import { linkTemplate } from "./link.template";
|
||||
|
||||
const communityTemplate = html`
|
||||
<site-content-placement icon>
|
||||
<div slot="icon" :innerHTML=${x => x.icon}></div>
|
||||
<h3>${x => x.header}</h3>
|
||||
<p slot="body">${x => x.body}</p>
|
||||
${linkTemplate("action")}
|
||||
</site-content-placement>
|
||||
`;
|
||||
|
||||
export default communityTemplate;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { html } from "@microsoft/fast-element";
|
||||
|
||||
const designSystemTemplate = html`
|
||||
<a href="${x => x.url}" class="fast-design-system-link" rel="noopener noreferrer">
|
||||
<span class="fast-design-system" :innerHTML=${x => x.icon}></span>
|
||||
<p>${x => x.anchorText}</p>
|
||||
</a>
|
||||
`;
|
||||
|
||||
export default designSystemTemplate;
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { html, repeat } from "@microsoft/fast-element";
|
||||
import { linkTemplate } from "./link.template";
|
||||
|
||||
const featureTemplate = html`
|
||||
<site-feature-card>
|
||||
<h4>${x => x.header}</h4>
|
||||
<p slot="body">${x => x.body}</p>
|
||||
${repeat(x => x.links, linkTemplate("footer"))}
|
||||
</site-feature-card>
|
||||
`;
|
||||
|
||||
export default featureTemplate;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import { html, repeat } from "@microsoft/fast-element";
|
||||
import { linkTemplate } from "./link.template";
|
||||
|
||||
const frameworkTemplate = html`
|
||||
<site-content-placement>
|
||||
<h3>
|
||||
${x => (x.headerSubscript ? x.header + " " : x.header)}
|
||||
<small class="headerSubscript">${x => x.headerSubscript}</small>
|
||||
</h3>
|
||||
<p slot="body">${x => x.body}</p>
|
||||
${repeat(x => x.links, linkTemplate("action"))}
|
||||
</site-content-placement>
|
||||
`;
|
||||
|
||||
export default frameworkTemplate;
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import { html } from "@microsoft/fast-element";
|
||||
|
||||
export const linkTemplate = (slot: string) => html`
|
||||
<fast-anchor slot="${slot}" href=${x => x.url} appearance="lightweight">
|
||||
${x => x.anchorText}
|
||||
</fast-anchor>
|
||||
`;
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import { bodyFont, designUnit, typeRampBaseFontSize } from "@microsoft/fast-components";
|
||||
import { css } from "@microsoft/fast-element";
|
||||
import { display } from "@microsoft/fast-foundation";
|
||||
|
||||
export const ContentPlacementStyles = css`
|
||||
${display("grid")} :host {
|
||||
justify-content: center;
|
||||
contain: layout;
|
||||
font-family: ${bodyFont};
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
fast-card {
|
||||
background: transparent;
|
||||
padding: calc(${designUnit} * 5px);
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
fast-card ::slotted([slot="body"]) {
|
||||
flex: 1 1 auto;
|
||||
margin: 0;
|
||||
font-size: ${typeRampBaseFontSize};
|
||||
}
|
||||
|
||||
fast-card ::slotted([slot="action"]) {
|
||||
margin-top: calc(${designUnit} * 2px);
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
fast-card:hover .contentPlacement_icon,
|
||||
fast-card:focus-within .contentPlacement_icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
fast-card .contentPlacement_icon {
|
||||
opacity: 0;
|
||||
margin-bottom: calc(${designUnit} * 5px);
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { html, when } from "@microsoft/fast-element";
|
||||
import { ContentPlacement } from "./content-placement";
|
||||
|
||||
export const ContentPlacementTemplate = html<ContentPlacement>`
|
||||
<fast-card>
|
||||
<div class=${x => (x.icon ? "contentPlacement_icon" : "")}>
|
||||
<slot name="icon"></slot>
|
||||
</div>
|
||||
<slot></slot>
|
||||
<slot name="body"></slot>
|
||||
<slot name="action"></slot>
|
||||
</fast-card>
|
||||
`;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { attr, FASTElement } from "@microsoft/fast-element";
|
||||
|
||||
export class ContentPlacement extends FASTElement {
|
||||
@attr({ mode: "boolean" })
|
||||
public icon: boolean = false;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { customElement } from "@microsoft/fast-element";
|
||||
import { ContentPlacement } from "./content-placement";
|
||||
import { ContentPlacementTemplate as template } from "./content-placement.template";
|
||||
import { ContentPlacementStyles as styles } from "./content-placement.styles";
|
||||
|
||||
@customElement({
|
||||
name: "site-content-placement",
|
||||
template,
|
||||
styles,
|
||||
})
|
||||
export class SiteContentPlacement extends ContentPlacement {}
|
||||
export * from "./content-placement.template";
|
||||
export * from "./content-placement.styles";
|
||||
export * from "./content-placement";
|
||||
|
|
@ -1,398 +0,0 @@
|
|||
import { css } from "@microsoft/fast-element";
|
||||
import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";
|
||||
import {
|
||||
bodyFont,
|
||||
neutralForegroundRest,
|
||||
fillColor,
|
||||
controlCornerRadius,
|
||||
neutralFillLayerRest,
|
||||
typeRampMinus1FontSize,
|
||||
typeRampMinus1LineHeight,
|
||||
neutralForegroundHint,
|
||||
typeRampPlus3FontSize,
|
||||
typeRampPlus3LineHeight,
|
||||
designUnit,
|
||||
accentFillRest,
|
||||
typeRampMinus2FontSize,
|
||||
} from "@microsoft/fast-components";
|
||||
import { drawerBreakpoint } from "./fast-frame";
|
||||
import { SystemColors } from "@microsoft/fast-web-utilities";
|
||||
|
||||
export const FastFrameStyles = css`
|
||||
${display("block")} :host {
|
||||
flex-direction: column;
|
||||
font-family: ${bodyFont};
|
||||
color: ${neutralForegroundRest};
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
background: ${fillColor};
|
||||
border-radius: calc(${controlCornerRadius} * 1px);
|
||||
}
|
||||
|
||||
:host {
|
||||
--gutter: 20;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.icon {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: minMax(400px, 500px) 1fr;
|
||||
min-height: 500px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
background: ${neutralFillLayerRest};
|
||||
padding: calc(var(--gutter) * 2px);
|
||||
}
|
||||
|
||||
.content-control-container {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-gap: calc(var(--gutter) * 1px);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-control-container-2 {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: calc(var(--gutter) * 1px);
|
||||
}
|
||||
|
||||
.content-control-container :not(label) {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.content .content-badge {
|
||||
--design-unit: 0;
|
||||
font-size: ${typeRampMinus1FontSize};
|
||||
line-height: ${typeRampMinus1LineHeight};
|
||||
color: ${neutralForegroundHint};
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.content .content-badge .content-badge-highlight {
|
||||
color: ${neutralForegroundHint};
|
||||
}
|
||||
|
||||
.content .heading {
|
||||
font-size: ${typeRampPlus3FontSize};
|
||||
line-height: ${typeRampPlus3LineHeight};
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: grid;
|
||||
grid-gap: calc(var(--gutter) * 2px);
|
||||
grid-template-columns: auto 300px;
|
||||
padding: calc(var(--gutter) * 2px);
|
||||
position: relative;
|
||||
border-radius: 0 calc(${controlCornerRadius} * 1px) calc(${controlCornerRadius} * 1px) 0;
|
||||
background: ${fillColor};
|
||||
}
|
||||
|
||||
.image-container {
|
||||
/** Temp background */
|
||||
background: #D6D6D6;
|
||||
width: 100%;
|
||||
height: 215px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(var(--gutter) * 1px);
|
||||
text-align: start;
|
||||
color: ${neutralForegroundRest};
|
||||
}
|
||||
|
||||
.badge {
|
||||
align-self: flex-end;
|
||||
margin: calc(var(--gutter) * 1px);
|
||||
}
|
||||
|
||||
.preview-controls {
|
||||
display: grid;
|
||||
grid-auto-rows: max-content;
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
.control-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
.control-container-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
.control-container p {
|
||||
margin-inline-start: calc(${designUnit} * 2px + 2px);
|
||||
}
|
||||
|
||||
.control-container-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
text-align: start;
|
||||
color: ${neutralForegroundRest};
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.sample-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sample-control-actions {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.sample-control-text {
|
||||
margin-inline-start: calc(${designUnit} * 2px + 2px);
|
||||
}
|
||||
|
||||
.sample-control-icon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
background-color: ${accentFillRest};
|
||||
border-radius: calc(${controlCornerRadius} * 1px);
|
||||
}
|
||||
|
||||
.saturation-slider-track {
|
||||
height: 100%;
|
||||
border-radius: calc(${controlCornerRadius} * 1px);
|
||||
}
|
||||
|
||||
.hue-slider-track {
|
||||
height: 100%;
|
||||
border-radius: calc(${controlCornerRadius} * 1px);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
to right,
|
||||
rgb(255, 0, 0),
|
||||
rgb(255, 77, 0),
|
||||
rgb(255, 153, 0),
|
||||
rgb(255, 230, 0),
|
||||
rgb(204, 255, 0),
|
||||
rgb(128, 255, 0),
|
||||
rgb(51, 255, 0),
|
||||
rgb(0, 255, 26),
|
||||
rgb(0, 255, 102),
|
||||
rgb(0, 255, 179),
|
||||
rgb(0, 255, 255),
|
||||
rgb(0, 179, 255),
|
||||
rgb(0, 102, 255),
|
||||
rgb(0, 26, 255),
|
||||
rgb(51, 0, 255),
|
||||
rgb(128, 0, 255),
|
||||
rgb(204, 0, 255),
|
||||
rgb(255, 0, 230),
|
||||
rgb(255, 0, 153),
|
||||
rgb(255, 0, 76),
|
||||
rgb(255, 0, 4)
|
||||
);"
|
||||
}
|
||||
|
||||
#saturation-slider::part(track-start),
|
||||
#hue-slider::part(track-start) {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.responsive-expand-flipper {
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
align-self: center;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
fast-card {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
fast-badge {
|
||||
--badge-fill-primary: #E4BC11;
|
||||
--badge-color-primary: #000000;
|
||||
}
|
||||
|
||||
fast-slider {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
fast-tab-panel:not([hidden]) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
fast-tab-panel {
|
||||
background: ${neutralFillLayerRest};
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
fast-tab[aria-selected="true"] {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
fast-radio-group.example-radios {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
fast-radio-group.example-radios::part(positioning-region) {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
fast-radio-group.swatches::part(positioning-region) {
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
site-color-swatch {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
fast-slider-label {
|
||||
font-size: ${typeRampMinus2FontSize};
|
||||
color: ${neutralForegroundHint};
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1330px) {
|
||||
:host {
|
||||
--gutter: 10;
|
||||
}
|
||||
|
||||
fast-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview {
|
||||
grid-template-columns: minMax(300px, auto);
|
||||
border-radius: calc(${controlCornerRadius} * 1px);
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (max-width: ${drawerBreakpoint}) {
|
||||
:host {
|
||||
--gutter: 10;
|
||||
}
|
||||
|
||||
fast-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview {
|
||||
position: absolute;
|
||||
right: -90%;
|
||||
grid-template-columns: 100%;
|
||||
width: 80%;
|
||||
transition: right .5s ease-in-out;
|
||||
align-self: center;
|
||||
border-radius: calc(${controlCornerRadius} * 1px);
|
||||
}
|
||||
|
||||
.preview-expanded {
|
||||
transition: right .5s ease-in-out;
|
||||
right: -10%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
width: calc(100vw - 20vw);
|
||||
}
|
||||
|
||||
.responsive-expand-flipper {
|
||||
display: inline-flex;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.tab-panel-expanded {
|
||||
opacity: 0;
|
||||
transition: opacity .5s ease-in-out;
|
||||
}
|
||||
|
||||
fast-tab-panel {
|
||||
opacity: 1;
|
||||
transition: opacity .5s ease-in-out;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
.preview {
|
||||
right: -88%;
|
||||
width: 70%;
|
||||
border-radius: calc(${controlCornerRadius} * 1px);
|
||||
}
|
||||
|
||||
.preview-expanded {
|
||||
right: -5%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: calc(100vw - 12vw);
|
||||
}
|
||||
|
||||
.content-control-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.content-control-container-2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.content-control-container :not(label) {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
fast-tabs::part(tablist) {
|
||||
padding: 16px 4px 16px 0;
|
||||
}
|
||||
}
|
||||
`.withBehaviors(
|
||||
forcedColorsStylesheetBehavior(
|
||||
css`
|
||||
.text-container {
|
||||
color: ${SystemColors.ButtonText};
|
||||
}
|
||||
fast-tab:hover[aria-selected="true"] {
|
||||
background: ${SystemColors.Highlight};
|
||||
fill: ${SystemColors.HighlightText};
|
||||
}
|
||||
`
|
||||
)
|
||||
);
|
||||
|
|
@ -1,365 +0,0 @@
|
|||
import EyedropperIcon from "@fluentui/svg-icons/icons/eyedropper_20_filled.svg";
|
||||
import { ColorHSL, hslToRGB } from "@microsoft/fast-colors";
|
||||
import { html, ref, repeat, when } from "@microsoft/fast-element";
|
||||
import ContextIcon from "svg/icon-context.svg";
|
||||
import ContrastIcon from "svg/icon-contrast.svg";
|
||||
import DownloadIcon from "svg/icon-download.svg";
|
||||
import PaletteIcon from "svg/icon-palette.svg";
|
||||
import PlayIcon from "svg/icon-play.svg";
|
||||
import SwatchesIcon from "svg/icon-swatches.svg";
|
||||
import { FastFrame } from "./fast-frame";
|
||||
|
||||
export const FastFrameTemplate = html<FastFrame>`
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<fast-tabs orientation="vertical" id="myTab" activeId="TabTwo">
|
||||
<fast-tab id="contrast-tab" title="Dark Mode">${ContrastIcon}</fast-tab>
|
||||
<fast-tab id="palette-tab" title="Color">${PaletteIcon}</fast-tab>
|
||||
<fast-tab id="style-tab" title="Styles">${SwatchesIcon}</fast-tab>
|
||||
<fast-tab-panel
|
||||
id="contrast-tab-panel"
|
||||
class="${x => (x.expanded ? "tab-panel-expanded" : "")}"
|
||||
>
|
||||
<div class="content">
|
||||
<fast-badge class="content-badge">
|
||||
Fast Frame
|
||||
<span class="content-badge-highlight">Dark Mode</span>
|
||||
</fast-badge>
|
||||
<h3 class="heading">Pre-built for both light and dark modes</h3>
|
||||
<p>
|
||||
Switching between dark and light mode is as easy as changing
|
||||
the background color of the design system.
|
||||
</p>
|
||||
<div class="content-control-container">
|
||||
<label for="dark-mode-switch">Dark mode</label>
|
||||
<fast-switch
|
||||
id="dark-mode-switch"
|
||||
:checked="${x => x.darkMode}"
|
||||
@change="${(x, c) =>
|
||||
x.modeChange(c.event as CustomEvent)}"
|
||||
>
|
||||
<span slot="checked-message">On</span>
|
||||
<span slot="unchecked-message">Off</span>
|
||||
</fast-switch>
|
||||
</div>
|
||||
</div>
|
||||
</fast-tab-panel>
|
||||
<fast-tab-panel
|
||||
id="palette-tab-panel"
|
||||
class="${x => (x.expanded ? "tab-panel-expanded" : "")}"
|
||||
>
|
||||
<div class="content">
|
||||
<fast-badge class="content-badge">
|
||||
Fast Frame
|
||||
<span class="content-badge-highlight">Colors</span>
|
||||
</fast-badge>
|
||||
<h3 class="heading">Pre-existing color you can customize</h3>
|
||||
<p>
|
||||
Color is applied by using color recipes which require two
|
||||
color palettes, neutral and accent, applied to the design
|
||||
system. These palettes are customizable which allows for a
|
||||
wide range of styles.
|
||||
</p>
|
||||
<div class="content-control-container">
|
||||
<label for="neutral-color-pickers">Neutral color</label>
|
||||
<fast-radio-group
|
||||
class="swatches"
|
||||
name="neutral-color-pickers"
|
||||
value="${x => x.previewNeutralPalette[0]}"
|
||||
@change="${(x, c) =>
|
||||
x.neutralChangeHandler(c.event as CustomEvent)}"
|
||||
>
|
||||
${repeat(
|
||||
x => x.previewNeutralPalette,
|
||||
|
||||
html<string>`
|
||||
<site-color-swatch
|
||||
tabindex="0"
|
||||
aria-label="neutral color ${x => x}"
|
||||
value="${x => x}"
|
||||
checked="${(x, c) =>
|
||||
x === c.parent.previewNeutralPalette[0]}"
|
||||
></site-color-swatch>
|
||||
`
|
||||
)}
|
||||
${when(
|
||||
x => "EyeDropper" in globalThis,
|
||||
html`
|
||||
<site-color-swatch
|
||||
tabindex="0"
|
||||
value="#000"
|
||||
custom-value
|
||||
aria-label="custom neutral color"
|
||||
>
|
||||
<div slot="checked-indicator">
|
||||
${EyedropperIcon}
|
||||
</div>
|
||||
</site-color-swatch>
|
||||
`
|
||||
)}
|
||||
</fast-radio-group>
|
||||
<label for="accent-color-pickers">Accent color</label>
|
||||
<fast-radio-group
|
||||
class="swatches"
|
||||
name="accent-color-pickers"
|
||||
value="${x => x.previewAccentPalette[0]}"
|
||||
@change="${(x, c) =>
|
||||
x.accentChangeHandler(c.event as CustomEvent)}"
|
||||
>
|
||||
${repeat(
|
||||
x => x.previewAccentPalette,
|
||||
html<string>`
|
||||
<site-color-swatch
|
||||
tabindex="0"
|
||||
aria-label="accent color ${x => x}"
|
||||
value="${x => x}"
|
||||
checked="${(x, c) =>
|
||||
x === c.parent.previewAccentPalette[0]}"
|
||||
></site-color-swatch>
|
||||
`
|
||||
)}
|
||||
${when(
|
||||
x => "EyeDropper" in globalThis,
|
||||
html`
|
||||
<site-color-swatch
|
||||
tabindex="0"
|
||||
value="#000"
|
||||
custom-value
|
||||
aria-label="custom accent color"
|
||||
>
|
||||
<div slot="checked-indicator">
|
||||
${EyedropperIcon}
|
||||
</div>
|
||||
</site-color-swatch>
|
||||
`
|
||||
)}
|
||||
</fast-radio-group>
|
||||
<label for="hue-slider">Hue</label>
|
||||
<fast-slider
|
||||
id="hue-slider"
|
||||
min="0"
|
||||
max="359"
|
||||
step="1"
|
||||
value="${x => x.hue}"
|
||||
@change="${(x, c) =>
|
||||
x.hueChangeHandler(c.event as CustomEvent)}"
|
||||
>
|
||||
<div slot="track" class="hue-slider-track"></div>
|
||||
</fast-slider>
|
||||
<label for="saturation-slider">Saturation</label>
|
||||
<fast-slider
|
||||
id="saturation-slider"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value="${x => x.saturation}"
|
||||
@change="${(x, c) =>
|
||||
x.saturationChangeHandler(c.event as CustomEvent)}"
|
||||
>
|
||||
<div
|
||||
slot="track"
|
||||
class="saturation-slider-track"
|
||||
style="background-image: linear-gradient(to right, ${x =>
|
||||
hslToRGB(
|
||||
new ColorHSL(x.hue, 0, x.lightness)
|
||||
).toStringHexRGB()}, ${x =>
|
||||
hslToRGB(
|
||||
new ColorHSL(x.hue, 1, x.lightness)
|
||||
).toStringHexRGB()});"
|
||||
></div>
|
||||
</fast-slider>
|
||||
</div>
|
||||
</div>
|
||||
</fast-tab-panel>
|
||||
<fast-tab-panel
|
||||
id="style-tab-panel"
|
||||
class="${x => (x.expanded ? "tab-panel-expanded" : "")}"
|
||||
>
|
||||
<div class="content">
|
||||
<fast-badge class="content-badge">
|
||||
Fast Frame
|
||||
<span class="content-badge-highlight">Styles</span>
|
||||
</fast-badge>
|
||||
<h3 class="heading">Adjust style settings on the fly</h3>
|
||||
<p>
|
||||
Update design system values for border radius, outline width,
|
||||
or density.
|
||||
</p>
|
||||
<div class="content-control-container-2">
|
||||
<label for="border-radius-slider">Border radius</label>
|
||||
<fast-slider
|
||||
id="border-radius-slider"
|
||||
min="0"
|
||||
max="20"
|
||||
step="1"
|
||||
value="3"
|
||||
@change="${(x, c) =>
|
||||
x.borderRadiusChangeHandler(c.event as CustomEvent)}"
|
||||
>
|
||||
<fast-slider-label hide-mark position="0">
|
||||
0
|
||||
</fast-slider-label>
|
||||
<fast-slider-label hide-mark position="20">
|
||||
20PX
|
||||
</fast-slider-label>
|
||||
</fast-slider>
|
||||
<label for="stroke-width-slider">Stroke width</label>
|
||||
<fast-slider
|
||||
id="stroke-width-slider"
|
||||
min="1"
|
||||
max="4"
|
||||
step="1"
|
||||
value="1"
|
||||
@change="${(x, c) =>
|
||||
x.strokeWidthChangeHandler(c.event as CustomEvent)}"
|
||||
>
|
||||
<fast-slider-label hide-mark position="1">
|
||||
1PX
|
||||
</fast-slider-label>
|
||||
<fast-slider-label hide-mark position="6">
|
||||
4PX
|
||||
</fast-slider-label>
|
||||
</fast-slider>
|
||||
<label for="density-slider">Density</label>
|
||||
<fast-slider
|
||||
id="density-slider"
|
||||
min="-3"
|
||||
max="3"
|
||||
step="1"
|
||||
value="0"
|
||||
@change="${(x, c) =>
|
||||
x.densityChangeHandler(c.event as CustomEvent)}"
|
||||
>
|
||||
<fast-slider-label hide-mark position="-3">
|
||||
-3
|
||||
</fast-slider-label>
|
||||
<fast-slider-label hide-mark position="3">
|
||||
3
|
||||
</fast-slider-label>
|
||||
</fast-slider>
|
||||
</div>
|
||||
</div>
|
||||
</fast-tab-panel>
|
||||
</fast-tabs>
|
||||
<div
|
||||
${ref("preview")}
|
||||
class="${x => (x.expanded ? "preview preview-expanded" : "preview")}"
|
||||
>
|
||||
<div class="responsive-expand-flipper">
|
||||
<fast-flipper
|
||||
direction="${x => (x.expanded ? "next" : "previous")}"
|
||||
aria-expanded="${x => x.expanded}"
|
||||
aria-hidden="false"
|
||||
@keypress="${(x, c) =>
|
||||
x.handleExpandKeypress(c.event as KeyboardEvent)}"
|
||||
@click="${(x, c) =>
|
||||
x.handleExpandKeypress(c.event as KeyboardEvent)}"
|
||||
></fast-flipper>
|
||||
</div>
|
||||
<fast-card>
|
||||
<div class="image-container">
|
||||
<fast-badge fill="primary" color="primary" class="badge">
|
||||
Badge
|
||||
</fast-badge>
|
||||
</div>
|
||||
<div class="text-container">
|
||||
<h3>Example card</h3>
|
||||
<p>
|
||||
At purus lectus quis habitant commodo, cras. Aliquam malesuada
|
||||
velit a tortor. Felis orci tellus netus risus et ultricies
|
||||
augue aliquet. Suscipit mattis mus amet nibh...
|
||||
</p>
|
||||
<fast-divider></fast-divider>
|
||||
<div class="sample-control">
|
||||
<span class="sample-control-icon"></span>
|
||||
<span class="sample-control-text">Label</span>
|
||||
<div class="sample-control-actions">
|
||||
<fast-button
|
||||
appearance="stealth"
|
||||
aria-label="Example 'more' button"
|
||||
>
|
||||
${ContextIcon}
|
||||
</fast-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fast-card>
|
||||
<div class="preview-controls">
|
||||
<fast-progress aria-label="Example progress bar"></fast-progress>
|
||||
<fast-menu
|
||||
tabindex="${x => x.setTabIndex()}"
|
||||
aria-label="Example menu"
|
||||
>
|
||||
<fast-menu-item role="menuitem" aria-label="Example menu item">
|
||||
Menu item 1
|
||||
</fast-menu-item>
|
||||
<fast-menu-item role="menuitem" aria-label="Example menu item">
|
||||
Menu item 2
|
||||
</fast-menu-item>
|
||||
<fast-menu-item role="menuitem" aria-label="Example menu item">
|
||||
Menu item 3
|
||||
</fast-menu-item>
|
||||
<fast-divider></fast-divider>
|
||||
<fast-menu-item role="menuitem" aria-label="Example menu item">
|
||||
Menu item 4
|
||||
</fast-menu-item>
|
||||
</fast-menu>
|
||||
<div class="control-container">
|
||||
<fast-radio-group
|
||||
class="example-radios"
|
||||
name="example radio group"
|
||||
orientation="vertical"
|
||||
>
|
||||
<fast-radio aria-label="Example radio 1">Radio 1</fast-radio>
|
||||
<fast-radio aria-label="Example radio 2">Radio 2</fast-radio>
|
||||
</fast-radio-group>
|
||||
<div class="control-container-grid">
|
||||
<fast-switch
|
||||
tabindex="${x => x.setTabIndex()}"
|
||||
aria-label="Example toggle"
|
||||
></fast-switch>
|
||||
<p>Toggle</p>
|
||||
<fast-checkbox
|
||||
tabindex="${x => x.setTabIndex()}"
|
||||
class="checkbox"
|
||||
aria-label="Example checkbox"
|
||||
></fast-checkbox>
|
||||
<p class="checkbox-label">Checkbox</p>
|
||||
</div>
|
||||
</div>
|
||||
<fast-text-field
|
||||
placeholder="Text field"
|
||||
tabindex="${x => x.setTabIndex()}"
|
||||
aria-label="Example text field"
|
||||
></fast-text-field>
|
||||
<div class="control-container-2">
|
||||
<fast-slider
|
||||
tabindex="${x => x.setTabIndex()}"
|
||||
aria-label="Example slider"
|
||||
></fast-slider>
|
||||
<fast-flipper></fast-flipper>
|
||||
<fast-flipper disabled></fast-flipper>
|
||||
</div>
|
||||
<div class="control-container">
|
||||
<fast-button
|
||||
appearance="accent"
|
||||
aria-label="Example 'download' button"
|
||||
tabindex="${x => x.setTabIndex()}"
|
||||
>
|
||||
Button
|
||||
<span slot="start">${DownloadIcon}</span>
|
||||
</fast-button>
|
||||
<fast-button
|
||||
appearance="neutral"
|
||||
aria-label="Example 'play' button"
|
||||
tabindex="${x => x.setTabIndex()}"
|
||||
>
|
||||
Button
|
||||
<span slot="start">${PlayIcon}</span>
|
||||
</fast-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
`;
|
||||
|
|
@ -1,232 +0,0 @@
|
|||
import { FASTElement, attr, observable, DOM } from "@microsoft/fast-element";
|
||||
import {
|
||||
StandardLuminance,
|
||||
PaletteRGB,
|
||||
SwatchRGB,
|
||||
baseLayerLuminance,
|
||||
neutralPalette,
|
||||
accentPalette,
|
||||
fillColor,
|
||||
density,
|
||||
baseHeightMultiplier,
|
||||
baseHorizontalSpacingMultiplier,
|
||||
controlCornerRadius,
|
||||
strokeWidth,
|
||||
neutralLayerCardContainer,
|
||||
} from "@microsoft/fast-components";
|
||||
import { RadioGroup, Slider } from "@microsoft/fast-foundation";
|
||||
import { ColorHSL, hslToRGB, parseColorHexRGB, rgbToHSL } from "@microsoft/fast-colors";
|
||||
|
||||
export const drawerBreakpoint: string = "660px";
|
||||
|
||||
export class FastFrame extends FASTElement {
|
||||
@observable
|
||||
public preview: HTMLElement;
|
||||
|
||||
@attr({ attribute: "accent-color" })
|
||||
public accentColor: string = "#F33378";
|
||||
|
||||
@attr
|
||||
public darkMode: boolean = true;
|
||||
|
||||
@attr
|
||||
public baseLayerLuminance: number = StandardLuminance.DarkMode;
|
||||
baseLayerLuminanceChanged() {
|
||||
if (typeof this.baseLayerLuminance === "number") {
|
||||
DOM.queueUpdate(() => {
|
||||
baseLayerLuminance.setValueFor(this.preview, this.baseLayerLuminance);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@observable
|
||||
public previewNeutralPalette: string[] = [
|
||||
"#808080",
|
||||
"#35719F",
|
||||
"#2D5F2D",
|
||||
"#5D437C",
|
||||
"#A35436",
|
||||
];
|
||||
|
||||
@observable
|
||||
public previewAccentPalette: string[] = [
|
||||
"#F33378",
|
||||
"#F34733",
|
||||
"#10A7B5",
|
||||
"#109B82",
|
||||
"#E1A054",
|
||||
];
|
||||
|
||||
private mql: MediaQueryList = window.matchMedia(`(max-width: ${drawerBreakpoint})`);
|
||||
|
||||
@observable
|
||||
public neutralPalette: PaletteRGB;
|
||||
neutralPaletteChanged() {
|
||||
if (this.neutralPalette) {
|
||||
DOM.queueUpdate(() => {
|
||||
neutralPalette.setValueFor(this.preview, this.neutralPalette);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@observable
|
||||
public accentPalette: PaletteRGB;
|
||||
accentPaletteChanged() {
|
||||
if (this.accentPalette) {
|
||||
DOM.queueUpdate(() => {
|
||||
accentPalette.setValueFor(this.preview, this.accentPalette);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@observable
|
||||
public density: number = 0;
|
||||
densityChanged() {
|
||||
DOM.queueUpdate(() => {
|
||||
density.setValueFor(this.preview, this.density);
|
||||
});
|
||||
}
|
||||
|
||||
@observable
|
||||
public borderRadius: number = 3;
|
||||
borderRadiusChanged() {
|
||||
DOM.queueUpdate(() => {
|
||||
controlCornerRadius.setValueFor(this.preview, this.borderRadius);
|
||||
});
|
||||
}
|
||||
|
||||
@observable
|
||||
public strokeWidth: number = 1;
|
||||
strokeWidthChanged() {
|
||||
DOM.queueUpdate(() => {
|
||||
strokeWidth.setValueFor(this.preview, this.strokeWidth);
|
||||
});
|
||||
}
|
||||
|
||||
@observable
|
||||
public saturation: number;
|
||||
|
||||
@observable
|
||||
public hue: number;
|
||||
|
||||
@observable
|
||||
public lightness: number;
|
||||
|
||||
@observable
|
||||
public expanded: boolean = false;
|
||||
|
||||
@observable
|
||||
public isMobile: boolean = this.mql.matches;
|
||||
|
||||
public accentChangeHandler = (e: CustomEvent): void => {
|
||||
if (e.target instanceof RadioGroup) {
|
||||
this.accentColor = e.target.value;
|
||||
const accentColorHSL = rgbToHSL(parseColorHexRGB(this.accentColor)!);
|
||||
this.hue = accentColorHSL.h;
|
||||
this.saturation = accentColorHSL.s;
|
||||
this.lightness = accentColorHSL.l;
|
||||
const parsedColor = parseColorHexRGB(this.accentColor);
|
||||
|
||||
if (parsedColor) {
|
||||
this.accentPalette = PaletteRGB.create(
|
||||
SwatchRGB.create(parsedColor.r, parsedColor.g, parsedColor.b)
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
public neutralChangeHandler = (e: CustomEvent): void => {
|
||||
if (e.target instanceof RadioGroup) {
|
||||
const parsedColor = parseColorHexRGB(e.target.value);
|
||||
|
||||
if (parsedColor) {
|
||||
this.neutralPalette = PaletteRGB.create(
|
||||
SwatchRGB.create(parsedColor.r, parsedColor.g, parsedColor.b)
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
public densityChangeHandler = (e: CustomEvent): void => {
|
||||
if (e.target instanceof Slider) {
|
||||
this.density = parseInt(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
public borderRadiusChangeHandler = (e: CustomEvent): void => {
|
||||
if (e.target instanceof Slider) {
|
||||
this.borderRadius = parseInt(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
public strokeWidthChangeHandler = (e: CustomEvent): void => {
|
||||
if (e.target instanceof Slider) {
|
||||
this.strokeWidth = parseInt(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
public saturationChangeHandler = (e: CustomEvent): void => {
|
||||
if (e.target instanceof Slider) {
|
||||
this.saturation = parseFloat(e.target.value);
|
||||
}
|
||||
this.updateAccentColor();
|
||||
};
|
||||
|
||||
public hueChangeHandler = (e: CustomEvent): void => {
|
||||
if (e.target instanceof Slider) {
|
||||
this.hue = parseFloat(e.target.value);
|
||||
}
|
||||
this.updateAccentColor();
|
||||
};
|
||||
|
||||
public handleExpandKeypress = (e: KeyboardEvent): void => {
|
||||
this.expanded = !this.expanded;
|
||||
};
|
||||
|
||||
private updateAccentColor(): void {
|
||||
const accentHSL = new ColorHSL(this.hue, this.saturation, this.lightness);
|
||||
const accentRGB = hslToRGB(accentHSL);
|
||||
this.accentColor = accentRGB.toStringHexRGB();
|
||||
this.accentPalette = PaletteRGB.create(
|
||||
SwatchRGB.create(accentRGB.r, accentRGB.g, accentRGB.b)
|
||||
);
|
||||
}
|
||||
|
||||
public modeChange = (e: CustomEvent): void => {
|
||||
this.darkMode = !this.darkMode;
|
||||
this.baseLayerLuminance = this.darkMode
|
||||
? StandardLuminance.DarkMode
|
||||
: StandardLuminance.LightMode;
|
||||
};
|
||||
|
||||
private resetExpandedResponsive = (e): void => {
|
||||
this.expanded = false;
|
||||
this.isMobile = e.matches;
|
||||
};
|
||||
|
||||
public setTabIndex = (): string => (!this.expanded && this.isMobile ? "-1" : "0");
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
const accentColorHSL = rgbToHSL(parseColorHexRGB(this.accentColor)!);
|
||||
this.hue = accentColorHSL.h;
|
||||
this.saturation = accentColorHSL.s;
|
||||
this.lightness = accentColorHSL.l;
|
||||
|
||||
this.mql.addListener(this.resetExpandedResponsive);
|
||||
}
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
public connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
fillColor.setValueFor(this.preview, neutralLayerCardContainer);
|
||||
|
||||
density.setValueFor(this, 0);
|
||||
baseHeightMultiplier.setValueFor(this, 10);
|
||||
baseHorizontalSpacingMultiplier.setValueFor(this, 3);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { customElement } from "@microsoft/fast-element";
|
||||
import { FastFrame } from "./fast-frame";
|
||||
import { FastFrameTemplate as template } from "./fast-frame.template";
|
||||
import { FastFrameStyles as styles } from "./fast-frame.styles";
|
||||
|
||||
@customElement({
|
||||
name: "fast-frame",
|
||||
template,
|
||||
styles,
|
||||
})
|
||||
export class FASTFastFrame extends FastFrame {}
|
||||
export * from "./fast-frame.template";
|
||||
export * from "./fast-frame.styles";
|
||||
export * from "./fast-frame";
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
import {
|
||||
controlCornerRadius,
|
||||
designUnit,
|
||||
typeRampPlus2FontSize,
|
||||
} from "@microsoft/fast-components";
|
||||
import { css } from "@microsoft/fast-element";
|
||||
import { display } from "@microsoft/fast-foundation";
|
||||
|
||||
export const FeatureCardStyles = css`
|
||||
${display("grid")} :host {
|
||||
contain: layout;
|
||||
grid-template-columns: 1fr repeat(2, minmax(120px, 1fr));
|
||||
grid-template-areas: "header main main";
|
||||
grid-column-gap: calc(${designUnit} * 3px);
|
||||
color: inherit;
|
||||
box-sizing: border-box;
|
||||
padding: calc(${designUnit} * 5px);
|
||||
border-radius: calc(${controlCornerRadius} * 1px);
|
||||
box-shadow: unset;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:host::before {
|
||||
content: "";
|
||||
display: block;
|
||||
background-color: currentColor;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: calc(100% - (${designUnit} * 10px));
|
||||
left: 20px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
:host(:hover)::before {
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.card_heading {
|
||||
grid-area: header;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.card_body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
::slotted(h4) {
|
||||
font-size: ${typeRampPlus2FontSize};
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
::slotted(:first-child) {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
::slotted(p) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
::slotted(fast-anchor) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 899px) {
|
||||
${display("grid")} :host {
|
||||
grid-template-columns: repeat(3, minmax(50px, 1fr));
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"main main main";
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { html } from "@microsoft/fast-element";
|
||||
import { FeatureCard } from "./feature-card";
|
||||
|
||||
export const FeatureCardTemplate = html<FeatureCard>`
|
||||
<div class="card_heading">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="card_body">
|
||||
<slot name="body"></slot>
|
||||
<div>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import { FASTElement } from "@microsoft/fast-element";
|
||||
|
||||
export class FeatureCard extends FASTElement {}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { customElement } from "@microsoft/fast-element";
|
||||
import { FeatureCardTemplate as template } from "./feature-card.template";
|
||||
import { FeatureCardStyles as styles } from "./feature-card.styles";
|
||||
import { FeatureCard } from "./feature-card";
|
||||
|
||||
@customElement({
|
||||
name: "site-feature-card",
|
||||
template,
|
||||
styles,
|
||||
})
|
||||
export class SiteFeatureCard extends FeatureCard {}
|
||||
export * from "./feature-card.template";
|
||||
export * from "./feature-card.styles";
|
||||
export * from "./feature-card";
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
export { SiteBackgroundDesign } from "./background-design";
|
||||
export { SiteCardSection } from "./card-section";
|
||||
export { SiteColorSwatch } from "./color-swatch";
|
||||
export { SiteContentPlacement } from "./content-placement";
|
||||
export { SiteContentPlacementContainer } from "./content-placement-container";
|
||||
export { FastFrame } from "./fast-frame";
|
||||
export { SiteFeatureCard } from "./feature-card";
|
||||
export { SiteNavigation } from "./navigation";
|
||||
export { SiteNavigationItem } from "./navigation-item";
|
||||
export { SiteSectionHeader } from "./section-header";
|
||||
export { SiteSideNavigation } from "./side-navigation";
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { customElement } from "@microsoft/fast-element";
|
||||
import { NavigationItem } from "./navigation-item";
|
||||
import { NavigationItemStyles as styles } from "./navigation-item.styles";
|
||||
import { NavigationItemTemplate as template } from "./navigation-item.template";
|
||||
|
||||
@customElement({
|
||||
name: "site-navigation-item",
|
||||
template,
|
||||
styles,
|
||||
})
|
||||
export class SiteNavigationItem extends NavigationItem {}
|
||||
export * from "./navigation-item";
|
||||
export * from "./navigation-item.styles";
|
||||
export * from "./navigation-item.template";
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { neutralForegroundRest } from "@microsoft/fast-components";
|
||||
import { css } from "@microsoft/fast-element";
|
||||
import { display } from "@microsoft/fast-foundation";
|
||||
|
||||
export const NavigationItemStyles = css`
|
||||
${display("inline-flex")} :host {
|
||||
margin: 0 30px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
fast-anchor {
|
||||
background: transparent;
|
||||
color: currentColor;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
fast-anchor:focus-within,
|
||||
fast-anchor:hover {
|
||||
color: ${neutralForegroundRest};
|
||||
}
|
||||
|
||||
fast-anchor:not(:focus):hover::part(content)::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
fast-anchor:focus::part(content)::before {
|
||||
background-color: currentColor;
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { html, when } from "@microsoft/fast-element";
|
||||
import { NavigationItem } from "./navigation-item";
|
||||
|
||||
export const NavigationItemTemplate = html<NavigationItem>`
|
||||
<li>
|
||||
${when(
|
||||
x => x.href,
|
||||
html<NavigationItem>`
|
||||
<fast-anchor
|
||||
part="item-link"
|
||||
appearance="lightweight"
|
||||
href="${x => x.href}"
|
||||
>
|
||||
<slot></slot>
|
||||
</fast-anchor>
|
||||
`
|
||||
)}
|
||||
${when(
|
||||
x => !x.href,
|
||||
html<NavigationItem>`
|
||||
<slot></slot>
|
||||
`
|
||||
)}
|
||||
</li>
|
||||
`;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { attr, FASTElement } from "@microsoft/fast-element";
|
||||
|
||||
export class NavigationItem extends FASTElement {
|
||||
@attr
|
||||
href: string;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { customElement } from "@microsoft/fast-element";
|
||||
import { Navigation } from "./navigation";
|
||||
import { NavigationTemplate as template } from "./navigation.template";
|
||||
import { NavigationStyles as styles } from "./navigation.styles";
|
||||
|
||||
@customElement({
|
||||
name: "site-navigation",
|
||||
template,
|
||||
styles,
|
||||
})
|
||||
export class SiteNavigation extends Navigation {}
|
||||
export * from "./navigation.template";
|
||||
export * from "./navigation.styles";
|
||||
export * from "./navigation";
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
import { css } from "@microsoft/fast-element";
|
||||
import {
|
||||
fillColor,
|
||||
bodyFont,
|
||||
typeRampMinus1FontSize,
|
||||
neutralForegroundHint,
|
||||
typeRampPlus2FontSize,
|
||||
neutralForegroundRest,
|
||||
} from "@microsoft/fast-components";
|
||||
import { display } from "@microsoft/fast-foundation";
|
||||
|
||||
export const NavigationStyles = css`
|
||||
${display("grid")} :host {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
font-family: ${bodyFont};
|
||||
box-sizing: border-box;
|
||||
isolation: isolate;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-button svg {
|
||||
width: 35px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0 30px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.anchor-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:host(.in-footer) .nav-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host(.in-footer) ::slotted(fast-anchor),
|
||||
:host(.in-footer) ::slotted(p) {
|
||||
font-size: ${typeRampMinus1FontSize};
|
||||
color: ${neutralForegroundHint};
|
||||
}
|
||||
|
||||
:host(.in-footer) .end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
:host(.in-header) {
|
||||
align-items: center;
|
||||
height: var(--navbar-height);
|
||||
justify-content: space-between;
|
||||
grid-column: 1 / end;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
:host(.in-header)::before {
|
||||
background-color: ${fillColor};
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
:host(.in-header) .nav-list {
|
||||
margin: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
:host(.in-footer) ::slotted(site-navigation-item) {
|
||||
font-size: ${typeRampPlus2FontSize};
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
:host {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
:host(.in-header) .nav-list {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:host(.in-header) .end {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
:host(.in-header) ::slotted(site-navigation-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 899px) {
|
||||
:host {
|
||||
align-items: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
:host(.opened) {
|
||||
padding-right: calc(var(--width-offset) * 1px);
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
display: block;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: 20px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
:host(.in-header) .anchor-wrapper {
|
||||
background-color: ${fillColor};
|
||||
color: ${neutralForegroundRest};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: ${typeRampPlus2FontSize};
|
||||
height: calc(100vh - 94px);
|
||||
left: 0;
|
||||
opacity: 0.95;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
transform: translateY(-100%);
|
||||
transition: transform 300ms ease-in-out 0s, visibility 0s linear 300ms;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
:host(.debounce) .anchor-wrapper {
|
||||
transition-duration: 0s;
|
||||
}
|
||||
|
||||
:host(.opened) .anchor-wrapper {
|
||||
transform: translateY(0);
|
||||
transition-delay: 0s;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
:host(.in-header) .anchor-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:host(.in-header)::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import { html, when, elements, slotted } from "@microsoft/fast-element";
|
||||
import { endSlotTemplate, startSlotTemplate } from "@microsoft/fast-foundation";
|
||||
import CloseIcon from "svg/icon-close.svg";
|
||||
import MenuIcon from "svg/icon-menu.svg";
|
||||
import { Navigation } from "./navigation";
|
||||
|
||||
export const NavigationTemplate = html<Navigation>`
|
||||
<template
|
||||
class="site-navigation ${x => (x.opened ? "opened" : "")}
|
||||
${x => (x.debounce ? "debounce" : "")}"
|
||||
@focusout=${(x, c) => x.handleFocusOut(c.event as FocusEvent)}
|
||||
>
|
||||
${startSlotTemplate}
|
||||
<fast-button
|
||||
class="nav-button"
|
||||
part="nav-button"
|
||||
appearance="stealth"
|
||||
@click="${x => x.toggleOpened()}"
|
||||
>
|
||||
${when(
|
||||
x => !x.opened,
|
||||
html`
|
||||
${MenuIcon}
|
||||
`
|
||||
)}
|
||||
${when(
|
||||
x => x.opened,
|
||||
html`
|
||||
${CloseIcon}
|
||||
`
|
||||
)}
|
||||
</fast-button>
|
||||
<nav class="anchor-wrapper">
|
||||
<ul class="nav-list">
|
||||
<slot
|
||||
${slotted({ property: "slottedNavigationItems", filter: elements() })}
|
||||
></slot>
|
||||
</ul>
|
||||
${endSlotTemplate}
|
||||
</nav>
|
||||
</template>
|
||||
`;
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
import { FASTElement, observable, attr } from "@microsoft/fast-element";
|
||||
import { applyMixins, StartEnd } from "@microsoft/fast-foundation";
|
||||
import { NavigationItem } from "../navigation-item/navigation-item";
|
||||
|
||||
export class Navigation extends FASTElement {
|
||||
@attr({
|
||||
attribute: "menu",
|
||||
mode: "boolean",
|
||||
})
|
||||
menu: boolean;
|
||||
|
||||
@observable
|
||||
opened: boolean = false;
|
||||
|
||||
@observable
|
||||
debounce: boolean = true;
|
||||
|
||||
@observable
|
||||
slottedNavigationItems: Node[];
|
||||
|
||||
widthOffset: number;
|
||||
|
||||
mediaQueryList: MediaQueryList;
|
||||
|
||||
htmlElement: HTMLElement = document.body.parentElement as HTMLElement;
|
||||
|
||||
mqlListener = (e: MediaQueryListEvent): void => {
|
||||
this.debounce = true;
|
||||
|
||||
if (!e.matches) {
|
||||
this.opened = false;
|
||||
}
|
||||
};
|
||||
|
||||
openedChanged(): void {
|
||||
this.widthOffset = window.innerWidth - document.body.clientWidth;
|
||||
if (this.htmlElement) {
|
||||
this.htmlElement.style.setProperty("--width-offset", `${this.widthOffset}`);
|
||||
this.htmlElement.classList.toggle("menu-opened", this.opened);
|
||||
}
|
||||
}
|
||||
|
||||
menuChanged() {
|
||||
if (this.menu) {
|
||||
this.mediaQueryList = window.matchMedia("screen and (max-width: 900px)");
|
||||
this.mediaQueryList.addListener(this.mqlListener);
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
}
|
||||
|
||||
toggleOpened(force?: boolean): void {
|
||||
this.opened = force ? force : !this.opened;
|
||||
this.debounce = false;
|
||||
}
|
||||
|
||||
handleFocusOut = (e: FocusEvent): void => {
|
||||
let captured = e.relatedTarget as Node;
|
||||
let contains = this.contains(captured);
|
||||
|
||||
if (!captured) {
|
||||
captured = e.target as Node;
|
||||
contains = this.contains(captured);
|
||||
|
||||
if (!this.isSameNode(captured) && !contains && this.opened) {
|
||||
this.toggleOpened();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (contains || (!contains && !this.opened)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.toggleOpened();
|
||||
};
|
||||
}
|
||||
|
||||
/* eslint-disable-next-line */
|
||||
export interface Navigation extends StartEnd {}
|
||||
applyMixins(Navigation, StartEnd);
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { customElement } from "@microsoft/fast-element";
|
||||
import { SectionHeader } from "./section-header";
|
||||
import { SectionHeaderTemplate as template } from "./section-header.template";
|
||||
import { SectionHeaderStyles as styles } from "./section-header.styles";
|
||||
|
||||
@customElement({
|
||||
name: "site-section-header",
|
||||
template,
|
||||
styles,
|
||||
})
|
||||
export class SiteSectionHeader extends SectionHeader {}
|
||||
export * from "./section-header.template";
|
||||
export * from "./section-header.styles";
|
||||
export * from "./section-header";
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { bodyFont, neutralForegroundRest } from "@microsoft/fast-components";
|
||||
import { display } from "@microsoft/fast-foundation";
|
||||
import { css } from "@microsoft/fast-element";
|
||||
|
||||
export const SectionHeaderStyles = css`
|
||||
${display("flex")} :host {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-family: ${bodyFont};
|
||||
color: ${neutralForegroundRest};
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { html } from "@microsoft/fast-element";
|
||||
import { SectionHeader } from "./section-header";
|
||||
|
||||
export const SectionHeaderTemplate = html<SectionHeader>`
|
||||
<template>
|
||||
<slot name="badge"></slot>
|
||||
<slot></slot>
|
||||
<slot name="body"></slot>
|
||||
<slot name="action"></slot>
|
||||
</template>
|
||||
`;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import { FASTElement } from "@microsoft/fast-element";
|
||||
|
||||
export class SectionHeader extends FASTElement {}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { customElement } from "@microsoft/fast-element";
|
||||
import { SideNavigation } from "./side-navigation";
|
||||
import { SideNavigationTemplate as template } from "./side-navigation.template";
|
||||
import { SideNavigationStyles as styles } from "./side-navigation.styles";
|
||||
|
||||
@customElement({
|
||||
name: "site-side-navigation",
|
||||
template,
|
||||
styles,
|
||||
})
|
||||
export class SiteSideNavigation extends SideNavigation {}
|
||||
export * from "./side-navigation.template";
|
||||
export * from "./side-navigation.styles";
|
||||
export * from "./side-navigation";
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
import { css } from "@microsoft/fast-element";
|
||||
import { display } from "@microsoft/fast-foundation";
|
||||
import {
|
||||
accentFillHover,
|
||||
accentForegroundActive,
|
||||
foregroundOnAccentRest,
|
||||
bodyFont,
|
||||
designUnit,
|
||||
focusStrokeWidth,
|
||||
controlCornerRadius,
|
||||
} from "@microsoft/fast-components";
|
||||
|
||||
export const SideNavigationStyles = css`
|
||||
${display("flex")} :host {
|
||||
--design-unit-large: calc(${designUnit} * 5px);
|
||||
contain: content;
|
||||
font-family: ${bodyFont};
|
||||
}
|
||||
|
||||
.item-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0 var(--design-unit-large);
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: ${foregroundOnAccentRest};
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.list-item:hover .icon {
|
||||
fill: ${accentFillHover};
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
height: 36px;
|
||||
width: calc(${focusStrokeWidth} * 1px);
|
||||
background-color: ${foregroundOnAccentRest};
|
||||
border-radius: calc(${controlCornerRadius} * 1px);
|
||||
margin: calc(${designUnit} * 2px) var(--design-unit-large) 0;
|
||||
transition: 300ms ease-in-out;
|
||||
transition-property: background-color, height;
|
||||
}
|
||||
|
||||
.scroll-indicator-active {
|
||||
height: 52px;
|
||||
background-color: ${accentForegroundActive};
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import { html, repeat, when } from "@microsoft/fast-element";
|
||||
import { SideNavigation } from "./side-navigation";
|
||||
|
||||
export const SideNavigationTemplate = html<SideNavigation>`
|
||||
${when(
|
||||
x => x.category === "links",
|
||||
html<SideNavigation>`
|
||||
<ul class="item-list">
|
||||
${repeat(
|
||||
x => x.socialData,
|
||||
html`
|
||||
<li class="list-item">
|
||||
<fast-anchor
|
||||
href=${x => x.url}
|
||||
appearance="lightweight"
|
||||
aria-label=${x => x.actionText}
|
||||
>
|
||||
<span slot="start" :innerHTML=${x => x.icon}></span>
|
||||
</fast-anchor>
|
||||
</li>
|
||||
`
|
||||
)}
|
||||
</ul>
|
||||
`
|
||||
)}
|
||||
${when(
|
||||
x => x.category === "scroll",
|
||||
html<SideNavigation>`
|
||||
<div class="item-list">
|
||||
${repeat(
|
||||
x => x.sectionArray,
|
||||
html`
|
||||
<div
|
||||
class="list-item scroll-indicator ${(x, c) =>
|
||||
c.parent.sectionArray[c.index].id ===
|
||||
c.parent.currentSection
|
||||
? "scroll-indicator-active"
|
||||
: ""}"
|
||||
></div>
|
||||
`,
|
||||
{ positioning: true }
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
`;
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
import { attr, observable, FASTElement } from "@microsoft/fast-element";
|
||||
import {
|
||||
CommunityContentPlacementData,
|
||||
communityContentPlacementData,
|
||||
} from "../../data/community.data";
|
||||
|
||||
export interface sectionData {
|
||||
section: string;
|
||||
intersectionRatio: number;
|
||||
}
|
||||
|
||||
export class SideNavigation extends FASTElement {
|
||||
@attr
|
||||
public category: string;
|
||||
|
||||
@observable
|
||||
public currentSection: string = "hero";
|
||||
|
||||
@observable
|
||||
public sectionArray: HTMLElement[] = [];
|
||||
|
||||
@observable
|
||||
public sectionDataArray: sectionData[];
|
||||
|
||||
@observable
|
||||
public previousY: number = 0;
|
||||
|
||||
public socialData: CommunityContentPlacementData[] =
|
||||
communityContentPlacementData.filter(x => x.header !== "GitHub");
|
||||
|
||||
reduceFunc = (prev: sectionData, current: sectionData) =>
|
||||
prev.intersectionRatio > current.intersectionRatio ? prev : current;
|
||||
|
||||
scrollDirectionFunc = () => {
|
||||
const currentY: number = window.pageYOffset;
|
||||
const scrollArray: sectionData[] = this.sectionDataArray.concat();
|
||||
|
||||
if (currentY < this.previousY) {
|
||||
scrollArray.reverse();
|
||||
}
|
||||
|
||||
this.previousY = currentY;
|
||||
this.currentSection = scrollArray.reduce(this.reduceFunc).section;
|
||||
};
|
||||
|
||||
createObserver = (entries: IntersectionObserverEntry[]) => {
|
||||
entries.forEach(entry => {
|
||||
const intersectingSection: sectionData = this.sectionDataArray.find(
|
||||
({ section }) => section === entry.target.id
|
||||
) as sectionData;
|
||||
intersectingSection.intersectionRatio = entry.intersectionRatio;
|
||||
});
|
||||
|
||||
this.scrollDirectionFunc();
|
||||
};
|
||||
|
||||
loadScrollers() {
|
||||
this.sectionArray = Array.from(document.querySelectorAll("section[id]"));
|
||||
|
||||
this.sectionDataArray = this.sectionArray.map(x => {
|
||||
return { section: x.id, intersectionRatio: 0 };
|
||||
});
|
||||
|
||||
let observer = new IntersectionObserver(this.createObserver, {
|
||||
threshold: [0, 0.2, 0.4, 0.6, 0.8],
|
||||
});
|
||||
this.sectionArray.forEach(section => {
|
||||
observer.observe(section);
|
||||
});
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
if (this.getAttribute("category") === "scroll") {
|
||||
window.addEventListener("DOMContentLoaded", () => this.loadScrollers());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--fill-color);
|
||||
color: var(--neutral-foreground-rest);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--body-font);
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
line-height: var(--type-ramp-base-line-height);
|
||||
}
|
||||
|
||||
.body-provider {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.menu-opened {
|
||||
--width-offset: 0;
|
||||
padding-right: calc(var(--width-offset) * 1px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
.footer {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
/*
|
||||
font is reflected here so it gets
|
||||
picked up when used as a separate module
|
||||
*/
|
||||
font: 16px "aktiv-grotesk", "Segoe UI", Arial, Helvetica, sans-serif;
|
||||
grid-column: 2;
|
||||
min-height: var(--navbar-height);
|
||||
padding: 0 20px 84px;
|
||||
}
|
||||
|
||||
.footer .logo .icon {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
.footer site-navigation-item {
|
||||
color: var(--neutral-foreground-hint);
|
||||
font-size: var(--type-ramp-minus-1-font-size);
|
||||
margin: 0;
|
||||
margin-inline-end: 50px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
padding-top: 13px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
.footer {
|
||||
padding: 0 0 84px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
.header {
|
||||
align-items: center;
|
||||
color: var(--neutral-foreground-hint);
|
||||
display: grid;
|
||||
/*
|
||||
font is reflected here so it gets
|
||||
picked up when used as a separate module
|
||||
*/
|
||||
font: 16px "aktiv-grotesk", "Segoe UI", Arial, Helvetica, sans-serif;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.header .github-link span,
|
||||
.header .github-link::part(end) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header .github-link::part(end) {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.header .logo,
|
||||
.header .github-link {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
|
||||
.header .github-link {
|
||||
display: inline-block;
|
||||
margin-inline-start: 30px;
|
||||
}
|
||||
|
||||
.header .icon-github {
|
||||
height: 20px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.header .logo::part(content) {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header .github-link::part(control) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.header .github-link::part(content) {
|
||||
color: var(--neutral-foreground-rest);
|
||||
}
|
||||
|
||||
.header .github-link:not(:focus):hover::part(content)::before {
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
.header .github-link:hover::part(end) {
|
||||
color: var(--accent-foreground-rest);
|
||||
}
|
||||
|
||||
.header site-navigation-item,
|
||||
.header .github-link {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
.header .logo,
|
||||
.header .github-link {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.header site-navigation-item,
|
||||
.header .github-link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.header .github-link {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.header fast-anchor {
|
||||
font-size: var(--type-ramp-base-font-size);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 899px) {
|
||||
.header {
|
||||
box-shadow: 0 1.5px 1px rgba(0, 0, 0, 0.08), 0 1.6px 5px rgba(0, 0, 0, 0.15);
|
||||
display: block;
|
||||
padding: unset;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.header site-navigation-item::part(item-link),
|
||||
.header .github-link::part(content) {
|
||||
font-size: var(--type-ramp-plus-2-font-size);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.logo::part(content)::before {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.logo:focus-visible::part(content)::before {
|
||||
background: var(--neutral-foreground-rest);
|
||||
}
|
||||
|
||||
.logo::part(content)::before {
|
||||
top: calc(100% - (var(--stroke-width) * 1px));
|
||||
}
|
||||
|
||||
.logo svg {
|
||||
display: block;
|
||||
width: 45px;
|
||||
height: 40px;
|
||||
margin-inline-end: 10px;
|
||||
shape-rendering: geometricPrecision;
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
:root {
|
||||
--navbar-height: 94px;
|
||||
--section-height-spacing: 100px 0px;
|
||||
--section-height-spacing-mobile: 50px 0px;
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
.section-decoration {
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 58px;
|
||||
justify-content: space-between;
|
||||
margin: calc(var(--design-unit) * 5px) calc(50% - 1.5px);
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.section-decoration::before,
|
||||
.section-decoration::after {
|
||||
background-color: var(--accent-fill-rest);
|
||||
content: '';
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.section-decoration::before {
|
||||
border-radius: 50%;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.section-decoration::after {
|
||||
border-radius: calc(var(--corner-radius) * 1px);
|
||||
height: calc(var(--type-ramp-plus-5-font-size) + var(--design-unit) * 1px);
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
.side-nav-container {
|
||||
display: none;
|
||||
height: min-content;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@media screen and (min-height: 390px) and (min-width: 1000px) {
|
||||
.side-nav-container {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
.site-wrapper {
|
||||
--wrapper-max-width: 100%;
|
||||
--wrapper-gutter: 0;
|
||||
display: grid;
|
||||
grid-auto-rows: minmax(0, auto);
|
||||
grid-template-columns:
|
||||
minmax(var(--wrapper-gutter), 1fr)
|
||||
minmax(0, var(--wrapper-max-width))
|
||||
minmax(var(--wrapper-gutter), 1fr);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
.site-wrapper {
|
||||
--wrapper-gutter: 5vw;
|
||||
--wrapper-max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1331px) {
|
||||
.site-wrapper {
|
||||
--wrapper-max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
@import "./root.css";
|
||||
@import "./base.css";
|
||||
@import "./site-wrapper.css";
|
||||
@import "./side-nav-container.css";
|
||||
@import "./header.css";
|
||||
@import "./logo.css";
|
||||
@import "./section-decoration.css";
|
||||
@import "./footer.css";
|
||||
|
||||
.section-badge {
|
||||
--badge-fill-primary: var(--neutral-fill-focus);
|
||||
--badge-color-primary: var(--accent-foreground-rest);
|
||||
margin-bottom: calc(var(--base-height-multiplier) * 1px);
|
||||
}
|
||||
|
||||
.section-badge::part(control) {
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.12em;
|
||||
padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 4px);
|
||||
}
|
||||
|
||||
.section,
|
||||
.fast-frame-section {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
color: var(--neutral-foreground-rest);
|
||||
display: flex;
|
||||
grid-column: span 2;
|
||||
justify-content: center;
|
||||
margin: var(--section-height-spacing-mobile);
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.fast-frame-section {
|
||||
min-height: 85vmin;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
.section,
|
||||
.fast-frame-section {
|
||||
grid-column: 2;
|
||||
margin: var(--section-height-spacing);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.community-section {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fast-frame-header {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-heading-hero,
|
||||
.section-heading,
|
||||
.section-paragraph {
|
||||
margin: 0 0 calc(var(--base-height-multiplier) * 2px);
|
||||
}
|
||||
|
||||
.section-heading-hero {
|
||||
font-size: var(--type-ramp-plus-6-font-size);
|
||||
line-height: var(--type-ramp-plus-6-line-height);
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: var(--type-ramp-plus-5-font-size);
|
||||
line-height: var(--type-ramp-plus-5-line-height);
|
||||
}
|
||||
|
||||
.section-paragraph-hero {
|
||||
font-size: var(--type-ramp-plus-2-font-size);
|
||||
line-height: var(--type-ramp-plus-2-line-height);
|
||||
margin: 0 0 calc(var(--base-height-multiplier) * 4px);
|
||||
}
|
||||
|
||||
.section-paragraph {
|
||||
font-size: var(--type-ramp-plus-1-font-size);
|
||||
line-height: var(--type-ramp-plus-1-line-height);
|
||||
}
|
||||
|
||||
.footer-divider {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.community-subsection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.community-subsection h3 {
|
||||
min-width: 270px;
|
||||
text-align: center;
|
||||
font-size: var(--type-ramp-plus-2-font-size);
|
||||
}
|
||||
|
||||
.community-subsection .description {
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.community-subsection a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid white;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.community-subsection a:hover {
|
||||
border-bottom-color: var(--accent-foreground-rest);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 899px) {
|
||||
.hero-section {
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
.section-heading-hero,
|
||||
.section-heading {
|
||||
font-size: var(--type-ramp-plus-4-font-size);
|
||||
line-height: var(--type-ramp-plus-4-line-height);
|
||||
}
|
||||
|
||||
site-navigation .anchor-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100vh - 94px);
|
||||
background-color: var(--fill-color);
|
||||
opacity: 0.95;
|
||||
transform: translateY(-100%);
|
||||
transition:
|
||||
transform 300ms ease-in-out 0s,
|
||||
visibility 0s linear 300ms;
|
||||
visibility: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
site-navigation .anchor-wrapper li {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
site-navigation .anchor-wrapper ::part(content) {
|
||||
font-size:var(--type-ramp-plus-2-font-size);
|
||||
color: var(--neutral-foreground-rest);
|
||||
}
|
||||
|
||||
.site-navigation.debounce .anchor-wrapper {
|
||||
transition-duration: 0s;
|
||||
}
|
||||
|
||||
site-navigation.opened .anchor-wrapper {
|
||||
transform: translateY(0);
|
||||
transition-delay: 0s;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import DiscordIcon from "svg/icon-discord.svg";
|
||||
import GithubIcon from "svg/icon-github.svg";
|
||||
import TwitterIcon from "svg/icon-twitter.svg";
|
||||
import MediumIcon from "svg/icon-medium.svg";
|
||||
import { FeatureLink } from "./feature.data";
|
||||
|
||||
export interface CommunityContentPlacementData extends FeatureLink {
|
||||
body?: string;
|
||||
header?: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export const communityContentPlacementData: CommunityContentPlacementData[] = [
|
||||
{
|
||||
url: "https://discord.gg/FcSNfg4",
|
||||
anchorText: "Join the Discord Chat",
|
||||
body: "Join our active community on Discord. Follow the latest updates and contributions, ask questions, give feedback, or keep up on our reading list.",
|
||||
header: "Discord",
|
||||
icon: DiscordIcon,
|
||||
},
|
||||
{
|
||||
url: "https://twitter.com/FAST_UI",
|
||||
anchorText: "Follow us on Twitter",
|
||||
body: "Follow along as we share out the latest happenings on Twitter. You will find important updates, announcements, and sneak peeks.",
|
||||
header: "Twitter",
|
||||
icon: TwitterIcon,
|
||||
},
|
||||
{
|
||||
url: "https://github.com/microsoft/fast",
|
||||
anchorText: "Get Started on GitHub",
|
||||
body: "Explore the FAST repository on GitHub and try out our components, utilities, and tools. Or, mix-and-match with your own solutions.",
|
||||
header: "GitHub",
|
||||
icon: GithubIcon,
|
||||
},
|
||||
{
|
||||
url: "https://medium.com/fast-design",
|
||||
anchorText: "Read more on Medium",
|
||||
header: "Medium",
|
||||
icon: MediumIcon,
|
||||
},
|
||||
];
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import FastIcon from "svg/icon-brand.svg";
|
||||
import FluentUIIcon from "svg/icon-fluentui.svg";
|
||||
import FuriousIcon from "svg/icon-furious.svg";
|
||||
import VSCodeIcon from "svg/icon-vscode.svg";
|
||||
|
||||
export interface DesignSystemData {
|
||||
icon: string;
|
||||
url: string;
|
||||
anchorText: string;
|
||||
}
|
||||
|
||||
export const designSystemData = [
|
||||
{
|
||||
url: "https://www.fast.design/docs/design-systems/fast-frame",
|
||||
anchorText: "FAST Frame",
|
||||
icon: FastIcon,
|
||||
},
|
||||
{
|
||||
url: "https://docs.microsoft.com/en-us/fluent-ui/web-components/",
|
||||
anchorText: "Fluent UI",
|
||||
icon: FluentUIIcon,
|
||||
},
|
||||
{
|
||||
url: "https://backlight.dev/blog/introducing-furious-a-fast-design-system/",
|
||||
anchorText: "Furious",
|
||||
icon: FuriousIcon,
|
||||
},
|
||||
{
|
||||
url: "https://github.com/microsoft/vscode-webview-ui-toolkit",
|
||||
anchorText: "VS Code",
|
||||
icon: VSCodeIcon,
|
||||
},
|
||||
];
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
export interface FeatureLink {
|
||||
anchorText: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface FeatureCardData {
|
||||
header: string;
|
||||
body: string;
|
||||
links?: FeatureLink[];
|
||||
}
|
||||
|
||||
export const featureCardData: FeatureCardData[] = [
|
||||
{
|
||||
header: "Composition",
|
||||
body: "Create new component compositions by nesting, styling foundation components, or extending existing components. The combinations are endless.",
|
||||
links: [
|
||||
{
|
||||
anchorText: "Get started",
|
||||
url: "/docs/components/getting-started",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Design Systems",
|
||||
body: "Use FAST, Microsoft's Fluent, or customize design system properties to make it your own. You can also create your own design system to use with FAST foundation components.",
|
||||
links: [
|
||||
{
|
||||
anchorText: "Learn more",
|
||||
url: "/docs/design-systems/overview",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Technology",
|
||||
body: "FAST web components are built on the core technologies of the web to work in any scenario. Use them as is or with your favorite framework.",
|
||||
links: [
|
||||
{
|
||||
anchorText: "View example integrations",
|
||||
url: "/docs/integrations/introduction",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Web Standards",
|
||||
body: "All FAST components follow WCAG 2.1, are W3C spec-compliant and use the W3C interaction models when available.",
|
||||
links: [
|
||||
{
|
||||
anchorText: "Visit WCAG",
|
||||
url: "https://www.w3.org/WAI/standards-guidelines/wcag/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Animation",
|
||||
body: "Design sophisticated animation sequences with the animation library, an interface for the Web Animations API.",
|
||||
links: [
|
||||
{
|
||||
anchorText: "View documentation",
|
||||
url: "/docs/api/fast-animation",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Colors",
|
||||
body: "Create color palettes, extract colors from images, and handle other color operations using our color library.",
|
||||
links: [
|
||||
{
|
||||
anchorText: "View documentation",
|
||||
url: "/docs/api/fast-colors",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
import { FeatureLink } from "./feature.data";
|
||||
|
||||
export interface FrameworkContentPlacementData {
|
||||
body?: string;
|
||||
header?: string;
|
||||
headerSubscript?: string;
|
||||
links?: FeatureLink[];
|
||||
}
|
||||
|
||||
export const frameworkContentPlacementData: FrameworkContentPlacementData[] = [
|
||||
{
|
||||
body: "Angular works great with FAST due to its binding system's support for setting both attributes and properties on custom elements.",
|
||||
header: "Angular",
|
||||
headerSubscript: "8.2.14",
|
||||
links: [
|
||||
{
|
||||
anchorText: "Read Angular docs",
|
||||
url: "/docs/integrations/angular",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
body: "FAST works naturally with ASP.NET server-side development. Start building immediately by adding a script tag and using the custom HTML elements.",
|
||||
header: "ASP.NET",
|
||||
links: [
|
||||
{
|
||||
anchorText: "Read ASP.NET docs",
|
||||
url: "/docs/integrations/aspnet",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
body: "FAST works flawlessly with both Aurelia 1 and Aurelia 2, with full integration into the binding engine and component model.",
|
||||
header: "Aurelia",
|
||||
headerSubscript: "1 & 2",
|
||||
links: [
|
||||
{
|
||||
anchorText: "Read Aurelia docs",
|
||||
url: "/docs/integrations/aurelia",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
body: "FAST integrates nicely with Blazor, a feature of ASP.NET which lets you build interactive web UIs using C# instead of JavaScript.",
|
||||
header: "Blazor",
|
||||
links: [
|
||||
{
|
||||
anchorText: "Read Blazor docs",
|
||||
url: "/docs/integrations/blazor",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
body: "While we are eagerly awaiting React to fully support custom elements, we provide improved integration support with our fast-react-wrapper.",
|
||||
header: "React",
|
||||
links: [
|
||||
{
|
||||
anchorText: "Read React docs",
|
||||
url: "/docs/integrations/react",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
body: "Vue fully supports custom elements and by default passes all data to them as attributes. The framework also provides a special syntax to bind properties.",
|
||||
header: "Vue",
|
||||
links: [
|
||||
{
|
||||
anchorText: "Read Vue docs",
|
||||
url: "/docs/integrations/vue",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
// These raw data values are converted from the original Illustrator-exported
|
||||
// SVG using Snap.svg's `Snap.path.toAbsolute()` function
|
||||
// http://snapsvg.io/docs/#Snap.path.toAbsolute
|
||||
|
||||
export interface Coords {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export interface Dimensions {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
interface ViewBox extends Dimensions, Coords {}
|
||||
|
||||
export const waveData: {
|
||||
viewbox: ViewBox;
|
||||
layers: {
|
||||
[key: string]: {
|
||||
color: [number, number, number];
|
||||
from: string;
|
||||
to: string;
|
||||
}[];
|
||||
};
|
||||
} = {
|
||||
viewbox: { x: 0, y: 0, width: 1440, height: 604 },
|
||||
layers: {
|
||||
bg: [
|
||||
{
|
||||
color: [90, 193, 204],
|
||||
from:
|
||||
`M-103.7,142.5` +
|
||||
`C-103.7,142.5,375.6,625,752.3,292.5` +
|
||||
`C1124.5,-36,1268.8,95,1711.3,537.5`,
|
||||
to:
|
||||
`M-103.7,139` +
|
||||
`C-103.7,139,434.2,731.9,812.3,401` +
|
||||
`C1185.9,73.9,1268.8,91.5,1711.3,534`,
|
||||
},
|
||||
{
|
||||
color: [233, 77, 113],
|
||||
from:
|
||||
`M-43.7,352.5` +
|
||||
`C-43.7,352.5,282.3,-80.7,631.8,158` +
|
||||
`C975.9,393,1293.3,648.5,1711.3,284.5`,
|
||||
to:
|
||||
`M-45.1,349` +
|
||||
`C-45.1,349,319.7,2.7,684.9,115` +
|
||||
`C1082.9,237.4,1057.9,775,1709.9,281`,
|
||||
},
|
||||
],
|
||||
waves: [
|
||||
{
|
||||
color: [252, 80, 60],
|
||||
from:
|
||||
`M-64.5,11.6` +
|
||||
`C-64.5,11.6,36,219.1,217.3,359.5` +
|
||||
`C312.9,433.6,430.9,489,568.5,485.4` +
|
||||
`C728.9,481.3,902.9,387.1,1065,297.1` +
|
||||
`C1305.6,163.5,1520,39.3,1624.6,232.6`,
|
||||
to:
|
||||
`M-62.6,-36.5` +
|
||||
`C-62.6,-36.5,50.3,125.6,216.4,274.7` +
|
||||
`C360.4,403.9,544.4,523.3,729.4,518.5` +
|
||||
`C905.4,514,1066.8,394.7,1207.2,290.8` +
|
||||
`C1384.7,159.5,1528.7,52.8,1626.5,233.4`,
|
||||
},
|
||||
{
|
||||
color: [185, 40, 97],
|
||||
from:
|
||||
`M-61.6,456` +
|
||||
`C-61.6,456,88.8,-206.9,445.7,254.4` +
|
||||
`C633,496.6,732.8,402.8,834.7,309.2` +
|
||||
`C926.9,224.5,1020.9,139.9,1183,304.5` +
|
||||
`C1455.2,580.7,1408,225.3,1619.6,440`,
|
||||
to:
|
||||
`M-134.6,356.5` +
|
||||
`C-134.6,356.5,-50.4,18.1,442.4,330.5` +
|
||||
`C570.3,411.6,671.9,314.1,788.5,246.4` +
|
||||
`C896.2,183.9,1016.6,146.8,1182.1,299.5` +
|
||||
`C1467.1,562.5,1407.1,220.3,1618.7,435`,
|
||||
},
|
||||
{
|
||||
color: [252, 80, 60],
|
||||
from:
|
||||
`M-60.5,424.6` +
|
||||
`C-60.5,424.6,153,24,446.8,252.6` +
|
||||
`C667.9,424.6,608.4,-21.9,867.4,278.9` +
|
||||
`C1175.5,636.7,1120.5,62,1439.2,385.4` +
|
||||
`C1559.9,507.9,1664.5,323.2,1664.5,323.2`,
|
||||
to:
|
||||
`M-62.6,421.4` +
|
||||
`C-62.6,421.4,48.5,40.3,399.4,164.5` +
|
||||
`C560.4,221.5,563.4,107.5,721.4,253.5` +
|
||||
`C1068.2,573.9,1109.7,-95.9,1428.4,227.5` +
|
||||
`C1549.1,350,1662.4,320,1662.4,320`,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import {
|
||||
allComponents,
|
||||
baseLayerLuminance,
|
||||
provideFASTDesignSystem,
|
||||
} from "@microsoft/fast-components";
|
||||
import "./css/style.css";
|
||||
|
||||
provideFASTDesignSystem().register(allComponents);
|
||||
|
||||
baseLayerLuminance.setValueFor(document.body, 0.09);
|
||||
|
||||
export * from "./components";
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
export const siteBreakpoints: string[] = [
|
||||
"0",
|
||||
"700px",
|
||||
"900px",
|
||||
"999px",
|
||||
"1000px",
|
||||
"1200px",
|
||||
];
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
До Ширина: | Высота: | Размер: 26 KiB |
|
|
@ -1,39 +0,0 @@
|
|||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="375.000000pt" height="323.000000pt" viewBox="0 0 375.000000 323.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,323.000000) scale(0.100000,-0.100000)"
|
||||
fill="#FFFFFF" stroke="none">
|
||||
<path d="M2130 3221 c0 -5 -15 -12 -34 -15 -57 -11 -151 -64 -200 -114 -97
|
||||
-97 -135 -232 -102 -359 19 -76 48 -124 112 -184 62 -57 118 -90 237 -139 142
|
||||
-58 195 -87 242 -135 49 -48 65 -92 65 -175 -1 -106 -69 -195 -175 -225 -115
|
||||
-34 -303 -12 -424 50 -38 19 -53 22 -56 13 -11 -30 -45 -144 -45 -150 0 -3 24
|
||||
-18 53 -31 177 -83 450 -87 614 -10 123 59 214 180 231 310 32 233 -84 389
|
||||
-373 503 -121 48 -191 88 -234 135 -113 123 -59 303 104 350 87 26 228 17 315
|
||||
-19 36 -15 69 -28 74 -29 8 -2 56 125 56 150 0 15 -54 40 -122 55 -27 6 -48
|
||||
15 -48 20 0 4 -65 8 -145 8 -80 0 -145 -4 -145 -9z"/>
|
||||
<path d="M3136 3222 c-3 -5 -54 -12 -113 -15 -59 -4 -125 -10 -145 -13 l-38
|
||||
-7 0 -738 0 -739 95 0 95 0 0 296 0 297 83 -7 c277 -22 517 87 606 276 30 63
|
||||
31 69 31 211 0 80 -3 147 -7 149 -5 2 -19 24 -32 50 -31 62 -102 133 -164 164
|
||||
-63 32 -187 64 -249 64 -30 0 -47 4 -43 10 4 6 -16 10 -54 10 -33 0 -62 -4
|
||||
-65 -8z m231 -186 c71 -22 132 -71 162 -131 22 -43 26 -62 25 -140 0 -109 -23
|
||||
-165 -92 -225 -64 -57 -149 -82 -278 -82 -160 -1 -144 -35 -144 302 l0 289 48
|
||||
4 c85 8 226 -1 279 -17z"/>
|
||||
<path d="M652 2465 c-139 -407 -252 -744 -252 -748 0 -4 46 -6 102 -5 l102 3
|
||||
75 232 76 233 262 0 261 0 79 -235 78 -235 107 0 107 0 -100 293 c-55 160
|
||||
-170 498 -256 750 l-156 458 -117 -3 -117 -2 -251 -741z m480 181 c51 -153 94
|
||||
-285 96 -292 3 -12 -36 -14 -212 -14 -119 0 -216 1 -216 3 0 1 35 106 79 232
|
||||
43 127 91 280 107 340 l28 110 13 -50 c7 -27 55 -176 105 -329z"/>
|
||||
<path d="M390 780 l0 -730 95 0 95 0 2 564 3 564 403 -564 403 -564 95 0 94 0
|
||||
-2 728 -3 727 -92 3 -93 3 -2 -569 -3 -569 -405 568 -405 568 -92 1 -93 0 0
|
||||
-730z"/>
|
||||
<path d="M1770 780 l0 -730 395 0 395 0 0 75 0 75 -300 0 -300 0 0 255 0 255
|
||||
265 0 265 0 0 75 0 75 -265 0 -265 0 0 245 0 245 300 0 301 0 -3 78 -3 77
|
||||
-392 3 -393 2 0 -730z"/>
|
||||
<path d="M2720 1430 l0 -80 210 0 210 0 0 -650 0 -650 95 0 95 0 0 650 0 650
|
||||
210 0 210 0 0 80 0 80 -515 0 -515 0 0 -80z"/>
|
||||
<path d="M76 235 c-53 -28 -76 -62 -76 -111 0 -25 6 -51 13 -58 6 -7 21 -25
|
||||
32 -39 18 -24 26 -27 84 -27 58 0 67 3 92 29 56 59 47 151 -19 196 -42 28 -84
|
||||
32 -126 10z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 2.3 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-brand-fast" width="59" height="30" viewBox="53 0 59 30" fill="none">
|
||||
<path d="M54.162 26.754h1.1c.754 0 1.225-.338 1.35-1.106l1.477-8.081h3.738c.754 0 1.225-.338 1.351-1.106l.126-.707c.157-.86-.283-1.321-1.131-1.321h-3.519l1.068-6.053h4.712c.754 0 1.226-.338 1.351-1.106l.126-.707c.157-.86-.283-1.321-1.131-1.321h-6.974c-.754 0-1.225.338-1.35 1.106L53.03 25.433c-.157.86.283 1.321 1.131 1.321zM77.598 6.475c0-.768-.503-1.23-1.288-1.23h-2.262c-.722 0-1.194.339-1.445.984l-7.037 19.112c-.314.83.095 1.413 1.006 1.413h1.005c.722 0 1.194-.338 1.413-1.014l1.288-3.78h4.053l-.063 3.565c0 .83.408 1.23 1.225 1.23h1.1c.816 0 1.256-.4 1.256-1.23l-.251-19.05zM71.284 19.01l3.267-9.556-.157 9.556h-3.11zM95.569 11.821l.44-2.396C96.606 6.229 94.124 5 91.422 5h-.063c-3.33 0-5.623 1.229-6.22 4.425l-.502 2.826c-.346 1.905.88 3.257 2.576 4.302l2.293 1.413c.974.584 1.257 1.199 1.037 2.366l-.315 1.69c-.22 1.322-1.13 1.905-2.23 1.905s-1.759-.583-1.54-1.905l.347-1.935c.157-.86-.283-1.322-1.131-1.322h-1.037c-.754 0-1.257.37-1.382 1.107l-.471 2.642C82.187 25.864 84.417 27 87.433 27h.063c3.644 0 5.623-1.168 6.22-4.486l.565-3.103c.408-2.182-.66-3.104-2.607-4.302l-2.325-1.414c-.942-.583-1.162-1.198-.974-2.304l.283-1.475c.22-1.352 1.1-1.843 2.167-1.843 1.069 0 1.76.491 1.54 1.843l-.314 1.69c-.157.86.282 1.321 1.13 1.321h1.037c.754 0 1.225-.338 1.35-1.106zM110.838 5.246h-8.451c-.753 0-1.225.338-1.35 1.106l-.126.707c-.157.86.283 1.32 1.131 1.32h2.293l-3.047 17.054c-.157.86.283 1.321 1.131 1.321h1.099c.754 0 1.225-.338 1.351-1.106l3.11-17.268h2.513c.754 0 1.225-.338 1.351-1.106l.126-.707c.157-.86-.283-1.321-1.131-1.321z" fill="#F9F9F9"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.7 KiB |
|
|
@ -1,7 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-brand" viewBox="0 0 140 123">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M124.787 64.442l-4.98-.636c-.885-.113-1.691.514-1.839 1.393A40.326 40.326 0 0155.29 91.674c-2.462-1.7-1.57-5.286 1.32-6.06l21.06-5.643a3.318 3.318 0 10-1.717-6.41l-27.098 7.261c-.07.019-.14.036-.211.052l-12.779 3.424a.897.897 0 01-.083.027 3.318 3.318 0 101.717 6.41l.29-.078c1.99-.533 4.09.151 5.523 1.63a48.582 48.582 0 0038.695 14.632 48.577 48.577 0 0044.151-40.674c.142-.88-.486-1.69-1.371-1.803zM23.479 60.166a5.439 5.439 0 00-.533.115l-10.423 2.793a3.318 3.318 0 11-1.718-6.41l15.957-4.276c2.048-.548 3.547-2.27 4.003-4.34a48.57 48.57 0 0124.618-32.436 48.577 48.577 0 0159.093 10.57c.594.666.499 1.686-.187 2.257l-3.857 3.213-1.237 1.03c-.003.002-.006.002-.009 0a40.323 40.323 0 00-68.139 10.145c-1.16 2.754 1.449 5.345 4.336 4.572l2.222-.596a3.318 3.318 0 011.718 6.41l-7.667 2.054a5.35 5.35 0 00-.515.167l-17.662 4.732z" fill="#FF4387"/>
|
||||
<rect x="69.904" y="56.905" width="6.636" height="16.454" rx="3.318" transform="rotate(75 69.904 56.905)" fill="#FF4387"/>
|
||||
<rect x="48.333" y="62.703" width="6.636" height="49.768" rx="3.318" transform="rotate(75 48.333 62.703)" fill="#FF4387"/>
|
||||
<rect x="94.364" y="50.565" width="6.636" height="19.829" rx="3.318" transform="rotate(75 94.364 50.565)" fill="#FF4387"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M97.725 51.927c3.022 11.276 14.612 17.967 25.888 14.946 11.275-3.022 17.967-14.612 14.946-25.887-3.022-11.276-14.612-17.968-25.888-14.946-11.275 3.021-17.967 14.611-14.946 25.887zm20.425 9.448c8.429 0 15.262-6.684 15.262-14.93 0-8.246-6.833-14.93-15.262-14.93s-15.262 6.684-15.262 14.93c0 8.246 6.833 14.93 15.262 14.93z" fill="#FF4387"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.7 KiB |
|
|
@ -1,4 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-close" width="21" height="21" viewBox="0 0 21 19">
|
||||
<rect x="3" width="25" height="3" rx="1.5" transform="rotate(45 3 0)"/>
|
||||
<rect x="1" y="18" width="25" height="3" rx="1.5" transform="rotate(-45 1 18)"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 276 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-context" width="12" height="3" viewBox="0 0 12 3">
|
||||
<path d="M6 0C6.70595 0 7.27823 0.671573 7.27823 1.5C7.27823 2.32843 6.70595 3 6 3C5.29405 3 4.72177 2.32843 4.72177 1.5C4.72177 0.671573 5.29405 0 6 0ZM10.7218 0C11.4277 0 12 0.671573 12 1.5C12 2.32843 11.4277 3 10.7218 3C10.0158 3 9.44354 2.32843 9.44354 1.5C9.44354 0.671573 10.0158 0 10.7218 0ZM1.27823 0C1.98418 0 2.55646 0.671573 2.55646 1.5C2.55646 2.32843 1.98418 3 1.27823 3C0.572284 3 0 2.32843 0 1.5C0 0.671573 0.572284 0 1.27823 0Z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 563 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-contrast" width="20" height="20" viewBox="0 0 20 20">
|
||||
<path d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM10 18.5V1.5C14.6944 1.5 18.5 5.30558 18.5 10C18.5 14.6944 14.6944 18.5 10 18.5Z" />
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 326 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-discord" viewBox="0 0 20 23" >
|
||||
<path d="M12.6367 10.6302C12.6367 11.3019 12.1469 11.8525 11.5265 11.8525C10.917 11.8525 10.4163 11.3019 10.4163 10.6302C10.4163 9.95851 10.9061 9.40793 11.5265 9.40793C12.1469 9.40793 12.6367 9.95851 12.6367 10.6302ZM7.55374 9.40793C6.93333 9.40793 6.44354 9.95851 6.44354 10.6302C6.44354 11.3019 6.94422 11.8525 7.55374 11.8525C8.17415 11.8525 8.66395 11.3019 8.66395 10.6302C8.67483 9.95851 8.17415 9.40793 7.55374 9.40793ZM19.0476 2.43758V22.1924C16.3055 19.7409 17.1825 20.5524 13.9973 17.5565L14.5741 19.5937H2.23129C1.00136 19.5937 0 18.5806 0 17.3253V2.43758C0 1.18226 1.00136 0.169189 2.23129 0.169189H16.8163C18.0463 0.169189 19.0476 1.18226 19.0476 2.43758ZM15.9456 12.8766C15.9456 9.33085 14.3782 6.45682 14.3782 6.45682C12.8109 5.26757 11.3197 5.3006 11.3197 5.3006L11.1673 5.47679C13.0177 6.04939 13.8775 6.87526 13.8775 6.87526C11.292 5.44164 8.25493 5.44139 5.74694 6.55592C5.34422 6.74312 5.10476 6.87526 5.10476 6.87526C5.10476 6.87526 6.00816 6.00534 7.96735 5.43274L7.8585 5.3006C7.8585 5.3006 6.36735 5.26757 4.8 6.45682C4.8 6.45682 3.23265 9.33085 3.23265 12.8766C3.23265 12.8766 4.14694 14.4733 6.55238 14.5504C6.55238 14.5504 6.9551 14.0548 7.28163 13.6364C5.89932 13.218 5.37687 12.337 5.37687 12.337C5.53699 12.4504 5.80102 12.5974 5.82313 12.6123C7.66029 13.6532 10.2699 13.9942 12.615 12.9977C12.9959 12.8546 13.4204 12.6453 13.8667 12.348C13.8667 12.348 13.3224 13.251 11.8966 13.6584C12.2231 14.0769 12.615 14.5504 12.615 14.5504C15.0204 14.4733 15.9456 12.8766 15.9456 12.8766Z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.6 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-download" width="11" height="15" viewBox="0 0 11 15">
|
||||
<path d="M10.4309 13.8721C10.7451 13.872 11 14.1238 11 14.4345C11 14.7452 10.7454 14.9971 10.4312 14.9972L0.56913 15C0.254899 15.0001 0 14.7483 0 14.4376C0 14.127 0.25457 13.875 0.568801 13.8749L10.4309 13.8721ZM5.42279 0.0051353L5.5 0C5.78804 0 6.0261 0.211628 6.06377 0.486201L6.06897 0.562533L6.06821 10.8269L8.89165 8.03648C9.09367 7.83679 9.40976 7.81866 9.63248 7.98209L9.69629 8.03656C9.89827 8.23629 9.9166 8.54881 9.7513 8.76901L9.69621 8.8321L5.90489 12.5798C5.70299 12.7794 5.38711 12.7976 5.16438 12.6344L5.10057 12.58L1.30485 8.83233C1.08251 8.6128 1.08226 8.25662 1.3043 8.03679C1.50616 7.83694 1.82224 7.81857 2.04509 7.98182L2.10894 8.03625L4.93028 10.8216L4.93103 0.562533C4.93103 0.277745 5.14508 0.0423843 5.42279 0.0051353L5.5 0L5.42279 0.0051353Z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 890 B |
|
|
@ -1,12 +0,0 @@
|
|||
<svg width="96" height="96" viewBox="0 0 96 96" fill="white" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2723_4261)">
|
||||
<path d="M87.9761 74.5533C88.6592 73.542 89.3577 72.6261 88.4048 71.6731C87.5215 70.7894 86.75 71.3984 85.8391 71.8313C80.5831 74.4168 74.7882 75.7169 68.9314 75.6245C52.8061 75.6245 36.0044 64.076 35.9959 47.7612C31.7259 52.9291 29.4027 59.4303 29.4304 66.1339C29.4304 81.4994 41.2686 94.0001 55.8193 94.0001C60.1144 93.9235 64.3611 93.079 68.3586 91.5065C76.2905 87.7028 83.0629 81.8502 87.9761 74.5533Z" fill="black"/>
|
||||
<path d="M40.8894 38.3735C42.947 36.819 45.4554 35.9781 48.0342 35.9784C49.2664 35.977 50.4908 36.1732 51.6609 36.5595C46.6917 30.5681 37.9429 26.5834 28 26.5834C12.5776 26.5834 0.02734 36.1702 0.00049 47.9617L0 48.0156C0 69.7631 16.4404 94.2115 44.9617 95.9055C33.5405 91.3227 25.4304 79.7217 25.4304 66.1339C25.3806 60.5638 26.7793 55.0764 29.4894 50.2097C32.1995 45.3431 36.1279 41.2644 40.8894 38.3735Z" fill="black"/>
|
||||
<path d="M47.7966 0C23.5417 0 8.70947 15.8708 2.86548 32.2678C8.72559 26.3695 17.8061 22.5834 28 22.5834C45.6731 22.5834 60 33.9628 60 48H59.9883C59.9722 50.816 58.9805 53.5393 57.1821 55.7063C56.4224 56.5769 55.8843 57.0818 55.8843 57.9127C55.8843 59.6405 58.9307 63.9265 73.0317 63.9265C82.7991 63.9265 96 56.3182 96 40.8132C96 23.0408 79.2988 0 47.7966 0Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2723_4261">
|
||||
<rect width="96" height="96" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.4 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="47" height="82" viewBox="0 0 47 82" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.1562 1.06277L1.84846 12.7679C0.704757 13.4271 0 14.6468 0 15.9669V67.0331C0 68.3532 0.704757 69.5729 1.84846 70.2321L21.2319 81.4045C22.4627 82.1139 24 81.2256 24 79.805V55.3333L45.225 43.0995C46.4573 42.3892 46.4573 40.6108 45.225 39.9005L24 27.6667L45.225 15.4328C46.4573 14.7225 46.4573 12.9441 45.225 12.2339L25.8438 1.06277C24.7026 0.40498 23.2974 0.404979 22.1562 1.06277Z" fill="white"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 511 B |
|
|
@ -1,57 +0,0 @@
|
|||
<svg viewBox="0 0 503.75934 190.7" width="503.75934" height="190.7">
|
||||
<g transform="translate(-4.240654,-169.6)" fill="currentColor">
|
||||
<path
|
||||
d="m 256.1,169.6 c 1.4,0.3 2.8,0.6 4.2,0.7 3,0.2 6,0.1 9,0.3 7.7,0.6 15.3,1.9 22.5,4.6 -0.9,2.5 -0.9,2.7 1,3.9 2.6,1.7 5.4,3.1 8.2,4.7 -0.3,0.2 -0.4,0.4 -0.5,0.3 -1.1,-0.4 -2.2,-0.8 -3.2,-1.3 -15,-7.8 -31.1,-9.5 -47.7,-8.4 -14.2,0.9 -27.8,4.4 -41.4,8.3 -5,1.5 -9.9,3.5 -13.9,6.9 -3.6,3 -4.1,7.1 -1.2,10.7 1.7,2.3 4,3.8 6.8,4.4 2.4,0.5 4.9,0.8 7.4,0.9 13.5,0.5 26.9,1 40.4,1.4 17.8,0.6 35.6,1.2 53.3,1.5 18.8,0.3 37.7,1 56.5,-0.5 4.2,-0.3 8.3,-0.6 12.2,-2.5 0.8,-0.4 2,-0.3 3,-0.2 7.2,0.6 14.3,1.2 21.5,1.8 16.7,1.3 33.3,3.3 49.6,7.2 9.5,2.3 18.9,5 28.4,8.8 -2,2.4 -0.6,4.2 0.7,6 1.2,1.7 2.5,3.4 3.7,5.1 0.9,1.2 1.7,2.4 2.8,3.9 -1.1,0.1 -1.6,0.2 -2.1,0.2 -1.6,0 -3.1,0 -4.7,0.1 -2.2,0.2 -4,-0.6 -5.7,-1.9 -13.2,-10.4 -28.1,-16.4 -45,-17 -11.9,-0.4 -23.8,-1.2 -35.7,-1.4 -23.3,-0.5 -46.6,-0.5 -69.8,-1 -22.7,-0.5 -45.5,-1.5 -68.2,-2.3 -18.3,-0.6 -36.6,-1.2 -54.9,-1.8 -7.6,-0.3 -15.2,-0.7 -22.7,-0.8 -11.2,-0.2 -22.5,-0.5 -33.7,-0.2 -11.8,0.3 -23.5,1 -35.3,-0.4 -3.5,-0.4 -7,-0.5 -9.5,-4 -0.9,2.5 -1.6,4.5 -2.4,6.5 l 0.1,0.1 c -0.2,-2.1 1.6,-4.5 -0.9,-6.3 1.1,-2.7 2.2,-5.3 3.4,-8.1 0.8,4.1 1.6,4.8 5.5,5.1 0.5,0 1,0.1 1.6,0.1 8.5,-0.6 16.9,-1.1 25.4,-1.7 1.2,-0.1 2.3,-0.4 3.4,-0.9 1.6,-0.8 1.6,-2 0.1,-3.2 -0.4,-0.3 -0.8,-0.5 -1.7,-1.1 1.5,0 2.4,-0.1 3.2,0 9.1,1 17.6,-1.2 26.1,-4.1 12.6,-4.3 25.2,-8.6 37.8,-12.8 3.3,-1.1 6.8,-2 9.6,-4.3 0.8,-0.6 1.9,-0.8 2.9,-1 14.5,-3.1 29,-5.3 43.8,-5.6 1.5,0 3.1,-0.5 4.6,-0.7 0.4,0 1,0 1.5,0 z M 127,207.7 c 14.5,0 29,-0.3 43.5,0 10.8,0.2 21.7,1 32.5,1.5 1.4,0.1 2.8,0 4.2,0 0.1,-0.3 0.2,-0.5 0.2,-0.8 -0.7,-0.4 -1.3,-1 -2,-1.1 -10.5,-1.8 -21.1,-3.9 -31.8,-4.1 -6.8,-0.2 -13.6,-0.9 -20.3,-0.5 -9.4,0.6 -18.7,1.9 -28,3 -0.9,0.1 -1.8,0.7 -2.7,1 0,0.3 0,0.6 0.1,0.9 1.4,0 2.8,0.1 4.3,0.1 z m 335.6,13.8 c -12.7,-4.2 -25.7,-6.9 -39,-8.1 -19.2,-1.7 -38.5,-2.9 -57.8,-4.4 -0.8,-0.1 -1.6,0 -2.3,0.1 -0.3,0 -0.6,0.4 -1.3,0.8 1.5,1.3 3.2,1.3 4.8,1.4 14.7,1.1 29.4,2.1 44.1,3.4 16.9,1.4 33.7,3.5 50.2,8.1 1,0.3 2,0.5 3,0.7 0.2,0 0.4,-0.2 1.1,-0.5 -1.1,-0.7 -1.9,-1.2 -2.8,-1.5 z"
|
||||
/>
|
||||
<path
|
||||
d="m 85.8,177.4 c 2.5,3.9 5.4,7.6 7.3,11.8 1.8,4.1 2.5,8.7 3.8,13.6 9.4,0 18.9,-0.4 28.4,-1.6 0.2,-0.4 0.4,-0.7 0.6,-1.1 -0.8,-0.5 -1.7,-0.8 -2.3,-1.4 -6.1,-5.9 -12.1,-11.8 -18.1,-17.9 -1.8,-1.9 -3.6,-3.2 -6.3,-3.4 -4.3,-0.2 -8.5,-0.7 -12.7,-1.1 -0.3,0.4 -0.5,0.7 -0.7,1.1 z"
|
||||
/>
|
||||
<path
|
||||
d="m 355.1,205.3 c -15.3,-9.8 -54.8,-27.7 -60,-26.8 0.9,0.6 1.4,1 2,1.3 13,7.5 26.2,14.7 39,22.6 6,3.8 11.9,4.8 19,2.9 z"
|
||||
/>
|
||||
<path
|
||||
d="m 310,205.1 c 5.3,1.3 10.1,-0.2 14.8,-1.2 -0.7,-4.3 -1.5,-5.2 -5.4,-5.9 -1.8,-0.3 -3.6,-0.6 -5.4,-0.6 -4.2,0 -5.6,1.9 -4.6,6.1 0.1,0.5 0.4,1 0.6,1.6 z"
|
||||
/>
|
||||
<path
|
||||
d="m 169,186.8 c -11.6,3 -23.2,5.9 -35.1,9 3.6,0.7 7.1,0.7 10.4,-0.3 8.3,-2.6 16.7,-5.3 25,-7.9 -0.1,-0.3 -0.2,-0.5 -0.3,-0.8 z"
|
||||
/>
|
||||
<path
|
||||
d="m 499.5,270.3 c 0.2,-4.5 0.4,-9.1 0.6,-13.6 0.1,-3.1 0.3,-6.3 0.6,-9.4 0.3,-3.5 -0.3,-6.5 -3.1,-8.2 -4.4,0.6 -8.4,1.1 -11.6,1.5 2.3,0 5.3,0 8.3,0 3.2,0 4.3,0.9 4.6,4.1 0.2,2.8 -0.2,5.7 -0.2,8.6 0,5.7 0,11.3 0,17 0.2,0 0.5,0 0.8,0 z"
|
||||
/>
|
||||
<path
|
||||
d="m 473.3,226.4 c 2.7,1.5 5.4,2.8 7.8,4.5 2.5,1.8 4.9,3.9 7,6.2 1.2,1.3 2.1,1.7 3.9,0.7 -0.5,-0.8 -0.8,-1.6 -1.3,-2.2 -3.9,-4.2 -8.6,-7.5 -13.8,-10.1 -1.5,-0.8 -2.9,-1.3 -3.6,0.9 z"
|
||||
/>
|
||||
<path
|
||||
d="m 192.2,336.8 c 0,3.2 2.2,4.9 4.6,4.9 2.9,0 5.5,-1.4 6.3,-5.4 l 7.5,-42.8 h 21.2 L 224,338 c -2.9,16.1 -13.8,22.1 -29.6,22.1 -14,0 -23.7,-7.5 -23.7,-19.9 0,-1.4 0.1,-2.9 0.7,-6.3 l 7.1,-40.4 h 21.2 l -7.1,40.4 c -0.4,1.9 -0.4,2.5 -0.4,2.9 z"
|
||||
/>
|
||||
<path
|
||||
d="m 272.9,332.6 11.1,26.8 h -24.4 l -7.1,-20.7 -3.7,20.7 h -21.6 l 11.6,-65.9 h 26.1 c 15.3,0 21.7,9.6 21.7,19 0,12.4 -5.1,16.4 -13.7,20.1 z M 259.4,319 c 3.8,0 5.7,-2.5 5.7,-5.4 0,-2.6 -1.9,-4.3 -4.5,-4.3 h -3 l -1.7,9.6 z"
|
||||
/>
|
||||
<path d="m 289,359.4 11.6,-65.9 h 21.1 l -11.6,65.9 z" />
|
||||
<path
|
||||
d="m 358,292.7 c 22.1,0 32.4,14.9 32.4,30.6 0,18.4 -13.3,37 -37.8,37 -21.7,0 -32,-15 -32,-30.8 0.1,-17.9 13.1,-36.8 37.4,-36.8 z m -1.6,19.7 c -8.2,0 -12.8,8.2 -12.8,15.6 0,6.1 3.1,11.7 10.1,11.7 8.2,0 12.8,-8.2 12.8,-15.6 0,-6.2 -3.2,-11.7 -10.1,-11.7 z"
|
||||
/>
|
||||
<path
|
||||
d="m 414,336.8 c 0,3.2 2.2,4.9 4.6,4.9 2.9,0 5.5,-1.4 6.3,-5.4 l 7.5,-42.8 h 21.2 l -7.9,44.5 c -2.9,16.1 -13.8,22.1 -29.6,22.1 -14,0 -23.7,-7.5 -23.7,-19.9 0,-1.4 0.1,-2.9 0.6,-6.3 l 7.1,-40.4 h 21.2 l -7.1,40.4 c -0.2,1.9 -0.2,2.5 -0.2,2.9 z"
|
||||
/>
|
||||
<path
|
||||
d="m 476.6,359.9 c -12.8,0 -22.2,-4.9 -28.2,-8.7 l 6.9,-13.7 c 6.7,4.1 10.9,6.6 18,6.6 4.1,0 6.5,-2 6.5,-4.1 0,-1.9 -1.9,-3.9 -5.2,-4.4 -13.5,-2.2 -19.1,-8.7 -19.1,-18.7 0,-11.4 10.3,-23.7 26.8,-23.7 12.9,0 19.3,2.8 25.7,6 l -6.9,14.2 c -6.2,-3.3 -11.2,-4.6 -18.3,-4.6 -2.7,0 -5.2,2 -5.2,4.1 0,1.9 1.8,3.8 6.7,4.5 13.6,2 21.4,10.4 21.4,21.9 0.1,11.5 -8.7,20.6 -29.1,20.6 z"
|
||||
/>
|
||||
<path
|
||||
d="m 176.5,276.9 4.8,-27.4 h -51.7 v 0 c -8.9,0 -17.8,0 -26.8,0 -4.1,0 -8.3,0 -12.4,0.2 -2.6,0.1 -4.3,1.9 -4.5,4.4 -0.2,2.4 1.1,4.1 3.7,4.7 1.2,0.3 2.4,0.4 3.6,0.4 2.7,0.1 5.3,0 8,0 2.2,0 3.7,1.1 4.5,3.1 1.5,3.7 -1,7.2 -5.2,7.2 -13.8,0 -27.5,0 -41.3,0 -0.8,0 -1.6,0 -2.3,0 -2.5,0.3 -4,2.1 -4,4.8 0,2.7 1.6,4.5 4.1,4.6 0.7,0.1 1.4,0 2.1,0 17.7,0 35.4,0 53.1,0.1 3.8,0 5.9,1.9 5.9,5.2 0,3.3 -2.1,5.3 -5.8,5.3 -5.5,0 -11.1,0 -16.7,0 -1.6,0 -3.3,0 -4.8,0.2 -3.2,0.4 -4.5,2.2 -4.2,5.4 0.2,2.4 1.9,3.9 5.1,4.1 2.4,0.1 4.8,0 7.2,0.1 2.2,0 3.9,0.9 4.8,3 1.6,3.6 -0.7,7.3 -4.7,7.3 -16.7,0.1 -33.4,0.1 -50,0.2 -13.2,0 -26.4,0 -39.6,0.2 -1.2,0 -2.7,0.5 -3.7,1.3 -1.5,1.2 -1.8,3.1 -1.1,4.9 0.7,2 2.3,2.9 4.3,2.9 4.7,0.1 9.3,0.2 14,0.2 17.2,0 34.4,0 51.6,0 10.5,0 20.9,0 31.4,0 3.3,0 5.3,2.1 5.3,5.1 0,3.2 -2.1,5.2 -5.7,5.2 -16.9,0 -33.7,0 -50.6,0 -3.2,0 -5,1.8 -5,4.8 0,2.9 1.8,4.7 4.9,4.7 4.3,0 8.5,0 12.8,0 7.4,0 14.7,0 22.1,0 3.1,0 5.1,1.5 5.6,4 0.7,3.6 -1.5,6.4 -5.3,6.4 -5,0.1 -10.1,0 -15.1,0 -1.9,0 -3.4,0.7 -4.3,2.4 -1.8,3.4 0.5,7.1 4.4,7.1 11.8,0 23.6,0 35.4,0.1 v 0 h 16 l 6.6,-37.7 h 33.7 l 4.8,-27.4 h -33.6 l 3.1,-17.4 h 35.5 z"
|
||||
/>
|
||||
<path
|
||||
d="m 56.7,299.2 c -6.9,0 -13.8,0 -20.8,0 -3.8,0 -6,-3.4 -4.4,-6.9 0.8,-2 2.5,-2.6 4.5,-2.6 11.2,0 22.4,0 33.5,0 2.7,0 5.4,0 8.2,0 3,0 4.7,1.8 4.8,4.7 0,2.9 -1.8,4.8 -4.8,4.9 -7,0 -14,0 -20.9,0 -0.1,-0.1 -0.1,-0.1 -0.1,-0.1 z"
|
||||
/>
|
||||
<path
|
||||
d="m 48.5,349.8 c 3.3,0 6.6,0 9.9,0 3.1,0 4.9,1.8 4.9,4.7 0.1,2.8 -1.9,4.7 -5,4.8 -6.6,0 -13.2,0 -19.8,0 -3.1,0 -4.9,-1.8 -4.9,-4.8 0,-3 1.7,-4.7 4.9,-4.7 3.3,0 6.6,0 9.9,0 0.1,0 0.1,0 0.1,0 z"
|
||||
/>
|
||||
<path
|
||||
d="m 67.1,259.4 c -1.5,-0.1 -3.6,-0.2 -5.7,-0.5 -2.5,-0.4 -3.8,-2.1 -3.8,-4.6 0,-2.3 1.3,-4.2 3.8,-4.4 4,-0.3 8,-0.3 11.9,-0.2 2.2,0.1 3.7,2.2 3.7,4.5 0,2.4 -1.4,4.4 -3.7,4.7 -1.8,0.4 -3.7,0.4 -6.2,0.5 z"
|
||||
/>
|
||||
<path
|
||||
d="m 333.5,222.2 c -18.6,-0.3 -37.1,-1 -55.6,-1.6 -12,-0.4 -24,-1.1 -36,-1.6 -12.5,-0.5 -9.3,-0.5 -21.5,-0.9 -2.1,-0.1 -3.3,0.1 -4.5,1.2 -2.3,2.2 -2.6,1.8 -2.7,4.2 -0.1,8.5 9.9,26.5 12.3,28.4 2.8,2.2 21.9,2.6 31.2,3 19.1,0.8 38.1,1.6 57.2,2.5 15.9,0.7 31.9,1.4 47.8,2.3 7.7,0.5 15.3,1.4 23,2.1 0.7,0.1 1.3,0.1 1.9,0.3 4.7,1.9 0.7,-18.3 13.1,-32.5 3.1,-3.5 4.8,-5.4 15.4,-6.5 -27.5,-0.3 -54.5,-0.4 -81.6,-0.9 z m -106,20.5 c -0.1,-0.5 0.2,-1 0.7,-1.2 l 11.9,-3.3 c 0.5,-0.1 1.1,0.2 1.2,0.7 0.1,0.5 -0.2,1 -0.7,1.2 l -11.9,3.3 c -0.6,0.1 -1.1,-0.2 -1.2,-0.7 z m 36.4,-3.5 c -0.1,0.1 -0.3,0.1 -0.4,0.1 -0.9,5.2 -4.8,9.7 -10.1,11.2 -5.1,1.4 -10.3,-0.3 -13.7,-3.8 -0.5,-0.5 -1.1,-0.6 -1.6,-0.5 H 238 c -0.5,0.1 -1.1,-0.2 -1.2,-0.7 -0.1,-0.5 0.2,-1 0.7,-1.2 l 11.5,-3.2 c 0.5,-0.1 1.1,0.2 1.2,0.7 0.1,0.5 -0.2,1 -0.7,1.2 l -5.9,1.6 c -1.1,0.4 -1.6,1.7 -0.5,2.4 2.8,1.8 6.4,2.5 9.7,1.6 4.5,-1.2 7.8,-4.9 8.7,-9.3 -2.4,-0.3 -4.5,-2 -5.1,-4.5 -0.6,-2.5 0.3,-5.1 2.2,-6.5 -2.9,-3.2 -7.5,-4.6 -11.9,-3.5 -3.6,1 -6.5,3.6 -8,6.9 -0.5,1.1 0.5,2 1.6,1.7 l 0.6,-0.2 c 0.5,-0.1 1.1,0.2 1.2,0.7 0.1,0.5 -0.2,1 -0.7,1.2 l -10.6,2.9 c -0.5,0.1 -1.1,-0.2 -1.2,-0.7 -0.1,-0.5 0.2,-1 0.7,-1.2 l 4.6,-1.3 c 0.6,-0.2 1.1,-0.6 1.2,-1.3 1.1,-5.1 4.8,-9.3 10.1,-10.7 5.3,-1.4 10.7,0.5 14.1,4.5 0.2,-0.1 0.3,-0.2 0.5,-0.2 3.3,-0.9 6.6,1.1 7.5,4.4 0.6,3.4 -1.3,6.8 -4.4,7.7 z m -20.2,-2 2.6,-0.7 c 0.5,-0.1 1.1,0.2 1.2,0.7 0.1,0.5 -0.2,1 -0.7,1.2 l -2.6,0.7 c -0.5,0.2 -1.1,-0.2 -1.2,-0.7 -0.1,-0.6 0.2,-1 0.7,-1.2 z m 6.1,-1.5 3.6,-1 c 0.5,-0.1 1.1,0.2 1.2,0.7 0.1,0.5 -0.2,1 -0.7,1.2 l -3.6,1 c -0.5,0.1 -1.1,-0.2 -1.2,-0.7 -0.1,-0.6 0.2,-1.1 0.7,-1.2 z"
|
||||
/>
|
||||
<circle cx="262.1" cy="233.2" r="4.4" />
|
||||
</g>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 8.3 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-github" viewBox="0 0 19 20">
|
||||
<path d="M6.71154 17.0776C2.09615 18.4906 2.09615 14.7226 0.25 14.2517L6.71154 17.0776ZM13.1731 19.9036V16.2581C13.2077 15.8089 13.1482 15.3574 12.9986 14.9335C12.849 14.5096 12.6127 14.123 12.3054 13.7995C15.2038 13.4698 18.25 12.3489 18.25 7.20563C18.2498 5.89046 17.754 4.62572 16.8654 3.67319C17.2862 2.52257 17.2564 1.25074 16.7823 0.121918C16.7823 0.121918 15.6931 -0.207776 13.1731 1.51605C11.0574 0.930913 8.82722 0.930913 6.71154 1.51605C4.19154 -0.207776 3.10231 0.121918 3.10231 0.121918C2.62819 1.25074 2.59844 2.52257 3.01923 3.67319C2.12396 4.63279 1.62771 5.90895 1.63462 7.23389C1.63462 12.3394 4.68077 13.4604 7.57923 13.8278C7.27554 14.148 7.04132 14.5299 6.89182 14.9486C6.74233 15.3674 6.6809 15.8135 6.71154 16.2581V19.9036" />
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 843 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-medium" viewBox="0 0 20 18">
|
||||
<path d="M3.20856 4.03944C3.23219 3.77081 3.14162 3.50217 2.96835 3.32005L1.19236 0.843166V0.474365H6.7133L10.982 11.2971L14.7348 0.474365H19.9998V0.843166L18.4797 2.52781C18.3498 2.64164 18.2828 2.83287 18.3104 3.01955V15.404C18.2828 15.5906 18.3498 15.7819 18.4797 15.8957L19.9643 17.5803V17.9491H12.4941V17.5803L14.0339 15.8547C14.1835 15.6817 14.1835 15.6271 14.1835 15.363V5.35528L9.90299 17.9173H9.32412L4.34662 5.35528V13.774C4.3033 14.1291 4.40569 14.4842 4.62227 14.7392L6.62272 17.5439V17.9127H0.952148V17.5485L2.9526 14.7392C3.16525 14.4842 3.2637 14.1245 3.20856 13.774V4.03944Z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 687 B |
|
|
@ -1,5 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-menu" width="35" height="19" viewBox="0 0 35 19" >
|
||||
<rect width="35" height="3" rx="1.5"/>
|
||||
<rect x="8" y="8" width="27" height="3" rx="1.5"/>
|
||||
<rect x="8" y="16" width="27" height="3" rx="1.5"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 268 B |
|
|
@ -1,50 +0,0 @@
|
|||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 522.66669 226.66667"
|
||||
height="226.66667"
|
||||
width="522.66669"
|
||||
xml:space="preserve"
|
||||
id="svg2"
|
||||
version="1.1"><metadata
|
||||
id="metadata8"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs6"><clipPath
|
||||
id="clipPath18"
|
||||
clipPathUnits="userSpaceOnUse"><path
|
||||
id="path16"
|
||||
d="M 0,170 H 392 V 0 H 0 Z" /></clipPath></defs><g
|
||||
transform="matrix(1.3333333,0,0,-1.3333333,0,226.66667)"
|
||||
id="g10"><g
|
||||
id="g12"><g
|
||||
clip-path="url(#clipPath18)"
|
||||
id="g14"><g
|
||||
transform="translate(261.0416,34.5457)"
|
||||
id="g20"><path
|
||||
id="path22"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 0,0 h -11.485 v 41.178 c 0,8.029 -1.226,13.783 -3.676,17.261 -2.452,3.478 -6.572,5.217 -12.361,5.217 -4.902,0 -9.069,-2.24 -12.499,-6.722 -3.432,-4.482 -5.148,-9.828 -5.148,-16.037 V 0 h -11.485 v 42.578 c 0,14.052 -5.439,21.078 -16.316,21.078 -5.042,0 -9.198,-2.112 -12.465,-6.337 -3.268,-4.226 -4.902,-9.699 -4.902,-16.422 V 0 h -11.485 v 71.711 h 11.485 V 60.365 h 0.28 c 5.088,8.73 12.488,13.096 22.198,13.096 4.669,0 8.87,-1.307 12.606,-3.921 3.735,-2.616 6.326,-6.28 7.774,-10.995 5.321,9.944 13.257,14.916 23.809,14.916 C -7.89,73.461 0,63.703 0,44.188 Z" /></g><g
|
||||
transform="translate(318.2399,53.7342)"
|
||||
id="g24"><path
|
||||
id="path26"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 0,0 c 0,-6.21 -2.392,-11.253 -7.178,-15.126 -4.785,-3.876 -11.146,-5.813 -19.082,-5.813 -6.77,0 -12.7,1.447 -17.787,4.341 v 12.325 c 5.648,-4.576 11.857,-6.862 18.627,-6.862 9.104,0 13.656,3.338 13.656,10.014 0,2.707 -0.888,4.913 -2.661,6.618 -1.775,1.704 -5.813,4.002 -12.116,6.898 -6.349,2.707 -10.831,5.613 -13.444,8.718 -2.616,3.104 -3.922,7.225 -3.922,12.361 0,5.928 2.381,10.877 7.143,14.845 4.761,3.968 10.807,5.953 18.137,5.953 5.649,0 10.76,-1.121 15.336,-3.361 V 39.356 c -4.669,3.408 -10.084,5.112 -16.246,5.112 -3.782,0 -6.828,-0.934 -9.139,-2.801 -2.311,-1.867 -3.467,-4.271 -3.467,-7.212 0,-3.176 0.887,-5.615 2.661,-7.319 1.774,-1.705 5.438,-3.723 10.995,-6.058 6.816,-2.895 11.6,-5.929 14.356,-9.103 C -1.377,8.799 0,4.808 0,0" /></g><g
|
||||
transform="translate(390.9865,34.5457)"
|
||||
id="g28"><path
|
||||
id="path30"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 0,0 h -11.485 v 40.897 c 0,15.172 -5.557,22.759 -16.667,22.759 -5.649,0 -10.376,-2.135 -14.181,-6.407 -3.805,-4.271 -5.707,-9.723 -5.707,-16.352 V 0 H -59.525 V 71.711 H -48.04 V 59.806 h 0.28 c 5.369,9.103 13.212,13.655 23.53,13.655 7.889,0 13.901,-2.568 18.032,-7.703 C -2.066,60.621 0,53.339 0,43.908 Z" /></g><g
|
||||
transform="translate(83.0452,77.4482)"
|
||||
id="g32"><path
|
||||
id="path34"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 0,0 c 4.368,9.675 9.006,19.471 15.263,28.083 3.082,4.241 6.544,8.276 10.588,11.626 3.185,2.635 8.676,6.675 13.036,4.528 4.443,-2.2 3.929,-8.982 3.348,-13.025 C 41.49,26.09 39.813,21.108 37.789,16.363 32.347,3.615 23.806,-7.824 15.003,-18.437 c -1.606,-1.938 -3.245,-3.869 -4.933,-5.755 -0.142,-3.305 -0.486,-6.61 -0.988,-9.881 -1.611,-10.474 -5.666,-20.775 -12.399,-29.043 -2.804,-3.443 -7.739,-8.81 -12.771,-7.807 -5.306,1.059 -5.319,8.77 -4.949,12.865 0.476,5.265 1.866,10.484 3.776,15.392 C -10.062,-24.152 -2.132,-5.033 0,0" /></g><g
|
||||
transform="translate(71.9832,63.3354)"
|
||||
id="g36"><path
|
||||
id="path38"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 0,0 c -5.372,-18.396 -16.839,-44.692 -33.281,-55.659 -7.452,-4.967 -17.465,-8.797 -26.357,-5.6 -9.863,3.495 -12.418,14.518 -10.946,23.86 1.641,10.436 7.369,19.51 14.114,27.409 2.689,3.15 7.699,7.234 12.666,10.126 7.466,-4.14 16.593,-8.722 24.273,-11.153 -6.574,4.185 -12.452,9.362 -17.389,14.419 -5.715,6.662 -14.92,19.805 -17.777,30.093 -2.928,10.545 -5.375,21.58 -5.083,32.582 0.271,10.029 2.746,20.496 8.772,28.684 6.176,8.384 16.123,13.022 26.445,10.145 C -14.77,102.173 -7.246,94.165 -2.25,85.637 2.976,76.709 5.829,66.482 6.608,56.195 7.433,45.413 7.435,23.46 0,0" /></g></g></g></g></svg>
|
||||
|
До Ширина: | Высота: | Размер: 4.5 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-palette" width="20" height="20" viewBox="0 0 20 20">
|
||||
<path d="M1.77405 4.01413C4.72422 -0.0894092 10.8318 -1.28348 15.1796 1.54073C19.4728 4.32946 21.0517 9.69108 19.2933 14.7217C17.633 19.4719 13.2582 21.3539 10.1051 18.9644C8.92397 18.0694 8.46609 16.9473 8.24477 15.1248L8.13906 14.0894L8.0935 13.6729C7.9705 12.694 7.78149 12.2555 7.38699 12.0258C6.84973 11.7129 6.49199 11.7056 5.78653 11.9912L5.43433 12.1438L5.25504 12.2255C4.2381 12.6869 3.56161 12.849 2.70595 12.6617L2.50508 12.6123L2.34104 12.5634C-0.456623 11.6577 -0.871 7.69326 1.77405 4.01413ZM2.76134 11.0529L2.88463 11.0911L3.01899 11.1234C3.45944 11.2146 3.83586 11.1386 4.46049 10.87L5.06454 10.6004C6.27043 10.0838 7.05597 10.0333 8.11956 10.6527C9.04001 11.1887 9.39876 12.0125 9.58174 13.44L9.6351 13.9211L9.68948 14.4784L9.73676 14.9211C9.90937 16.3477 10.2232 17.1119 10.9886 17.692C13.271 19.4216 16.5403 18.0152 17.8799 14.1825C19.4009 9.83105 18.0546 5.25933 14.3851 2.87572C10.6995 0.481614 5.45895 1.50616 2.97716 4.9582C0.895903 7.85312 1.15117 10.4912 2.76134 11.0529ZM14.0208 8.96284C13.8416 8.264 14.2385 7.54568 14.9074 7.35843C15.5764 7.17118 16.2639 7.5859 16.4432 8.28474C16.6224 8.98357 16.2254 9.70189 15.5565 9.88914C14.8876 10.0764 14.2 9.66168 14.0208 8.96284ZM14.5169 12.6189C14.3377 11.9201 14.7347 11.2018 15.4036 11.0145C16.0725 10.8273 16.76 11.242 16.9393 11.9408C17.1185 12.6397 16.7216 13.358 16.0526 13.5452C15.3837 13.7325 14.6962 13.3178 14.5169 12.6189ZM12.0361 5.81604C11.8569 5.11721 12.2539 4.39889 12.9228 4.21163C13.5917 4.02438 14.2792 4.4391 14.4585 5.13794C14.6377 5.83678 14.2407 6.5551 13.5718 6.74235C12.9029 6.9296 12.2154 6.51488 12.0361 5.81604ZM12.0076 15.2463C11.8283 14.5475 12.2253 13.8291 12.8942 13.6419C13.5631 13.4546 14.2507 13.8694 14.4299 14.5682C14.6091 15.267 14.2122 15.9854 13.5433 16.1726C12.8744 16.3599 12.1868 15.9451 12.0076 15.2463ZM8.49974 4.79782C8.32051 4.09898 8.71747 3.38066 9.38638 3.19341C10.0553 3.00616 10.7428 3.42088 10.9221 4.11972C11.1013 4.81855 10.7044 5.53687 10.0354 5.72412C9.36653 5.91138 8.67898 5.49665 8.49974 4.79782Z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 2.1 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-play" width="14" height="16" viewBox="0 0 14 16">
|
||||
<path d="M2.52634 1.20452C1.70406 0.753412 0.668346 1.04814 0.21302 1.86281C0.0733009 2.11279 0 2.39386 0 2.67961V14.307C0 15.2383 0.761969 15.9932 1.7019 15.9932C1.9904 15.9932 2.27415 15.9205 2.52652 15.782L13.1224 9.9675C13.9446 9.5163 14.242 8.49015 13.7866 7.67553C13.6318 7.39875 13.4016 7.17069 13.1222 7.01742L2.52634 1.20452ZM12.794 8.22018C12.9459 8.49172 12.8467 8.83377 12.5727 8.98417L1.97678 14.7987C1.89265 14.8449 1.79807 14.8691 1.7019 14.8691C1.38859 14.8691 1.1346 14.6174 1.1346 14.307V2.67961C1.1346 2.58436 1.15904 2.49067 1.20561 2.40734C1.35738 2.13579 1.70262 2.03754 1.97672 2.18791L12.5726 8.00081C12.6657 8.0519 12.7425 8.12792 12.794 8.22018Z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 790 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-screen" width="22" height="20" viewBox="0 0 22 20">
|
||||
<path d="M18.6825 0C19.9361 0 20.9621 0.973832 21.0455 2.20621L21.0509 2.36837V13.4231C21.0509 14.6766 20.0771 15.7027 18.8447 15.786L18.6825 15.7915L14.2091 15.7912V18.4206L16.0523 18.4211C16.4883 18.4211 16.8417 18.7745 16.8417 19.2105C16.8417 19.6102 16.5447 19.9405 16.1594 19.9928L16.0523 20H4.99988C4.56388 20 4.21043 19.6465 4.21043 19.2105C4.21043 18.8109 4.50743 18.4806 4.89276 18.4283L4.99988 18.4211L6.84089 18.4206V15.7912L2.36837 15.7915C1.11485 15.7915 0.0887928 14.8177 0.00546392 13.5853L0 13.4231V2.36837C0 1.11485 0.973832 0.0887928 2.20621 0.00546393L2.36837 0H18.6825ZM12.6292 15.7912H8.41875L8.4198 18.4211H12.6302L12.6292 15.7912ZM18.6825 1.57891H2.36837C1.9687 1.57891 1.63839 1.87591 1.58612 2.26124L1.57891 2.36837V13.4231C1.57891 13.8228 1.87591 14.1531 2.26124 14.2054L2.36837 14.2126H18.6825C19.0822 14.2126 19.4125 13.9156 19.4648 13.5303L19.472 13.4231V2.36837C19.472 1.9687 19.175 1.63839 18.7897 1.58612L18.6825 1.57891ZM17.3713 3.15782C17.6297 3.15782 17.8445 3.344 17.8891 3.58952L17.8976 3.68413V12.1076C17.8976 12.3659 17.7114 12.5808 17.4659 12.6254L17.3713 12.6339H7.89332C7.63495 12.6339 7.42006 12.4477 7.3755 12.2022L7.36702 12.1076V3.68413C7.36702 3.42575 7.5532 3.21086 7.79872 3.1663L7.89332 3.15782H17.3713ZM5.78742 3.15782C6.0458 3.15782 6.26068 3.344 6.30525 3.58952L6.31373 3.68413V12.1076C6.31373 12.3659 6.12755 12.5808 5.88203 12.6254L5.78742 12.6339H3.68228C3.42391 12.6339 3.20902 12.4477 3.16446 12.2022L3.15598 12.1076V3.68413C3.15598 3.42575 3.34216 3.21086 3.58768 3.1663L3.68228 3.15782H5.78742Z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.6 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-share" width="12" height="14" viewBox="0 0 12 14">
|
||||
<path d="M11.4857 6.17143C11.7461 6.17143 11.9613 6.36491 11.9953 6.61593L12 6.68571V11.4863C12 12.6747 11.0699 13.6458 9.89789 13.7114L9.77143 13.7149H2.22857C1.04021 13.7149 0.0690885 12.7847 0.00352789 11.6128L0 11.4863V6.68571C0 6.40168 0.230254 6.17143 0.514286 6.17143C0.774649 6.17143 0.989822 6.36491 1.02388 6.61593L1.02857 6.68571V11.4863C1.02857 12.1159 1.51345 12.6323 2.13015 12.6823L2.22857 12.6863H9.77143C10.401 12.6863 10.9174 12.2014 10.9675 11.5847L10.9714 11.4863V6.68571C10.9714 6.40168 11.2017 6.17143 11.4857 6.17143ZM2.20484 3.57689L5.63084 0.150644C5.81331 -0.0318436 6.09883 -0.0485494 6.30017 0.100608L6.35786 0.150331L9.78976 3.57658C9.99077 3.77726 9.99103 4.10288 9.79036 4.30389C9.60793 4.48662 9.32223 4.50346 9.12077 4.35424L9.06305 4.30449L6.51017 1.75611L6.51078 9.77482C6.51078 10.0352 6.3173 10.2504 6.06628 10.2844L5.99649 10.2891C5.73613 10.2891 5.52096 10.0956 5.4869 9.84461L5.48221 9.77482L5.4816 1.75406L2.93218 4.30418C2.7496 4.48677 2.46389 4.50337 2.26255 4.354L2.20487 4.3042C2.02228 4.12163 2.00567 3.83592 2.15505 3.63458L2.20484 3.57689L5.63084 0.150644L2.20484 3.57689Z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.2 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-swatches" width="20" height="20" viewBox="0 0 20 20">
|
||||
<path d="M12.9163 0.108954C14.5978 -0.344806 16.3262 0.660165 16.7768 2.35362L19.8918 14.0612C20.3424 15.7547 19.3445 17.4953 17.6629 17.9491L10.4663 19.891C8.78473 20.3448 7.05629 19.3398 6.60572 17.6464L3.49072 5.9388C3.04015 4.24535 4.03806 2.50469 5.71962 2.05093L12.9163 0.108954ZM3.47925 10.36L5.49855 17.9451C5.70598 18.7248 6.11202 19.3974 6.64717 19.9226L6.13956 19.8951C4.40107 19.8033 3.0656 18.3097 3.15671 16.5589L3.47925 10.36ZM13.3613 1.78147L6.16462 3.72344C5.40028 3.92969 4.94668 4.7209 5.15149 5.49066L8.26648 17.1982C8.47129 17.968 9.25694 18.4248 10.0213 18.2185L17.2179 16.2766C17.9823 16.0703 18.4359 15.2791 18.231 14.5093L15.1161 2.80177C14.9112 2.03202 14.1256 1.57521 13.3613 1.78147ZM2.41945 8.65373L2.01205 16.4985C1.97008 17.305 2.15012 18.0715 2.49836 18.7378L2.02336 18.5524C0.398113 17.9242 -0.413661 16.088 0.210213 14.4512L2.41945 8.65373ZM7.99359 5.02249C8.60506 4.85749 9.23358 5.22293 9.39743 5.83874C9.56127 6.45454 9.19839 7.08751 8.58692 7.25251C7.97544 7.41751 7.34692 7.05207 7.18308 6.43627C7.01923 5.82047 7.38211 5.1875 7.99359 5.02249Z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.2 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-twitter" viewBox="0 0 16 17">
|
||||
<path d="M14.3554 4.82757C14.3655 5.00256 14.3655 5.17759 14.3655 5.35259C14.3655 10.6901 11.066 16.8401 5.03555 16.8401C3.17767 16.8401 1.45179 16.1776 0 15.0276C0.26397 15.0651 0.517752 15.0776 0.791878 15.0776C2.32485 15.0776 3.73605 14.4401 4.86296 13.3526C3.42133 13.3151 2.2132 12.1526 1.79694 10.5526C2.00001 10.5901 2.20304 10.6151 2.41626 10.6151C2.71067 10.6151 3.00511 10.5651 3.2792 10.4776C1.77666 10.1026 0.649721 8.47758 0.649721 6.51508V6.4651C1.08625 6.7651 1.59391 6.9526 2.13195 6.97757C1.24869 6.25255 0.670034 5.01507 0.670034 3.61506C0.670034 2.86507 0.832441 2.17757 1.11672 1.57757C2.73095 4.02757 5.15736 5.62754 7.87816 5.80257C7.82741 5.50257 7.79694 5.1901 7.79694 4.87759C7.79694 2.65257 9.25888 0.840088 11.0761 0.840088C12.0203 0.840088 12.8731 1.32759 13.4721 2.11509C14.2132 1.9401 14.9238 1.60258 15.5533 1.14009C15.3096 2.07761 14.7919 2.86511 14.1117 3.36508C14.7716 3.27762 15.4112 3.05257 16 2.7401C15.5534 3.54007 14.995 4.25254 14.3554 4.82757Z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.1 KiB |
|
|
@ -1,41 +0,0 @@
|
|||
<svg viewBox="0 0 100 100" fill="white" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<path d="M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z" fill="#DDDDDD"/>
|
||||
<g filter="url(#filter0_d)">
|
||||
<path d="M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z" fill="#EEEEEE"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d)">
|
||||
<path d="M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:overlay" opacity="0.25">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z" fill="url(#paint0_linear)"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="-8.39411" y="15.8291" width="116.727" height="92.2456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4.16667"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d" x="60.4167" y="-8.07558" width="47.9167" height="116.151" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4.16667"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear" x1="49.9392" y1="0.257812" x2="49.9392" y2="99.7423" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 4.3 KiB |
|
|
@ -1,80 +0,0 @@
|
|||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 712.35864 288"
|
||||
height="288"
|
||||
width="712.35864"
|
||||
xml:space="preserve"
|
||||
id="svg2"
|
||||
version="1.1"><metadata
|
||||
id="metadata8"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs6"><clipPath
|
||||
id="clipPath30"
|
||||
clipPathUnits="userSpaceOnUse"><path
|
||||
id="path28"
|
||||
d="M 0,216 H 534.269 V 0 H 0 Z" /></clipPath></defs><g
|
||||
transform="matrix(1.3333333,0,0,-1.3333333,0,288)"
|
||||
id="g10"><path
|
||||
id="path12"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="M 106.218,109.78 H 72 v 34.218 h 34.218 z" /><path
|
||||
id="path14"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 143.997,109.78 h -34.218 v 34.218 h 34.218 z" /><path
|
||||
id="path16"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="M 106.218,72.001 H 72 v 34.219 h 34.218 z" /><path
|
||||
id="path18"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 143.997,72.001 h -34.218 v 34.219 h 34.218 z" /><g
|
||||
transform="translate(216.8485,129.6036)"
|
||||
id="g20"><path
|
||||
id="path22"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="M 0,0 H 7.833 L -3.946,-43.202 h -8.768 l -8.676,32.597 h -0.18 l -8.677,-32.597 h -8.948 L -51.246,0 h 8.194 l 8.406,-34.164 h 0.181 L -25.065,0 h 8.013 l 8.767,-34.104 h 0.181 z" /></g><g
|
||||
id="g24"><g
|
||||
clip-path="url(#clipPath30)"
|
||||
id="g26"><path
|
||||
id="path32"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 235.166,86.401 h -7.291 v 30.971 h 7.291 z m -8.044,39.918 c 0,1.205 0.436,2.215 1.311,3.028 0.874,0.814 1.913,1.22 3.118,1.22 1.285,0 2.349,-0.417 3.193,-1.25 0.844,-0.834 1.266,-1.833 1.266,-2.998 0,-1.185 -0.433,-2.179 -1.296,-2.982 -0.864,-0.803 -1.918,-1.205 -3.163,-1.205 -1.245,0 -2.295,0.407 -3.149,1.22 -0.853,0.814 -1.28,1.802 -1.28,2.967" /><g
|
||||
transform="translate(269.9931,105.3511)"
|
||||
id="g34"><path
|
||||
id="path36"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 0,0 v -18.95 h -7.291 v 17.293 c 0,2.832 -0.478,4.941 -1.431,6.327 -0.954,1.386 -2.486,2.079 -4.594,2.079 -2.049,0 -3.742,-0.774 -5.077,-2.32 -1.336,-1.547 -2.003,-3.495 -2.003,-5.845 V -18.95 h -7.291 v 30.971 h 7.291 V 7.923 h 0.121 c 1.144,1.587 2.549,2.777 4.217,3.571 1.667,0.793 3.595,1.19 5.785,1.19 3.294,0 5.829,-1.05 7.606,-3.149 C -0.889,7.437 0,4.258 0,0" /></g><g
|
||||
transform="translate(290.3925,91.5533)"
|
||||
id="g38"><path
|
||||
id="path40"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 0,0 c 2.209,0 4.057,0.874 5.544,2.621 1.485,1.747 2.228,4.026 2.228,6.838 v 3.315 c 0,2.148 -0.708,3.981 -2.123,5.498 -1.416,1.516 -3.178,2.274 -5.288,2.274 -2.571,0 -4.553,-0.944 -5.95,-2.832 -1.395,-1.888 -2.094,-4.539 -2.094,-7.953 0,-3.073 0.689,-5.468 2.065,-7.185 C -4.243,0.858 -2.37,0 0,0 m 7.713,40.521 h 7.29 V -5.152 h -7.29 v 4.097 H 7.592 C 6.487,-2.581 5.097,-3.721 3.42,-4.474 c -1.678,-0.753 -3.641,-1.13 -5.891,-1.13 -3.896,0 -6.999,1.336 -9.308,4.007 -2.311,2.671 -3.465,6.377 -3.465,11.117 0,5.122 1.28,9.224 3.841,12.307 2.561,3.083 5.99,4.624 10.289,4.624 1.947,0 3.665,-0.321 5.151,-0.964 1.486,-0.643 2.671,-1.577 3.555,-2.801 h 0.121 z" /></g><g
|
||||
transform="translate(318.0233,101.6758)"
|
||||
id="g42"><path
|
||||
id="path44"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 0,0 c 0,-3.234 0.733,-5.705 2.2,-7.411 1.466,-1.708 3.565,-2.561 6.296,-2.561 2.651,0 4.67,0.853 6.056,2.561 1.386,1.706 2.079,4.237 2.079,7.592 0,3.334 -0.719,5.849 -2.154,7.547 -1.437,1.696 -3.45,2.545 -6.041,2.545 C 5.765,10.273 3.691,9.384 2.215,7.607 0.738,5.83 0,3.293 0,0 m -7.592,-0.241 c 0,5.121 1.446,9.179 4.339,12.171 2.892,2.993 6.908,4.489 12.051,4.489 4.84,0 8.621,-1.441 11.343,-4.323 2.72,-2.883 4.082,-6.774 4.082,-11.674 0,-5.022 -1.447,-9.019 -4.339,-11.991 -2.892,-2.973 -6.828,-4.458 -11.81,-4.458 -4.801,0 -8.611,1.41 -11.432,4.232 -2.823,2.822 -4.234,6.673 -4.234,11.554" /></g><g
|
||||
transform="translate(382.7411,117.3721)"
|
||||
id="g46"><path
|
||||
id="path48"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 0,0 h 6.989 l -9.038,-30.971 h -7.743 l -6.115,22.445 h -0.121 l -6.417,-22.445 h -7.653 L -39.105,0 h 7.562 l 5.754,-23.74 h 0.181 L -18.83,0 h 6.96 l 6.115,-23.831 h 0.181 z" /></g><g
|
||||
transform="translate(398.953,109.2378)"
|
||||
id="g50"><path
|
||||
id="path52"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 0,0 c 0,-1.045 0.332,-1.863 0.994,-2.456 0.663,-0.592 2.129,-1.34 4.399,-2.244 2.912,-1.165 4.956,-2.476 6.13,-3.931 1.176,-1.457 1.763,-3.22 1.763,-5.288 0,-2.912 -1.12,-5.252 -3.359,-7.019 -2.24,-1.768 -5.268,-2.651 -9.083,-2.651 -1.285,0 -2.707,0.155 -4.263,0.466 -1.557,0.311 -2.877,0.708 -3.962,1.19 v 7.171 c 1.325,-0.925 2.751,-1.657 4.278,-2.199 1.526,-0.543 2.913,-0.814 4.158,-0.814 1.646,0 2.862,0.231 3.645,0.693 0.783,0.461 1.175,1.235 1.175,2.32 0,1.004 -0.406,1.852 -1.22,2.545 -0.813,0.693 -2.355,1.491 -4.625,2.395 -2.691,1.125 -4.599,2.39 -5.723,3.797 -1.125,1.405 -1.688,3.193 -1.688,5.362 0,2.791 1.11,5.086 3.329,6.884 2.219,1.797 5.096,2.696 8.631,2.696 1.085,0 2.3,-0.12 3.646,-0.361 C 9.57,8.315 10.695,8.003 11.6,7.622 V 0.693 C 10.635,1.335 9.51,1.887 8.225,2.35 6.939,2.812 5.664,3.042 4.398,3.042 3.013,3.042 1.933,2.771 1.16,2.229 0.387,1.687 0,0.944 0,0" /></g><g
|
||||
transform="translate(424.1249,124)"
|
||||
id="g54"><path
|
||||
id="path56"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 0,0 c 2.691,0.883 5.057,1.848 7.095,2.892 2.039,1.044 4.032,2.27 5.98,3.675 H 16.39 V -37.599 H 9.099 V -2.26 C 7.913,-3.124 6.553,-3.892 5.017,-4.564 3.479,-5.238 1.808,-5.785 0,-6.207 Z" /></g><g
|
||||
transform="translate(445.8769,124)"
|
||||
id="g58"><path
|
||||
id="path60"
|
||||
style="fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
d="m 0,0 c 2.691,0.883 5.057,1.848 7.095,2.892 2.039,1.044 4.032,2.27 5.98,3.675 H 16.39 V -37.599 H 9.099 V -2.26 C 7.913,-3.124 6.553,-3.892 5.017,-4.564 3.479,-5.238 1.808,-5.785 0,-6.207 Z" /></g></g></g></g></svg>
|
||||
|
До Ширина: | Высота: | Размер: 6.6 KiB |
|
|
@ -1,9 +0,0 @@
|
|||
declare module "*.svg" {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
|
||||
declare module "*.ejs" {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export { default as FooterTemplate } from "./public/footer.ejs";
|
||||
export * from "./app/components";
|
||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче