postgres mudila
This commit is contained in:
parent
b764e6f86f
commit
cf584fe269
|
|
@ -0,0 +1,12 @@
|
|||
env:
|
||||
browser: true
|
||||
es2021: true
|
||||
extends:
|
||||
- standard-with-typescript
|
||||
- plugin:react/recommended
|
||||
parserOptions:
|
||||
ecmaVersion: latest
|
||||
sourceType: module
|
||||
plugins:
|
||||
- react
|
||||
rules: {}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
.yarn/install-state.gz
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="myValues">
|
||||
<value>
|
||||
<list size="1">
|
||||
<item index="0" class="java.lang.String" itemvalue="indeterminate" />
|
||||
</list>
|
||||
</value>
|
||||
</option>
|
||||
<option name="myCustomValuesEnabled" value="true" />
|
||||
</inspection_tool>
|
||||
</profile>
|
||||
</component>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/doryan-blog-next-turbo.iml" filepath="$PROJECT_DIR$/.idea/doryan-blog-next-turbo.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectTasksOptions">
|
||||
<TaskOptions isEnabled="true">
|
||||
<option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
|
||||
<option name="checkSyntaxErrors" value="true" />
|
||||
<option name="description" />
|
||||
<option name="exitCodeBehavior" value="ERROR" />
|
||||
<option name="fileExtension" value="sass" />
|
||||
<option name="immediateSync" value="true" />
|
||||
<option name="name" value="Sass" />
|
||||
<option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
|
||||
<option name="outputFilters">
|
||||
<array />
|
||||
</option>
|
||||
<option name="outputFromStdout" value="false" />
|
||||
<option name="program" value="sass" />
|
||||
<option name="runOnExternalChanges" value="true" />
|
||||
<option name="scopeName" value="Project Files" />
|
||||
<option name="trackOnlyRoot" value="false" />
|
||||
<option name="workingDir" value="$FileDir$" />
|
||||
<envs />
|
||||
</TaskOptions>
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -0,0 +1,604 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="AutoImportSettings">
|
||||
<option name="autoReloadType" value="SELECTIVE" />
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="TODO: placeholder ADDED: supported text, animation move for label, and etc">
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="FileTemplateManagerImpl">
|
||||
<option name="RECENT_TEMPLATES">
|
||||
<list>
|
||||
<option value="TypeScript File" />
|
||||
<option value="TypeScript JSX File" />
|
||||
<option value="Sass File" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
<component name="Git.Settings">
|
||||
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
||||
</component>
|
||||
<component name="HighlightingSettingsPerFile">
|
||||
<setting file="file://$PROJECT_DIR$/node_modules/@material/web/checkbox/checkbox.d.ts" root0="SKIP_INSPECTION" />
|
||||
</component>
|
||||
<component name="MarkdownSettingsMigration">
|
||||
<option name="stateVersion" value="1" />
|
||||
</component>
|
||||
<component name="ProjectColorInfo">{
|
||||
"customColor": "",
|
||||
"associatedIndex": 2
|
||||
}</component>
|
||||
<component name="ProjectId" id="2aMzZwdBm9SBJKBvmCHBJPUs4Gu" />
|
||||
<component name="ProjectViewState">
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
</component>
|
||||
<component name="PropertiesComponent">{
|
||||
"keyToString": {
|
||||
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"WebServerToolWindowFactoryState": "false",
|
||||
"git-widget-placeholder": "experimental",
|
||||
"last_opened_file_path": "/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/src/styles",
|
||||
"list.type.of.created.stylesheet": "Sass",
|
||||
"node.js.detected.package.eslint": "true",
|
||||
"node.js.detected.package.tslint": "true",
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"settings.editor.selected.configurable": "preferences.lookFeel",
|
||||
"ts.external.directory.path": "/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/node_modules/typescript/lib",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
}
|
||||
}</component>
|
||||
<component name="RecentsManager">
|
||||
<key name="CopyFile.RECENT_KEYS">
|
||||
<recent name="$PROJECT_DIR$/src/styles" />
|
||||
<recent name="$PROJECT_DIR$/src/styles/font" />
|
||||
</key>
|
||||
<key name="MoveFile.RECENT_KEYS">
|
||||
<recent name="$PROJECT_DIR$/src/primitive-components" />
|
||||
</key>
|
||||
</component>
|
||||
<component name="RunManager" selected="npm.dev">
|
||||
<configuration name="build" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
|
||||
<package-json value="$PROJECT_DIR$/package.json" />
|
||||
<command value="run" />
|
||||
<scripts>
|
||||
<script value="build" />
|
||||
</scripts>
|
||||
<node-interpreter value="project" />
|
||||
<envs />
|
||||
<method v="2" />
|
||||
</configuration>
|
||||
<configuration name="dev" type="js.build_tools.npm" nameIsGenerated="true">
|
||||
<package-json value="$PROJECT_DIR$/package.json" />
|
||||
<command value="run" />
|
||||
<scripts>
|
||||
<script value="dev" />
|
||||
</scripts>
|
||||
<node-interpreter value="project" />
|
||||
<envs />
|
||||
<method v="2" />
|
||||
</configuration>
|
||||
<configuration name="start" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
|
||||
<package-json value="$PROJECT_DIR$/package.json" />
|
||||
<command value="run" />
|
||||
<scripts>
|
||||
<script value="start" />
|
||||
</scripts>
|
||||
<node-interpreter value="project" />
|
||||
<envs />
|
||||
<method v="2" />
|
||||
</configuration>
|
||||
<recent_temporary>
|
||||
<list>
|
||||
<item itemvalue="npm.start" />
|
||||
<item itemvalue="npm.build" />
|
||||
</list>
|
||||
</recent_temporary>
|
||||
</component>
|
||||
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
|
||||
<component name="TaskManager">
|
||||
<task active="true" id="Default" summary="Default task">
|
||||
<changelist id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="" />
|
||||
<created>1704143295326</created>
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1704143295326</updated>
|
||||
<workItem from="1704143297251" duration="2066000" />
|
||||
<workItem from="1704145458812" duration="1333000" />
|
||||
<workItem from="1704147434511" duration="2788000" />
|
||||
<workItem from="1704179271846" duration="27334000" />
|
||||
<workItem from="1704228987899" duration="62000" />
|
||||
<workItem from="1704266465200" duration="4226000" />
|
||||
<workItem from="1704303741925" duration="11908000" />
|
||||
<workItem from="1704352985433" duration="28906000" />
|
||||
<workItem from="1704441648986" duration="8737000" />
|
||||
<workItem from="1704453712620" duration="34000" />
|
||||
<workItem from="1704453866252" duration="4606000" />
|
||||
<workItem from="1704470557960" duration="599000" />
|
||||
<workItem from="1704482822622" duration="25572000" />
|
||||
<workItem from="1704622017317" duration="1170000" />
|
||||
<workItem from="1704624362614" duration="32454000" />
|
||||
<workItem from="1704736262141" duration="16696000" />
|
||||
<workItem from="1704788077373" duration="1228000" />
|
||||
<workItem from="1704791818898" duration="8375000" />
|
||||
<workItem from="1704833453490" duration="5101000" />
|
||||
<workItem from="1704989132540" duration="9364000" />
|
||||
<workItem from="1705064322484" duration="9060000" />
|
||||
<workItem from="1705088474200" duration="6084000" />
|
||||
<workItem from="1705095829356" duration="1674000" />
|
||||
<workItem from="1705097515215" duration="1484000" />
|
||||
<workItem from="1705144217658" duration="184000" />
|
||||
<workItem from="1705175691296" duration="9914000" />
|
||||
<workItem from="1705221294286" duration="3349000" />
|
||||
<workItem from="1705225252401" duration="32000" />
|
||||
<workItem from="1705225292674" duration="8000" />
|
||||
<workItem from="1705225306474" duration="555000" />
|
||||
<workItem from="1705446738426" duration="38000" />
|
||||
<workItem from="1705483840463" duration="31000" />
|
||||
<workItem from="1705521877221" duration="7923000" />
|
||||
<workItem from="1705592136891" duration="692000" />
|
||||
<workItem from="1705594003195" duration="6604000" />
|
||||
<workItem from="1705603674262" duration="5421000" />
|
||||
<workItem from="1705661083275" duration="4000" />
|
||||
<workItem from="1705666401100" duration="1064000" />
|
||||
<workItem from="1705667596747" duration="3042000" />
|
||||
<workItem from="1705671414099" duration="1026000" />
|
||||
<workItem from="1705695392779" duration="6092000" />
|
||||
<workItem from="1705775936603" duration="80000" />
|
||||
<workItem from="1705776495106" duration="3149000" />
|
||||
<workItem from="1705784955475" duration="3244000" />
|
||||
<workItem from="1705824814760" duration="3000" />
|
||||
<workItem from="1705872118999" duration="5390000" />
|
||||
<workItem from="1705911291566" duration="124000" />
|
||||
<workItem from="1705937322215" duration="316000" />
|
||||
<workItem from="1705937839794" duration="11116000" />
|
||||
<workItem from="1706023242228" duration="822000" />
|
||||
<workItem from="1706024195558" duration="6543000" />
|
||||
</task>
|
||||
<task id="LOCAL-00019" summary="added customizable classname field for rippleArea component">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704526583970</created>
|
||||
<option name="number" value="00019" />
|
||||
<option name="presentableId" value="LOCAL-00019" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704526583970</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00020" summary="updated switch styles">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704526600066</created>
|
||||
<option name="number" value="00020" />
|
||||
<option name="presentableId" value="LOCAL-00020" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704526600066</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00021" summary="updated checkbox component">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704526612167</created>
|
||||
<option name="number" value="00021" />
|
||||
<option name="presentableId" value="LOCAL-00021" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704526612167</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00022" summary="added opportunity for customize classname">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704526646792</created>
|
||||
<option name="number" value="00022" />
|
||||
<option name="presentableId" value="LOCAL-00022" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704526646792</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00023" summary="updated generic styles">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704526658894</created>
|
||||
<option name="number" value="00023" />
|
||||
<option name="presentableId" value="LOCAL-00023" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704526658894</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00024" summary="other updates...">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704526668819</created>
|
||||
<option name="number" value="00024" />
|
||||
<option name="presentableId" value="LOCAL-00024" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704526668819</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00025" summary="added radio component">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704577073405</created>
|
||||
<option name="number" value="00025" />
|
||||
<option name="presentableId" value="LOCAL-00025" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704577073405</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00026" summary="added in preview page radio component">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704577088372</created>
|
||||
<option name="number" value="00026" />
|
||||
<option name="presentableId" value="LOCAL-00026" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704577088372</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00027" summary="I forgot, what I change">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704577111494</created>
|
||||
<option name="number" value="00027" />
|
||||
<option name="presentableId" value="LOCAL-00027" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704577111494</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00028" summary="I forgot, what I change">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704577125154</created>
|
||||
<option name="number" value="00028" />
|
||||
<option name="presentableId" value="LOCAL-00028" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704577125154</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00029" summary="added radio styles and mixins">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704577139599</created>
|
||||
<option name="number" value="00029" />
|
||||
<option name="presentableId" value="LOCAL-00029" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704577139599</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00030" summary="radio styles component update">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704665181492</created>
|
||||
<option name="number" value="00030" />
|
||||
<option name="presentableId" value="LOCAL-00030" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704665181492</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00031" summary="I forgot, what I changed">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704665219291</created>
|
||||
<option name="number" value="00031" />
|
||||
<option name="presentableId" value="LOCAL-00031" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704665219291</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00032" summary="Updated switch styles">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704665235238</created>
|
||||
<option name="number" value="00032" />
|
||||
<option name="presentableId" value="LOCAL-00032" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704665235238</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00033" summary="Updated preview page">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704665243297</created>
|
||||
<option name="number" value="00033" />
|
||||
<option name="presentableId" value="LOCAL-00033" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704665243297</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00034" summary="added mixins">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704665255268</created>
|
||||
<option name="number" value="00034" />
|
||||
<option name="presentableId" value="LOCAL-00034" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704665255268</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00035" summary="moved fonts to separated file">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704665272238</created>
|
||||
<option name="number" value="00035" />
|
||||
<option name="presentableId" value="LOCAL-00035" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704665272238</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00036" summary="added roboto fonts">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704665285628</created>
|
||||
<option name="number" value="00036" />
|
||||
<option name="presentableId" value="LOCAL-00036" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704665285628</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00037" summary="added roboto fonts, fabs and fonts style sheets after sass compiling">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704665322221</created>
|
||||
<option name="number" value="00037" />
|
||||
<option name="presentableId" value="LOCAL-00037" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704665322221</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00038" summary="added and updated some component (fabs, button, switch, radio, checkbox)">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704665352879</created>
|
||||
<option name="number" value="00038" />
|
||||
<option name="presentableId" value="LOCAL-00038" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704665352879</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00039" summary="added sass style sheet file for fabs">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704665367142</created>
|
||||
<option name="number" value="00039" />
|
||||
<option name="presentableId" value="LOCAL-00039" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704665367142</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00040" summary="updated button styles and renaming button component file">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704665398936</created>
|
||||
<option name="number" value="00040" />
|
||||
<option name="presentableId" value="LOCAL-00040" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704665398936</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00041" summary="updated checkbox styles">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704665410733</created>
|
||||
<option name="number" value="00041" />
|
||||
<option name="presentableId" value="LOCAL-00041" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704665410733</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00042" summary="updated styles for preview page">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704748096828</created>
|
||||
<option name="number" value="00042" />
|
||||
<option name="presentableId" value="LOCAL-00042" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704748096828</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00043" summary="switch styles completed">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704748124500</created>
|
||||
<option name="number" value="00043" />
|
||||
<option name="presentableId" value="LOCAL-00043" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704748124500</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00044" summary="updated preview page">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704748135954</created>
|
||||
<option name="number" value="00044" />
|
||||
<option name="presentableId" value="LOCAL-00044" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704748135954</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00045" summary="added attribute "selected" for icons">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704748153364</created>
|
||||
<option name="number" value="00045" />
|
||||
<option name="presentableId" value="LOCAL-00045" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704748153364</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00046" summary="switch styles hotfix">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704751209333</created>
|
||||
<option name="number" value="00046" />
|
||||
<option name="presentableId" value="LOCAL-00046" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704751209333</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00047" summary="switch styles hotfix">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704751889114</created>
|
||||
<option name="number" value="00047" />
|
||||
<option name="presentableId" value="LOCAL-00047" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704751889114</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00048" summary="added compiled sass styles for icon-buttons">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704837754211</created>
|
||||
<option name="number" value="00048" />
|
||||
<option name="presentableId" value="LOCAL-00048" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704837754211</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00049" summary="icon button styles completed">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704837786812</created>
|
||||
<option name="number" value="00049" />
|
||||
<option name="presentableId" value="LOCAL-00049" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704837786812</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00050" summary="separated components previews">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704837827996</created>
|
||||
<option name="number" value="00050" />
|
||||
<option name="presentableId" value="LOCAL-00050" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704837827996</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00051" summary="added m3 wrapper">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704837841727</created>
|
||||
<option name="number" value="00051" />
|
||||
<option name="presentableId" value="LOCAL-00051" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704837841727</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00052" summary="added icon button (wip)">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704837855501</created>
|
||||
<option name="number" value="00052" />
|
||||
<option name="presentableId" value="LOCAL-00052" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704837855501</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00053" summary="??? wtf bro">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704837877968</created>
|
||||
<option name="number" value="00053" />
|
||||
<option name="presentableId" value="LOCAL-00053" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704837877968</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00054" summary="??? wtf bro">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704837881086</created>
|
||||
<option name="number" value="00054" />
|
||||
<option name="presentableId" value="LOCAL-00054" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704837881086</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00055" summary="??? wtf bro">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704837896608</created>
|
||||
<option name="number" value="00055" />
|
||||
<option name="presentableId" value="LOCAL-00055" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704837896608</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00056" summary="updated styles">
|
||||
<option name="closed" value="true" />
|
||||
<created>1704837910534</created>
|
||||
<option name="number" value="00056" />
|
||||
<option name="presentableId" value="LOCAL-00056" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1704837910534</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00057" summary="added forward ref for further refs actions, added functionality for switchable icon buttons, added half of styles for icon buttons">
|
||||
<option name="closed" value="true" />
|
||||
<created>1705098993824</created>
|
||||
<option name="number" value="00057" />
|
||||
<option name="presentableId" value="LOCAL-00057" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1705098993824</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00058" summary="icon button styles completed">
|
||||
<option name="closed" value="true" />
|
||||
<created>1705187043022</created>
|
||||
<option name="number" value="00058" />
|
||||
<option name="presentableId" value="LOCAL-00058" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1705187043022</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00059" summary="icon button styles completed">
|
||||
<option name="closed" value="true" />
|
||||
<created>1705187047711</created>
|
||||
<option name="number" value="00059" />
|
||||
<option name="presentableId" value="LOCAL-00059" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1705187047711</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00060" summary="icon button styles completed">
|
||||
<option name="closed" value="true" />
|
||||
<created>1705187050731</created>
|
||||
<option name="number" value="00060" />
|
||||
<option name="presentableId" value="LOCAL-00060" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1705187050731</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00061" summary="added a few variation of icon button">
|
||||
<option name="closed" value="true" />
|
||||
<created>1705187070169</created>
|
||||
<option name="number" value="00061" />
|
||||
<option name="presentableId" value="LOCAL-00061" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1705187070169</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00062" summary="added support attribute "selected" for icon buttons">
|
||||
<option name="closed" value="true" />
|
||||
<created>1705187096566</created>
|
||||
<option name="number" value="00062" />
|
||||
<option name="presentableId" value="LOCAL-00062" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1705187096567</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00063" summary="improved file management">
|
||||
<option name="closed" value="true" />
|
||||
<created>1705446770845</created>
|
||||
<option name="number" value="00063" />
|
||||
<option name="presentableId" value="LOCAL-00063" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1705446770846</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00064" summary="TODO: complete supporting text ADDED: semi-complete filled text fields CHANGED: preview page and m3 color scheme">
|
||||
<option name="closed" value="true" />
|
||||
<created>1705788187457</created>
|
||||
<option name="number" value="00064" />
|
||||
<option name="presentableId" value="LOCAL-00064" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1705788187457</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00065" summary="TODO: complete supporting text ADDED: semi-complete filled text fields CHANGED: preview page and m3 color scheme">
|
||||
<option name="closed" value="true" />
|
||||
<created>1705788194219</created>
|
||||
<option name="number" value="00065" />
|
||||
<option name="presentableId" value="LOCAL-00065" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1705788194219</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00066" summary="TODO: before icon ADDED: semi-complete filled text fields">
|
||||
<option name="closed" value="true" />
|
||||
<created>1705877491483</created>
|
||||
<option name="number" value="00066" />
|
||||
<option name="presentableId" value="LOCAL-00066" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1705877491483</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00067" summary="TODO: placeholder ADDED: supported text, animation move for label, and etc">
|
||||
<option name="closed" value="true" />
|
||||
<created>1705955541881</created>
|
||||
<option name="number" value="00067" />
|
||||
<option name="presentableId" value="LOCAL-00067" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1705955541881</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="68" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="3" />
|
||||
</component>
|
||||
<component name="Vcs.Log.Tabs.Properties">
|
||||
<option name="TAB_STATES">
|
||||
<map>
|
||||
<entry key="MAIN">
|
||||
<value>
|
||||
<State />
|
||||
</value>
|
||||
</entry>
|
||||
</map>
|
||||
</option>
|
||||
</component>
|
||||
<component name="VcsManagerConfiguration">
|
||||
<MESSAGE value="added roboto fonts" />
|
||||
<MESSAGE value="added roboto fonts, fabs and fonts style sheets after sass compiling" />
|
||||
<MESSAGE value="added and updated some component (fabs, button, switch, radio, checkbox)" />
|
||||
<MESSAGE value="added sass style sheet file for fabs" />
|
||||
<MESSAGE value="updated button styles and renaming button component file" />
|
||||
<MESSAGE value="updated checkbox styles" />
|
||||
<MESSAGE value="updated styles for preview page" />
|
||||
<MESSAGE value="switch styles completed" />
|
||||
<MESSAGE value="updated preview page" />
|
||||
<MESSAGE value="added attribute "selected" for icons" />
|
||||
<MESSAGE value="switch styles hotfix" />
|
||||
<MESSAGE value="added compiled sass styles for icon-buttons" />
|
||||
<MESSAGE value="separated components previews" />
|
||||
<MESSAGE value="added m3 wrapper" />
|
||||
<MESSAGE value="added icon button (wip)" />
|
||||
<MESSAGE value="??? wtf bro" />
|
||||
<MESSAGE value="updated styles" />
|
||||
<MESSAGE value="added forward ref for further refs actions, added functionality for switchable icon buttons, added half of styles for icon buttons" />
|
||||
<MESSAGE value="icon button styles completed" />
|
||||
<MESSAGE value="added a few variation of icon button" />
|
||||
<MESSAGE value="added support attribute "selected" for icon buttons" />
|
||||
<MESSAGE value="improved file management" />
|
||||
<MESSAGE value="TODO: complete supporting text ADDED: semi-complete filled text fields CHANGED: preview page and m3 color scheme" />
|
||||
<MESSAGE value="TODO: before icon ADDED: semi-complete filled text fields" />
|
||||
<MESSAGE value="TODO: placeholder ADDED: supported text, animation move for label, and etc" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="TODO: placeholder ADDED: supported text, animation move for label, and etc" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
"use client"
|
||||
|
||||
import React, {useCallback, useState} from 'react';
|
||||
import {Button} from "../../src/primitive-components/material-you-components";
|
||||
import axios from "axios";
|
||||
|
||||
export default function Buttons() {
|
||||
|
||||
const [state, setState] = useState(1);
|
||||
|
||||
const callback = useCallback(() =>
|
||||
setState(prevState => prevState + 1)
|
||||
, [state]);
|
||||
|
||||
return (
|
||||
<div className={"m3 m3-wrapper"}>
|
||||
<h1> Buttons </h1>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||||
<div>
|
||||
<h2> Default buttons </h2>
|
||||
<div style={{display: "flex", flexDirection: "column", width: "150px", gap: "0.5em"}}>
|
||||
<Button variant={"filled"} onClick={callback}>
|
||||
Label + {state}
|
||||
</Button>
|
||||
<Button variant={"outlined"}>
|
||||
Label
|
||||
</Button>
|
||||
<Button variant={"tonal"}>
|
||||
Label
|
||||
</Button>
|
||||
<Button variant={"elevated"}>
|
||||
Label
|
||||
</Button>
|
||||
<Button variant={"text"}>
|
||||
Label
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Buttons with icon </h2>
|
||||
<div style={{display: "flex", flexDirection: "column", width: "150px", gap: "0.5em"}}>
|
||||
<Button variant={"filled"} icon={"add"}>
|
||||
Label
|
||||
</Button>
|
||||
<Button variant={"outlined"} icon={"add"}>
|
||||
Label
|
||||
</Button>
|
||||
<Button variant={"tonal"} icon={"add"}>
|
||||
Label
|
||||
</Button>
|
||||
<Button variant={"elevated"} icon={"add"}>
|
||||
Label
|
||||
</Button>
|
||||
<Button variant={"text"} icon={"add"}>
|
||||
Label
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
"use client"
|
||||
|
||||
import React from 'react';
|
||||
import {Button, Checkbox } from '../../src/primitive-components/material-you-components';
|
||||
|
||||
export default function Checkboxes() {
|
||||
|
||||
return (
|
||||
<div className={"m3 m3-wrapper"}>
|
||||
<h1> Checkboxes </h1>
|
||||
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<Checkbox/>
|
||||
<Checkbox defaultChecked/>
|
||||
<Checkbox indeterminate={true}/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<Checkbox disabled/>
|
||||
<Checkbox disabled defaultChecked/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Errored </h2>
|
||||
<form style={{display: "flex", gap: "2em", flexDirection: "column"}}>
|
||||
<div style={{display: "flex", gap: "2em", flexDirection: "row"}}>
|
||||
<Checkbox required/>
|
||||
<Checkbox required defaultChecked/>
|
||||
<Checkbox required indeterminate={true}/>
|
||||
</div>
|
||||
<div style={{display: "flex", gap: "2em", flexDirection: "row"}}>
|
||||
<Checkbox required className={"m3-error"}/>
|
||||
<Checkbox required defaultChecked className={"m3-error"}/>
|
||||
<Checkbox required indeterminate={true} className={"m3-error"}/>
|
||||
</div>
|
||||
<Button type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import React from 'react';
|
||||
import {FAB} from "../../src/primitive-components/material-you-components";
|
||||
|
||||
export default function Fabs() {
|
||||
return (
|
||||
<div className={"m3 m3-wrapper"}>
|
||||
<h1> FABs </h1>
|
||||
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
|
||||
<div>
|
||||
<h2> Small </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB size={"small"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"primary"}
|
||||
size={"small"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"secondary"}
|
||||
size={"small"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"tertiary"}
|
||||
size={"small"}
|
||||
icon={"edit"}/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB icon={"edit"}/>
|
||||
<FAB variant={"primary"} icon={"edit"}/>
|
||||
<FAB variant={"secondary"} icon={"edit"}/>
|
||||
<FAB variant={"tertiary"} icon={"edit"}/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Large </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB size={"large"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"primary"}
|
||||
size={"large"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"secondary"}
|
||||
size={"large"}
|
||||
icon={"edit"}/>
|
||||
<FAB variant={"tertiary"}
|
||||
size={"large"}
|
||||
icon={"edit"}/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Extended </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<FAB size={"extended"}
|
||||
icon={"edit"}>
|
||||
<span className={"label-large"}>
|
||||
Label
|
||||
</span>
|
||||
</FAB>
|
||||
<FAB variant={"primary"}
|
||||
size={"extended"}
|
||||
icon={"edit"}>
|
||||
<span className={"label-large"}>
|
||||
Label
|
||||
</span>
|
||||
</FAB>
|
||||
<FAB variant={"secondary"}
|
||||
size={"extended"}
|
||||
icon={"edit"}>
|
||||
<span className={"label-large"}>
|
||||
Label
|
||||
</span>
|
||||
</FAB>
|
||||
<FAB variant={"tertiary"}
|
||||
size={"extended"}
|
||||
icon={"edit"}>
|
||||
<span className={"label-large"}>
|
||||
Label
|
||||
</span>
|
||||
</FAB>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
"use client"
|
||||
|
||||
import React from 'react';
|
||||
import {IconButton} from "../../src/primitive-components/material-you-components";
|
||||
|
||||
function IconButtons() {
|
||||
|
||||
return (
|
||||
<div className={"m3 m3-wrapper"}>
|
||||
<h1> Icon buttons </h1>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div>
|
||||
<h2> Default buttons </h2>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
|
||||
<IconButton icon={"settings"}/>
|
||||
<IconButton icon={"settings"} variant={"filled"}/>
|
||||
<IconButton icon={"settings"} variant={"tonal"}/>
|
||||
<IconButton icon={"settings"} variant={"outlined"}/>
|
||||
</div>
|
||||
<h2> Disabled default buttons </h2>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
|
||||
<IconButton icon={"settings"} disabled/>
|
||||
<IconButton icon={"settings"} variant={"filled"} disabled/>
|
||||
<IconButton icon={"settings"} variant={"tonal"} disabled/>
|
||||
<IconButton icon={"settings"} variant={"outlined"} disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Toggle buttons </h2>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
|
||||
<IconButton icon={"settings"} toggled={
|
||||
{
|
||||
selected: "settings",
|
||||
unselected: "settings",
|
||||
}
|
||||
}/>
|
||||
<IconButton icon={"settings"} variant={"filled"} toggled={
|
||||
{
|
||||
selected: "settings",
|
||||
unselected: "settings",
|
||||
}
|
||||
}/>
|
||||
<IconButton icon={"settings"} variant={"tonal"} toggled={
|
||||
{
|
||||
selected: "settings",
|
||||
unselected: "settings",
|
||||
}
|
||||
}/>
|
||||
<IconButton icon={"settings"} variant={"outlined"} toggled={
|
||||
{
|
||||
selected: "settings",
|
||||
unselected: "settings",
|
||||
}
|
||||
}/>
|
||||
</div>
|
||||
<h2> Disabled toggle buttons </h2>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
|
||||
<IconButton icon={"settings"} toggled={
|
||||
{
|
||||
selected: "settings",
|
||||
unselected: "settings",
|
||||
}
|
||||
} disabled/>
|
||||
<IconButton icon={"settings"} variant={"filled"} toggled={
|
||||
{
|
||||
selected: "settings",
|
||||
unselected: "settings",
|
||||
}
|
||||
} disabled/>
|
||||
<IconButton icon={"settings"} variant={"tonal"} toggled={
|
||||
{
|
||||
selected: "settings",
|
||||
unselected: "settings",
|
||||
}
|
||||
} disabled/>
|
||||
<IconButton icon={"settings"} variant={"outlined"} toggled={
|
||||
{
|
||||
selected: "settings",
|
||||
unselected: "settings",
|
||||
}
|
||||
} disabled/>
|
||||
</div>
|
||||
<h2> Disabled selected toggle buttons </h2>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
|
||||
<IconButton icon={"settings"} toggled={
|
||||
{
|
||||
selected: "settings",
|
||||
unselected: "settings",
|
||||
}
|
||||
} disabled selected/>
|
||||
<IconButton icon={"settings"} variant={"filled"} toggled={
|
||||
{
|
||||
selected: "settings",
|
||||
unselected: "settings",
|
||||
}
|
||||
} disabled selected/>
|
||||
<IconButton icon={"settings"} variant={"tonal"} toggled={
|
||||
{
|
||||
selected: "settings",
|
||||
unselected: "settings",
|
||||
}
|
||||
} disabled selected/>
|
||||
<IconButton icon={"settings"} variant={"outlined"} toggled={
|
||||
{
|
||||
selected: "settings",
|
||||
unselected: "settings",
|
||||
}
|
||||
} disabled selected/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default IconButtons;
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react';
|
||||
import { Radio } from '../../src/primitive-components/material-you-components';
|
||||
|
||||
export default function Radios() {
|
||||
return (
|
||||
<div className={"m3 m3-wrapper"}>
|
||||
<h1> Radio </h1>
|
||||
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<Radio/>
|
||||
<Radio defaultChecked/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<div style={{display: "flex", gap: "2em"}}>
|
||||
<Radio disabled/>
|
||||
<Radio disabled defaultChecked/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import React from 'react';
|
||||
import {Switch} from "../../src/primitive-components/material-you-components";
|
||||
|
||||
export default function Switches() {
|
||||
return (
|
||||
<div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "column", gap: "1.5em"}}>
|
||||
<h1> Switches </h1>
|
||||
<div style={{display: "flex", flexDirection: "column"}}>
|
||||
<h2 style={{margin: 0}}> Without icon </h2>
|
||||
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<Switch/>
|
||||
<Switch defaultChecked/>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<Switch disabled/>
|
||||
<Switch disabled defaultChecked/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: "flex", flexDirection: "column"}}>
|
||||
<h2 style={{margin: 0}}> With icon (both)</h2>
|
||||
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<Switch icon/>
|
||||
<Switch defaultChecked icon/>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<Switch disabled icon/>
|
||||
<Switch disabled defaultChecked icon/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: "flex", flexDirection: "column"}}>
|
||||
<h2 style={{margin: 0}}> With icon (selected)</h2>
|
||||
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<Switch selected icon/>
|
||||
<Switch selected defaultChecked icon/>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<Switch selected disabled icon/>
|
||||
<Switch selected disabled defaultChecked icon/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,424 @@
|
|||
import React from 'react';
|
||||
import {TextField} from "../../src/primitive-components/text-field/text-field";
|
||||
import {Button} from "../../src/primitive-components/button/button";
|
||||
|
||||
export function TextFields(_props : any) {
|
||||
return (
|
||||
<div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||||
<div>
|
||||
<h1> Inputs </h1>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<h2> Filled Inputs </h2>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||||
<div>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
required/>
|
||||
<Button variant={"filled"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
supportingText={"Supporting text"}/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
supportingText={"Supporting text"}
|
||||
required/>
|
||||
<Button variant={"filled"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
supportingText={"Supporting text"}
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
withAfterIcon/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
withAfterIcon
|
||||
required/>
|
||||
<Button variant={"filled"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
withAfterIcon
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
withAfterIcon
|
||||
supportingText={"Supporting text"}/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"} withAfterIcon
|
||||
supportingText={"Supporting text"}
|
||||
required/>
|
||||
<Button variant={"filled"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
withAfterIcon
|
||||
supportingText={"Supporting text"}
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
withBeforeIcon/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
withBeforeIcon
|
||||
required/>
|
||||
<Button variant={"filled"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
withBeforeIcon
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
supportingText={"Supporting text"}
|
||||
withBeforeIcon/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
supportingText={"Supporting text"}
|
||||
withBeforeIcon
|
||||
required/>
|
||||
<Button variant={"filled"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
supportingText={"Supporting text"}
|
||||
withBeforeIcon
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
withBeforeIcon
|
||||
withAfterIcon/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
withBeforeIcon
|
||||
withAfterIcon
|
||||
required/>
|
||||
<Button variant={"filled"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
withBeforeIcon
|
||||
withAfterIcon
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
withBeforeIcon
|
||||
supportingText={"Supporting text"}
|
||||
withAfterIcon/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
withBeforeIcon
|
||||
withAfterIcon
|
||||
supportingText={"Supporting text"}
|
||||
required/>
|
||||
<Button variant={"filled"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"filled"}
|
||||
type={"email"}
|
||||
withBeforeIcon
|
||||
withAfterIcon
|
||||
supportingText={"Supporting text"}
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h1> Outlined </h1>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<h2> Filled Inputs </h2>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||||
<div>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
required/>
|
||||
<Button variant={"outlined"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
supportingText={"Supporting text"}/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
supportingText={"Supporting text"}
|
||||
required/>
|
||||
<Button variant={"outlined"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
supportingText={"Supporting text"}
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
withAfterIcon/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
withAfterIcon
|
||||
required/>
|
||||
<Button variant={"outlined"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
withAfterIcon
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
withAfterIcon
|
||||
supportingText={"Supporting text"}/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"} withAfterIcon
|
||||
supportingText={"Supporting text"}
|
||||
required/>
|
||||
<Button variant={"outlined"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
withAfterIcon
|
||||
supportingText={"Supporting text"}
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
withBeforeIcon/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
withBeforeIcon
|
||||
required/>
|
||||
<Button variant={"outlined"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
withBeforeIcon
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
supportingText={"Supporting text"}
|
||||
withBeforeIcon/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
supportingText={"Supporting text"}
|
||||
withBeforeIcon
|
||||
required/>
|
||||
<Button variant={"outlined"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
supportingText={"Supporting text"}
|
||||
withBeforeIcon
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
withBeforeIcon
|
||||
withAfterIcon/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
withBeforeIcon
|
||||
withAfterIcon
|
||||
required/>
|
||||
<Button variant={"outlined"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
withBeforeIcon
|
||||
withAfterIcon
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
withBeforeIcon
|
||||
supportingText={"Supporting text"}
|
||||
withAfterIcon/>
|
||||
</div>
|
||||
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
withBeforeIcon
|
||||
withAfterIcon
|
||||
supportingText={"Supporting text"}
|
||||
required/>
|
||||
<Button variant={"outlined"}
|
||||
type={"submit"}>
|
||||
Send
|
||||
</Button>
|
||||
</form>
|
||||
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||||
<TextField variant={"outlined"}
|
||||
type={"email"}
|
||||
withBeforeIcon
|
||||
withAfterIcon
|
||||
supportingText={"Supporting text"}
|
||||
disabled/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import "../src/styles/generics.css"
|
||||
import "../src/styles/button.css"
|
||||
import "../src/styles/ripple.css"
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import {Fragment} from "react";
|
||||
import Buttons from "./components/buttons"
|
||||
import Switches from "./components/switches";
|
||||
import Checkboxes from "./components/checkboxes";
|
||||
import Radios from "./components/radios";
|
||||
import Fabs from "./components/fabs";
|
||||
import IconButtons from "./components/icon-buttons";
|
||||
import {TextFields} from "./components/text-fields";
|
||||
|
||||
export default function Page() {
|
||||
return(
|
||||
<Fragment>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
flexDirection:"column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
gap: "0em"
|
||||
}}>
|
||||
<h1>Google Material You UI kit</h1>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
flexDirection:"row",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap:"20px"
|
||||
}}>
|
||||
{/*<div style={{*/}
|
||||
{/* display: "flex",*/}
|
||||
{/* flexDirection:"column",*/}
|
||||
{/* gap:"20px",*/}
|
||||
{/*}}>*/}
|
||||
{/* <Buttons/>*/}
|
||||
{/* <IconButtons/>*/}
|
||||
{/*</div>*/}
|
||||
{/*<Switches/>*/}
|
||||
{/*<Checkboxes/>*/}
|
||||
{/*<Radios/>*/}
|
||||
{/*<Fabs/>*/}
|
||||
<TextFields/>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,541 @@
|
|||
/*
|
||||
! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
|
||||
*/
|
||||
|
||||
/*
|
||||
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
||||
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
border-width: 0;
|
||||
/* 2 */
|
||||
border-style: solid;
|
||||
/* 2 */
|
||||
border-color: #e5e7eb;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
::before,
|
||||
::after {
|
||||
--tw-content: '';
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use a consistent sensible line-height in all browsers.
|
||||
2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
3. Use a more readable tab size.
|
||||
4. Use the user's configured `sans` font-family by default.
|
||||
5. Use the user's configured `sans` font-feature-settings by default.
|
||||
6. Use the user's configured `sans` font-variation-settings by default.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.5;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */
|
||||
-moz-tab-size: 4;
|
||||
/* 3 */
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
/* 3 */
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
/* 4 */
|
||||
font-feature-settings: normal;
|
||||
/* 5 */
|
||||
font-variation-settings: normal;
|
||||
/* 6 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Remove the margin in all browsers.
|
||||
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
/* 1 */
|
||||
line-height: inherit;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Add the correct height in Firefox.
|
||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||
3. Ensure horizontal rules are visible by default.
|
||||
*/
|
||||
|
||||
hr {
|
||||
height: 0;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 2 */
|
||||
border-top-width: 1px;
|
||||
/* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct text decoration in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
abbr:where([title]) {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the default font size and weight for headings.
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Reset links to optimize for opt-in styling instead of opt-out.
|
||||
*/
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct font weight in Edge and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use the user's configured `mono` font-family by default.
|
||||
2. Use the user's configured `mono` font-feature-settings by default.
|
||||
3. Use the user's configured `mono` font-variation-settings by default.
|
||||
4. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
/* 1 */
|
||||
font-feature-settings: normal;
|
||||
/* 2 */
|
||||
font-variation-settings: normal;
|
||||
/* 3 */
|
||||
font-size: 1em;
|
||||
/* 4 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
3. Remove gaps between table borders by default.
|
||||
*/
|
||||
|
||||
table {
|
||||
text-indent: 0;
|
||||
/* 1 */
|
||||
border-color: inherit;
|
||||
/* 2 */
|
||||
border-collapse: collapse;
|
||||
/* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Change the font styles in all browsers.
|
||||
2. Remove the margin in Firefox and Safari.
|
||||
3. Remove default padding in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
/* 1 */
|
||||
font-feature-settings: inherit;
|
||||
/* 1 */
|
||||
font-variation-settings: inherit;
|
||||
/* 1 */
|
||||
font-size: 100%;
|
||||
/* 1 */
|
||||
font-weight: inherit;
|
||||
/* 1 */
|
||||
line-height: inherit;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
/* 2 */
|
||||
padding: 0;
|
||||
/* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the inheritance of text transform in Edge and Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Remove default button-skeleton styles.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
background-color: transparent;
|
||||
/* 2 */
|
||||
background-image: none;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Use the modern Firefox focus style for all focusable elements.
|
||||
*/
|
||||
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
||||
*/
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct vertical alignment in Chrome and Firefox.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/*
|
||||
Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the odd appearance in Chrome and Safari.
|
||||
2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield;
|
||||
/* 1 */
|
||||
outline-offset: -2px;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/*
|
||||
Removes the default spacing and border for appropriate elements.
|
||||
*/
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
dd,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
figure,
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Reset default styling for dialogs.
|
||||
*/
|
||||
|
||||
dialog {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent resizing textareas horizontally by default.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
||||
2. Set the default placeholder color to the user's configured gray 400 color.
|
||||
*/
|
||||
|
||||
input::-moz-placeholder, textarea::-moz-placeholder {
|
||||
opacity: 1;
|
||||
/* 1 */
|
||||
color: #9ca3af;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
opacity: 1;
|
||||
/* 1 */
|
||||
color: #9ca3af;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Set the default cursor for buttons.
|
||||
*/
|
||||
|
||||
button,
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
Make sure disabled buttons don't get the pointer cursor.
|
||||
*/
|
||||
|
||||
:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
||||
This can trigger a poorly considered lint error in some tools but is included by design.
|
||||
*/
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas,
|
||||
audio,
|
||||
iframe,
|
||||
embed,
|
||||
object {
|
||||
display: block;
|
||||
/* 1 */
|
||||
vertical-align: middle;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
*/
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Make elements with the HTML hidden attribute stay hidden by default */
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
|
@ -0,0 +1,541 @@
|
|||
/*
|
||||
! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
|
||||
*/
|
||||
|
||||
/*
|
||||
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
||||
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
border-width: 0;
|
||||
/* 2 */
|
||||
border-style: solid;
|
||||
/* 2 */
|
||||
border-color: #e5e7eb;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
::before,
|
||||
::after {
|
||||
--tw-content: '';
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use a consistent sensible line-height in all browsers.
|
||||
2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
3. Use a more readable tab size.
|
||||
4. Use the user's configured `sans` font-family by default.
|
||||
5. Use the user's configured `sans` font-feature-settings by default.
|
||||
6. Use the user's configured `sans` font-variation-settings by default.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.5;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */
|
||||
-moz-tab-size: 4;
|
||||
/* 3 */
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
/* 3 */
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
/* 4 */
|
||||
font-feature-settings: normal;
|
||||
/* 5 */
|
||||
font-variation-settings: normal;
|
||||
/* 6 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Remove the margin in all browsers.
|
||||
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
/* 1 */
|
||||
line-height: inherit;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Add the correct height in Firefox.
|
||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||
3. Ensure horizontal rules are visible by default.
|
||||
*/
|
||||
|
||||
hr {
|
||||
height: 0;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 2 */
|
||||
border-top-width: 1px;
|
||||
/* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct text decoration in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
abbr:where([title]) {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the default font size and weight for headings.
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Reset links to optimize for opt-in styling instead of opt-out.
|
||||
*/
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct font weight in Edge and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use the user's configured `mono` font-family by default.
|
||||
2. Use the user's configured `mono` font-feature-settings by default.
|
||||
3. Use the user's configured `mono` font-variation-settings by default.
|
||||
4. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
/* 1 */
|
||||
font-feature-settings: normal;
|
||||
/* 2 */
|
||||
font-variation-settings: normal;
|
||||
/* 3 */
|
||||
font-size: 1em;
|
||||
/* 4 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
3. Remove gaps between table borders by default.
|
||||
*/
|
||||
|
||||
table {
|
||||
text-indent: 0;
|
||||
/* 1 */
|
||||
border-color: inherit;
|
||||
/* 2 */
|
||||
border-collapse: collapse;
|
||||
/* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Change the font styles in all browsers.
|
||||
2. Remove the margin in Firefox and Safari.
|
||||
3. Remove default padding in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
/* 1 */
|
||||
font-feature-settings: inherit;
|
||||
/* 1 */
|
||||
font-variation-settings: inherit;
|
||||
/* 1 */
|
||||
font-size: 100%;
|
||||
/* 1 */
|
||||
font-weight: inherit;
|
||||
/* 1 */
|
||||
line-height: inherit;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
/* 2 */
|
||||
padding: 0;
|
||||
/* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the inheritance of text transform in Edge and Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Remove default button-skeleton styles.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
background-color: transparent;
|
||||
/* 2 */
|
||||
background-image: none;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Use the modern Firefox focus style for all focusable elements.
|
||||
*/
|
||||
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
||||
*/
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct vertical alignment in Chrome and Firefox.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/*
|
||||
Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the odd appearance in Chrome and Safari.
|
||||
2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield;
|
||||
/* 1 */
|
||||
outline-offset: -2px;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/*
|
||||
Removes the default spacing and border for appropriate elements.
|
||||
*/
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
dd,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
figure,
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Reset default styling for dialogs.
|
||||
*/
|
||||
|
||||
dialog {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent resizing textareas horizontally by default.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
||||
2. Set the default placeholder color to the user's configured gray 400 color.
|
||||
*/
|
||||
|
||||
input::-moz-placeholder, textarea::-moz-placeholder {
|
||||
opacity: 1;
|
||||
/* 1 */
|
||||
color: #9ca3af;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
opacity: 1;
|
||||
/* 1 */
|
||||
color: #9ca3af;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Set the default cursor for buttons.
|
||||
*/
|
||||
|
||||
button,
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
Make sure disabled buttons don't get the pointer cursor.
|
||||
*/
|
||||
|
||||
:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
||||
This can trigger a poorly considered lint error in some tools but is included by design.
|
||||
*/
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas,
|
||||
audio,
|
||||
iframe,
|
||||
embed,
|
||||
object {
|
||||
display: block;
|
||||
/* 1 */
|
||||
vertical-align: middle;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
*/
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Make elements with the HTML hidden attribute stay hidden by default */
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbo",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.6.5",
|
||||
"lodash": "^4.17.21",
|
||||
"mui": "^0.0.1",
|
||||
"next": "latest",
|
||||
"normalize.css": "^8.0.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"styled-components": "^6.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "20.8.10",
|
||||
"@types/react": "18.2.33",
|
||||
"@types/react-dom": "18.2.14",
|
||||
"@typescript-eslint/eslint-plugin": "^6.19.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-standard-with-typescript": "^43.0.0",
|
||||
"eslint-plugin-import": "^2.29.1",
|
||||
"eslint-plugin-n": "^16.6.2",
|
||||
"eslint-plugin-promise": "^6.1.1",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"postcss": "^8.4.32",
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
"use client"
|
||||
|
||||
import {RippleArea} from "../ripple/ripple-area";
|
||||
import React, {forwardRef, useId, useRef, useState} from "react";
|
||||
import useRippleEffect from "../ripple/hooks/useRippleEffect";
|
||||
|
||||
const ButtonSkeleton = forwardRef(
|
||||
|
||||
function ButtonBase(props : any, ref){
|
||||
|
||||
const [isActive, setIsActive] = useState<boolean>(false),
|
||||
ripplesRef = useRef(null),
|
||||
buttonId = useId(),
|
||||
events = useRippleEffect(ripplesRef, setIsActive);
|
||||
|
||||
let {
|
||||
variant,
|
||||
disabled,
|
||||
className
|
||||
} = props;
|
||||
|
||||
let classes = className ?
|
||||
`m3 ${className} ${variant}${isActive ? " is-active" : ""}` :
|
||||
`m3 ${variant}${isActive ? " is-active" : ""}`;
|
||||
|
||||
return (
|
||||
<button {...props}
|
||||
{...events}
|
||||
ref={ref}
|
||||
id={buttonId}
|
||||
className={classes}
|
||||
disabled={disabled}>
|
||||
{props.children}
|
||||
<RippleArea ref={ripplesRef}
|
||||
callback={setIsActive}/>
|
||||
</button>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
)
|
||||
|
||||
export {ButtonSkeleton};
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import {PropsWithChildren} from "react";
|
||||
|
||||
type toggleButtonType = {
|
||||
selected: string,
|
||||
unselected: string,
|
||||
}
|
||||
|
||||
export interface buttonMainProps extends PropsWithChildren<any>{
|
||||
disabled? : boolean,
|
||||
variant? : "filled" | "outlined" | "elevated" | "tonal" | "text",
|
||||
}
|
||||
|
||||
export interface FABMainProps extends PropsWithChildren<any>{
|
||||
icon : string;
|
||||
disabled? : boolean;
|
||||
size? : "small" | "default" | "large" | "extended";
|
||||
variant? : "surface" | "primary" | "secondary" | "tertiary";
|
||||
}
|
||||
|
||||
export interface iconButtonMainProps extends PropsWithChildren<any>{
|
||||
icon : string;
|
||||
toggled? : false | toggleButtonType;
|
||||
disabled? : boolean;
|
||||
variant? : "default" | "filled" | "tonal" | "outlined";
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import {forwardRef} from "react";
|
||||
import {buttonMainProps} from "../button-skeleton/button.types";
|
||||
import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
|
||||
|
||||
/**
|
||||
* Button component
|
||||
** description
|
||||
*/
|
||||
|
||||
export const Button = forwardRef(
|
||||
|
||||
(props : buttonMainProps, ref) => (
|
||||
<ButtonSkeleton {...props}
|
||||
ref={ref}
|
||||
disabled={props.disabled}
|
||||
variant={props.variant ? props.variant : "filled"}>
|
||||
{
|
||||
props.icon ?
|
||||
<span className={"m3 m3-icon"}>
|
||||
{props.icon}
|
||||
</span>
|
||||
: <></>
|
||||
}
|
||||
<span className={"label-large"}>
|
||||
{props.children}
|
||||
</span>
|
||||
</ButtonSkeleton>
|
||||
)
|
||||
|
||||
)
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
"use client"
|
||||
|
||||
import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
|
||||
|
||||
export const CheckBoxSkeleton = forwardRef(
|
||||
|
||||
function CheckBoxBase(props : any, ref) : JSX.Element {
|
||||
|
||||
const checkboxRef = useRef<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
checkboxRef.current.indeterminate = props.indeterminate === "true";
|
||||
}, []);
|
||||
|
||||
useImperativeHandle(ref, () => checkboxRef);
|
||||
|
||||
let type = props.typeInput || props.type,
|
||||
_props = {...props};
|
||||
if(_props.indeterminate) delete _props.indeterminate;
|
||||
if(_props.typeInput) delete _props.typeInput;
|
||||
|
||||
const classes = props.className !== undefined ?
|
||||
`m3 m3-${type} ${props.className}` : `m3 m3-${type}`
|
||||
|
||||
return (
|
||||
<input ref={checkboxRef}
|
||||
{..._props}
|
||||
type={props.type}
|
||||
className={classes.trimEnd()}/>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import {RippleArea} from "../ripple/ripple-area";
|
||||
import {forwardRef, useRef, useState} from "react";
|
||||
import useRippleEffect from "../ripple/hooks/useRippleEffect";
|
||||
import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
|
||||
|
||||
/**
|
||||
* Checkbox component
|
||||
** description
|
||||
*/
|
||||
|
||||
export const Checkbox = forwardRef(
|
||||
(props : any, ref) => {
|
||||
|
||||
const [isActive, setIsActive] = useState<boolean>(false),
|
||||
ripplesRef = useRef(null),
|
||||
events = useRippleEffect(ripplesRef, setIsActive);
|
||||
|
||||
const classes = `m3 m3-checkbox-label ${isActive === true ? "visible" : ""}`.trimEnd();
|
||||
const indeterminate = (props.indeterminate === true).toString();
|
||||
|
||||
return (
|
||||
<label {...events}
|
||||
className={classes}>
|
||||
<CheckBoxSkeleton {...props}
|
||||
ref={ref}
|
||||
indeterminate={indeterminate}
|
||||
type={"checkbox"}/>
|
||||
<span className={"m3 m3-checkbox-state-layer"}/>
|
||||
<RippleArea className={"m3-checkbox-ripple-layer"}
|
||||
ref={ripplesRef}
|
||||
callback={setIsActive}/>
|
||||
{props.children}
|
||||
</label>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
)
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import {forwardRef} from "react";
|
||||
import {FABMainProps} from "../button-skeleton/button.types";
|
||||
import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
|
||||
|
||||
/**
|
||||
* FABs component
|
||||
** description
|
||||
*/
|
||||
|
||||
export const FAB = forwardRef(
|
||||
|
||||
(props : FABMainProps, ref) => (
|
||||
<ButtonSkeleton {...props}
|
||||
ref={ref}
|
||||
disabled={props.disabled}
|
||||
variant={props.variant ? props.variant : "surface"}
|
||||
className={props.size ? `m3-fab m3-${props.size}-fab` : `m3-fab m3-default-fab`}>
|
||||
<span className={"m3-icon"}>
|
||||
{props.icon}
|
||||
</span>
|
||||
{
|
||||
props.size === "extended" ? (
|
||||
<span className={"label-large"}>
|
||||
{props.children}
|
||||
</span>
|
||||
)
|
||||
: <></>
|
||||
}
|
||||
</ButtonSkeleton>
|
||||
)
|
||||
|
||||
);
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
|
||||
import {iconButtonMainProps} from "../button-skeleton/button.types";
|
||||
import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from "react";
|
||||
|
||||
/**
|
||||
* Icon button-skeleton component
|
||||
** description
|
||||
*/
|
||||
|
||||
export const IconButton = forwardRef(
|
||||
|
||||
({icon, variant, disabled, selected = false, toggled = false, ...props} : iconButtonMainProps, ref) => {
|
||||
|
||||
const [toggleIcon, setToggleIcon] = useState<any>({
|
||||
state : selected == true ? "selected" : "unselected",
|
||||
icon : toggled ? toggled.unselected : ""
|
||||
});
|
||||
|
||||
const toggle = useCallback((classes, icon) => {
|
||||
setToggleIcon(() => ({
|
||||
state : classes,
|
||||
icon : icon,
|
||||
}))
|
||||
}, [])
|
||||
|
||||
let buttonRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const callback = useCallback(() => {
|
||||
if(toggled) {
|
||||
if (toggleIcon.state === "selected") toggle("", toggled.unselected)
|
||||
else toggle("selected", toggled.selected)
|
||||
}
|
||||
if(props.onClick) props.onClick();
|
||||
}, [toggleIcon])
|
||||
|
||||
useImperativeHandle(ref, () => buttonRef);
|
||||
|
||||
return (
|
||||
<ButtonSkeleton {...props}
|
||||
ref={buttonRef}
|
||||
onClick={callback}
|
||||
disabled={disabled}
|
||||
className={`m3-icon-button ${toggleIcon.state} ${toggled ? "toggled" : ""}`.trimEnd()}
|
||||
variant={variant ? variant : "default"}>
|
||||
<span className={"m3-icon"}>
|
||||
{
|
||||
toggled ? toggleIcon.icon : icon ? icon : <></>
|
||||
}
|
||||
</span>
|
||||
</ButtonSkeleton>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
)
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
"use client"
|
||||
|
||||
export {FAB} from "./fab/fab";
|
||||
export {Radio} from "./radio/radio";
|
||||
export {Switch} from "./switch/switch";
|
||||
export {Button} from "./button/button";
|
||||
export {Checkbox} from "./checkbox/checkbox";
|
||||
export {RippleArea} from "./ripple/ripple-area";
|
||||
export {Ripples, Ripple} from "./ripple/ripple";
|
||||
export {TextField} from "./text-field/text-field";
|
||||
export {IconButton} from "./icon-button/icon-button";
|
||||
export {ButtonSkeleton} from "./button-skeleton/button-skeleton";
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import {RippleArea} from "../ripple/ripple-area";
|
||||
import {forwardRef, useRef, useState} from "react";
|
||||
import useRippleEffect from "../ripple/hooks/useRippleEffect";
|
||||
import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
|
||||
|
||||
/**
|
||||
* Radio component
|
||||
** description
|
||||
*/
|
||||
|
||||
export const Radio = forwardRef(
|
||||
|
||||
(props : any, ref) => {
|
||||
|
||||
const [isActive, setIsActive] = useState<boolean>(false),
|
||||
ripplesRef = useRef(null),
|
||||
events = useRippleEffect(ripplesRef, setIsActive);
|
||||
|
||||
const classes = `m3 m3-radio-label ${isActive === true ? "visible" : ""}`.trimEnd();
|
||||
|
||||
return (
|
||||
<label {...events}
|
||||
className={classes}>
|
||||
<CheckBoxSkeleton {...props}
|
||||
ref={ref}
|
||||
type={"radio"}/>
|
||||
<span className={"m3 m3-radio-state-layer"}/>
|
||||
<RippleArea className={"m3-checkbox-ripple-layer"}
|
||||
ref={ripplesRef}
|
||||
callback={setIsActive}/>
|
||||
{props.children}
|
||||
</label>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
)
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import React, {useEffect, useState} from 'react';
|
||||
|
||||
interface RippleEventHandlers {
|
||||
onBlur: React.FocusEventHandler;
|
||||
onContextMenu: React.MouseEventHandler;
|
||||
onDragLeave: React.DragEventHandler;
|
||||
onMouseDown: React.MouseEventHandler;
|
||||
onMouseLeave: React.MouseEventHandler;
|
||||
onMouseUp: React.MouseEventHandler;
|
||||
onTouchEnd: React.TouchEventHandler;
|
||||
onTouchMove: React.TouchEventHandler;
|
||||
onTouchStart: React.TouchEventHandler;
|
||||
}
|
||||
|
||||
const UseRippleEffect = (ref, callback) : undefined | RippleEventHandlers => {
|
||||
|
||||
const [mounted, setMounted] = useState<boolean>(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted) setMounted(true);
|
||||
})
|
||||
|
||||
if (!mounted) return;
|
||||
|
||||
const {start, stop} = ref.current;
|
||||
|
||||
return {
|
||||
onBlur: (event) => stop(event, callback),
|
||||
onContextMenu: (event) => start(event, callback),
|
||||
onDragLeave: (event) => stop(event, callback),
|
||||
onMouseDown: (event) => start(event, callback),
|
||||
onMouseLeave: (event) => stop(event, callback),
|
||||
onMouseUp: (event) => stop(event, callback),
|
||||
onTouchEnd: (event) => stop(event, callback),
|
||||
onTouchMove: (event) => stop(event, callback),
|
||||
onTouchStart: (event) => stop(event, callback),
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default UseRippleEffect;
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
"use client"
|
||||
|
||||
import React, {
|
||||
useId,
|
||||
useRef,
|
||||
useState,
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useImperativeHandle
|
||||
} from 'react';
|
||||
import {Ripple} from "./ripple";
|
||||
import {Ripples} from "./ripple";
|
||||
import {RippleAreaProps} from "./ripple.types";
|
||||
|
||||
const TIMEOUT : number = 550;
|
||||
const rippleAreaContext = React.createContext(false);
|
||||
|
||||
const RippleArea = forwardRef(
|
||||
|
||||
function RippleArea(props : RippleAreaProps, ref) {
|
||||
|
||||
const [ripples, setRipples] = useState<Array<JSX.Element>>([]),
|
||||
rippleDomain = useRef<any>(null),
|
||||
clicked = useRef<boolean>(false),
|
||||
uniqueKey = useRef<number>(0),
|
||||
uniqueId = useId();
|
||||
|
||||
let classes = props.className ?
|
||||
`m3 m3-ripple-domain ${props.className}`.trimEnd() :
|
||||
"m3 m3-ripple-domain";
|
||||
|
||||
const start = useCallback((event : any, cb : (state : boolean) => void) : void => {
|
||||
|
||||
clicked.current = true;
|
||||
cb(clicked.current);
|
||||
|
||||
const rippleDomainChar = rippleDomain.current ? rippleDomain.current.getBoundingClientRect() : {
|
||||
width: 0,
|
||||
height: 0,
|
||||
left: 0,
|
||||
top: 0,
|
||||
}
|
||||
|
||||
let rippleX : number = event.clientX - rippleDomainChar.left,
|
||||
rippleY : number = event.clientY - rippleDomainChar.top,
|
||||
rippleSizeX : number = Math.max(Math.abs(rippleDomainChar.width - rippleX), rippleX) * 2 + 2,
|
||||
rippleSizeY : number = Math.max(Math.abs(rippleDomainChar.height - rippleY), rippleY) * 2 + 2,
|
||||
rippleS : number = (rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5;
|
||||
|
||||
setRipples((prevRipples : Array<JSX.Element>) => {
|
||||
if(prevRipples.length === 0){
|
||||
return [
|
||||
<Ripple rippleX={rippleX}
|
||||
rippleY={rippleY}
|
||||
rippleS={rippleS}
|
||||
key={uniqueKey.current}
|
||||
lifetime={TIMEOUT}/>
|
||||
]
|
||||
} else {
|
||||
let old = [...prevRipples];
|
||||
old.push(
|
||||
<Ripple rippleX={rippleX}
|
||||
rippleY={rippleY}
|
||||
rippleS={rippleS}
|
||||
key={uniqueKey.current}
|
||||
lifetime={TIMEOUT}/>
|
||||
)
|
||||
return old;
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
uniqueKey.current += 1;
|
||||
|
||||
}, []);
|
||||
|
||||
const stop = useCallback((_event : any, cb : (state : boolean) => void) => {
|
||||
|
||||
clicked.current = false;
|
||||
cb(clicked.current);
|
||||
|
||||
setRipples((prevRipples : Array<JSX.Element>) => {
|
||||
if(prevRipples.length > 0) {
|
||||
let old = [...prevRipples];
|
||||
old.shift();
|
||||
return old;
|
||||
}
|
||||
return prevRipples
|
||||
});
|
||||
|
||||
},[]);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
start,
|
||||
stop,
|
||||
}), [start, stop]);
|
||||
|
||||
return (
|
||||
<span className={classes}
|
||||
id={uniqueId}
|
||||
ref={rippleDomain}>
|
||||
<rippleAreaContext.Provider value={clicked.current}>
|
||||
<Ripples>
|
||||
{ripples}
|
||||
</Ripples>
|
||||
</rippleAreaContext.Provider>
|
||||
</span>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
)
|
||||
|
||||
export {rippleAreaContext, RippleArea};
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
"use client"
|
||||
|
||||
import React, {useCallback, useContext, useEffect, useRef, useState, useTransition} from 'react';
|
||||
import RippleEffectBuild from "./utils/ripple-effect-builder";
|
||||
import {rippleAreaContext} from "./ripple-area";
|
||||
import {rippleProps} from "./ripple.types";
|
||||
import isEmpty from "./utils/utils";
|
||||
|
||||
function Ripples(props : any){
|
||||
const [ripples, setRipples] = useState({});
|
||||
const firstRender = useRef<boolean>(true);
|
||||
const [pending, startTransition] = useTransition();
|
||||
|
||||
const LifetimeEnd = useCallback((child) => {
|
||||
|
||||
if (child.props.endLifetime) {
|
||||
child.props.endLifetime();
|
||||
}
|
||||
|
||||
setRipples(state => {
|
||||
let children = {...state};
|
||||
delete children[child.key];
|
||||
return children;
|
||||
})
|
||||
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if(props.children.length > 0){
|
||||
startTransition(() => {
|
||||
if (firstRender.current || isEmpty(ripples)) {
|
||||
setRipples(RippleEffectBuild(props.children, LifetimeEnd));
|
||||
firstRender.current = false;
|
||||
} else {
|
||||
setRipples(RippleEffectBuild(props.children, LifetimeEnd, ripples))
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}, [props.children]);
|
||||
|
||||
return(
|
||||
<>
|
||||
{ Object.values(ripples) }
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
function Ripple(props : rippleProps) {
|
||||
|
||||
const {
|
||||
rippleX,
|
||||
rippleY,
|
||||
rippleS,
|
||||
endLifetime,
|
||||
lifetime
|
||||
} = props;
|
||||
|
||||
const clicked = useContext<boolean>(rippleAreaContext);
|
||||
const [classes, setClasses] = useState<string>("m3 ripple visible");
|
||||
|
||||
useEffect(() => {
|
||||
if(endLifetime !== null && !clicked) {
|
||||
setClasses("m3 ripple")
|
||||
setTimeout(endLifetime, lifetime);
|
||||
}
|
||||
}, [clicked, endLifetime]);
|
||||
|
||||
return (
|
||||
<span className={classes} style={
|
||||
{
|
||||
left: -(rippleS / 2) + rippleX,
|
||||
top: -(rippleS / 2) + rippleY,
|
||||
width: rippleS,
|
||||
aspectRatio: 1,
|
||||
}
|
||||
}/>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
export {Ripple, Ripples};
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React, {ComponentProps, Dispatch, SetStateAction} from "react";
|
||||
|
||||
export interface RippleAreaProps extends ComponentProps<any> {
|
||||
ref : React.ForwardedRef<any>,
|
||||
callback : Dispatch<SetStateAction<boolean>>,
|
||||
}
|
||||
|
||||
export type rippleProps = {
|
||||
rippleX : number,
|
||||
rippleY : number,
|
||||
rippleS : number,
|
||||
endLifetime? : any,
|
||||
lifetime : number,
|
||||
key? : number,
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import {cloneElement, ReactElement} from "react";
|
||||
|
||||
export default function ArrayConvertToObj(
|
||||
obj : Object,
|
||||
nextChildren : ReactElement[],
|
||||
callback : (child: any) => void
|
||||
) : void {
|
||||
|
||||
Object
|
||||
.values(nextChildren)
|
||||
.forEach((child : JSX.Element) =>
|
||||
obj[child.key] = cloneElement(child, {
|
||||
...child.props,
|
||||
endLifetime: callback.bind(null, child)
|
||||
})
|
||||
);
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import ArrayConvertToObj from "./array-convert-to-obj";
|
||||
import {cloneElement, ReactElement} from "react";
|
||||
import isEmpty from "./utils";
|
||||
|
||||
export default function RippleEffectBuild(
|
||||
nextRipples : ReactElement[],
|
||||
callback : (child : any) => void,
|
||||
prevRipples? : any | null
|
||||
) {
|
||||
|
||||
let empty : boolean = isEmpty(prevRipples);
|
||||
let preparedRipples : object = empty ? {} : prevRipples;
|
||||
|
||||
switch (empty) {
|
||||
case true:
|
||||
ArrayConvertToObj(preparedRipples, nextRipples, callback);
|
||||
break;
|
||||
|
||||
case false:
|
||||
let next : object = {};
|
||||
ArrayConvertToObj(next, nextRipples, callback)
|
||||
for(let rippleKey of Object.keys(next)){
|
||||
if(preparedRipples[rippleKey] == undefined){
|
||||
preparedRipples[rippleKey] = cloneElement(next[rippleKey], {
|
||||
...next[rippleKey].props,
|
||||
endLifetime: callback.bind(null, next[rippleKey])
|
||||
})
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
return preparedRipples;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export default function isEmpty(obj : Object) : boolean{
|
||||
for(let _i in obj) return false;
|
||||
return true;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import {forwardRef} from "react";
|
||||
import {switchMainProps} from "./switch.types";
|
||||
import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
|
||||
|
||||
/**
|
||||
* Switch component
|
||||
** description
|
||||
*/
|
||||
|
||||
export const Switch = forwardRef(
|
||||
|
||||
({icon, disabled, selected = false, ...props} : switchMainProps, ref) => (
|
||||
<label>
|
||||
<CheckBoxSkeleton {...props}
|
||||
ref={ref}
|
||||
data-icon={icon}
|
||||
type={"checkbox"}
|
||||
disabled={disabled}
|
||||
typeInput={"switch"}
|
||||
data-selected={selected}/>
|
||||
</label>
|
||||
)
|
||||
|
||||
)
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import {PropsWithChildren} from "react";
|
||||
|
||||
export interface switchMainProps extends PropsWithChildren<any>{
|
||||
disabled? : boolean,
|
||||
icon? : boolean,
|
||||
selected? : boolean
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
"use client"
|
||||
|
||||
import React, {PropsWithChildren, useState} from 'react';
|
||||
import {bool, string} from "prop-types";
|
||||
|
||||
interface TextFieldInterface extends PropsWithChildren<any>{
|
||||
variant: "filled" | "outlined",
|
||||
withAfterIcon?: boolean,
|
||||
withBeforeIcon?: boolean,
|
||||
supportingText?: string,
|
||||
}
|
||||
|
||||
export function TextField({variant, withAfterIcon, withBeforeIcon, supportingText, ...props} : TextFieldInterface) {
|
||||
|
||||
const [used, setUsed] = useState<boolean>(false);
|
||||
|
||||
const callback = (e : any) => {
|
||||
if(e.type === "blur" && e.target.value.length === 0) setUsed(false);
|
||||
else if(e.type === "focus") setUsed(true);
|
||||
}
|
||||
|
||||
const iconStyles = withBeforeIcon && withAfterIcon ? "with-before-icon with-after-icon" :
|
||||
withBeforeIcon ? "with-before-icon" : withAfterIcon ? "with-after-icon" : ""
|
||||
|
||||
return (
|
||||
<span>
|
||||
<div className={`m3 m3-text-field ${variant}`.trimEnd()}>
|
||||
{withBeforeIcon && <span className={"m3-icon icon-before"}>{withBeforeIcon && "search"}</span>}
|
||||
<input {...props}
|
||||
className={`${props.className ?? ""} ${iconStyles}`.trim()}
|
||||
onFocus={(event) => {
|
||||
callback(event);
|
||||
if(props.onFocus) props.onFocus(event)
|
||||
}}
|
||||
onBlur={(event) => {
|
||||
callback(event)
|
||||
if(props.onBlur) props.onBlur(event)
|
||||
}}/>
|
||||
<label className={used && "used"}> {props.children ?? "Label"} </label>
|
||||
<span className={"m3-text-field-state-layer"}/>
|
||||
{withAfterIcon && <span className={"m3-icon"}>{withAfterIcon && "cancel"}</span>}
|
||||
</div>
|
||||
{supportingText && <span className={"m3-text-field-supporting-text"}>{supportingText}</span>}
|
||||
</span>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
TextField.propTypes = {
|
||||
children: string,
|
||||
withBeforeIcon: bool,
|
||||
withAfterIcon: bool,
|
||||
className: string,
|
||||
variant: string,
|
||||
supportingText: string,
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,127 @@
|
|||
button:not(.m3-fab, .m3-icon-button) {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).m3 {
|
||||
contain: content;
|
||||
box-sizing: border-box;
|
||||
border-radius: 100px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
gap: 8px;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).filled {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > span.m3-icon {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).outlined {
|
||||
border: 1px solid var(--md-sys-color-outline) !important;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).text {
|
||||
padding: 10px 12px !important;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).elevated {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal {
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button)::before {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active.elevated {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):active.tonal::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
|
||||
border-color: var(--md-sys-color-primary) !important;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.elevated {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.filled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled.elevated {
|
||||
box-shadow: none;
|
||||
}
|
||||
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=button.css.map */
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;ECHI;EDKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;ECaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ECpCA;;ADuCA;ECjCA;;ADoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ECnDA;;ADsDA;EChDA;;ADmDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
@import "mixins/m3-mixins"
|
||||
|
||||
button:not(.m3-fab, .m3-icon-button)
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
|
||||
& > span.m3-icon
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif
|
||||
font-weight: 500
|
||||
font-size: 18px
|
||||
line-height: 18px
|
||||
|
||||
&.m3
|
||||
contain: content
|
||||
box-sizing: border-box
|
||||
border-radius: 100px
|
||||
display: inline-flex
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
align-items: center
|
||||
text-align: center
|
||||
padding: 10px 24px
|
||||
border: none
|
||||
gap: 8px
|
||||
|
||||
&.filled
|
||||
background-color: var(--md-sys-color-primary)
|
||||
&, & > span.m3-icon
|
||||
color: var(--md-sys-color-on-primary)
|
||||
|
||||
&.outlined
|
||||
border: 1px solid var(--md-sys-color-outline) !important
|
||||
background-color: #00000000
|
||||
&, & > span.m3-icon
|
||||
color: var(--md-sys-color-primary)
|
||||
|
||||
&.text
|
||||
padding: 10px 12px !important
|
||||
background-color: #00000000
|
||||
&, & > span.m3-icon
|
||||
color: var(--md-sys-color-primary)
|
||||
|
||||
&.elevated
|
||||
@include elevation-1(false)
|
||||
background-color: var(--md-sys-color-surface-container-low)
|
||||
&, & > span.m3-icon
|
||||
color: var(--md-sys-color-primary)
|
||||
|
||||
&.tonal
|
||||
background-color: var(--md-sys-color-secondary-container)
|
||||
&, & > span.m3-icon
|
||||
color: var(--md-sys-color-on-secondary-container)
|
||||
|
||||
&::before
|
||||
@include state-layer
|
||||
|
||||
&.filled > .m3.m3-ripple-domain > .m3.ripple
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||
|
||||
&:is(.outlined, .text, .elevated)
|
||||
& > .m3.m3-ripple-domain > .m3.ripple
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
|
||||
&.tonal > .m3.m3-ripple-domain > .m3.ripple
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
|
||||
&:active
|
||||
&:is(.filled, .tonal)
|
||||
@include elevation-0(true)
|
||||
|
||||
&.elevated
|
||||
@include elevation-1(true)
|
||||
|
||||
&.tonal::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
|
||||
&:focus-visible
|
||||
&.outlined
|
||||
border-color: var(--md-sys-color-primary) !important
|
||||
|
||||
&.filled::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent)
|
||||
|
||||
&:is(.outlined, .text, .elevated)::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
|
||||
&.tonal::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
|
||||
&:hover
|
||||
&:is(.filled, .tonal)
|
||||
@include elevation-1(false)
|
||||
|
||||
&.elevated
|
||||
@include elevation-2(false)
|
||||
|
||||
&.filled::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
|
||||
|
||||
&:is(.outlined, .text, .elevated)::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||
|
||||
&.tonal::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||
|
||||
&:disabled
|
||||
pointer-events: none
|
||||
|
||||
&:is(.filled, .elevated, .tonal, .outlined, .text)
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
|
||||
|
||||
&:is(.filled, .elevated, .tonal)
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||
|
||||
&.elevated
|
||||
box-shadow: none
|
||||
|
||||
&.outlined
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
label.m3.m3-checkbox-label {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
aspect-ratio: inherit;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
|
||||
span.m3.m3-checkbox-ripple-layer {
|
||||
z-index: 20;
|
||||
contain: content;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
input[type=checkbox].m3.m3-checkbox {
|
||||
appearance: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: content-box;
|
||||
z-index: 10;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: 0;
|
||||
border-radius: 2px;
|
||||
border: 2px solid var(--md-sys-color-on-surface-variant);
|
||||
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
|
||||
border: 2px solid var(--md-sys-color-error);
|
||||
background-color: var(--md-sys-color-error);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
|
||||
border: 2px solid var(--md-sys-color-error);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) {
|
||||
border: 2px solid var(--md-sys-color-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
|
||||
opacity: 38%;
|
||||
border: 2px solid var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
|
||||
opacity: 38%;
|
||||
background-color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox::after {
|
||||
line-height: 18px;
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:checked::after {
|
||||
content: "done";
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:indeterminate::after {
|
||||
content: "check_indeterminate_small";
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:hover {
|
||||
border: 2px solid var(--md-sys-color-on-surface);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) + span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):hover + span.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=checkbox.css.map */
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["checkbox.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI","file":"checkbox.css"}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
@import "mixins/m3-mixins"
|
||||
|
||||
label.m3.m3-checkbox-label
|
||||
@include m3-label-mixin
|
||||
& > span.m3.m3-checkbox-state-layer
|
||||
@include m3-state-layer-mixin
|
||||
|
||||
span.m3.m3-checkbox-ripple-layer
|
||||
z-index: 20
|
||||
contain: content
|
||||
border-radius: 50%
|
||||
position: absolute
|
||||
width: 40px
|
||||
height: 40px
|
||||
|
||||
input[type="checkbox"].m3.m3-checkbox
|
||||
appearance: none
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
box-sizing: content-box
|
||||
z-index: 10
|
||||
width: 14px
|
||||
height: 14px
|
||||
margin: 0
|
||||
border-radius: 2px
|
||||
border: 2px solid var(--md-sys-color-on-surface-variant)
|
||||
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
|
||||
|
||||
&:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
|
||||
border: 2px solid var(--md-sys-color-error)
|
||||
background-color: var(--md-sys-color-error)
|
||||
|
||||
&:is(.m3.m3-error, :user-invalid)
|
||||
border: 2px solid var(--md-sys-color-error)
|
||||
|
||||
&:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
|
||||
border: 2px solid var(--md-sys-color-primary)
|
||||
background-color: var(--md-sys-color-primary)
|
||||
|
||||
&:disabled
|
||||
&:is(:hover, &)
|
||||
opacity: 38%
|
||||
border: 2px solid var(--md-sys-color-on-surface)
|
||||
|
||||
&:checked:is(:hover, &)
|
||||
opacity: 38%
|
||||
background-color: var(--md-sys-color-on-surface)
|
||||
|
||||
&::after
|
||||
line-height: 18px
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif
|
||||
font-weight: 700
|
||||
font-size: 18px
|
||||
color: var(--md-sys-color-on-primary)
|
||||
|
||||
&:checked::after
|
||||
content: "done"
|
||||
|
||||
&:indeterminate::after
|
||||
content: "check_indeterminate_small"
|
||||
|
||||
&:hover
|
||||
border: 2px solid var(--md-sys-color-on-surface)
|
||||
|
||||
&:not(:disabled)
|
||||
&:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)
|
||||
& + span.m3.m3-checkbox-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent)
|
||||
|
||||
&:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent)
|
||||
& + span.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
|
||||
|
||||
&:is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||
|
||||
&:is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
& + span.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
|
||||
|
||||
&:hover
|
||||
& + span.m3-checkbox-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
|
||||
|
||||
&:active + span.m3.m3-checkbox-state-layer
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
|
||||
& + span.m3-ripple-domain > .m3.ripple
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.dark-high-contrast {
|
||||
--md-sys-color-primary: rgb(255 249 251);
|
||||
--md-sys-color-surface-tint: rgb(227 183 244);
|
||||
--md-sys-color-on-primary: rgb(0 0 0);
|
||||
--md-sys-color-primary-container: rgb(231 187 248);
|
||||
--md-sys-color-on-primary-container: rgb(0 0 0);
|
||||
--md-sys-color-secondary: rgb(255 249 251);
|
||||
--md-sys-color-on-secondary: rgb(0 0 0);
|
||||
--md-sys-color-secondary-container: rgb(216 196 220);
|
||||
--md-sys-color-on-secondary-container: rgb(0 0 0);
|
||||
--md-sys-color-tertiary: rgb(255 249 249);
|
||||
--md-sys-color-on-tertiary: rgb(0 0 0);
|
||||
--md-sys-color-tertiary-container: rgb(249 187 186);
|
||||
--md-sys-color-on-tertiary-container: rgb(0 0 0);
|
||||
--md-sys-color-error: rgb(255 249 249);
|
||||
--md-sys-color-on-error: rgb(0 0 0);
|
||||
--md-sys-color-error-container: rgb(255 186 177);
|
||||
--md-sys-color-on-error-container: rgb(0 0 0);
|
||||
--md-sys-color-background: rgb(22 18 23);
|
||||
--md-sys-color-on-background: rgb(233 224 231);
|
||||
--md-sys-color-surface: rgb(22 18 23);
|
||||
--md-sys-color-on-surface: rgb(255 255 255);
|
||||
--md-sys-color-surface-variant: rgb(76 68 77);
|
||||
--md-sys-color-on-surface-variant: rgb(255 249 251);
|
||||
--md-sys-color-outline: rgb(210 199 210);
|
||||
--md-sys-color-outline-variant: rgb(210 199 210);
|
||||
--md-sys-color-shadow: rgb(0 0 0);
|
||||
--md-sys-color-scrim: rgb(0 0 0);
|
||||
--md-sys-color-inverse-surface: rgb(233 224 231);
|
||||
--md-sys-color-inverse-on-surface: rgb(0 0 0);
|
||||
--md-sys-color-inverse-primary: rgb(60 27 77);
|
||||
--md-sys-color-primary-fixed: rgb(248 222 255);
|
||||
--md-sys-color-on-primary-fixed: rgb(0 0 0);
|
||||
--md-sys-color-primary-fixed-dim: rgb(231 187 248);
|
||||
--md-sys-color-on-primary-fixed-variant: rgb(39 5 56);
|
||||
--md-sys-color-secondary-fixed: rgb(245 224 248);
|
||||
--md-sys-color-on-secondary-fixed: rgb(0 0 0);
|
||||
--md-sys-color-secondary-fixed-dim: rgb(216 196 220);
|
||||
--md-sys-color-on-secondary-fixed-variant: rgb(29 18 34);
|
||||
--md-sys-color-tertiary-fixed: rgb(255 224 222);
|
||||
--md-sys-color-on-tertiary-fixed: rgb(0 0 0);
|
||||
--md-sys-color-tertiary-fixed-dim: rgb(249 187 186);
|
||||
--md-sys-color-on-tertiary-fixed-variant: rgb(44 11 13);
|
||||
--md-sys-color-surface-dim: rgb(22 18 23);
|
||||
--md-sys-color-surface-bright: rgb(61 55 61);
|
||||
--md-sys-color-surface-container-lowest: rgb(17 13 18);
|
||||
--md-sys-color-surface-container-low: rgb(30 26 31);
|
||||
--md-sys-color-surface-container: rgb(35 30 35);
|
||||
--md-sys-color-surface-container-high: rgb(45 40 46);
|
||||
--md-sys-color-surface-container-highest: rgb(56 51 57);
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.dark-medium-contrast {
|
||||
--md-sys-color-primary: rgb(231 187 248);
|
||||
--md-sys-color-surface-tint: rgb(227 183 244);
|
||||
--md-sys-color-on-primary: rgb(39 5 56);
|
||||
--md-sys-color-primary-container: rgb(170 130 187);
|
||||
--md-sys-color-on-primary-container: rgb(0 0 0);
|
||||
--md-sys-color-secondary: rgb(216 196 220);
|
||||
--md-sys-color-on-secondary: rgb(29 18 34);
|
||||
--md-sys-color-secondary-container: rgb(156 139 161);
|
||||
--md-sys-color-on-secondary-container: rgb(0 0 0);
|
||||
--md-sys-color-tertiary: rgb(249 187 186);
|
||||
--md-sys-color-on-tertiary: rgb(44 11 13);
|
||||
--md-sys-color-tertiary-container: rgb(186 131 130);
|
||||
--md-sys-color-on-tertiary-container: rgb(0 0 0);
|
||||
--md-sys-color-error: rgb(255 186 177);
|
||||
--md-sys-color-on-error: rgb(55 0 1);
|
||||
--md-sys-color-error-container: rgb(255 84 73);
|
||||
--md-sys-color-on-error-container: rgb(0 0 0);
|
||||
--md-sys-color-background: rgb(22 18 23);
|
||||
--md-sys-color-on-background: rgb(233 224 231);
|
||||
--md-sys-color-surface: rgb(22 18 23);
|
||||
--md-sys-color-on-surface: rgb(255 249 251);
|
||||
--md-sys-color-surface-variant: rgb(76 68 77);
|
||||
--md-sys-color-on-surface-variant: rgb(210 199 210);
|
||||
--md-sys-color-outline: rgb(170 160 170);
|
||||
--md-sys-color-outline-variant: rgb(137 128 138);
|
||||
--md-sys-color-shadow: rgb(0 0 0);
|
||||
--md-sys-color-scrim: rgb(0 0 0);
|
||||
--md-sys-color-inverse-surface: rgb(233 224 231);
|
||||
--md-sys-color-inverse-on-surface: rgb(45 40 46);
|
||||
--md-sys-color-inverse-primary: rgb(93 58 109);
|
||||
--md-sys-color-primary-fixed: rgb(246 217 255);
|
||||
--md-sys-color-on-primary-fixed: rgb(33 0 50);
|
||||
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
|
||||
--md-sys-color-on-primary-fixed-variant: rgb(74 40 90);
|
||||
--md-sys-color-secondary-fixed: rgb(240 220 244);
|
||||
--md-sys-color-on-secondary-fixed: rgb(24 13 29);
|
||||
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
|
||||
--md-sys-color-on-secondary-fixed-variant: rgb(63 49 68);
|
||||
--md-sys-color-tertiary-fixed: rgb(255 218 217);
|
||||
--md-sys-color-on-tertiary-fixed: rgb(37 7 8);
|
||||
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
|
||||
--md-sys-color-on-tertiary-fixed-variant: rgb(83 43 43);
|
||||
--md-sys-color-surface-dim: rgb(22 18 23);
|
||||
--md-sys-color-surface-bright: rgb(61 55 61);
|
||||
--md-sys-color-surface-container-lowest: rgb(17 13 18);
|
||||
--md-sys-color-surface-container-low: rgb(30 26 31);
|
||||
--md-sys-color-surface-container: rgb(35 30 35);
|
||||
--md-sys-color-surface-container-high: rgb(45 40 46);
|
||||
--md-sys-color-surface-container-highest: rgb(56 51 57);
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.dark {
|
||||
--md-sys-color-primary: rgb(227 183 244);
|
||||
--md-sys-color-surface-tint: rgb(227 183 244);
|
||||
--md-sys-color-on-primary: rgb(67 34 84);
|
||||
--md-sys-color-primary-container: rgb(92 57 108);
|
||||
--md-sys-color-on-primary-container: rgb(246 217 255);
|
||||
--md-sys-color-secondary: rgb(212 192 216);
|
||||
--md-sys-color-on-secondary: rgb(57 44 62);
|
||||
--md-sys-color-secondary-container: rgb(80 66 85);
|
||||
--md-sys-color-on-secondary-container: rgb(240 220 244);
|
||||
--md-sys-color-tertiary: rgb(245 183 182);
|
||||
--md-sys-color-on-tertiary: rgb(76 37 37);
|
||||
--md-sys-color-tertiary-container: rgb(102 59 59);
|
||||
--md-sys-color-on-tertiary-container: rgb(255 218 217);
|
||||
--md-sys-color-error: rgb(255 180 171);
|
||||
--md-sys-color-on-error: rgb(105 0 5);
|
||||
--md-sys-color-error-container: rgb(147 0 10);
|
||||
--md-sys-color-on-error-container: rgb(255 218 214);
|
||||
--md-sys-color-background: rgb(22 18 23);
|
||||
--md-sys-color-on-background: rgb(233 224 231);
|
||||
--md-sys-color-surface: rgb(22 18 23);
|
||||
--md-sys-color-on-surface: rgb(233 224 231);
|
||||
--md-sys-color-surface-variant: rgb(76 68 77);
|
||||
--md-sys-color-on-surface-variant: rgb(206 195 206);
|
||||
--md-sys-color-outline: rgb(151 142 151);
|
||||
--md-sys-color-outline-variant: rgb(76 68 77);
|
||||
--md-sys-color-shadow: rgb(0 0 0);
|
||||
--md-sys-color-scrim: rgb(0 0 0);
|
||||
--md-sys-color-inverse-surface: rgb(233 224 231);
|
||||
--md-sys-color-inverse-on-surface: rgb(52 47 52);
|
||||
--md-sys-color-inverse-primary: rgb(117 80 134);
|
||||
--md-sys-color-primary-fixed: rgb(246 217 255);
|
||||
--md-sys-color-on-primary-fixed: rgb(45 11 62);
|
||||
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
|
||||
--md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
|
||||
--md-sys-color-secondary-fixed: rgb(240 220 244);
|
||||
--md-sys-color-on-secondary-fixed: rgb(35 23 40);
|
||||
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
|
||||
--md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
|
||||
--md-sys-color-tertiary-fixed: rgb(255 218 217);
|
||||
--md-sys-color-on-tertiary-fixed: rgb(51 17 18);
|
||||
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
|
||||
--md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
|
||||
--md-sys-color-surface-dim: rgb(22 18 23);
|
||||
--md-sys-color-surface-bright: rgb(61 55 61);
|
||||
--md-sys-color-surface-container-lowest: rgb(17 13 18);
|
||||
--md-sys-color-surface-container-low: rgb(30 26 31);
|
||||
--md-sys-color-surface-container: rgb(35 30 35);
|
||||
--md-sys-color-surface-container-high: rgb(45 40 46);
|
||||
--md-sys-color-surface-container-highest: rgb(56 51 57);
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.light-high-contrast {
|
||||
--md-sys-color-primary: rgb(52 19 69);
|
||||
--md-sys-color-surface-tint: rgb(117 80 134);
|
||||
--md-sys-color-on-primary: rgb(255 255 255);
|
||||
--md-sys-color-primary-container: rgb(87 53 104);
|
||||
--md-sys-color-on-primary-container: rgb(255 255 255);
|
||||
--md-sys-color-secondary: rgb(42 30 47);
|
||||
--md-sys-color-on-secondary: rgb(255 255 255);
|
||||
--md-sys-color-secondary-container: rgb(76 62 81);
|
||||
--md-sys-color-on-secondary-container: rgb(255 255 255);
|
||||
--md-sys-color-tertiary: rgb(59 23 24);
|
||||
--md-sys-color-on-tertiary: rgb(255 255 255);
|
||||
--md-sys-color-tertiary-container: rgb(98 55 55);
|
||||
--md-sys-color-on-tertiary-container: rgb(255 255 255);
|
||||
--md-sys-color-error: rgb(78 0 2);
|
||||
--md-sys-color-on-error: rgb(255 255 255);
|
||||
--md-sys-color-error-container: rgb(140 0 9);
|
||||
--md-sys-color-on-error-container: rgb(255 255 255);
|
||||
--md-sys-color-background: rgb(255 247 252);
|
||||
--md-sys-color-on-background: rgb(30 26 31);
|
||||
--md-sys-color-surface: rgb(255 247 252);
|
||||
--md-sys-color-on-surface: rgb(0 0 0);
|
||||
--md-sys-color-surface-variant: rgb(235 223 234);
|
||||
--md-sys-color-on-surface-variant: rgb(40 34 42);
|
||||
--md-sys-color-outline: rgb(72 65 73);
|
||||
--md-sys-color-outline-variant: rgb(72 65 73);
|
||||
--md-sys-color-shadow: rgb(0 0 0);
|
||||
--md-sys-color-scrim: rgb(0 0 0);
|
||||
--md-sys-color-inverse-surface: rgb(52 47 52);
|
||||
--md-sys-color-inverse-on-surface: rgb(255 255 255);
|
||||
--md-sys-color-inverse-primary: rgb(251 229 255);
|
||||
--md-sys-color-primary-fixed: rgb(87 53 104);
|
||||
--md-sys-color-on-primary-fixed: rgb(255 255 255);
|
||||
--md-sys-color-primary-fixed-dim: rgb(63 30 80);
|
||||
--md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
|
||||
--md-sys-color-secondary-fixed: rgb(76 62 81);
|
||||
--md-sys-color-on-secondary-fixed: rgb(255 255 255);
|
||||
--md-sys-color-secondary-fixed-dim: rgb(53 40 58);
|
||||
--md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
|
||||
--md-sys-color-tertiary-fixed: rgb(98 55 55);
|
||||
--md-sys-color-on-tertiary-fixed: rgb(255 255 255);
|
||||
--md-sys-color-tertiary-fixed-dim: rgb(72 33 34);
|
||||
--md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
|
||||
--md-sys-color-surface-dim: rgb(225 215 223);
|
||||
--md-sys-color-surface-bright: rgb(255 247 252);
|
||||
--md-sys-color-surface-container-lowest: rgb(255 255 255);
|
||||
--md-sys-color-surface-container-low: rgb(251 241 248);
|
||||
--md-sys-color-surface-container: rgb(245 235 243);
|
||||
--md-sys-color-surface-container-high: rgb(239 229 237);
|
||||
--md-sys-color-surface-container-highest: rgb(233 224 231);
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.light-medium-contrast {
|
||||
--md-sys-color-primary: rgb(87 53 104);
|
||||
--md-sys-color-surface-tint: rgb(117 80 134);
|
||||
--md-sys-color-on-primary: rgb(255 255 255);
|
||||
--md-sys-color-primary-container: rgb(140 102 157);
|
||||
--md-sys-color-on-primary-container: rgb(255 255 255);
|
||||
--md-sys-color-secondary: rgb(76 62 81);
|
||||
--md-sys-color-on-secondary: rgb(255 255 255);
|
||||
--md-sys-color-secondary-container: rgb(127 111 132);
|
||||
--md-sys-color-on-secondary-container: rgb(255 255 255);
|
||||
--md-sys-color-tertiary: rgb(98 55 55);
|
||||
--md-sys-color-on-tertiary: rgb(255 255 255);
|
||||
--md-sys-color-tertiary-container: rgb(154 103 103);
|
||||
--md-sys-color-on-tertiary-container: rgb(255 255 255);
|
||||
--md-sys-color-error: rgb(140 0 9);
|
||||
--md-sys-color-on-error: rgb(255 255 255);
|
||||
--md-sys-color-error-container: rgb(218 52 46);
|
||||
--md-sys-color-on-error-container: rgb(255 255 255);
|
||||
--md-sys-color-background: rgb(255 247 252);
|
||||
--md-sys-color-on-background: rgb(30 26 31);
|
||||
--md-sys-color-surface: rgb(255 247 252);
|
||||
--md-sys-color-on-surface: rgb(30 26 31);
|
||||
--md-sys-color-surface-variant: rgb(235 223 234);
|
||||
--md-sys-color-on-surface-variant: rgb(72 65 73);
|
||||
--md-sys-color-outline: rgb(100 93 101);
|
||||
--md-sys-color-outline-variant: rgb(129 120 129);
|
||||
--md-sys-color-shadow: rgb(0 0 0);
|
||||
--md-sys-color-scrim: rgb(0 0 0);
|
||||
--md-sys-color-inverse-surface: rgb(52 47 52);
|
||||
--md-sys-color-inverse-on-surface: rgb(248 238 246);
|
||||
--md-sys-color-inverse-primary: rgb(227 183 244);
|
||||
--md-sys-color-primary-fixed: rgb(140 102 157);
|
||||
--md-sys-color-on-primary-fixed: rgb(255 255 255);
|
||||
--md-sys-color-primary-fixed-dim: rgb(114 78 131);
|
||||
--md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
|
||||
--md-sys-color-secondary-fixed: rgb(127 111 132);
|
||||
--md-sys-color-on-secondary-fixed: rgb(255 255 255);
|
||||
--md-sys-color-secondary-fixed-dim: rgb(102 87 107);
|
||||
--md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
|
||||
--md-sys-color-tertiary-fixed: rgb(154 103 103);
|
||||
--md-sys-color-on-tertiary-fixed: rgb(255 255 255);
|
||||
--md-sys-color-tertiary-fixed-dim: rgb(127 79 79);
|
||||
--md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
|
||||
--md-sys-color-surface-dim: rgb(225 215 223);
|
||||
--md-sys-color-surface-bright: rgb(255 247 252);
|
||||
--md-sys-color-surface-container-lowest: rgb(255 255 255);
|
||||
--md-sys-color-surface-container-low: rgb(251 241 248);
|
||||
--md-sys-color-surface-container: rgb(245 235 243);
|
||||
--md-sys-color-surface-container-high: rgb(239 229 237);
|
||||
--md-sys-color-surface-container-highest: rgb(233 224 231);
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.light {
|
||||
--md-sys-color-primary: rgb(117 80 134);
|
||||
--md-sys-color-surface-tint: rgb(117 80 134);
|
||||
--md-sys-color-on-primary: rgb(255 255 255);
|
||||
--md-sys-color-primary-container: rgb(246 217 255);
|
||||
--md-sys-color-on-primary-container: rgb(45 11 62);
|
||||
--md-sys-color-secondary: rgb(104 89 109);
|
||||
--md-sys-color-on-secondary: rgb(255 255 255);
|
||||
--md-sys-color-secondary-container: rgb(240 220 244);
|
||||
--md-sys-color-on-secondary-container: rgb(35 23 40);
|
||||
--md-sys-color-tertiary: rgb(129 82 81);
|
||||
--md-sys-color-on-tertiary: rgb(255 255 255);
|
||||
--md-sys-color-tertiary-container: rgb(255 218 217);
|
||||
--md-sys-color-on-tertiary-container: rgb(51 17 18);
|
||||
--md-sys-color-error: rgb(186 26 26);
|
||||
--md-sys-color-on-error: rgb(255 255 255);
|
||||
--md-sys-color-error-container: rgb(255 218 214);
|
||||
--md-sys-color-on-error-container: rgb(65 0 2);
|
||||
--md-sys-color-background: rgb(255 247 252);
|
||||
--md-sys-color-on-background: rgb(30 26 31);
|
||||
--md-sys-color-surface: rgb(255 247 252);
|
||||
--md-sys-color-on-surface: rgb(30 26 31);
|
||||
--md-sys-color-surface-variant: rgb(235 223 234);
|
||||
--md-sys-color-on-surface-variant: rgb(76 68 77);
|
||||
--md-sys-color-outline: rgb(125 116 126);
|
||||
--md-sys-color-outline-variant: rgb(206 195 206);
|
||||
--md-sys-color-shadow: rgb(0 0 0);
|
||||
--md-sys-color-scrim: rgb(0 0 0);
|
||||
--md-sys-color-inverse-surface: rgb(52 47 52);
|
||||
--md-sys-color-inverse-on-surface: rgb(248 238 246);
|
||||
--md-sys-color-inverse-primary: rgb(227 183 244);
|
||||
--md-sys-color-primary-fixed: rgb(246 217 255);
|
||||
--md-sys-color-on-primary-fixed: rgb(45 11 62);
|
||||
--md-sys-color-primary-fixed-dim: rgb(227 183 244);
|
||||
--md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
|
||||
--md-sys-color-secondary-fixed: rgb(240 220 244);
|
||||
--md-sys-color-on-secondary-fixed: rgb(35 23 40);
|
||||
--md-sys-color-secondary-fixed-dim: rgb(212 192 216);
|
||||
--md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
|
||||
--md-sys-color-tertiary-fixed: rgb(255 218 217);
|
||||
--md-sys-color-on-tertiary-fixed: rgb(51 17 18);
|
||||
--md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
|
||||
--md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
|
||||
--md-sys-color-surface-dim: rgb(225 215 223);
|
||||
--md-sys-color-surface-bright: rgb(255 247 252);
|
||||
--md-sys-color-surface-container-lowest: rgb(255 255 255);
|
||||
--md-sys-color-surface-container-low: rgb(251 241 248);
|
||||
--md-sys-color-surface-container: rgb(245 235 243);
|
||||
--md-sys-color-surface-container-high: rgb(239 229 237);
|
||||
--md-sys-color-surface-container-highest: rgb(233 224 231);
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
.elevation-1 {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.elevation-2 {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.elevation-3 {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.elevation-4 {
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.elevation-5 {
|
||||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=elevation.css.map */
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["elevation.sass"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE","file":"elevation.css"}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
.elevation-1
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
|
||||
|
||||
.elevation-2
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
|
||||
|
||||
.elevation-3
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)
|
||||
|
||||
.elevation-4
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15)
|
||||
|
||||
.elevation-5
|
||||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
button.m3.m3-fab {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
}
|
||||
button.m3.m3-fab > span.m3-icon {
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
||||
}
|
||||
button.m3.m3-fab.m3 {
|
||||
contain: content;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border: none;
|
||||
gap: 12px;
|
||||
}
|
||||
button.m3.m3-fab::before {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-fab.surface {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--md-sys-color-surface-container-high);
|
||||
}
|
||||
button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab.primary {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--md-sys-color-primary-container);
|
||||
}
|
||||
button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary {
|
||||
color: var(--md-sys-color-on-primary-container);
|
||||
}
|
||||
button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab.secondary {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab.tertiary {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--md-sys-color-tertiary-container);
|
||||
}
|
||||
button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary {
|
||||
color: var(--md-sys-color-on-tertiary-container);
|
||||
}
|
||||
button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab.m3-small-fab {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
padding: 11px;
|
||||
font-size: 24px;
|
||||
}
|
||||
button.m3.m3-fab.m3-default-fab {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
padding: 19px;
|
||||
font-size: 24px;
|
||||
}
|
||||
button.m3.m3-fab.m3-large-fab {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 28px;
|
||||
padding: 34.5px;
|
||||
font-size: 36px;
|
||||
}
|
||||
button.m3.m3-fab.m3-extended-fab {
|
||||
width: auto;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
padding: 19px;
|
||||
font-size: 24px;
|
||||
}
|
||||
button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):hover {
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):active {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
button.m3.m3-fab:hover.surface::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:hover.primary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:hover.secondary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:hover.tertiary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.surface::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.primary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.secondary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-fab:focus-visible.tertiary::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=fabs.css.map */
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["fabs.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC8CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlDA;EC4BI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADDJ;ECyBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADEJ;ECsBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADKJ;ECmBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADQJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECMI;;ADHJ;ECLI;;ADSA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"fabs.css"}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
@import "mixins/m3-mixins"
|
||||
|
||||
button.m3.m3-fab
|
||||
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
|
||||
|
||||
& > span.m3-icon
|
||||
font-family: Material-Symbols-Outlined-Regular, sans-serif
|
||||
|
||||
&.m3
|
||||
contain: content
|
||||
box-sizing: border-box
|
||||
display: inline-flex
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
align-items: center
|
||||
text-align: center
|
||||
border: none
|
||||
gap: 12px
|
||||
|
||||
&::before
|
||||
@include state-layer
|
||||
|
||||
&.surface
|
||||
@include m3-fab-colors-palette(--md-sys-color-surface-container-high, --md-sys-color-primary)
|
||||
|
||||
&.primary
|
||||
@include m3-fab-colors-palette(--md-sys-color-primary-container, --md-sys-color-on-primary-container)
|
||||
|
||||
&.secondary
|
||||
@include m3-fab-colors-palette(--md-sys-color-secondary-container, --md-sys-color-on-secondary-container)
|
||||
|
||||
&.tertiary
|
||||
@include m3-fab-colors-palette(--md-sys-color-tertiary-container, --md-sys-color-on-tertiary-container)
|
||||
|
||||
&.m3-small-fab
|
||||
@include m3-fab-default(12px, 40px, 40px, 11px)
|
||||
font-size: 24px
|
||||
|
||||
&.m3-default-fab
|
||||
@include m3-fab-default(16px, 56px, 56px, 19px)
|
||||
font-size: 24px
|
||||
|
||||
&.m3-large-fab
|
||||
@include m3-fab-default(28px, 96px, 96px, 34.5px)
|
||||
font-size: 36px
|
||||
|
||||
&.m3-extended-fab
|
||||
@include m3-fab-default(16px, auto, 56px, 19px)
|
||||
font-size: 24px
|
||||
|
||||
&:is(.surface, .primary, .secondary, .tertiary):hover
|
||||
@include elevation-4(false)
|
||||
|
||||
&:is(.surface, .primary, .secondary, .tertiary):active
|
||||
@include elevation-3(true)
|
||||
|
||||
&:hover
|
||||
&.surface::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
|
||||
|
||||
&.primary::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent)
|
||||
|
||||
&.secondary::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
|
||||
|
||||
&.tertiary::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent)
|
||||
|
||||
&:focus-visible
|
||||
&.surface::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
|
||||
|
||||
&.primary::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent)
|
||||
|
||||
&.secondary::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
|
||||
|
||||
&.tertiary::before
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent)
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,28 @@
|
|||
This is the directory for Material Icons fonts—note that the font versions of these icons have not been updated since early 2022; the newer Material Symbols fonts are more current, and can be found at [../variablefont](https://github.com/google/material-design-icons/tree/master/variablefont).
|
||||
|
||||
Material Icons are the non-variable classic icon fonts, while the Material Symbols variable fonts offer weight, optical size, grade and fill variations (with grade and Fill being intended also for animated effects).
|
||||
|
||||
The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts:
|
||||
|
||||
```html
|
||||
<!-- https://material.io/resources/icons/?style=baseline -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- https://material.io/resources/icons/?style=outline -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- https://material.io/resources/icons/?style=round -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- https://material.io/resources/icons/?style=sharp -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- https://material.io/resources/icons/?style=twotone -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone"
|
||||
rel="stylesheet">
|
||||
```
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,73 @@
|
|||
@font-face {
|
||||
font-family: Material-Icons-Regular;
|
||||
src: url("./font/MaterialIcons-Regular.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Material-Icons-Outlined-Regular;
|
||||
src: url("./font/MaterialIconsOutlined-Regular.otf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Material-Icons-Round-Regular;
|
||||
src: url("./font/MaterialIconsRound-Regular.otf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Material-Icons-Sharp-Regular;
|
||||
src: url("./font/MaterialIconsSharp-Regular.otf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Material-Icons-Two-Tone-Regular;
|
||||
src: url("./font/MaterialIconsTwoTone-Regular.otf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Material-Symbols-Outlined-Regular;
|
||||
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
|
||||
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Material-Symbols-Round-Regular;
|
||||
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
|
||||
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Material-Symbols-Sharp-Regular;
|
||||
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
|
||||
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
font-face-name: Thin;
|
||||
font-weight: 100;
|
||||
src: url("./font/Roboto-Thin.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
font-face-name: Light;
|
||||
font-weight: 300;
|
||||
src: url("./font/Roboto-Light.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
font-face-name: Regular;
|
||||
font-weight: 400;
|
||||
src: url("./font/Roboto-Regular.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
font-face-name: Medium;
|
||||
font-weight: 500;
|
||||
src: url("./font/Roboto-Medium.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
font-face-name: Bold;
|
||||
font-weight: 700;
|
||||
src: url("./font/Roboto-Bold.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
font-face-name: Black;
|
||||
font-weight: 900;
|
||||
src: url("./font/Roboto-Black.ttf");
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=fonts.css.map */
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["fonts.sass"],"names":[],"mappings":"AAAA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA","file":"fonts.css"}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
@font-face
|
||||
font-family: Material-Icons-Regular
|
||||
src: url("./font/MaterialIcons-Regular.ttf")
|
||||
|
||||
@font-face
|
||||
font-family: Material-Icons-Outlined-Regular
|
||||
src: url("./font/MaterialIconsOutlined-Regular.otf")
|
||||
|
||||
@font-face
|
||||
font-family: Material-Icons-Round-Regular
|
||||
src: url("./font/MaterialIconsRound-Regular.otf")
|
||||
|
||||
@font-face
|
||||
font-family: Material-Icons-Sharp-Regular
|
||||
src: url("./font/MaterialIconsSharp-Regular.otf")
|
||||
|
||||
@font-face
|
||||
font-family: Material-Icons-Two-Tone-Regular
|
||||
src: url("./font/MaterialIconsTwoTone-Regular.otf")
|
||||
|
||||
@font-face
|
||||
font-family: Material-Symbols-Outlined-Regular
|
||||
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf")
|
||||
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2")
|
||||
|
||||
@font-face
|
||||
font-family: Material-Symbols-Round-Regular
|
||||
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf")
|
||||
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2")
|
||||
|
||||
@font-face
|
||||
font-family: Material-Symbols-Sharp-Regular
|
||||
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf")
|
||||
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2")
|
||||
|
||||
@font-face
|
||||
font-family: Roboto
|
||||
font-face-name: Thin
|
||||
font-weight: 100
|
||||
src: url("./font/Roboto-Thin.ttf")
|
||||
|
||||
@font-face
|
||||
font-family: Roboto
|
||||
font-face-name: Light
|
||||
font-weight: 300
|
||||
src: url("./font/Roboto-Light.ttf")
|
||||
|
||||
@font-face
|
||||
font-family: Roboto
|
||||
font-face-name: Regular
|
||||
font-weight: 400
|
||||
src: url("./font/Roboto-Regular.ttf")
|
||||
|
||||
@font-face
|
||||
font-family: Roboto
|
||||
font-face-name: Medium
|
||||
font-weight: 500
|
||||
src: url("./font/Roboto-Medium.ttf")
|
||||
|
||||
@font-face
|
||||
font-family: Roboto
|
||||
font-face-name: Bold
|
||||
font-weight: 700
|
||||
src: url("./font/Roboto-Bold.ttf")
|
||||
|
||||
@font-face
|
||||
font-family: Roboto
|
||||
font-face-name: Black
|
||||
font-weight: 900
|
||||
src: url("./font/Roboto-Black.ttf")
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,29 @@
|
|||
@import "fabs"
|
||||
@import "radio"
|
||||
@import "fonts"
|
||||
@import "button"
|
||||
@import "ripple"
|
||||
@import "swtich"
|
||||
@import "checkbox"
|
||||
@import "text-field"
|
||||
@import "icon-button"
|
||||
@import "./themes/tokens"
|
||||
@import "./themes/colors.module"
|
||||
@import "./themes/typography.module"
|
||||
@import "./themes/theme.dark.css" (prefers-color-scheme: dark)
|
||||
@import "./themes/theme.light.css" (prefers-color-scheme: light)
|
||||
|
||||
html
|
||||
font-family: Roboto, serif
|
||||
color: var(--md-sys-color-on-surface)
|
||||
|
||||
.m3
|
||||
user-select: none
|
||||
|
||||
.m3.m3-wrapper
|
||||
background-color: var(--md-sys-color-surface)
|
||||
border-radius: 25px
|
||||
padding: 25px
|
||||
width: max-content
|
||||
height: min-content
|
||||
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
button.m3.m3-icon-button {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
contain: content;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
button.m3.m3-icon-button::before {
|
||||
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
button.m3.m3-icon-button > span.m3-icon {
|
||||
z-index: 25;
|
||||
font-size: 2em;
|
||||
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
|
||||
}
|
||||
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {
|
||||
font-family: Material-Symbols-Round-Regular, serif;
|
||||
}
|
||||
button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {
|
||||
font-size: 13.49px;
|
||||
font-family: Material-Icons-Regular, serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
button.m3.m3-icon-button.default {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.default.selected.toggled {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.filled {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.filled.toggled {
|
||||
color: var(--md-sys-color-primary);
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
button.m3.m3-icon-button.filled.selected.toggled {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal.toggled {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined {
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined:disabled {
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
button.m3.m3-icon-button.outlined.selected.toggled {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
background-color: var(--md-sys-color-inverse-surface-light);
|
||||
color: var(--md-sys-color-inverse-on-surface);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
button.m3.m3-icon-button.outlined.selected.toggled {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
background-color: var(--md-sys-color-inverse-surface);
|
||||
color: var(--md-sys-color-inverse-on-surface);
|
||||
}
|
||||
}
|
||||
button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
||||
}
|
||||
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=icon-button.css.map */
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["icon-button.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;IACI;IACA;IACA;;;AAER;EACI;IACI;IACA;IACA;;;AAGR;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI","file":"icon-button.css"}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue