├── doc ├── static │ ├── sw.js │ ├── logo-192.png │ ├── logo-512.png │ ├── _redirects │ └── manifest.json ├── src │ ├── assets │ │ ├── style │ │ │ ├── base.pcss │ │ │ ├── rotala.components.pcss │ │ │ ├── extensions │ │ │ │ ├── input.pcss │ │ │ │ ├── link.pcss │ │ │ │ ├── list.pcss │ │ │ │ ├── effect.pcss │ │ │ │ └── prism.pcss │ │ │ └── theme.pcss │ │ └── img │ │ │ ├── twitter.svg │ │ │ ├── github.svg │ │ │ ├── gitlab.svg │ │ │ ├── tailwind.svg │ │ │ ├── bitbucket.svg │ │ │ ├── icon.svg │ │ │ ├── icon-fill-current.svg │ │ │ └── extension.svg │ ├── favicon.png │ ├── components │ │ ├── Sidebar.vue │ │ ├── home │ │ │ ├── Action.vue │ │ │ ├── Intro.vue │ │ │ ├── Examples.vue │ │ │ ├── Features.vue │ │ │ ├── Workflow.vue │ │ │ └── Newsletter.vue │ │ ├── docs │ │ │ ├── drawer.vue │ │ │ ├── notification │ │ │ │ ├── item.vue │ │ │ │ └── index.vue │ │ │ └── modal.vue │ │ ├── OnThisPage.vue │ │ ├── Footer.vue │ │ ├── OffCanvasSidebar.vue │ │ ├── SidebarMenu.vue │ │ ├── Topbar.vue │ │ └── TopbarSearch.vue │ ├── layouts │ │ ├── Default.vue │ │ └── DocLayout.vue │ ├── utils │ │ └── markdown.js │ ├── pages │ │ ├── 404.vue │ │ └── Index.vue │ ├── main.js │ └── templates │ │ └── Doc.vue ├── data │ ├── sections.json │ └── parts.json ├── README.md ├── docs │ ├── release-notes.md │ ├── divider.md │ ├── link.md │ ├── menu.md │ ├── radio.md │ ├── checkbox.md │ ├── install.md │ ├── extension.md │ ├── form-group.md │ ├── input.md │ ├── button.md │ ├── table-group.md │ ├── avatar.md │ ├── tab.md │ ├── drawer.md │ ├── tooltip.md │ ├── select.md │ ├── notification.md │ ├── popover.md │ ├── breadcrumb.md │ └── pagination.md ├── tailwind.config.js ├── examples │ ├── apply-utils.md │ └── extend-class.md ├── .env.development ├── .env.production ├── gridsome.server.js ├── package.json └── gridsome.config.js ├── packages ├── rotala │ ├── docs │ │ ├── assets │ │ │ └── css │ │ │ │ └── .gitkeep │ │ └── main.pcss │ ├── style │ │ ├── base.pcss │ │ ├── components │ │ │ ├── textarea │ │ │ │ └── textarea.pcss │ │ │ ├── divider │ │ │ │ └── divider.pcss │ │ │ ├── badge │ │ │ │ ├── trim.pcss │ │ │ │ └── badge.pcss │ │ │ ├── breadcrumb │ │ │ │ └── breadcrumb.pcss │ │ │ ├── link │ │ │ │ └── link.pcss │ │ │ ├── table │ │ │ │ └── table.pcss │ │ │ ├── form │ │ │ │ └── form.pcss │ │ │ ├── radio │ │ │ │ └── radio.pcss │ │ │ ├── checkbox │ │ │ │ └── checkbox.pcss │ │ │ ├── menu │ │ │ │ └── menu.pcss │ │ │ ├── select │ │ │ │ └── select.pcss │ │ │ ├── tab │ │ │ │ └── tab.pcss │ │ │ ├── pagination │ │ │ │ └── pagination.pcss │ │ │ ├── accordion │ │ │ │ └── accordion.pcss │ │ │ ├── button │ │ │ │ └── button.pcss │ │ │ ├── input │ │ │ │ └── input.pcss │ │ │ ├── avatar │ │ │ │ └── avatar.pcss │ │ │ ├── drawer │ │ │ │ └── drawer.pcss │ │ │ ├── modal │ │ │ │ └── modal.pcss │ │ │ ├── notification │ │ │ │ └── notification.pcss │ │ │ ├── popover │ │ │ │ └── popover.pcss │ │ │ └── tooltip │ │ │ │ └── tooltip.pcss │ │ ├── base │ │ │ ├── general.pcss │ │ │ └── typography.pcss │ │ ├── main.pcss │ │ ├── prefix.pcss │ │ └── components.pcss │ ├── .browserslistrc │ ├── README.md │ ├── postcss.config.js │ ├── package.json │ └── CHANGELOG.md ├── rotala-extension-css-icon │ ├── docs │ │ ├── assets │ │ │ └── css │ │ │ │ └── .gitkeep │ │ ├── prefix-thick.pcss │ │ ├── prefix-thin.pcss │ │ ├── thin.pcss │ │ ├── thick.pcss │ │ └── index.html │ ├── style │ │ ├── prefix.pcss │ │ ├── icon.thin.pcss │ │ ├── icon.thick.pcss │ │ └── icon │ │ │ └── base.pcss │ ├── README.md │ ├── .browserslistrc │ ├── postcss.config.js │ ├── CHANGELOG.md │ └── package.json └── rotala-theme-default-light │ ├── docs │ ├── assets │ │ └── css │ │ │ └── .gitkeep │ └── main.pcss │ ├── style │ ├── prefix.pcss │ ├── base.pcss │ ├── base │ │ ├── README.md │ │ ├── general.pcss │ │ └── typography.pcss │ ├── components │ │ ├── README.md │ │ ├── drawer │ │ │ └── drawer.pcss │ │ ├── notification │ │ │ └── notification.pcss │ │ ├── textarea │ │ │ └── textarea.pcss │ │ ├── tooltip │ │ │ └── tooltip.pcss │ │ ├── popover │ │ │ └── popover.pcss │ │ ├── accordion │ │ │ └── accordion.pcss │ │ ├── modal │ │ │ └── modal.pcss │ │ ├── avatar │ │ │ └── avatar.pcss │ │ ├── menu │ │ │ └── menu.pcss │ │ ├── loading │ │ │ └── loading.pcss │ │ ├── tab │ │ │ └── tab.pcss │ │ ├── link │ │ │ └── link.pcss │ │ ├── breadcrumb │ │ │ └── breadcrumb.pcss │ │ ├── pagination │ │ │ └── pagination.pcss │ │ ├── table │ │ │ └── table.pcss │ │ ├── divider │ │ │ └── divider.pcss │ │ ├── select │ │ │ └── select.pcss │ │ ├── input │ │ │ └── input.pcss │ │ ├── button │ │ │ └── button.pcss │ │ ├── radio │ │ │ └── radio.pcss │ │ └── checkbox │ │ │ └── checkbox.pcss │ ├── main.pcss │ └── components.pcss │ ├── .browserslistrc │ ├── README.md │ ├── tailwind.config.js │ ├── postcss.config.js │ ├── package.json │ ├── CHANGELOG.md │ └── variables.js ├── README.md ├── package.json ├── .gitignore ├── lerna.json ├── .github └── FUNDING.yml └── LICENSE /doc/static/sw.js: -------------------------------------------------------------------------------- 1 | // Empty for now -------------------------------------------------------------------------------- /packages/rotala/docs/assets/css/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/docs/assets/css/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/docs/assets/css/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/rotala/docs/main.pcss: -------------------------------------------------------------------------------- 1 | @import "../style/main.pcss"; 2 | -------------------------------------------------------------------------------- /doc/src/assets/style/base.pcss: -------------------------------------------------------------------------------- 1 | pre code { 2 | @apply rounded-sm; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/docs/main.pcss: -------------------------------------------------------------------------------- 1 | @import "../style/main.pcss"; -------------------------------------------------------------------------------- /doc/src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pitayan/rotala/HEAD/doc/src/favicon.png -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/docs/prefix-thick.pcss: -------------------------------------------------------------------------------- 1 | /* Prefix */ 2 | $icon: thick-icon; -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/docs/prefix-thin.pcss: -------------------------------------------------------------------------------- 1 | /* Prefix */ 2 | $icon: thin-icon; -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/style/prefix.pcss: -------------------------------------------------------------------------------- 1 | /* Prefix */ 2 | $icon: $(prefix)icon; -------------------------------------------------------------------------------- /doc/static/logo-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pitayan/rotala/HEAD/doc/static/logo-192.png -------------------------------------------------------------------------------- /doc/static/logo-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pitayan/rotala/HEAD/doc/static/logo-512.png -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/prefix.pcss: -------------------------------------------------------------------------------- 1 | /* Prefix */ 2 | $loading: $(prefix)loading; -------------------------------------------------------------------------------- /packages/rotala/style/base.pcss: -------------------------------------------------------------------------------- 1 | @import "./base/general.pcss"; 2 | @import "./base/typography.pcss"; -------------------------------------------------------------------------------- /doc/static/_redirects: -------------------------------------------------------------------------------- 1 | /extensions /extensions/_id_star.html 200 2 | /extensions/* /extensions/_id_star.html 200 -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/base.pcss: -------------------------------------------------------------------------------- 1 | @import "./base/general.pcss"; 2 | @import "./base/typography.pcss"; -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/base/README.md: -------------------------------------------------------------------------------- 1 | # Components 2 | This is the folder for you to extend base styles. -------------------------------------------------------------------------------- /doc/src/assets/style/rotala.components.pcss: -------------------------------------------------------------------------------- 1 | @import "rotala/style/prefix.pcss"; 2 | @import "rotala/style/components.pcss"; 3 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/base/general.pcss: -------------------------------------------------------------------------------- 1 | 2 | html, body { 3 | @apply font-sans; 4 | @apply text-gray-900; 5 | } -------------------------------------------------------------------------------- /packages/rotala/style/components/textarea/textarea.pcss: -------------------------------------------------------------------------------- 1 | 2 | textarea.$(input) { 3 | @apply overflow-auto; 4 | @apply h-auto; 5 | } -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/style/icon.thin.pcss: -------------------------------------------------------------------------------- 1 | 2 | @import "./prefix.pcss"; 3 | @import "./icon/base.pcss"; 4 | @import "./icon/thin.pcss"; 5 | -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/style/icon.thick.pcss: -------------------------------------------------------------------------------- 1 | 2 | @import "./prefix.pcss"; 3 | @import "./icon/base.pcss"; 4 | @import "./icon/thick.pcss"; 5 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/README.md: -------------------------------------------------------------------------------- 1 | # Components 2 | This is the folder for you to create your customized components style sheets. -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/README.md: -------------------------------------------------------------------------------- 1 | # Rotala extension: icon 2 | An official css icon extension for Rotala.css framework. 3 | Design based on Spectre.css -------------------------------------------------------------------------------- /packages/rotala/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 4 Chrome versions 3 | Edge >= 12 4 | Firefox ESR 5 | last 4 Safari versions 6 | last 4 Opera versions 7 | Explorer >= 11 -------------------------------------------------------------------------------- /doc/data/sections.json: -------------------------------------------------------------------------------- 1 | { 2 | "sections": [ 3 | { 4 | "name": "Getting Started" 5 | }, 6 | { 7 | "name": "Components" 8 | } 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/docs/thin.pcss: -------------------------------------------------------------------------------- 1 | 2 | /* Thin */ 3 | @import "./prefix-thin.pcss"; 4 | @import "../style/icon/base.pcss"; 5 | @import "../style/icon/thin.pcss"; 6 | -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 4 Chrome versions 3 | Edge >= 12 4 | Firefox ESR 5 | last 4 Safari versions 6 | last 4 Opera versions 7 | Explorer >= 11 -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/docs/thick.pcss: -------------------------------------------------------------------------------- 1 | 2 | /* Thick */ 3 | @import "./prefix-thick.pcss"; 4 | @import "../style/icon/base.pcss"; 5 | @import "../style/icon/thick.pcss"; 6 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 4 Chrome versions 3 | Edge >= 12 4 | Firefox ESR 5 | last 4 Safari versions 6 | last 4 Opera versions 7 | Explorer >= 11 -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/drawer/drawer.pcss: -------------------------------------------------------------------------------- 1 | .$(drawer) { 2 | background: rgba(0, 0, 0, .25); 3 | 4 | &-container { 5 | @apply bg-white; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/README.md: -------------------------------------------------------------------------------- 1 | # Rotala default theme: light 2 | An official standalone theme for Rotala.css framework 3 | 4 | # TODO: 5 | - remove underline style for select and input -------------------------------------------------------------------------------- /doc/data/parts.json: -------------------------------------------------------------------------------- 1 | { 2 | "parts": [ 3 | { 4 | "name": "Docs", 5 | "link": "/docs/" 6 | }, 7 | { 8 | "name": "Extensions", 9 | "link": "/extensions/" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/tailwind.config.js: -------------------------------------------------------------------------------- 1 | 2 | const { extend, plugins } = require('./variables') 3 | 4 | module.exports = { 5 | theme: { 6 | extend 7 | }, 8 | variants: {}, 9 | plugins, 10 | } -------------------------------------------------------------------------------- /packages/rotala/style/base/general.pcss: -------------------------------------------------------------------------------- 1 | body { 2 | @apply text-base; 3 | @apply leading-none; 4 | 5 | /* fix ios tap flikering */ 6 | -webkit-tap-highlight-color: transparent; 7 | backface-visibility: hidden; 8 | } 9 | -------------------------------------------------------------------------------- /doc/README.md: -------------------------------------------------------------------------------- 1 | # rotalacss.com 2 | The main site at rotalacss.com 3 | 4 | # TODO 5 | - Showcase Page 6 | - Setup service worker to trace updates 7 | - Automate realease notes and migration guide 8 | - Add illustration svg to home page 9 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/notification/notification.pcss: -------------------------------------------------------------------------------- 1 | .$(notification) { 2 | @apply text-gray-800; 3 | 4 | &-container { 5 | @apply bg-white; 6 | @apply rounded-sm; 7 | @apply shadow-xl; 8 | } 9 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Rotala.css

2 | A customization focused css framework 3 | 4 | ## status 5 | Everything is under prototyping... 6 | 7 | ## Inspired by 8 | Spectre.css 9 | Tailwind 10 | Bulma 11 | Bootstrap 12 | Semantic UI -------------------------------------------------------------------------------- /doc/docs/release-notes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Release Notes 3 | order: 5 4 | link: /docs/release-notes/ 5 | slug: release-notes 6 | section: Getting Started 7 | --- 8 | 9 | Check out what's new in the latest version of Rotala CSS. 10 |
11 |
12 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/base/typography.pcss: -------------------------------------------------------------------------------- 1 | h1, h2, h3, h4, h5, h6, 2 | .h1, .h2, .h3, .h4, .h5, .h6 { 3 | @apply font-bold; 4 | 5 | small, 6 | .small { 7 | @apply font-bold; 8 | } 9 | } 10 | 11 | b { 12 | @apply font-bold; 13 | } -------------------------------------------------------------------------------- /packages/rotala/style/components/divider/divider.pcss: -------------------------------------------------------------------------------- 1 | .$(divider) { 2 | @apply block; 3 | @apply relative; 4 | @apply border-t border-solid; 5 | @apply text-center; 6 | @apply text-gray-500; 7 | @apply h-px; 8 | 9 | margin: .125rem 0; 10 | } 11 | -------------------------------------------------------------------------------- /packages/rotala/style/components/badge/trim.pcss: -------------------------------------------------------------------------------- 1 | /* Adjustment for Avatar */ 2 | 3 | .$(avatar) { 4 | &&-rounded { 5 | .$(badge)-status, 6 | .$(badge)-text { 7 | @apply z-10; 8 | 9 | top: 14.64%; 10 | right: 14.64%; 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /packages/rotala/style/main.pcss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /* Prefix */ 4 | @import "./prefix.pcss"; 5 | 6 | /* Base */ 7 | @import "tailwindcss/base"; 8 | @import "./base.pcss"; 9 | 10 | /* Components */ 11 | @import "tailwindcss/components"; 12 | @import "./components.pcss"; 13 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/textarea/textarea.pcss: -------------------------------------------------------------------------------- 1 | 2 | textarea.$(input) { 3 | +.$(input)-label { 4 | top: -12px !important; 5 | } 6 | 7 | &:not(:placeholder-shown) { 8 | +.$(input)-label { 9 | top: -16px !important; 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /packages/rotala/style/components/breadcrumb/breadcrumb.pcss: -------------------------------------------------------------------------------- 1 | .$(breadcrumb) { 2 | @apply list-none; 3 | @apply m-0; 4 | @apply p-0; 5 | 6 | .$(breadcrumb)-item { 7 | @apply inline-block; 8 | @apply m-0; 9 | 10 | a { 11 | @apply no-underline; 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/main.pcss: -------------------------------------------------------------------------------- 1 | /* Rotala trim */ 2 | @import "rotala"; 3 | /* Rotala css icon thin */ 4 | @import "rotala-extension-css-icon"; 5 | 6 | @import "./prefix.pcss"; 7 | @import "./base.pcss"; 8 | @import "./components.pcss"; 9 | 10 | @import "tailwindcss/utilities"; -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/tooltip/tooltip.pcss: -------------------------------------------------------------------------------- 1 | .$(tooltip) { 2 | @apply relative; 3 | 4 | &-container { 5 | @apply rounded-sm; 6 | @apply text-white; 7 | 8 | background: rgba(0, 0, 0, .7); 9 | transition: opacity .15s, transform .15s; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /doc/tailwind.config.js: -------------------------------------------------------------------------------- 1 | 2 | const { extend, plugins } = require('rotala-theme-default-light/variables') 3 | 4 | module.exports = { 5 | important: true, 6 | theme: { 7 | extend: { 8 | ...extend, 9 | maxWidth: { 10 | 'screen-2xl': '1600px' 11 | } 12 | } 13 | }, 14 | plugins 15 | } -------------------------------------------------------------------------------- /packages/rotala/style/components/link/link.pcss: -------------------------------------------------------------------------------- 1 | 2 | .$(link) { 3 | &:active, 4 | &:focus, 5 | &:hover { 6 | @apply outline-none; 7 | } 8 | 9 | &[disabled], 10 | &:disabled, 11 | &.disabled { 12 | @apply cursor-default; 13 | @apply pointer-events-none; 14 | @apply text-gray-400; 15 | } 16 | } -------------------------------------------------------------------------------- /doc/src/components/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 11 | 12 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rotalacss", 3 | "private": true, 4 | "devDependencies": { 5 | "lerna": "^3.20.2" 6 | }, 7 | "workspaces": [ 8 | "packages/*" 9 | ], 10 | "scripts": { 11 | "publish": "lerna publish", 12 | "publish-canary": "lerna publish --canary", 13 | "prepare": "lerna run prepare" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /doc/src/assets/style/extensions/input.pcss: -------------------------------------------------------------------------------- 1 | .$(input)-search { 2 | @apply pl-8; 3 | @apply pr-4; 4 | @apply bg-gray-200; 5 | @apply rounded; 6 | @apply border border-solid border-white; 7 | @apply transition-colors; 8 | @apply duration-150; 9 | 10 | &:focus { 11 | @apply bg-white; 12 | @apply border-gray-600; 13 | } 14 | } -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/popover/popover.pcss: -------------------------------------------------------------------------------- 1 | .$(popover) { 2 | &-container { 3 | @apply bg-white; 4 | @apply rounded-sm; 5 | @apply shadow-lg; 6 | 7 | transition: opacity .2s, transform .2s; 8 | transition-delay: .1s; 9 | } 10 | 11 | &-click.open &-container, 12 | &-hover:hover &-container { 13 | transition-delay: .1s; 14 | } 15 | } -------------------------------------------------------------------------------- /packages/rotala/style/components/table/table.pcss: -------------------------------------------------------------------------------- 1 | .$(table-group) { 2 | @apply w-full; 3 | @apply max-w-full; 4 | @apply border-collapse; 5 | @apply text-left; 6 | 7 | /* avoid being appended !important */ 8 | display: table; 9 | border-spacing: 0; 10 | 11 | th, 12 | td { 13 | @apply p-4; 14 | @apply border-none; 15 | } 16 | 17 | th { 18 | @apply border-t-0; 19 | } 20 | } -------------------------------------------------------------------------------- /doc/src/assets/style/theme.pcss: -------------------------------------------------------------------------------- 1 | /* default theme light */ 2 | @import "rotala-theme-default-light"; 3 | 4 | /* custome styles */ 5 | @import "./base.pcss"; 6 | @import "./extensions/input.pcss"; 7 | @import "./extensions/list.pcss"; 8 | @import "./extensions/link.pcss"; 9 | @import "./extensions/prism.pcss"; 10 | @import "./extensions/effect.pcss"; 11 | 12 | /* tailwindcss utils */ 13 | @import "tailwindcss/utilities"; 14 | -------------------------------------------------------------------------------- /doc/static/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "RotalaCSS", 3 | "short_name": "rotala", 4 | "icons": [ 5 | { 6 | "src": "logo-192.png", 7 | "sizes": "192x192" 8 | }, 9 | { 10 | "src": "logo-512.png", 11 | "sizes": "512x512" 12 | } 13 | ], 14 | "lang": "en-US", 15 | "start_url": "/", 16 | "display": "standalone", 17 | "theme_color": "#3D9968", 18 | "background_color": "#FFF" 19 | } -------------------------------------------------------------------------------- /packages/rotala/style/components/form/form.pcss: -------------------------------------------------------------------------------- 1 | .$(form-group) { 2 | &-fieldset { 3 | @apply mb-2; 4 | } 5 | 6 | &-legend { 7 | @apply text-lg; 8 | @apply font-normal; 9 | @apply mb-2; 10 | } 11 | 12 | &-item { 13 | &:not(:last-child) { 14 | @apply mb-2; 15 | } 16 | } 17 | 18 | &-label { 19 | @apply block; 20 | @apply leading-normal; 21 | @apply py-1; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /doc/examples/apply-utils.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Apply Utils 3 | filepath: gridsome.server.js 4 | order: 1 5 | --- 6 | 7 | Use the utilities to modify the component directly. 8 | 9 | ```scss 10 | @import "rotala"; 11 | ``` 12 | 13 | ```html {} 14 | 15 | ``` 16 | -------------------------------------------------------------------------------- /doc/src/layouts/Default.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /packages/rotala/style/components/radio/radio.pcss: -------------------------------------------------------------------------------- 1 | .$(radio)-group { 2 | @apply relative; 3 | } 4 | 5 | .$(radio) { 6 | @apply cursor-pointer; 7 | @apply select-none; 8 | @apply relative; 9 | @apply leading-normal; 10 | @apply pl-5 py-1; 11 | 12 | min-height: 1.5rem; 13 | 14 | &[disabled], 15 | &:disabled, 16 | &.disabled { 17 | @apply cursor-default; 18 | @apply pointer-events-none; 19 | @apply text-gray-400; 20 | } 21 | } -------------------------------------------------------------------------------- /doc/src/components/home/Action.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | 19 | -------------------------------------------------------------------------------- /packages/rotala/style/components/checkbox/checkbox.pcss: -------------------------------------------------------------------------------- 1 | .$(prefix)check-group { 2 | @apply relative; 3 | } 4 | 5 | .$(checkbox) { 6 | @apply cursor-pointer; 7 | @apply select-none; 8 | @apply relative; 9 | @apply leading-normal; 10 | @apply pl-5 py-1; 11 | 12 | min-height: 1.5rem; 13 | 14 | &[disabled], 15 | &:disabled, 16 | &.disabled { 17 | @apply cursor-default; 18 | @apply pointer-events-none; 19 | @apply text-gray-400; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Dependency directory 6 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 7 | node_modules 8 | dist 9 | 10 | # Build Path of Test Fixtures 11 | .cache/ 12 | .netlify 13 | 14 | # IDE specific 15 | .idea/ 16 | .vscode/ 17 | *.sw* 18 | 19 | # lock files 20 | yarn.lock 21 | package-lock.json 22 | # ignore any lock file other than main lock file 23 | !/yarn.lock 24 | 25 | # temp 26 | .temp/ 27 | -------------------------------------------------------------------------------- /doc/src/utils/markdown.js: -------------------------------------------------------------------------------- 1 | import marked from 'marked' 2 | import Prism from 'prismjs' 3 | 4 | marked.setOptions({ 5 | highlight(code, lang) { 6 | if (!Prism.languages[lang]) return code 7 | 8 | Prism.hooks.add('before-highlightall', env => { 9 | if (env.tag == 'code') { 10 | env.attributes += `data-lang=${lang}` 11 | } 12 | }) 13 | 14 | return Prism.highlight(code, Prism.languages[lang], lang) 15 | } 16 | }) 17 | 18 | export default marked 19 | -------------------------------------------------------------------------------- /doc/src/pages/404.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/postcss.config.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | map: false, 4 | plugins: [ 5 | require('postcss-import'), 6 | require('postcss-nested'), 7 | require('postcss-simple-vars')({ 8 | variables: { 9 | prefix: '' 10 | } 11 | }), 12 | require('tailwindcss'), 13 | require('autoprefixer'), 14 | ...process.env.NODE_ENV === 'production' 15 | ? [ 16 | require('cssnano') 17 | ] 18 | : [] 19 | ] 20 | } -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/postcss.config.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | map: false, 4 | plugins: [ 5 | require('postcss-import'), 6 | require('postcss-nested'), 7 | require('postcss-simple-vars')({ 8 | variables: { 9 | prefix: '' 10 | } 11 | }), 12 | require('tailwindcss'), 13 | require('autoprefixer'), 14 | ...process.env.NODE_ENV === 'production' 15 | ? [ 16 | require('cssnano') 17 | ] 18 | : [] 19 | ] 20 | } -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/accordion/accordion.pcss: -------------------------------------------------------------------------------- 1 | 2 | .$(accordion) { 3 | &-body { 4 | transition: max-height .2s; 5 | } 6 | 7 | .$(accordion)-header { 8 | .$(accordion)-icon { 9 | transition: transform .2s; 10 | } 11 | } 12 | 13 | input.$(accordion)-indicator:checked ~, 14 | &[open], 15 | &.open { 16 | .$(accordion)-header { 17 | .$(accordion)-icon { 18 | transform: rotate(90deg); 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "command": { 3 | "publish": { 4 | "allowBranch": "master", 5 | "bump": "patch", 6 | "conventionalCommits": true, 7 | "message": "chore(release): Publish", 8 | "ignoreChanges": [ 9 | "*.md" 10 | ] 11 | } 12 | }, 13 | "packages": [ 14 | "packages/*" 15 | ], 16 | "version": "independent", 17 | "npmClient": "yarn", 18 | "loglevel": "success", 19 | "registry": "https://registry.npmjs.org/", 20 | "useWorkspaces": true 21 | } 22 | -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/style/icon/base.pcss: -------------------------------------------------------------------------------- 1 | .$(icon) { 2 | @apply inline-block; 3 | @apply relative; 4 | @apply align-middle; 5 | @apply box-border; 6 | 7 | height: 1em; 8 | width: 1em; 9 | font-size: normal; 10 | 11 | &::before, 12 | &::after { 13 | @apply box-border; 14 | @apply absolute; 15 | @apply block; 16 | 17 | content: ''; 18 | left: 50%; 19 | top: 50%; 20 | transform: translate(-50%, -50%); 21 | } 22 | 23 | &-combo { 24 | vertical-align: -15%; 25 | } 26 | } -------------------------------------------------------------------------------- /doc/src/assets/img/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | Twitter 3 | 5 | 6 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/modal/modal.pcss: -------------------------------------------------------------------------------- 1 | .$(modal) { 2 | background: rgba(0,0,0, .25); 3 | 4 | &-container { 5 | @apply bg-white; 6 | } 7 | 8 | &-fullscreen { 9 | @apply p-0; 10 | 11 | .$(modal)-container { 12 | @apply rounded-none; 13 | @apply w-full; 14 | @apply h-full; 15 | @apply max-w-full; 16 | @apply min-h-full; 17 | } 18 | } 19 | 20 | &-scrollable { 21 | @apply overflow-y-auto; 22 | 23 | .$(modal)-container { 24 | max-height: inherit; 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /packages/rotala/style/components/menu/menu.pcss: -------------------------------------------------------------------------------- 1 | .$(menu) { 2 | @apply m-0; 3 | @apply list-none; 4 | @apply p-2; 5 | 6 | & &-item { 7 | @apply mt-0; 8 | @apply p-2; 9 | @apply relative; 10 | @apply no-underline; 11 | @apply outline-none; 12 | 13 | a { 14 | @apply block; 15 | @apply no-underline; 16 | @apply p-2; 17 | } 18 | 19 | &[disabled], 20 | &:disabled, 21 | &.disabled { 22 | @apply cursor-default; 23 | @apply pointer-events-none; 24 | @apply text-gray-400; 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/avatar/avatar.pcss: -------------------------------------------------------------------------------- 1 | 2 | .$(avatar) { 3 | & &-icon, 4 | & &-status { 5 | @apply absolute; 6 | @apply z-10; 7 | @apply rounded-full; 8 | @apply shadow-white; 9 | 10 | bottom: 11.36%; 11 | right: 11.36%; 12 | height: 1em; 13 | width: 1em; 14 | transform: translate(50%, 50%); 15 | } 16 | 17 | &&-rounded &-icon, 18 | &&-rounded &-status { 19 | bottom: 14.64%; 20 | right: 14.64%; 21 | } 22 | 23 | & &-status { 24 | padding: 2px; 25 | height: .5em; 26 | width: .5em; 27 | } 28 | } -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/menu/menu.pcss: -------------------------------------------------------------------------------- 1 | .$(menu) { 2 | @apply max-w-3xl; 3 | 4 | &-item { 5 | &:focus, 6 | &:active, 7 | &.active { 8 | a { 9 | @apply bg-primary-200; 10 | @apply text-primary-600; 11 | } 12 | } 13 | 14 | & > a { 15 | @apply block; 16 | @apply no-underline; 17 | @apply rounded-sm; 18 | 19 | color: inherit; 20 | 21 | &:focus, 22 | &:hover { 23 | @apply bg-primary-200; 24 | @apply text-primary-600 !important; 25 | } 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /packages/rotala/style/components/select/select.pcss: -------------------------------------------------------------------------------- 1 | .$(select) { 2 | @apply appearance-none; 3 | @apply border-0 rounded-none; 4 | @apply leading-normal; 5 | @apply outline-none; 6 | @apply align-middle; 7 | @apply max-w-full; 8 | @apply w-full; 9 | 10 | background-color: inherit; 11 | min-height: 2.25rem; 12 | 13 | &::-ms-expand { 14 | @apply hidden; 15 | @apply bg-transparent; 16 | } 17 | 18 | &[disabled], 19 | &:disabled, 20 | &.disabled { 21 | @apply cursor-default; 22 | @apply pointer-events-none; 23 | @apply text-gray-400; 24 | } 25 | } -------------------------------------------------------------------------------- /packages/rotala/style/components/tab/tab.pcss: -------------------------------------------------------------------------------- 1 | .$(tab) { 2 | @apply list-none; 3 | @apply m-0; 4 | @apply flex; 5 | @apply items-center; 6 | @apply flex-wrap; 7 | 8 | & &-item { 9 | @apply mt-0; 10 | @apply p-2; 11 | @apply relative; 12 | @apply no-underline; 13 | @apply outline-none; 14 | 15 | a { 16 | @apply p-2; 17 | @apply no-underline; 18 | } 19 | 20 | &[disabled], 21 | &:disabled, 22 | &.disabled { 23 | @apply cursor-default; 24 | @apply pointer-events-none; 25 | @apply text-gray-400; 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /packages/rotala/style/components/pagination/pagination.pcss: -------------------------------------------------------------------------------- 1 | .$(pagination) { 2 | @apply block; 3 | @apply list-none; 4 | @apply m-0; 5 | @apply py-4 px-0; 6 | 7 | & &-prev, 8 | & &-next, 9 | & &-item { 10 | @apply inline-block; 11 | @apply m-px; 12 | 13 | a { 14 | @apply text-center; 15 | @apply relative; 16 | @apply py-2 px-3; 17 | } 18 | 19 | &[disabled], 20 | &:disabled, 21 | &.disabled { 22 | @apply cursor-default; 23 | 24 | a { 25 | @apply pointer-events-none; 26 | @apply text-gray-400; 27 | } 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /doc/src/assets/style/extensions/link.pcss: -------------------------------------------------------------------------------- 1 | .$(link) { 2 | &-doc { 3 | @apply font-medium; 4 | @apply text-primary-600; 5 | @apply border-b border-solid border-primary-300; 6 | 7 | &:hover { 8 | @apply text-primary-600; 9 | @apply border-primary-600; 10 | } 11 | } 12 | 13 | &-anchor { 14 | @apply opacity-0; 15 | @apply text-primary-600; 16 | 17 | &:active { 18 | @apply opacity-100; 19 | @apply text-primary-600; 20 | } 21 | } 22 | } 23 | 24 | h1, h2, h3, h4, h5, h6 { 25 | &:hover { 26 | .$(link).$(link)-anchor { 27 | @apply opacity-100; 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /doc/src/components/docs/drawer.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /packages/rotala/README.md: -------------------------------------------------------------------------------- 1 | # Rotala 2 | A customization focused ui library built with tailwindcss. 3 | 4 | ## TODO 5 | - [] CI: Travis/Circle 6 | - [] abstract layer for common behaviors: outline focus active disabled hover 7 | - [] background color: 400--disable 500--hover(background) 600--normalText 8 | - [] remake components using data-attr 9 | - [] rotala cli 10 | - [] focus -> 0 outline for control elements: input button select radio checkbox 11 | 12 | ### WIP Components 13 | - [] Dropdown 14 | - [] card 15 | - [] panel 16 | - [] stepper 17 | - [] tile 18 | - [] nav 19 | - [] tag 20 | - [] carousel 21 | - [] figure 22 | - [] image 23 | - [] video 24 | - [] label -------------------------------------------------------------------------------- /packages/rotala/style/components/accordion/accordion.pcss: -------------------------------------------------------------------------------- 1 | 2 | .$(accordion) { 3 | .$(accordion)-header { 4 | @apply block; 5 | @apply py-px py-2; 6 | } 7 | 8 | /* Remove default details marker in Webkit */ 9 | summary.$(accordion)-header { 10 | &::-webkit-details-marker { 11 | @apply hidden; 12 | } 13 | } 14 | 15 | &-body { 16 | @apply mb-1; 17 | @apply overflow-x-hidden; 18 | @apply overflow-y-auto; 19 | 20 | max-height: 0; 21 | } 22 | 23 | input.$(accordion)-indicator:checked ~, 24 | &[open], 25 | &.open { 26 | .$(accordion)-body { 27 | @apply max-h-screen; 28 | } 29 | } 30 | } 31 | 32 | -------------------------------------------------------------------------------- /doc/src/assets/img/github.svg: -------------------------------------------------------------------------------- 1 | 2 | GitHub 3 | 5 | 6 | -------------------------------------------------------------------------------- /doc/src/assets/img/gitlab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/rotala/postcss.config.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | map: false, 4 | plugins: [ 5 | require('postcss-import'), 6 | require('postcss-nested'), 7 | require('postcss-simple-vars')({ 8 | variables: { 9 | prefix: '' 10 | } 11 | }), 12 | require('tailwindcss'), 13 | require('autoprefixer'), 14 | ...process.env.NODE_ENV === 'production' 15 | ? [ 16 | require('postcss-banner')({ 17 | important: true, 18 | inline: true, 19 | banner: 'Rotala.css v0.1 @copyright 2020 by Daiyanze' 20 | }), 21 | require('cssnano') 22 | ] 23 | : [] 24 | ] 25 | } -------------------------------------------------------------------------------- /packages/rotala/style/components/button/button.pcss: -------------------------------------------------------------------------------- 1 | 2 | .$(button) { 3 | @apply appearance-none; 4 | @apply select-none; 5 | @apply align-middle; 6 | @apply font-medium; 7 | @apply text-center; 8 | @apply text-base; 9 | @apply no-underline; 10 | @apply leading-normal; 11 | @apply whitespace-no-wrap; 12 | @apply inline-block; 13 | @apply cursor-pointer; 14 | @apply rounded-sm; 15 | @apply py-1 px-3; 16 | 17 | background-color: inherit; 18 | 19 | &:focus { 20 | @apply outline-none; 21 | } 22 | 23 | &[disabled], 24 | &:disabled, 25 | &.disabled { 26 | @apply cursor-default; 27 | @apply pointer-events-none; 28 | @apply text-gray-400; 29 | } 30 | } -------------------------------------------------------------------------------- /doc/src/assets/style/extensions/list.pcss: -------------------------------------------------------------------------------- 1 | 2 | .bullet-dot { 3 | &::before { 4 | @apply absolute; 5 | @apply w-2; 6 | @apply h-2; 7 | @apply transition; 8 | @apply duration-150; 9 | @apply ease-in-out; 10 | @apply rounded; 11 | @apply transform; 12 | @apply scale-0; 13 | 14 | content: ""; 15 | left: calc(-1rem); 16 | top: .3em; 17 | transition-delay: initial; 18 | transition-property: initial; 19 | } 20 | 21 | &:hover { 22 | &::before { 23 | @apply bg-gray-500; 24 | @apply scale-100; 25 | } 26 | } 27 | 28 | &:active, 29 | &.active { 30 | &::before { 31 | @apply bg-primary-600; 32 | @apply scale-100; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/rotala/style/components/input/input.pcss: -------------------------------------------------------------------------------- 1 | .$(input) { 2 | @apply appearance-none; 3 | @apply border-none; 4 | @apply text-base; 5 | @apply leading-normal; 6 | @apply shadow-none; 7 | @apply max-w-full; 8 | @apply w-full; 9 | @apply py-1 px-0; 10 | 11 | min-height: 36px; 12 | font-stretch: 100%; 13 | 14 | &:active, 15 | &:focus { 16 | @apply outline-none; 17 | } 18 | 19 | &::placeholder { 20 | @apply text-base; 21 | @apply text-gray-500; 22 | } 23 | 24 | &[disabled], 25 | &:disabled, 26 | &.disabled { 27 | @apply cursor-default; 28 | @apply pointer-events-none; 29 | @apply text-gray-400; 30 | 31 | &::placeholder { 32 | @apply text-gray-400; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/rotala/style/prefix.pcss: -------------------------------------------------------------------------------- 1 | /* Prefix */ 2 | $link: $(prefix)link; 3 | $button: $(prefix)button; 4 | $checkbox: $(prefix)checkbox; 5 | $form-group: $(prefix)form-group; 6 | $divider: $(prefix)divider; 7 | $input: $(prefix)input; 8 | $radio: $(prefix)radio; 9 | $select: $(prefix)select; 10 | $table-group: $(prefix)table-group; 11 | $avatar: $(prefix)avatar; 12 | $accordion: $(prefix)accordion; 13 | $badge: $(prefix)badge; 14 | $breadcrumb: $(prefix)breadcrumb; 15 | $effect: $(prefix)effect; 16 | $drawer: $(prefix)drawer; 17 | $menu: $(prefix)menu; 18 | $modal: $(prefix)modal; 19 | $notification: $(prefix)notification; 20 | $pagination: $(prefix)pagination; 21 | $popover: $(prefix)popover; 22 | $tab: $(prefix)tab; 23 | $tooltip: $(prefix)tooltip; 24 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/loading/loading.pcss: -------------------------------------------------------------------------------- 1 | @keyframes rotating { 2 | 0% { 3 | transform: rotate(0deg); 4 | } 5 | 6 | 100% { 7 | transform: rotate(360deg); 8 | } 9 | } 10 | 11 | .$(loading) { 12 | @apply relative; 13 | @apply pointer-events-none; 14 | 15 | min-height: 1rem; 16 | 17 | &::after { 18 | @apply absolute; 19 | @apply block; 20 | @apply h-4; 21 | @apply w-4; 22 | @apply border-2 border-solid rounded-full; 23 | @apply border-primary-600; 24 | @apply -ml-2; 25 | @apply -mt-2; 26 | 27 | content: ''; 28 | left: 50%; 29 | top: 50%; 30 | border-right-color: transparent; 31 | border-bottom-color: transparent; 32 | animation: rotating 500ms infinite linear; 33 | } 34 | } -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/tab/tab.pcss: -------------------------------------------------------------------------------- 1 | .$(tab) { 2 | @apply border-b border-solid border-gray-400; 3 | @apply text-gray-800; 4 | 5 | &-item { 6 | @apply block; 7 | @apply border-b-2 border-solid border-transparent; 8 | @apply -mb-px; 9 | 10 | a { 11 | 12 | &:focus, 13 | &:hover { 14 | @apply text-primary-500; 15 | } 16 | } 17 | 18 | &.active { 19 | @apply border-primary-600; 20 | 21 | a { 22 | @apply border-primary-600; 23 | @apply text-primary-600; 24 | } 25 | } 26 | } 27 | 28 | &&-fluid { 29 | .$(tab)-item { 30 | @apply text-center; 31 | 32 | flex: 1 0 0; 33 | 34 | a { 35 | @apply mx-0; 36 | } 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /doc/examples/extend-class.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Extend Class 3 | filepath: gridsome.server.js 4 | order: 2 5 | --- 6 | 7 | Extend the target component to keep your html template clean and readible 8 | 9 | ```scss 10 | @import "rotala"; 11 | ``` 12 | 13 | ```css 14 | .input { 15 | @apply px-2; 16 | @apply bg-gray-200; 17 | @apply rounded; 18 | @apply border border-solid border-gray-300; 19 | @apply transition-colors; 20 | @apply duration-150; 21 | 22 | &:focus { 23 | @apply bg-white; 24 | } 25 | } 26 | ``` 27 | 28 | ```html {} 29 | 30 | ``` 31 | 32 | 33 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/link/link.pcss: -------------------------------------------------------------------------------- 1 | 2 | .$(link) { 3 | @apply transition-all; 4 | @apply ease-in-out; 5 | @apply duration-150; 6 | @apply no-underline; 7 | 8 | &:focus { 9 | @apply shadow-primary-base; 10 | } 11 | 12 | &:hover, 13 | &:active, 14 | &.active { 15 | @apply text-primary-500; 16 | } 17 | 18 | &-underline { 19 | @apply font-medium; 20 | @apply text-primary-600; 21 | @apply border-b border-solid border-primary-300; 22 | 23 | &[disabled], 24 | &:disabled, 25 | &.disabled { 26 | @apply border-dashed border-gray-300; 27 | } 28 | 29 | &:hover, 30 | &:active, 31 | &.active { 32 | @apply text-primary-600; 33 | @apply border-primary-600; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [daiyanze] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | -------------------------------------------------------------------------------- /packages/rotala/style/components/avatar/avatar.pcss: -------------------------------------------------------------------------------- 1 | 2 | .$(avatar) { 3 | @apply rounded-sm; 4 | @apply inline-block; 5 | @apply font-normal; 6 | @apply leading-normal; 7 | @apply relative; 8 | @apply align-middle; 9 | @apply h-16; 10 | @apply w-16; 11 | 12 | img { 13 | @apply relative; 14 | @apply h-full; 15 | @apply w-full; 16 | @apply rounded-sm; 17 | @apply z-10; 18 | } 19 | 20 | &[data-initial]::before { 21 | @apply absolute; 22 | @apply z-0; 23 | 24 | top: 50%; 25 | left: 50%; 26 | content: attr(data-initial); 27 | color: currentColor; 28 | transform: translate(-50%, -50%); 29 | } 30 | 31 | &-rounded { 32 | @apply rounded-full; 33 | 34 | img { 35 | @apply rounded-full; 36 | } 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /doc/src/assets/img/tailwind.svg: -------------------------------------------------------------------------------- 1 | 2 | Tailwind CSS 3 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /doc/.env.development: -------------------------------------------------------------------------------- 1 | # Browser env 2 | # About Environment Usage: https://gridsome.org/docs/environment-variables/ 3 | GRIDSOME_ALGOLIA_APP_ID=H00YUZ9AB9 4 | GRIDSOME_ALGOLIA_SEARCH_API_KEY=0e76946e545ad89e1b12f820f7c3ad01 5 | # for algolia npm search 6 | GRIDSOME_ALGOLIA_NPM_APP_ID=OFCNCOG2CU 7 | GRIDSOME_ALGOLIA_NPM_SEARCH_API_KEY=e0925566b9cfa7d0d21586a0b365d78c 8 | # for algolia doc search 9 | GRIDSOME_ALGOLIA_DOC_SEARCH_API_KEY=9ba6c5aa5a268a669999d27b6f9ed7e6 10 | 11 | # Github URL 12 | GRIDSOME_ROTALA_GITHUB=https://github.com/daiyanze/rotala 13 | # Twitter URL 14 | GRIDSOME_ROTALA_TWITTER=https://twitter.com/rotalacss 15 | 16 | # Server env 17 | SITE_NAME=Rotala.css 18 | SITE_URL=http://localhost:8080 19 | SITE_DESCRIPTION=Customization focused CSS framework 20 | 21 | # Google Analytics 22 | GA_ID=UA-98403506-2 23 | -------------------------------------------------------------------------------- /doc/.env.production: -------------------------------------------------------------------------------- 1 | # Browser env 2 | # About Environment Usage: https://gridsome.org/docs/environment-variables/ 3 | GRIDSOME_ALGOLIA_APP_ID=H00YUZ9AB9 4 | GRIDSOME_ALGOLIA_SEARCH_API_KEY=0e76946e545ad89e1b12f820f7c3ad01 5 | # for algolia npm search 6 | GRIDSOME_ALGOLIA_NPM_APP_ID=OFCNCOG2CU 7 | GRIDSOME_ALGOLIA_NPM_SEARCH_API_KEY=e0925566b9cfa7d0d21586a0b365d78c 8 | # for algolia doc search 9 | GRIDSOME_ALGOLIA_DOC_SEARCH_API_KEY=9ba6c5aa5a268a669999d27b6f9ed7e6 10 | 11 | # Github URL 12 | GRIDSOME_ROTALA_GITHUB=https://github.com/daiyanze/rotala 13 | # Twitter URL 14 | GRIDSOME_ROTALA_TWITTER=https://twitter.com/rotalacss 15 | 16 | # Server env 17 | SITE_NAME=Rotala.css 18 | SITE_URL=https://rotalacss.com 19 | SITE_DESCRIPTION=Customization focused CSS framework 20 | 21 | # Google Analytics 22 | GA_ID=UA-98403506-2 23 | -------------------------------------------------------------------------------- /doc/src/components/docs/notification/item.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 33 | 34 | -------------------------------------------------------------------------------- /packages/rotala/style/components/badge/badge.pcss: -------------------------------------------------------------------------------- 1 | .$(badge) { 2 | @apply relative; 3 | @apply whitespace-no-wrap; 4 | 5 | &-status, 6 | &-text { 7 | @apply absolute; 8 | @apply inline-block; 9 | @apply bg-gray-500; 10 | @apply text-white; 11 | @apply rounded-full; 12 | @apply top-0; 13 | @apply right-0; 14 | 15 | background-clip: padding-box; 16 | box-shadow: 0 0 0 .125rem white; 17 | transform: translate(50%, -50%); 18 | } 19 | 20 | &-status { 21 | @apply p-0; 22 | 23 | height: 6px; 24 | min-width: 6px; 25 | width: 6px; 26 | } 27 | 28 | &-text { 29 | @apply text-xs; 30 | @apply leading-none; 31 | @apply text-center; 32 | @apply whitespace-no-wrap; 33 | @apply h-4; 34 | 35 | min-width: 1rem; 36 | padding: .125rem .25rem; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /doc/src/components/OnThisPage.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 27 | 28 | 35 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/breadcrumb/breadcrumb.pcss: -------------------------------------------------------------------------------- 1 | $url: 'data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 24 24" height="16" width="16" fill="%239a9a9a" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M7.8105 2.25L6.75 3.3105L15.4395 12L6.75 20.6895L7.8105 21.75L17.5605 12L7.8105 2.25Z" /%3E%3C/svg%3E%0A'; 2 | 3 | .$(breadcrumb) { 4 | .$(breadcrumb)-item { 5 | &.active { 6 | a { 7 | @apply text-primary-500; 8 | } 9 | } 10 | 11 | a { 12 | transition: color .15s; 13 | 14 | &:hover, 15 | &:focus { 16 | @apply text-primary-500; 17 | } 18 | } 19 | 20 | &:not(:last-child) { 21 | &::after { 22 | @apply inline-block; 23 | @apply w-4; 24 | @apply mx-2; 25 | @apply static; 26 | 27 | content: '\00A0 '; 28 | background: white url($(url)) no-repeat center; 29 | } 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/pagination/pagination.pcss: -------------------------------------------------------------------------------- 1 | .$(pagination) { 2 | &-prev, 3 | &-next, 4 | &-item { 5 | a { 6 | @apply rounded; 7 | } 8 | 9 | &.disabled { 10 | a { 11 | @apply text-gray-400; 12 | @apply pointer-events-none; 13 | } 14 | } 15 | } 16 | 17 | &-item { 18 | &.active { 19 | a, 20 | span { 21 | @apply block; 22 | @apply cursor-default; 23 | @apply text-primary-600; 24 | 25 | &::after { 26 | @apply block; 27 | @apply text-primary-600; 28 | @apply border border-solid border-primary-600; 29 | @apply rounded-full; 30 | @apply mt-2; 31 | @apply mx-auto; 32 | @apply w-2; 33 | 34 | content: ''; 35 | } 36 | 37 | &:hover { 38 | background: initial; 39 | } 40 | } 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/table/table.pcss: -------------------------------------------------------------------------------- 1 | 2 | .$(table-group) { 3 | &-outline { 4 | td, 5 | th { 6 | @apply border-b border-solid border-gray-400; 7 | } 8 | 9 | thead th { 10 | @apply border-b-2 border-solid border-gray-400; 11 | } 12 | } 13 | 14 | &-border { 15 | th, 16 | td { 17 | @apply border border-solid border-gray-400; 18 | } 19 | 20 | th { 21 | @apply border-b-2; 22 | } 23 | } 24 | 25 | &-stripe { 26 | tbody { 27 | tr:nth-of-type(odd) { 28 | @apply bg-gray-200; 29 | } 30 | } 31 | } 32 | 33 | &, 34 | &-stripe { 35 | tbody { 36 | tr { 37 | &.active { 38 | @apply bg-gray-300; 39 | } 40 | } 41 | } 42 | } 43 | 44 | &-hover { 45 | tbody { 46 | tr { 47 | &:hover { 48 | @apply bg-gray-200; 49 | } 50 | } 51 | } 52 | } 53 | } -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.0.5](https://github.com/daiyanze/rotala/compare/rotala-extension-css-icon@0.0.4...rotala-extension-css-icon@0.0.5) (2020-05-01) 7 | 8 | **Note:** Version bump only for package rotala-extension-css-icon 9 | 10 | 11 | 12 | 13 | 14 | ## 0.0.4 (2020-04-16) 15 | 16 | **Note:** Version bump only for package rotala-extension-css-icon 17 | 18 | 19 | 20 | 21 | 22 | ## 0.0.3 (2020-04-02) 23 | 24 | **Note:** Version bump only for package rotala-extension-css-icon 25 | 26 | 27 | 28 | 29 | 30 | ## 0.0.2 (2020-04-02) 31 | 32 | **Note:** Version bump only for package rotala-extension-cssicon 33 | 34 | 35 | 36 | 37 | 38 | ## 0.0.1 (2020-04-02) 39 | 40 | **Note:** Version bump only for package rotala-extension-cssicon 41 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/divider/divider.pcss: -------------------------------------------------------------------------------- 1 | .$(divider) { 2 | &[data-content] { 3 | @apply my-4 mx-0; 4 | } 5 | 6 | &[data-content]::after { 7 | @apply bg-white; 8 | @apply text-gray-500; 9 | @apply inline-block; 10 | @apply text-sm; 11 | @apply py-0 px-2; 12 | 13 | content: attr(data-content); 14 | transform: translateY(calc(theme('borderWidth.default') - theme('fontSize.xs'))); 15 | } 16 | 17 | &-vertical { 18 | @apply border-t-0; 19 | @apply h-auto; 20 | @apply p-2; 21 | 22 | &::before { 23 | @apply block; 24 | @apply absolute; 25 | @apply border-l border-solid border-gray-400; 26 | 27 | top: .125rem; 28 | bottom: .125rem; 29 | content: ""; 30 | left: 50%; 31 | transform: translateX(-50%); 32 | } 33 | 34 | &[data-content]::after { 35 | @apply absolute; 36 | @apply py-px px-0; 37 | 38 | left: 50%; 39 | top: 50%; 40 | transform: translate(-50%, -50%); 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /doc/src/layouts/DocLayout.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | query { 15 | metadata { 16 | siteName 17 | } 18 | } 19 | 20 | 21 | 42 | 43 | 46 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components.pcss: -------------------------------------------------------------------------------- 1 | /* Components */ 2 | @import "./components/link/link.pcss"; 3 | @import "./components/button/button.pcss"; 4 | @import "./components/checkbox/checkbox.pcss"; 5 | @import "./components/divider/divider.pcss"; 6 | @import "./components/input/input.pcss"; 7 | @import "./components/radio/radio.pcss"; 8 | @import "./components/select/select.pcss"; 9 | @import "./components/table/table.pcss"; 10 | @import "./components/textarea/textarea.pcss"; 11 | @import "./components/avatar/avatar.pcss"; 12 | @import "./components/accordion/accordion.pcss"; 13 | @import "./components/breadcrumb/breadcrumb.pcss"; 14 | @import "./components/drawer/drawer.pcss"; 15 | @import "./components/menu/menu.pcss"; 16 | @import "./components/modal/modal.pcss"; 17 | @import "./components/loading/loading.pcss"; 18 | @import "./components/notification/notification.pcss"; 19 | @import "./components/pagination/pagination.pcss"; 20 | @import "./components/popover/popover.pcss"; 21 | @import "./components/tab/tab.pcss"; 22 | @import "./components/tooltip/tooltip.pcss"; -------------------------------------------------------------------------------- /doc/src/components/docs/modal.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | -------------------------------------------------------------------------------- /doc/src/assets/style/extensions/effect.pcss: -------------------------------------------------------------------------------- 1 | @keyframes slide-right-off-canvas { 2 | 0% { 3 | transform: translateX(0); 4 | } 5 | 6 | 100% { 7 | transform: translateX(-100%); 8 | } 9 | } 10 | 11 | @keyframes slide-left-off-canvas { 12 | 0% { 13 | transform: translateX(-100%); 14 | } 15 | 16 | 100% { 17 | transform: translateX(0); 18 | } 19 | } 20 | 21 | @keyframes scale-in { 22 | 0% { 23 | transform: scale(.9); 24 | } 25 | 26 | 100% { 27 | transform: scale(1); 28 | } 29 | } 30 | 31 | @keyframes scale-out { 32 | 0% { 33 | transform: scale(1); 34 | } 35 | 36 | 100% { 37 | transform: scale(.9); 38 | } 39 | } 40 | 41 | .slide-left-off-canvas { 42 | animation-name: slide-left-off-canvas; 43 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 44 | } 45 | 46 | .slide-right-off-canvas { 47 | animation-name: slide-right-off-canvas; 48 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 49 | } 50 | 51 | .fade-in { 52 | animation-name: fade-in; 53 | } 54 | 55 | .fade-out { 56 | animation-name: fade-out; 57 | } 58 | 59 | -------------------------------------------------------------------------------- /packages/rotala/style/components/drawer/drawer.pcss: -------------------------------------------------------------------------------- 1 | .is-$(prefix)drawer-open { 2 | @apply fixed; 3 | @apply w-full; 4 | } 5 | 6 | .$(drawer) { 7 | @apply fixed; 8 | @apply inset-0; 9 | @apply hidden; 10 | @apply overflow-hidden; 11 | @apply z-0; 12 | 13 | &-container { 14 | @apply absolute; 15 | @apply inset-y-0; 16 | @apply m-0; 17 | @apply outline-none; 18 | @apply w-full; 19 | @apply h-full; 20 | } 21 | 22 | &-right, 23 | &-left { 24 | .$(drawer)-container { 25 | width: calc(theme('screens.sm') / 2); 26 | } 27 | } 28 | 29 | &-right { 30 | .$(drawer)-container { 31 | left: 100%; 32 | transform: translateX(-100%); 33 | } 34 | } 35 | 36 | &-bottom { 37 | .$(drawer)-container { 38 | top: 100%; 39 | transform: translateY(-100%); 40 | } 41 | } 42 | 43 | &-top, 44 | &-bottom { 45 | .$(drawer)-container { 46 | height: calc(theme('screens.sm') / 2); 47 | } 48 | } 49 | 50 | &:target, 51 | &.open { 52 | @apply block; 53 | @apply z-40; 54 | 55 | .$(drawer)-container { 56 | @apply z-50; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Yanze Dai (https://daiyanze.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/rotala/style/components/modal/modal.pcss: -------------------------------------------------------------------------------- 1 | /* to disable body scroll */ 2 | .is-$(modal)-open { 3 | @apply fixed; 4 | @apply w-full; 5 | } 6 | 7 | .$(modal) { 8 | @apply fixed; 9 | @apply inset-0; 10 | @apply hidden; 11 | @apply justify-center; 12 | @apply overflow-hidden; 13 | @apply p-6; 14 | @apply z-0; 15 | @apply cursor-default; 16 | 17 | &:target, 18 | &.open { 19 | @apply flex; 20 | @apply items-baseline; 21 | @apply z-40; 22 | 23 | .$(modal)-container { 24 | @apply z-50; 25 | } 26 | } 27 | 28 | .$(modal)-container { 29 | @apply m-auto; 30 | @apply p-5; 31 | @apply outline-none; 32 | @apply relative; 33 | @apply cursor-auto; 34 | @apply flex; 35 | @apply flex-col; 36 | @apply flex-1; 37 | /* 960px */ 38 | max-width: calc(theme('screens.sm') / 2 * 3); 39 | max-height: 80vh; 40 | 41 | .$(modal)-head { 42 | @apply flex; 43 | @apply items-start; 44 | @apply pb-5; 45 | } 46 | 47 | .$(modal)-body { 48 | @apply relative; 49 | @apply overflow-y-auto; 50 | } 51 | 52 | .$(modal)-footer { 53 | @apply text-right; 54 | @apply pt-5; 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /doc/gridsome.server.js: -------------------------------------------------------------------------------- 1 | // Server API makes it possible to hook into various parts of Gridsome 2 | // on server-side and add custom data to the GraphQL data layer. 3 | // Learn more: https://gridsome.org/docs/server-api 4 | 5 | // Changes here require a server restart. 6 | // To restart press CTRL + C in terminal and run `gridsome develop` 7 | 8 | module.exports = function (api) { 9 | api.loadSource(store => { 10 | // Use the Data Store API here: https://gridsome.org/docs/data-store-api 11 | 12 | const { sections } = require('./data/sections.json') 13 | const { parts } = require('./data/parts.json') 14 | 15 | const Menu = store.addCollection({ typeName: 'Menu' }) 16 | const Part = store.addCollection({ typeName: 'Part' }) 17 | 18 | for (const item of sections) { 19 | Menu.addNode({ 20 | section: item.name 21 | }) 22 | } 23 | 24 | for (const item of parts) { 25 | Part.addNode({ 26 | part: item.name, 27 | link: item.link 28 | }) 29 | } 30 | }) 31 | 32 | api.createPages(({ createPage }) => { 33 | createPage({ 34 | path: '/extensions/:id*', 35 | component: './src/templates/Extensions.vue' 36 | }) 37 | }) 38 | } 39 | -------------------------------------------------------------------------------- /doc/src/components/home/Intro.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 30 | 31 | -------------------------------------------------------------------------------- /packages/rotala/style/components.pcss: -------------------------------------------------------------------------------- 1 | 2 | /* Components */ 3 | @import "./components/link/link.pcss"; 4 | 5 | @import "./components/button/button.pcss"; 6 | 7 | @import "./components/checkbox/checkbox.pcss"; 8 | 9 | @import "./components/form/form.pcss"; 10 | 11 | @import "./components/divider/divider.pcss"; 12 | 13 | @import "./components/input/input.pcss"; 14 | 15 | @import "./components/radio/radio.pcss"; 16 | 17 | @import "./components/select/select.pcss"; 18 | 19 | @import "./components/table/table.pcss"; 20 | 21 | @import "./components/textarea/textarea.pcss"; 22 | 23 | @import "./components/avatar/avatar.pcss"; 24 | 25 | @import "./components/accordion/accordion.pcss"; 26 | 27 | @import "./components/badge/badge.pcss"; 28 | @import "./components/badge/trim.pcss"; 29 | 30 | @import "./components/breadcrumb/breadcrumb.pcss"; 31 | 32 | @import "./components/drawer/drawer.pcss"; 33 | 34 | @import "./components/menu/menu.pcss"; 35 | 36 | @import "./components/modal/modal.pcss"; 37 | 38 | @import "./components/notification/notification.pcss"; 39 | 40 | @import "./components/pagination/pagination.pcss"; 41 | 42 | @import "./components/popover/popover.pcss"; 43 | 44 | @import "./components/tab/tab.pcss"; 45 | 46 | @import "./components/tooltip/tooltip.pcss"; 47 | -------------------------------------------------------------------------------- /doc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "cross-env NODE_ENV=development gridsome develop", 5 | "build": "cross-env NODE_ENV=production gridsome build", 6 | "explore": "gridsome explore" 7 | }, 8 | "workspaces": [ 9 | "packages/*" 10 | ], 11 | "dependencies": { 12 | "@fullhuman/postcss-purgecss": "^2.1.0", 13 | "@gridsome/plugin-google-analytics": "^0.1.0", 14 | "@gridsome/plugin-sitemap": "^0.2.3", 15 | "@gridsome/remark-prismjs": "^0.3.0", 16 | "@gridsome/source-filesystem": "^0.6.2", 17 | "@gridsome/transformer-remark": "^0.5.0", 18 | "@gridsome/vue-remark": "^0.1.10", 19 | "algoliasearch": "^4.1.0", 20 | "docsearch.js": "^2.6.3", 21 | "gridsome": "^0.7.13", 22 | "gridsome-plugin-robots-txt": "^1.0.2", 23 | "marked": "^0.8.2", 24 | "postcss-loader": "^3.0.0", 25 | "remark-attr": "^0.10.0", 26 | "rotala": "^0.0.4", 27 | "rotala-extension-css-icon": "^0.0.5", 28 | "rotala-theme-default-light": "^0.0.5", 29 | "tailwindcss": "^1.3.0", 30 | "typeface-open-sans": "^0.0.75", 31 | "vue-instantsearch": "^2.7.0", 32 | "vue-svg-loader": "^0.16.0", 33 | "webpack-node-externals": "^1.7.2" 34 | }, 35 | "devDependencies": { 36 | "cross-env": "^7.0.2" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /doc/docs/divider.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Divider 3 | link: /docs/divider/ 4 | slug: divider 5 | section: Components 6 | --- 7 | 8 | A divider line to seperate contents 9 |
10 |
11 | 12 | 13 | ## Properties 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 |
NameDescription
.divider 25 | The horizontal divider line 26 |
30 |
31 |
32 | 33 | ## Features 34 | #### default 35 |
36 |
37 |
38 |
39 |
40 | 41 | ```html {} 42 |
43 | ``` 44 | 45 | 46 | 47 | #### color 48 | Use `border color` to change its color 49 | 50 |
51 |
52 |
53 |
54 | 55 | ```html {} 56 |
57 |
58 |
59 |
60 | ``` 61 | 62 | -------------------------------------------------------------------------------- /doc/src/components/docs/notification/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 53 | 54 | -------------------------------------------------------------------------------- /packages/rotala/style/components/notification/notification.pcss: -------------------------------------------------------------------------------- 1 | .$(notification) { 2 | @apply fixed; 3 | @apply text-sm; 4 | @apply leading-normal; 5 | @apply z-40; 6 | 7 | width: 24rem; 8 | max-width: calc(100vw - 2rem); 9 | 10 | & &-container { 11 | @apply hidden; 12 | @apply relative; 13 | @apply py-4 px-6; 14 | @apply mb-4; 15 | @apply overflow-hidden; 16 | @apply z-50; 17 | 18 | &:target, 19 | &.open { 20 | @apply block; 21 | } 22 | 23 | &:last-child { 24 | @apply mb-0; 25 | } 26 | 27 | .$(notification)-title { 28 | @apply font-normal; 29 | @apply text-lg; 30 | @apply inline-block; 31 | @apply w-full; 32 | } 33 | } 34 | 35 | &&-top-left, 36 | &&-top-right, 37 | &&-top-center { 38 | top: 1rem; 39 | } 40 | 41 | &&-bottom-left, 42 | &&-bottom-center, 43 | &&-bottom-right { 44 | bottom: 1rem; 45 | } 46 | 47 | &&-top-left, 48 | &&-bottom-left { 49 | @apply left-0; 50 | @apply ml-4; 51 | } 52 | 53 | &&-top-center, 54 | &&-bottom-center { 55 | right: 50%; 56 | transform: translateX(50%); 57 | } 58 | 59 | &&-top-right, 60 | &&-bottom-right { 61 | @apply mr-4; 62 | @apply right-0; 63 | 64 | .$(notification)-container { 65 | left: 100%; 66 | transform: translateX(-100%); 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rotala-theme-default-light", 3 | "version": "0.0.7", 4 | "description": "a light theme for rotala.css framework", 5 | "main": "dist/theme.css", 6 | "style": "style/main.pcss", 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development concurrently \"postcss docs/main.pcss -o docs/assets/css/theme.css --watch\" \"live-server ./docs\"", 9 | "build": "cross-env NODE_ENV=production concurrently \"postcss docs/main.pcss -o docs/assets/css/theme.css\" \"postcss style/main.pcss -o dist/theme.css\"", 10 | "prepare": "lerna run build" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/daiyanze/rotala.git" 15 | }, 16 | "keywords": [ 17 | "css", 18 | "framework", 19 | "UI", 20 | "UX", 21 | "rotala", 22 | "rotala-extension", 23 | "rotala-theme" 24 | ], 25 | "author": "daiyanze", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/daiyanze/rotala/issues" 29 | }, 30 | "dependencies": { 31 | "rotala": "^0.0.6", 32 | "rotala-extension-css-icon": "^0.0.5" 33 | }, 34 | "devDependencies": { 35 | "concurrently": "^5.1.0", 36 | "cross-env": "^7.0.2", 37 | "live-server": "^1.2.1", 38 | "postcss-cli": "^7.1.0" 39 | }, 40 | "gitHead": "dc9083752bb5cdfd9a98a10e1cd41fb2e1ac0012" 41 | } 42 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/select/select.pcss: -------------------------------------------------------------------------------- 1 | $url: 'data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 24 24" height="24" width="24" fill="%239a9a9a" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M7 10l5 5 5-5z"%3E%3C/path%3E%3Cpath d="M0 0h24v24H0z" fill="none"%3E%3C/path%3E%3C/svg%3E'; 2 | 3 | .$(select)-group { 4 | @apply relative; 5 | } 6 | 7 | .$(select) { 8 | transition: background .15s, border .15s, box-shadow .15s; 9 | 10 | &[disabled], 11 | &:disabled, 12 | &.disabled { 13 | @apply border-dashed border-gray-400; 14 | 15 | &::placeholder { 16 | @apply text-gray-400; 17 | } 18 | 19 | &-label { 20 | @apply text-gray-400; 21 | } 22 | } 23 | 24 | &::-ms-expand { 25 | @apply hidden; 26 | @apply bg-transparent; 27 | } 28 | 29 | &[size], 30 | &[multiple] { 31 | @apply h-auto; 32 | @apply py-2 px-0; 33 | } 34 | 35 | &:not([multiple]):not([size]):not([disabled]):not(.disabled) { 36 | background: white url($(url)) no-repeat right center; 37 | } 38 | 39 | &-outline { 40 | @apply rounded-sm; 41 | @apply pr-6 pl-2; 42 | @apply border border-solid border-gray-500; 43 | 44 | &[size], 45 | &[multiple] { 46 | @apply px-2; 47 | } 48 | 49 | &:focus { 50 | @apply shadow-primary-base; 51 | @apply border-primary-600; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rotala-extension-css-icon", 3 | "version": "0.0.5", 4 | "description": "icon extension for rotala.css framework", 5 | "main": "dist/icon.thin.css", 6 | "style": "style/icon.thin.pcss", 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development concurrently \"postcss docs/thin.pcss -o docs/assets/css/thin.css --watch\" \"postcss docs/thick.pcss -o docs/assets/css/thick.css --watch\" \"live-server ./docs\"", 9 | "build": "cross-env NODE_ENV=production concurrently \"postcss style/icon.thin.pcss -o dist/icon.thin.css\" \"postcss style/icon.thick.pcss -o dist/icon.thick.css\"", 10 | "prepare": "lerna run build" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/daiyanze/rotala.git" 15 | }, 16 | "keywords": [ 17 | "css", 18 | "framework", 19 | "UI", 20 | "UX", 21 | "rotala", 22 | "rotala-extension" 23 | ], 24 | "author": "daiyanze", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/daiyanze/rotala/issues" 28 | }, 29 | "dependencies": { 30 | "rotala": "^0.0.4" 31 | }, 32 | "devDependencies": { 33 | "concurrently": "^5.1.0", 34 | "cross-env": "^7.0.2", 35 | "live-server": "^1.2.1", 36 | "postcss-cli": "^7.1.0" 37 | }, 38 | "gitHead": "dc9083752bb5cdfd9a98a10e1cd41fb2e1ac0012" 39 | } 40 | -------------------------------------------------------------------------------- /doc/docs/link.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Link 3 | link: /docs/link/ 4 | slug: link 5 | section: Components 6 | --- 7 | 8 | Address redirect component 9 |
10 |
11 | 12 | 13 | ## Properties 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 33 | 36 | 37 | 38 |
NameDescription
.link 25 | Default link style 26 |
30 |

.disabled

31 |

[disabled]

32 | 		34 | Disabled link style 35 |
39 |
40 |
41 | 42 | 43 | ## Features 44 | #### default 45 | link 46 |
47 |
48 | 49 | ```html {} 50 | link 51 | ``` 52 | 53 | #### disabled 54 | link 55 |
56 |
57 | 58 | ```html {} 59 | link 60 | ``` 61 | 62 | 63 | #### hover underline 64 | link 65 |
66 |
67 | 68 | ```html {} 69 | link 70 | ``` 71 | -------------------------------------------------------------------------------- /doc/src/components/home/Examples.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 33 | query { 34 | examples: allExample (sortBy: "order", order: ASC) { 35 | edges { 36 | node { 37 | title 38 | content 39 | id 40 | } 41 | } 42 | } 43 | } 44 | 45 | 46 | 57 | -------------------------------------------------------------------------------- /doc/src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 45 | 46 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/input/input.pcss: -------------------------------------------------------------------------------- 1 | .$(input)-group { 2 | @apply relative; 3 | display: inherit; 4 | } 5 | 6 | .$(input) { 7 | @apply transition-colors; 8 | @apply transition-shadow; 9 | @apply duration-150; 10 | @apply ease-in-out; 11 | 12 | &[disabled], 13 | &:disabled, 14 | &.disabled { 15 | @apply text-gray-400 !important; 16 | @apply border-gray-400; 17 | @apply border-dashed !important; 18 | 19 | &::placeholder { 20 | @apply text-gray-400; 21 | } 22 | 23 | &:not(:placeholder-shown) { 24 | +.input-label { 25 | @apply text-gray-400; 26 | } 27 | } 28 | } 29 | 30 | &-outline { 31 | @apply rounded-sm; 32 | @apply px-2; 33 | @apply border border-solid border-gray-500; 34 | 35 | caret-color: theme('colors.primary.600'); 36 | 37 | &:focus { 38 | @apply shadow-primary-base; 39 | @apply border-primary-600; 40 | } 41 | } 42 | 43 | &-label { 44 | @apply absolute; 45 | @apply opacity-0; 46 | @apply text-xs; 47 | @apply text-primary-600; 48 | @apply font-medium; 49 | @apply transition-all; 50 | @apply ease-in-out; 51 | @apply duration-150; 52 | 53 | top: -12px; 54 | left: 0; 55 | transition-delay: .08s; 56 | } 57 | 58 | &:not(:placeholder-shown) { 59 | +.$(input)-label { 60 | @apply opacity-100; 61 | 62 | top: -16px; 63 | } 64 | } 65 | } 66 | 67 | -------------------------------------------------------------------------------- /packages/rotala/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rotala", 3 | "version": "0.0.7", 4 | "description": "A customization focused CSS framework", 5 | "main": "dist/rotala.css", 6 | "style": "style/main.pcss", 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development concurrently \"postcss docs/main.pcss -o docs/assets/css/rotala.css --watch\" \"live-server ./docs\"", 9 | "build": "cross-env NODE_ENV=production concurrently \"postcss docs/main.pcss -o docs/assets/css/rotala.css\" \"postcss style/main.pcss -o dist/rotala.css\"", 10 | "prepare": "lerna run build" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/daiyanze/rotala.git" 15 | }, 16 | "keywords": [ 17 | "css", 18 | "framework", 19 | "UI", 20 | "UX", 21 | "rotala" 22 | ], 23 | "author": "daiyanze", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/daiyanze/rotala/issues" 27 | }, 28 | "homepage": "https://github.com/daiyanze/rotala#readme", 29 | "dependencies": { 30 | "autoprefixer": "^9.7.4", 31 | "cssnano": "^4.1.10", 32 | "postcss": "^7.0.27", 33 | "postcss-import": "^12.0.1", 34 | "postcss-nested": "^4.2.1", 35 | "postcss-simple-vars": "^5.0.2", 36 | "tailwindcss": "^1.4.0" 37 | }, 38 | "devDependencies": { 39 | "concurrently": "^5.0.2", 40 | "cross-env": "^6.0.3", 41 | "live-server": "^1.2.1", 42 | "postcss-banner": "^3.0.1", 43 | "postcss-cli": "^7.1.0" 44 | }, 45 | "gitHead": "ee61601271cd3184463212ffa5dbc7f2e039cf5f" 46 | } 47 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.0.7](https://github.com/daiyanze/rotala/compare/rotala-theme-default-light@0.0.4...rotala-theme-default-light@0.0.7) (2020-05-11) 7 | 8 | **Note:** Version bump only for package rotala-theme-default-light 9 | 10 | 11 | 12 | 13 | 14 | ## [0.0.6](https://github.com/daiyanze/rotala/compare/rotala-theme-default-light@0.0.4...rotala-theme-default-light@0.0.6) (2020-05-02) 15 | 16 | **Note:** Version bump only for package rotala-theme-default-light 17 | 18 | 19 | 20 | 21 | 22 | ## [0.0.5](https://github.com/daiyanze/rotala/compare/rotala-theme-default-light@0.0.4...rotala-theme-default-light@0.0.5) (2020-05-01) 23 | 24 | **Note:** Version bump only for package rotala-theme-default-light 25 | 26 | 27 | 28 | 29 | 30 | ## 0.0.4 (2020-04-16) 31 | 32 | **Note:** Version bump only for package rotala-theme-default-light 33 | 34 | 35 | 36 | 37 | 38 | ## [0.0.3](https://github.com/daiyanze/rotala/compare/rotala-theme-default-light@0.0.2...rotala-theme-default-light@0.0.3) (2020-04-02) 39 | 40 | **Note:** Version bump only for package rotala-theme-default-light 41 | 42 | 43 | 44 | 45 | 46 | ## 0.0.2 (2020-04-02) 47 | 48 | **Note:** Version bump only for package rotala-theme-default-light 49 | 50 | 51 | 52 | 53 | 54 | ## 0.0.1 (2020-04-02) 55 | 56 | **Note:** Version bump only for package rotala-theme-default-light 57 | -------------------------------------------------------------------------------- /packages/rotala/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## 0.0.7 (2020-05-17) 7 | 8 | 9 | ### Bug Fixes 10 | 11 | * remove box-sizing for html & * *:after/before ([e4ecda0](https://github.com/daiyanze/rotala/commit/e4ecda0bdc04d6ffaf28a524b16dd355a6f808e0)) 12 | 13 | 14 | 15 | 16 | 17 | ## [0.0.6](https://github.com/daiyanze/rotala/compare/rotala@0.0.3...rotala@0.0.6) (2020-05-11) 18 | 19 | **Note:** Version bump only for package rotala 20 | 21 | 22 | 23 | 24 | 25 | ## [0.0.5](https://github.com/daiyanze/rotala/compare/rotala@0.0.3...rotala@0.0.5) (2020-05-02) 26 | 27 | **Note:** Version bump only for package rotala 28 | 29 | 30 | 31 | 32 | 33 | ## [0.0.4](https://github.com/daiyanze/rotala/compare/rotala@0.0.3...rotala@0.0.4) (2020-05-01) 34 | 35 | **Note:** Version bump only for package rotala 36 | 37 | 38 | 39 | 40 | 41 | ## 0.0.3 (2020-04-16) 42 | 43 | 44 | ### Bug Fixes 45 | 46 | * remove box-sizing for html & * *:after/before ([e4ecda0](https://github.com/daiyanze/rotala/commit/e4ecda0bdc04d6ffaf28a524b16dd355a6f808e0)) 47 | 48 | 49 | 50 | 51 | 52 | ## 0.0.2 (2020-04-02) 53 | 54 | 55 | ### Bug Fixes 56 | 57 | * remove box-sizing for html & * *:after/before ([5af00ab](https://github.com/daiyanze/rotala/commit/5af00ab42c455f82d9519266b6ef3d76e0fc7c54)) 58 | 59 | 60 | 61 | 62 | 63 | ## 0.0.1 (2020-04-02) 64 | 65 | 66 | ### Bug Fixes 67 | 68 | * remove box-sizing for html & * *:after/before ([5af00ab](https://github.com/daiyanze/rotala/commit/5af00ab42c455f82d9519266b6ef3d76e0fc7c54)) 69 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/button/button.pcss: -------------------------------------------------------------------------------- 1 | 2 | .$(button) { 3 | @apply text-primary-600; 4 | @apply transition-colors; 5 | @apply duration-150; 6 | 7 | &[disabled], 8 | &:disabled, 9 | &.disabled { 10 | @apply text-gray-400 !important; 11 | @apply border-dashed border-gray-400 !important; 12 | @apply bg-transparent !important; 13 | } 14 | 15 | &.$(loading) { 16 | @apply text-transparent !important; 17 | } 18 | 19 | &-outline { 20 | @apply border border-solid border-primary-600; 21 | 22 | &:hover { 23 | @apply bg-primary-100; 24 | } 25 | 26 | &:active, 27 | &.active { 28 | @apply text-white; 29 | @apply bg-primary-700; 30 | } 31 | } 32 | 33 | &-primary { 34 | @apply text-white; 35 | @apply bg-primary-600; 36 | @apply border border-solid border-primary-600; 37 | 38 | &:focus { 39 | @apply shadow-primary-base; 40 | } 41 | 42 | &:active, 43 | &.active { 44 | @apply border-primary-700; 45 | @apply bg-primary-700; 46 | } 47 | 48 | &.$(loading) { 49 | &:after { 50 | border-top-color: white; 51 | border-left-color: white; 52 | } 53 | } 54 | } 55 | 56 | &-secondary { 57 | @apply text-white; 58 | @apply bg-secondary-600; 59 | @apply border border-solid border-secondary-600; 60 | 61 | &:focus { 62 | @apply shadow-secondary-base; 63 | } 64 | 65 | &:active, 66 | &.active { 67 | @apply border-secondary-700; 68 | @apply bg-secondary-700; 69 | } 70 | 71 | &.$(loading) { 72 | &:after { 73 | border-top-color: white; 74 | border-left-color: white; 75 | } 76 | } 77 | } 78 | } -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/radio/radio.pcss: -------------------------------------------------------------------------------- 1 | 2 | .$(radio) { 3 | @apply relative; 4 | @apply block; 5 | @apply leading-5; 6 | 7 | &[disabled], 8 | &:disabled, 9 | &.disabled { 10 | .$(radio)-icon { 11 | &::before { 12 | @apply border-gray-400; 13 | } 14 | } 15 | 16 | input[type="radio"] { 17 | &:checked + .$(radio)-icon { 18 | &::before { 19 | @apply bg-gray-400; 20 | @apply border-gray-400; 21 | } 22 | } 23 | } 24 | } 25 | 26 | input[type="radio"] { 27 | @apply opacity-0; 28 | 29 | &:focus + .$(radio)-icon { 30 | @apply shadow-primary-base; 31 | } 32 | 33 | &:checked + .$(radio)-icon { 34 | &::before { 35 | @apply border-primary-600; 36 | @apply bg-primary-600; 37 | } 38 | 39 | &::after { 40 | transform: scale(.95); 41 | } 42 | } 43 | } 44 | } 45 | 46 | .$(radio) .$(radio)-icon { 47 | @apply h-4; 48 | @apply w-4; 49 | @apply inline-block; 50 | @apply absolute; 51 | @apply left-0; 52 | @apply rounded-full; 53 | 54 | top: 6px; 55 | 56 | &::after, 57 | &::before { 58 | @apply absolute; 59 | @apply rounded-full; 60 | @apply bg-white; 61 | 62 | content: ""; 63 | } 64 | 65 | &::before { 66 | @apply border border-solid border-gray-600; 67 | @apply bg-white; 68 | 69 | height: inherit; 70 | width: inherit; 71 | transition: all .15s ease; 72 | } 73 | 74 | &::after { 75 | height: 6px; 76 | width: 6px; 77 | left: 5px; 78 | top: 5px; 79 | z-index: 2; 80 | transform: scale(1.4); 81 | margin-top: 0; 82 | transition: all .15s ease; 83 | transition-delay: .03s; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /doc/src/main.js: -------------------------------------------------------------------------------- 1 | // This is the main.js file. Import global CSS and scripts here. 2 | // The Client API can be used here. Learn more: gridsome.org/docs/client-api 3 | 4 | import DocLayout from '~/layouts/DocLayout.vue' 5 | import DefaultLayout from '~/layouts/Default.vue' 6 | 7 | import '~/assets/style/theme.pcss' 8 | import '~/assets/style/rotala.components.pcss' 9 | 10 | import 'typeface-open-sans' 11 | import { extend } from 'rotala-theme-default-light/variables' 12 | 13 | export default function (Vue, { head }) { 14 | 15 | Vue.component('DefaultLayout', DefaultLayout) 16 | Vue.component('DocLayout', DocLayout) 17 | 18 | // Retain scrollbar when sidebar or modal is open 19 | Vue.directive('retain', { 20 | update (_, { value: isOpen }) { 21 | const body = document.body 22 | if (!isOpen) { 23 | const scrollTop = -parseInt(body.style.top || '') 24 | body.classList.remove('is-drawer-open') 25 | body.style.cssText = body.style.cssText.replace(`top: ${body.style.top};`, '') 26 | body.scrollTop = scrollTop 27 | document.documentElement.scrollTop = scrollTop 28 | } else { 29 | const scrollTop = -(body.scrollTop || document.documentElement.scrollTop || 0) 30 | body.style.cssText += `top: ${scrollTop}px;` 31 | body.classList.add('is-drawer-open') 32 | } 33 | } 34 | }) 35 | 36 | // Add attributes to HTML tag 37 | head.htmlAttrs = { lang: 'en' } 38 | 39 | head.link.push({ 40 | rel: 'manifest', 41 | href: '/manifest.json' 42 | }) 43 | 44 | head.meta.push({ 45 | name: 'theme-color', 46 | content: extend.colors.primary[600] 47 | }) 48 | 49 | head.meta.push({ 50 | name: 'apple-mobile-web-app-status-bar-style', 51 | content: 'default' 52 | }) 53 | } 54 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/variables.js: -------------------------------------------------------------------------------- 1 | 2 | const plugin = require('tailwindcss/plugin') 3 | 4 | const hexToRgba = function (hex, opacity) { 5 | hex = hex.replace('#','') 6 | r = parseInt(hex.substring(0, 2), 16) 7 | g = parseInt(hex.substring(2, 4), 16) 8 | b = parseInt(hex.substring(4, 6), 16) 9 | 10 | result = 'rgba('+r+', '+g+', '+b+', '+opacity/1+')' 11 | return result 12 | } 13 | 14 | const colors = { 15 | primary: { 16 | 100: '#ECF7F1', 17 | 200: '#D0EADC', 18 | 300: '#B4DDC7', 19 | 400: '#7CC49E', 20 | 500: '#44AA74', 21 | 600: '#3D9968', 22 | 700: '#296646', 23 | 800: '#1F4D34', 24 | 900: '#143323' 25 | }, 26 | secondary: { 27 | 100: '#F3F1F1', 28 | 200: '#E1DCDC', 29 | 300: '#CFC6C7', 30 | 400: '#AC9C9E', 31 | 500: '#887174', 32 | 600: '#7A6668', 33 | 700: '#524446', 34 | 800: '#3D3334', 35 | 900: '#292223' 36 | }, 37 | gray: { 38 | 100: '#F9F9F9', 39 | 200: '#EFEFEF', 40 | 300: '#E5E5E5', 41 | 400: '#D2D2D2', 42 | 500: '#BEBFBE', 43 | 600: '#ABACAB', 44 | 700: '#727372', 45 | 800: '#565656', 46 | 900: '#393939' 47 | } 48 | } 49 | 50 | module.exports = { 51 | extend: { 52 | colors 53 | }, 54 | plugins: [ 55 | plugin(({ addUtilities }) => { 56 | const focusShadow = { 57 | '.shadow-primary-base': { 58 | boxShadow: '0 0 0 .125rem ' + hexToRgba(colors.primary[600], 0.2) 59 | }, 60 | '.shadow-secondary-base': { 61 | boxShadow: '0 0 0 .125rem ' + hexToRgba(colors.secondary[600], 0.2) 62 | }, 63 | '.shadow-white': { 64 | boxShadow: '0 0 0 .125rem ' + hexToRgba('#ffffff', 1) 65 | } 66 | } 67 | 68 | addUtilities(focusShadow) 69 | }) 70 | ] 71 | } 72 | -------------------------------------------------------------------------------- /doc/src/components/OffCanvasSidebar.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 75 | -------------------------------------------------------------------------------- /doc/docs/menu.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Menu 3 | link: /docs/menu/ 4 | slug: menu 5 | section: Components 6 | --- 7 | 8 | A vertical navigation component 9 | 10 | ## Properties 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 27 | 30 | 31 | 32 |
NameDescription
.menu 22 | The breadcrumb component container 23 |
.menu-item 28 | The menu controller and indicator 29 |
33 |
34 |
35 | 36 | 37 | ## Features 38 | #### default 39 | 44 |
45 |
46 | 47 | ```html {} 48 | 53 | ``` 54 | 55 | 56 | #### hover effect 57 | 62 |
63 |
64 | 65 | ```html {} 66 | 71 | ``` -------------------------------------------------------------------------------- /doc/src/pages/Index.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 30 | query { 31 | metadata { 32 | siteDescription 33 | } 34 | } 35 | 36 | 37 | 71 | 72 | -------------------------------------------------------------------------------- /doc/src/assets/img/bitbucket.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /doc/docs/radio.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Radio 3 | link: /docs/radio/ 4 | slug: radio 5 | section: Components 6 | --- 7 | 8 | #### Properties 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 28 | 29 | 30 |
NameDescription
.radio-group 20 | The radio group container component 21 |
.radio 26 | The radio container component 27 |
31 |
32 |
33 | 34 | 35 | ## Features 36 | #### default 37 | The appearance of the radio varies among browsers 38 | 39 |
40 | 44 | 48 |
49 |
50 |
51 | 52 | ```html {} 53 |
54 | 58 | 62 |
63 | ``` 64 | 65 | 66 | #### disabled 67 |
68 | 72 | 76 |
77 |
78 |
79 | 80 | ```html {} 81 |
82 | 86 | 90 |
91 | ``` 92 | -------------------------------------------------------------------------------- /doc/src/components/home/Features.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 52 | 53 | -------------------------------------------------------------------------------- /doc/docs/checkbox.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Checkbox 3 | link: /docs/checkbox/ 4 | slug: checkbox 5 | section: Components 6 | --- 7 | 8 | A toggle switch form controller 9 |
10 |
11 | 12 | ## Properties 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 32 | 33 | 34 |
NameDescription
.check-group 24 | The check group container component 25 |
.checkbox 30 | The checkbox container component 31 |
35 |
36 |
37 | 38 | 39 | ## Features 40 | #### default 41 | The appearance of the checkbox varies among browsers 42 | 43 |
44 | 48 | 52 |
53 |
54 |
55 | 56 | ```html {} 57 |
58 | 62 | 66 |
67 | ``` 68 | 69 | 70 | #### disabled 71 |
72 | 76 | 80 |
81 |
82 |
83 | 84 | ```html {} 85 |
86 | 90 | 94 |
95 | ``` 96 | 97 | -------------------------------------------------------------------------------- /doc/docs/install.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Install 3 | order: 2 4 | link: /docs/install 5 | slug: install 6 | section: Getting Started 7 | --- 8 | 9 | 19 | 20 | 21 | Get to the most comfortable way of installing the style set. `CDN` and `Pre-built` are compiled css files. They are very helpful for prototyping purposes. If you want to build from scrach for better customizability, install the framework with a `package manager`. 22 |
23 |
24 | 25 | ## Package manager 26 | It is recommended to install files using a package manager `yarn` or `npm`. 27 | 28 | ```shell {} 29 | yarn add rotala 30 | 31 | npm install rotala 32 | ``` 33 | 34 | 35 | 36 | ## CDN 37 | The compiled files are hosted on [unpkg](https://unpkg.com/){class="ro-link ro-link-doc"}. 38 | 39 | Download from unpkg 40 | 41 | ```html {} 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | ``` 52 | 53 | 54 | 55 | ## Pre-built 56 | Start quickly with compiled and minified source. You can also download the official packages from the 57 | Github repository. 58 | 59 | Download Source 60 | 61 | ```html {} 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | ``` 72 | 73 | 74 | -------------------------------------------------------------------------------- /doc/docs/extension.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Extension 3 | order: 4 4 | link: /docs/extension 5 | slug: extension 6 | section: Getting Started 7 | --- 8 | 9 | Contribute to **Rotala** extension library to enhence the framework. 10 |
11 |
12 | 13 | ## Kick-start 14 | A **Rotala** extension is quite straightforward. Before start, you'll need to refer to [docs/build](/docs/build){class="ro-link ro-link-doc"} to learn more about compiling **Rotala** style sets. 15 | 16 | Make sure to create an pleasing `README` file under the project. Follow the [npm docs](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry){class="ro-link ro-link-doc" target="_blank"} to learn about creating/publishing a package 17 | 18 | ```shell 19 | # initialize 20 | npm init your_project_folder 21 | 22 | # publish 23 | npm publish 24 | ``` 25 | 26 | ```shell 27 | # Here is an example of the project folder structure. 28 | dist/ 29 | docs/ 30 | index.html 31 | style/ 32 | components/ 33 | button.pcss 34 | avatar.pcss 35 | package.json 36 | .browserslistrc 37 | ... 38 | ``` 39 | 40 | 41 | ## naming 42 | How to name your extension is all up to you. However, it's recommended to name together with the utility of your extension to improve its explicitness. Here are some preferrable naming conventions: 43 |
44 |
45 | 46 | - `rotala-theme-*` -- used for a customized theme by extending the **Rotala** core style sets. 47 | - Example: [rotala-theme-default-light](/extensions/rotala-theme-default-light){class="ro-link ro-link-doc"} 48 | 49 | 50 | - `rotala-extension-*` -- used for a any general type of extension. It could also be an extra style sets that **Rotala** doesn't have yet. 51 | - Example: [rotala-extension-css-icon](/extensions/rotala-extension-css-icon){class="ro-link ro-link-doc"} 52 | 53 |
54 |
55 | 56 | ## keywords 57 | Make sure that you included the following keywords in your extension's `package.json` file. 58 | - `rotala` 59 | - `rotala-extension` 60 | - `rotala-theme` (include this keyword if your extension is a theme) 61 | 62 | ```json 63 | // package.json 64 | { 65 | "name": "rotala-theme-superb", 66 | "description": "a superb rotala theme", 67 | "keywords": [ 68 | "rotala", 69 | "rotala-extension", 70 | "rotala-theme" 71 | ], 72 | ... 73 | } 74 | ``` 75 | -------------------------------------------------------------------------------- /doc/src/assets/img/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 7 | 8 | 10 | 11 | 13 | 14 | 16 | 17 | 19 | 20 | 22 | 23 | 25 | 26 | 28 | 29 | 31 | 32 | -------------------------------------------------------------------------------- /doc/src/assets/img/icon-fill-current.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 7 | 8 | 10 | 11 | 13 | 14 | 16 | 17 | 19 | 20 | 22 | 23 | 25 | 26 | 28 | 29 | 31 | 32 | -------------------------------------------------------------------------------- /doc/src/components/home/Workflow.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 53 | 54 | -------------------------------------------------------------------------------- /doc/src/components/SidebarMenu.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 41 | query Menu { 42 | menu: allMenu(order:ASC) { 43 | edges { 44 | node { 45 | section 46 | } 47 | } 48 | } 49 | part: allPart(order:ASC) { 50 | edges { 51 | node { 52 | part 53 | link 54 | } 55 | } 56 | } 57 | docs: allDoc(sortBy: "order", order: ASC) { 58 | edges { 59 | node { 60 | title 61 | link 62 | slug 63 | section 64 | } 65 | } 66 | } 67 | } 68 | 69 | 70 | 85 | 86 | -------------------------------------------------------------------------------- /doc/src/components/home/Newsletter.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 74 | -------------------------------------------------------------------------------- /packages/rotala-theme-default-light/style/components/checkbox/checkbox.pcss: -------------------------------------------------------------------------------- 1 | 2 | .$(checkbox) { 3 | @apply relative; 4 | @apply block; 5 | @apply leading-5; 6 | 7 | &[disabled], 8 | &:disabled, 9 | &.disabled { 10 | .$(checkbox)-icon { 11 | &::before { 12 | @apply border-gray-400; 13 | } 14 | } 15 | 16 | input[type="checkbox"] { 17 | &:checked + .$(checkbox)-icon { 18 | &::before { 19 | @apply bg-gray-400; 20 | @apply border-gray-400; 21 | } 22 | } 23 | 24 | &.indeterminate + .$(checkbox)-icon, 25 | &:indeterminate + .$(checkbox)-icon { 26 | &::before { 27 | @apply bg-gray-400; 28 | } 29 | } 30 | } 31 | } 32 | 33 | input[type="checkbox"] { 34 | @apply opacity-0; 35 | 36 | &:focus + .$(checkbox)-icon { 37 | @apply shadow-primary-base; 38 | } 39 | 40 | &:checked + .$(checkbox)-icon { 41 | &::before { 42 | @apply border-transparent; 43 | @apply bg-primary-600; 44 | } 45 | 46 | &::after { 47 | @apply opacity-100; 48 | @apply border-r-2 border-b-2 border-solid; 49 | @apply border-white; 50 | 51 | transform: translateY(-50%) rotate(45deg) scale(1); 52 | } 53 | } 54 | 55 | &.indeterminate + .$(checkbox)-icon, 56 | &:indeterminate + .$(checkbox)-icon { 57 | &::before { 58 | @apply border-transparent; 59 | @apply bg-primary-600; 60 | } 61 | 62 | &::after { 63 | @apply w-2; 64 | @apply -ml-1; 65 | @apply border-white border-solid border-b-2; 66 | top: 1px; 67 | 68 | transform: rotate(0) scale(1); 69 | } 70 | } 71 | } 72 | 73 | &-icon { 74 | @apply h-4; 75 | @apply w-4; 76 | @apply inline-block; 77 | @apply absolute; 78 | @apply left-0; 79 | @apply rounded-sm; 80 | 81 | top: 6px; 82 | 83 | &::after, 84 | &::before { 85 | @apply absolute; 86 | 87 | content: ""; 88 | } 89 | 90 | &::before { 91 | @apply border-solid border border-gray-600; 92 | @apply rounded-sm; 93 | @apply transition-colors; 94 | @apply duration-75; 95 | 96 | height: inherit; 97 | width: inherit; 98 | } 99 | 100 | &::after { 101 | @apply duration-100; 102 | @apply opacity-100; 103 | 104 | transition-property: color, transform; 105 | height: 9px; 106 | width: 6px; 107 | margin-left: -3px; 108 | margin-top: -1px; 109 | top: 50%; 110 | left: 50%; 111 | transform: translate(50%, 50%) scale(0) rotate(45deg); 112 | } 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /doc/src/components/Topbar.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 46 | query Menu { 47 | part: allPart(order:ASC) { 48 | edges { 49 | node { 50 | part 51 | link 52 | } 53 | } 54 | } 55 | } 56 | 57 | 58 | 79 | 80 | 95 | -------------------------------------------------------------------------------- /doc/docs/form-group.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Form Group 3 | link: /docs/form-group/ 4 | slug: form-group 5 | section: Components 6 | --- 7 | 8 | A common form component for group related elements 9 |
10 |
11 | 12 | 13 | ## Properties 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 30 | 33 | 34 | 35 | 36 | 39 | 40 | 41 | 42 | 45 | 46 | 47 | 48 | 51 | 52 | 53 |
NameDescription
.form-group 25 | The form component container 26 |
.form-group-fieldset 31 | The group component for its items within 32 |
.form-group-legend 37 | The fieldset caption 38 |
.form-group-label 43 | The from group text label for form item 44 |
.form-group-item 49 | The form group element component 50 |
54 |
55 |
56 | 57 | 58 | ## Features 59 | #### default 60 |
61 |
62 | Please login: 63 | 64 | 65 | 66 | 67 |
68 |
69 |
70 | 71 | Forgot Password? 72 |
73 |
74 |
75 |
76 |
77 | 78 | 79 | ```html {} 80 |
81 |
82 | Please login: 83 | 84 | 85 | 86 | 87 |
88 |
89 |
90 | 91 | Forgot Password? 92 |
93 |
94 |
95 | ``` -------------------------------------------------------------------------------- /packages/rotala/style/components/popover/popover.pcss: -------------------------------------------------------------------------------- 1 | .$(popover) { 2 | @apply inline-block; 3 | @apply relative; 4 | 5 | & &-container { 6 | @apply z-50; 7 | @apply block; 8 | @apply absolute; 9 | @apply top-0; 10 | @apply opacity-0; 11 | 12 | left: 50%; 13 | width: calc(theme('screens.sm') / 2); 14 | transform: translate(-50%, -50%) scale(0); 15 | } 16 | 17 | &&-click.open &-container, 18 | &&-hover:hover &-container { 19 | @apply opacity-100; 20 | 21 | transform: translate(-50%, -108%) scale(1); 22 | } 23 | 24 | &&-top-center { 25 | &.$(popover)-click.open .$(popover)-container, 26 | &.$(popover)-hover:hover .$(popover)-container { 27 | transform: translate(-50%, -108%) scale(1); 28 | } 29 | } 30 | 31 | &&-top-left { 32 | .$(popover)-container { 33 | left: 100%; 34 | } 35 | 36 | &.$(popover)-click.open .$(popover)-container, 37 | &.$(popover)-hover:hover .$(popover)-container { 38 | transform: translate(-100%, -108%) scale(1); 39 | } 40 | } 41 | 42 | &&-top-right { 43 | .$(popover)-container { 44 | @apply left-0; 45 | } 46 | 47 | &.$(popover)-click.open .$(popover)-container, 48 | &.$(popover)-hover:hover .$(popover)-container { 49 | transform: translate(0, -108%) scale(1); 50 | } 51 | } 52 | 53 | &&-right { 54 | .$(popover)-container { 55 | left: 100%; 56 | top: 50%; 57 | } 58 | 59 | &.$(popover)-click.open .$(popover)-container, 60 | &.$(popover)-hover:hover .$(popover)-container { 61 | transform: translate(6%, -50%) scale(1); 62 | } 63 | } 64 | 65 | &&-left { 66 | .$(popover)-container { 67 | @apply left-0; 68 | 69 | top: 50%; 70 | } 71 | 72 | &.$(popover)-click.open .$(popover)-container, 73 | &.popover-hover:hover .popover-container { 74 | transform: translate(-106%, -50%) scale(1); 75 | } 76 | } 77 | 78 | &&-bottom-right { 79 | .$(popover)-container { 80 | @apply left-0; 81 | 82 | top: 100%; 83 | } 84 | 85 | &.$(popover)-click.open .$(popover)-container, 86 | &.$(popover)-hover:hover .$(popover)-container { 87 | transform: translate(0, 8%) scale(1); 88 | } 89 | } 90 | 91 | &&-bottom-center { 92 | .$(popover)-container { 93 | top: 100%; 94 | } 95 | 96 | &.$(popover)-click.open .$(popover)-container, 97 | &.$(popover)-hover:hover .$(popover)-container { 98 | transform: translate(-50%, 8%) scale(1); 99 | } 100 | } 101 | 102 | &&-bottom-left { 103 | .$(popover)-container { 104 | left: 100%; 105 | top: 100%; 106 | } 107 | 108 | &.$(popover)-click.open .$(popover)-container, 109 | &.$(popover)-hover:hover .$(popover)-container { 110 | transform: translate(-100%, 8%) scale(1); 111 | } 112 | } 113 | } -------------------------------------------------------------------------------- /doc/src/templates/Doc.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | query Doc ($path: String!) { 23 | doc: doc (path: $path) { 24 | title 25 | path 26 | headings (depth: h1) { 27 | value 28 | } 29 | section 30 | subtitles: headings { 31 | depth 32 | value 33 | anchor 34 | } 35 | } 36 | } 37 | 38 | 39 | 93 | 94 | 114 | -------------------------------------------------------------------------------- /doc/src/assets/style/extensions/prism.pcss: -------------------------------------------------------------------------------- 1 | 2 | pre[class*="language-"], 3 | code[class*="language-"] { 4 | color: theme('colors.gray.800'); 5 | text-shadow: none; 6 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 7 | direction: ltr; 8 | text-align: left; 9 | white-space: pre; 10 | word-spacing: normal; 11 | word-break: normal; 12 | line-height: 1.5; 13 | -moz-tab-size: 4; 14 | -o-tab-size: 4; 15 | tab-size: 4; 16 | -webkit-hyphens: none; 17 | -moz-hyphens: none; 18 | -ms-hyphens: none; 19 | hyphens: none; 20 | margin-bottom: 2rem; 21 | } 22 | pre[class*="language-"]::selection, 23 | code[class*="language-"]::selection, 24 | pre[class*="language-"]::mozselection, 25 | code[class*="language-"]::mozselection { 26 | text-shadow: none; 27 | } 28 | @media print { 29 | pre[class*="language-"], 30 | code[class*="language-"] { 31 | text-shadow: none; 32 | } 33 | } 34 | pre[class*="language-"] { 35 | margin: .5em 0; 36 | overflow: auto; 37 | } 38 | :not(pre) > code[class*="language-"] { 39 | padding: .1em .3em; 40 | border-radius: .3em; 41 | color: theme('colors.red.600'); 42 | background: theme('colors.red.300'); 43 | } 44 | /********************************************************* 45 | * Tokens 46 | */ 47 | .namespace { 48 | opacity: .7; 49 | } 50 | .token.comment, 51 | .token.prolog, 52 | .token.doctype, 53 | .token.cdata { 54 | color: theme('colors.gray.600'); 55 | } 56 | .token.punctuation { 57 | color: theme('colors.gray.800'); 58 | } 59 | .token.property, 60 | .token.tag, 61 | .token.boolean, 62 | .token.number, 63 | .token.constant, 64 | .token.symbol, 65 | .token.deleted { 66 | color: theme('colors.red.700'); 67 | } 68 | .token.selector, 69 | .token.attr-name, 70 | .token.string, 71 | .token.char, 72 | .token.builtin, 73 | .token.inserted { 74 | color: theme('colors.gray.800'); 75 | } 76 | .token.operator, 77 | .token.entity, 78 | .token.url, 79 | .language-css .token.string, 80 | .style .token.string { 81 | color: theme('colors.gray.800'); 82 | } 83 | .token.atrule, 84 | .token.attr-value, 85 | .token.keyword { 86 | color: theme('colors.primary.600'); 87 | } 88 | .token.function { 89 | color: theme('colors.red.700'); 90 | } 91 | .token.regex, 92 | .token.important, 93 | .token.variable { 94 | color: theme('colors.red.700'); 95 | } 96 | .token.important, 97 | .token.bold { 98 | font-weight: bold; 99 | } 100 | .token.italic { 101 | font-style: italic; 102 | } 103 | .token.entity { 104 | cursor: help; 105 | } 106 | /********************************************************* 107 | * Line highlighting 108 | */ 109 | pre[data-line] { 110 | position: relative; 111 | } 112 | 113 | .line-highlight { 114 | position: absolute; 115 | left: 0; 116 | right: 0; 117 | padding: inherit 0; 118 | margin-top: 1em; 119 | background: theme('colors.orange.200'); 120 | box-shadow: inset 5px 0 0 theme('colors.orange.300'); 121 | pointer-events: none; 122 | line-height: inherit; 123 | white-space: pre; 124 | } 125 | -------------------------------------------------------------------------------- /packages/rotala/style/base/typography.pcss: -------------------------------------------------------------------------------- 1 | h1, h2, h3, h4, h5, h6, 2 | .h1, .h2, .h3, .h4, .h5, .h6 { 3 | @apply font-medium; 4 | @apply leading-normal; 5 | @apply mt-0; 6 | 7 | margin-bottom: .5em; 8 | 9 | small, 10 | .small { 11 | @apply font-normal; 12 | @apply text-gray-600; 13 | 14 | font-size: 80%; 15 | line-height: 1; 16 | } 17 | } 18 | 19 | h1, .h1, h2, .h2, h3, .h3 { 20 | small, 21 | .small { 22 | font-size: 75%; 23 | } 24 | } 25 | 26 | h1, .h1 { 27 | font-size: 40px; 28 | } 29 | 30 | h2, .h2 { 31 | font-size: 32px; 32 | } 33 | 34 | h3, .h3 { 35 | font-size: 28px; 36 | } 37 | 38 | h4, .h4 { 39 | font-size: 24px; 40 | } 41 | 42 | h5, .h5 { 43 | font-size: 20px; 44 | } 45 | 46 | h6, .h6 { 47 | font-size: 16px; 48 | } 49 | 50 | p { 51 | @apply mb-4; 52 | @apply leading-normal; 53 | } 54 | 55 | small { 56 | font-size: 86%; 57 | } 58 | 59 | a, 60 | ins, 61 | u { 62 | text-decoration-skip: ink edges; 63 | } 64 | 65 | abbr[title] { 66 | @apply border-b border-dotted; 67 | @apply no-underline; 68 | 69 | cursor: help; 70 | } 71 | 72 | kbd { 73 | @apply rounded-sm; 74 | @apply text-white; 75 | @apply leading-normal; 76 | @apply py-px px-2; 77 | @apply bg-gray-800; 78 | } 79 | 80 | mark { 81 | @apply bg-orange-300; 82 | @apply border-b-2 border-solid border-orange-500; 83 | @apply rounded-sm; 84 | @apply px-1 pt-px; 85 | } 86 | 87 | blockquote { 88 | @apply ml-0; 89 | @apply py-2 px-4; 90 | } 91 | 92 | address { 93 | @apply mb-6; 94 | @apply font-normal; 95 | @apply leading-normal; 96 | } 97 | 98 | pre { 99 | @apply relative; 100 | @apply whitespace-pre; 101 | 102 | width: inherit; 103 | 104 | &::before { 105 | @apply absolute; 106 | @apply text-gray-600; 107 | @apply text-sm; 108 | 109 | top: .25rem; 110 | right: .5rem; 111 | content: attr(data-lang); 112 | } 113 | 114 | code { 115 | @apply block; 116 | @apply whitespace-pre-line; 117 | @apply bg-gray-100; 118 | @apply leading-relaxed; 119 | @apply overflow-x-auto; 120 | @apply p-5; 121 | 122 | color: inherit; 123 | font-size: 85%; 124 | } 125 | } 126 | 127 | code { 128 | @apply text-sm; 129 | @apply text-red-600; 130 | @apply bg-red-200; 131 | @apply leading-normal; 132 | @apply rounded-sm; 133 | @apply py-px px-1; 134 | } 135 | 136 | ul, ol { 137 | @apply p-0; 138 | @apply mr-0 ml-4 my-4; 139 | 140 | ul, ol { 141 | @apply mr-0 ml-4 my-4; 142 | } 143 | 144 | li { 145 | @apply mt-4; 146 | } 147 | } 148 | 149 | ul { 150 | list-style: disc inside; 151 | 152 | ul { 153 | list-style-type: circle; 154 | } 155 | } 156 | 157 | ol { 158 | list-style: decimal inside; 159 | 160 | ol { 161 | list-style-type: lower-alpha; 162 | 163 | ol { 164 | list-style-type: lower-roman; 165 | } 166 | } 167 | } 168 | 169 | dl { 170 | @apply mr-0 ml-4 my-4; 171 | 172 | dt { 173 | @apply font-black; 174 | } 175 | 176 | dd { 177 | @apply mx-0 mt-4 mb-8; 178 | } 179 | } -------------------------------------------------------------------------------- /doc/docs/input.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Input 3 | link: /docs/input/ 4 | slug: input 5 | section: Components 6 | --- 7 | 8 | Text input component 9 |
10 |
11 | 12 | 13 | ## Properties 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 33 | 36 | 37 | 38 |
NameDescription
.input 25 | default input style 26 |
30 |

.disabled

31 |

[disabled]

32 | 		34 | disabled input style 35 |
39 |
40 |
41 | 42 | 43 | ## Features 44 | #### default 45 | 46 | 47 |
48 |
49 | 50 | 51 | ```html {} 52 | 53 | 54 | ``` 55 | 56 | #### disabled 57 | 58 | 59 |
60 |
61 | 62 | 63 | ```html {} 64 | 65 | 66 | ``` 67 | 68 | 69 | #### underline 70 | 71 |
72 |
73 | 74 | ```html {} 75 | 76 | ``` 77 | 78 | #### outline 79 | 80 |
81 |
82 | 83 | ```html {} 84 | 85 | ``` 86 | 87 | #### color 88 | 89 |
90 |
91 | 92 | 93 |
94 |
95 | 96 | 97 |
98 |
99 | 100 | ```html {} 101 | 102 | ``` -------------------------------------------------------------------------------- /doc/docs/button.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Button 3 | link: /docs/button/ 4 | slug: button 5 | section: Components 6 | --- 7 | A clickable form controller component. 8 |
9 |
10 | 11 | ## Properties 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 25 | 26 | 27 | 31 | 34 | 35 | 36 |
NameDescription
.button 23 | default button style 24 |
28 |

.disabled

29 |

[disabled]

30 | 		32 | disabled button style 33 |
37 |
38 |
39 | 40 | 41 | ## Features 42 | #### default 43 | 44 |
45 |
46 | 47 | 48 | ```html {} 49 | 50 | 51 | Button 52 | ``` 53 | 54 | 55 | #### default disabled 56 | 57 |
58 |
59 | 60 | 61 | ```html {} 62 | 63 | ``` 64 | 65 | 66 | 67 | 68 | #### rounded & outline 69 | 70 |
71 |
72 | 73 | 74 | ```css {} 75 | .button { 76 | @apply rounded-full; 77 | @apply text-gray-700; 78 | @apply border border-solid border-gray-700; 79 | } 80 | ``` 81 | 82 | 83 | ```html {} 84 | 85 | ``` 86 | 87 | 88 | #### background & hover 89 | 90 |
91 |
92 | 93 | 94 | ```css {} 95 | .button { 96 | @apply text-gray-700; 97 | @apply bg-gray-300; 98 | @apply hover:bg-gray-500; 99 | @apply transition-colors duration-150; 100 | } 101 | ``` 102 | 103 | 104 | 105 | ```html {} 106 | 107 | ``` 108 | 109 | #### with icon 110 | 111 |
112 |
113 | 114 | 115 | ```css {} 116 | .button { 117 | @apply text-gray-700; 118 | @apply border border-solid border-gray-700; 119 | @apply inline-flex items-center; 120 | } 121 | ``` 122 | 123 | 124 | ```html {} 125 | 128 | ``` -------------------------------------------------------------------------------- /packages/rotala/style/components/tooltip/tooltip.pcss: -------------------------------------------------------------------------------- 1 | .$(tooltip) { 2 | @apply relative; 3 | 4 | & &-container { 5 | @apply block; 6 | @apply absolute; 7 | @apply z-50; 8 | @apply opacity-0; 9 | @apply overflow-hidden; 10 | @apply p-2; 11 | @apply pointer-events-none; 12 | } 13 | 14 | &:target, 15 | &:hover, 16 | &:active { 17 | .$(tooltip)-container { 18 | @apply opacity-100; 19 | } 20 | } 21 | 22 | &&-top-center { 23 | .$(tooltip)-container { 24 | bottom: 110%; 25 | left: 50%; 26 | transform: translate(-50%, 4px); 27 | } 28 | 29 | &:target, 30 | &:hover, 31 | &:active { 32 | .$(tooltip)-container { 33 | transform: translate(-50%, -4px); 34 | } 35 | } 36 | } 37 | 38 | &&-top-right { 39 | .$(tooltip)-container { 40 | left: 0; 41 | bottom: 110%; 42 | transform: translate(0, 4px); 43 | } 44 | 45 | &:target, 46 | &:hover, 47 | &:active { 48 | .$(tooltip)-container { 49 | transform: translate(0, -4px); 50 | } 51 | } 52 | } 53 | 54 | 55 | &&-top-left { 56 | .$(tooltip)-container { 57 | left: 100%; 58 | bottom: 110%; 59 | transform: translate(-100%, 4px); 60 | } 61 | 62 | &:target, 63 | &:hover, 64 | &:active { 65 | .$(tooltip)-container { 66 | left: 100%; 67 | transform: translate(-100%, -4px); 68 | } 69 | } 70 | } 71 | 72 | 73 | &&-bottom-center { 74 | .$(tooltip)-container { 75 | top: 110%; 76 | left: 50%; 77 | transform: translate(-50%, -8px); 78 | } 79 | 80 | &:target, 81 | &:hover, 82 | &:active { 83 | .$(tooltip)-container { 84 | transform: translate(-50%, 8px); 85 | } 86 | } 87 | } 88 | 89 | 90 | &&-bottom-right { 91 | .$(tooltip)-container { 92 | left: 0; 93 | top: 110%; 94 | transform: translate(0, -8px); 95 | } 96 | 97 | &:target, 98 | &:hover, 99 | &:active { 100 | .$(tooltip)-container { 101 | transform: translate(0, 8px); 102 | } 103 | } 104 | } 105 | 106 | 107 | &&-bottom-left { 108 | .$(tooltip)-container { 109 | top: 110%; 110 | left: 100%; 111 | transform: translate(-100%, -8px); 112 | } 113 | 114 | &:target, 115 | &:hover, 116 | &:active { 117 | .$(tooltip)-container { 118 | transform: translate(-100%, 8px); 119 | } 120 | } 121 | } 122 | 123 | 124 | &&-left { 125 | .$(tooltip)-container { 126 | bottom: 50%; 127 | right: 100%; 128 | transform: translate(4px, 50%); 129 | } 130 | 131 | &:target, 132 | &:hover, 133 | &:active { 134 | .$(tooltip)-container { 135 | transform: translate(-4px, 50%); 136 | } 137 | } 138 | } 139 | 140 | 141 | &&-right { 142 | .$(tooltip)-container { 143 | bottom: 50%; 144 | left: 100%; 145 | transform: translate(-4px, 50%); 146 | } 147 | 148 | &:target, 149 | &:hover, 150 | &:active { 151 | .$(tooltip)-container { 152 | transform: translate(4px, 50%); 153 | } 154 | } 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /doc/docs/table-group.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Table Group 3 | link: /docs/table-group/ 4 | slug: table-group 5 | section: Components 6 | --- 7 | 8 | A data table component 9 | 10 | ## Properties 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 |
NameDescription
.table-group 22 | The tab container component 23 |
27 |
28 |
29 | 30 | 31 | ## Features 32 | #### default 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |
Product NameManufacturerPrice
Gift BoxAlpha Inc.$1.5
Table SheetBeta Manufacture$9
NotebookCheer co.$3
59 |
60 |
61 | 62 | ```html {} 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |
Product NameManufacturerPrice
Gift BoxAlpha Inc.$1.5
Table SheetBeta Manufacture$9
NotebookCheer co.$3
89 | ``` 90 | 91 | 92 | #### outline 93 | Style with horizontal lines 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 |
Product NameManufacturerPrice
Gift BoxAlpha Inc.$1.5
Table SheetBeta Manufacture$9
NotebookCheer co.$3
121 |
122 |
123 | 124 | ```css {} 125 | .table-group { 126 | td, 127 | th { 128 | @apply border-b border-solid border-gray-300; 129 | } 130 | 131 | thead th { 132 | @apply border-b-2 border-solid border-gray-300; 133 | } 134 | } 135 | ``` -------------------------------------------------------------------------------- /doc/docs/avatar.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Avatar 3 | link: /docs/avatar/ 4 | slug: avatar 5 | section: Components 6 | --- 7 | 8 | A User profile image Component 9 |
10 |
11 | 12 | 13 | ## Properties 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 30 | 33 | 34 | 35 | 36 | 39 | 40 | 41 |
NameDescription
.avatar 25 | The avatar component container 26 |
.avatar-rounded 31 | The avatar round style 32 |
[data-initial] 37 | The initial letters to be displayed on default avatar 38 |
42 |
43 |
44 | 45 | 46 | ## Features 47 | #### initial 48 |
49 |
50 |
51 | 52 | ```html {} 53 |
54 | ``` 55 | 56 | #### image 57 |
58 | Avatar 59 |
60 |
61 | Avatar 62 |
63 |
64 | Avatar 65 |
66 |
67 | Avatar 68 |
69 |
70 | Avatar 71 |
72 |
73 |
74 | 75 | ```html {} 76 |
77 | Avatar 78 |
79 | ``` 80 | 81 | 82 | #### rounded 83 |
84 | Avatar 85 |
86 |
87 | Avatar 88 |
89 |
90 | Avatar 91 |
92 |
93 | Avatar 94 |
95 |
96 | Avatar 97 |
98 | 99 | ```html {} 100 |
101 | Avatar 102 |
103 | ``` 104 | 105 | 106 | 107 | #### background 108 | Use `background color` and `color` to change avatar colors 109 | 110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 | 118 | ```html {} 119 |
120 | ``` 121 | 122 | -------------------------------------------------------------------------------- /doc/docs/tab.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tab 3 | link: /docs/tab/ 4 | slug: tab 5 | section: Components 6 | --- 7 | 8 | Tab navigation to switch between views 9 |
10 |
11 | 12 | 13 | ## Properties 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 30 | 33 | 34 | 35 | 39 | 42 | 43 | 44 |
NameDescription
.tab 25 | The tab container component 26 |
.tab-item 31 | The tab controller component 32 |
36 |

.disabled

37 |

[disabled]

38 | 		40 | The disabled style for tab item 41 |
45 |
46 |
47 | 48 | 49 | ## Features 50 | #### default 51 | 65 |
66 |
67 | 68 | ```html {} 69 | 83 | ``` 84 | 85 | #### disabled 86 | 100 |
101 |
102 | 103 | ```html {} 104 | 118 | ``` 119 | 120 | 121 | #### Classic Tab 122 | With bottom border and hover effect 123 | 124 | 138 |
139 |
140 | 141 | ```css {} 142 | .tab { 143 | @apply border-b border-solid border-gray-300; 144 | } 145 | 146 | .tab .tab-item.active { 147 | @apply -mb-px; 148 | @apply border-b-2 border-solid border-indigo-500; 149 | } 150 | ``` 151 | 152 | ```html {} 153 | 167 | ``` -------------------------------------------------------------------------------- /doc/docs/drawer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Drawer 3 | link: /docs/drawer/ 4 | slug: drawer 5 | section: Components 6 | --- 7 | 8 | import drawer from '~/components/docs/drawer' 9 | 10 | 22 | 23 | 31 |
35 | {{ position }} 36 |
37 | 38 | 39 | 40 | An overlayer appearing to an edge of the page 41 |
42 |
43 | 44 | 45 | ## Properties 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 59 | 60 | 61 | 62 | 65 | 66 | 67 | 73 | 76 | 77 | 78 | 82 | 85 | 86 | 87 | 90 | 93 | 94 | 95 |
NameDescription
.drawer 57 | The drawer component 58 |
.drawer-container 63 | The drawer container with a default width 320px 64 |
68 |

drawer-top

69 |

drawer-bottom

70 |

drawer-left

71 |

drawer-right

72 | 		74 | The position of drawer to appear on the page. 75 |
79 |

.open

80 |

:target

81 | 		83 | The switch to control drawer open/close 84 |
88 | .is-drawer-open 89 | 91 | A semantic class to attch on body element to restrict scroll behavior 92 |
96 |
97 |
98 | 99 | 100 | ## Features 101 | #### default 102 | The default drawer container's background color is transparent. You may paint the color yourself. 103 | 104 |
105 | 109 | 113 | 117 | 121 |
122 |
123 |
124 | 125 |
126 | 127 |
128 |
129 |
130 | 131 | ```html {} 132 |
133 |
134 | 135 |
136 |
137 | ``` 138 | 139 | 140 | #### container size 141 | Default container width/height is `320px`. 142 | 143 |
144 | 145 | 146 |
147 | 148 |
149 | 150 |
151 |
152 |
153 | 154 | 155 | ```html {} 156 | 157 |
158 |
159 | 160 |
161 |
162 | 163 | 164 |
165 |
166 | 167 |
168 |
169 | ``` 170 | -------------------------------------------------------------------------------- /doc/docs/tooltip.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tooltip 3 | link: /docs/tooltip/ 4 | slug: tooltip 5 | section: Components 6 | --- 7 | 8 | Hoverable popup text hint 9 |
10 |
11 | 12 | 13 | ## Properties 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 30 | 33 | 34 | 35 | 45 | 48 | 49 | 50 |
NameDescription
.tooltip 25 | The tooltip component 26 |
.tooltip-container 31 | The tooltip container component 32 |
36 |

.tooltip-left

37 |

.tooltip-right

38 |

.tooltip-top-left

39 |

.tooltip-top-center

40 |

.tooltip-top-right

41 |

.tooltip-bottom-left

42 |

.tooltip-bottom-center

43 |

.tooltip-bottom-right

44 | 		46 | The tooltip display position 47 |
51 |
52 |
53 | 54 | ## Features 55 | #### default 56 | The default popover container's background color is transparent. You may paint the color yourself. 57 | 58 |
59 | 60 | 61 | 62 | This is a top-right tooltip! 63 | 64 | 65 | 66 | 67 | 68 | This is a top tooltip! 69 | 70 | 71 | 72 | 73 | 74 | This is a top-left tooltip! 75 | 76 | 77 |
78 |
79 | 80 | 81 | 82 | This is a left tooltip! 83 | 84 | 85 | 86 | 87 | 88 | This is a right tooltip! 89 | 90 | 91 |
92 |
93 | 94 | 95 | 96 | This is a bottom-right tooltip! 97 | 98 | 99 | 100 | 101 | 102 | This is a bottom tooltip! 103 | 104 | 105 | 106 | 107 | 108 | This is a bottom-left tooltip! 109 | 110 | 111 |
112 |
113 |
114 | 115 | ```html {} 116 | 117 | 118 | 119 | This is a top-right tooltip! 120 | 121 | 122 | ``` -------------------------------------------------------------------------------- /doc/docs/select.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Select 3 | link: /docs/select/ 4 | slug: select 5 | section: Components 6 | --- 7 | 8 | Select input component 9 |
10 |
11 | 12 | ## Properties 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 32 | 35 | 36 | 37 |
NameDescription
.select 24 | The select container component 25 |
29 |

.disabled

30 |

[disabled]

31 | 		33 | The disabled select style 34 |
38 |
39 |
40 | 41 | 42 | ## Features 43 | #### default 44 | 52 |
53 |
54 | 62 | 63 | ```html {} 64 | 65 | 73 | 74 | 75 | 83 | ``` 84 | 85 | #### disabled 86 | 93 |
94 |
95 | 102 | 103 | ```html {} 104 | 105 | 112 | 113 | 114 | 121 | ``` 122 | 123 | 124 | 125 | #### underline 126 | 134 |
135 |
136 | 137 | ```html {} 138 | 146 | ``` 147 | 148 | #### outline 149 | 157 |
158 |
159 | 160 | ```html {} 161 | 169 | ``` -------------------------------------------------------------------------------- /packages/rotala-extension-css-icon/docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Rotala Extension CSS Icon

17 |
18 |
19 |
20 | 21 |

Icons: thin

22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
44 |
45 | 46 |

Icons: thick

47 |
48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
69 |
70 | 71 |

Size

72 |
73 | xs  74 | sm  75 | base  76 | lg  77 | xl  78 | 2xl  79 | 3xl  80 | 4x  81 |
82 |
83 | xs  84 | sm  85 | base  86 | lg  87 | xl  88 | 2xl  89 | 3xl  90 | 4x  91 |
92 |
93 | 94 | 95 | -------------------------------------------------------------------------------- /doc/docs/notification.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Notification 3 | link: /docs/notification/ 4 | slug: notification 5 | section: Components 6 | --- 7 | import notification from '~/components/docs/notification/index' 8 | import notificationItem from '~/components/docs/notification/item' 9 | 10 | 20 | 21 | 22 | 25 | 26 | 27 | 28 | A notifying component to display messages to the corner of page 29 |
30 |
31 | 32 | 33 | ## Properties 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 47 | 48 | 49 | 50 | 53 | 54 | 55 | 56 | 59 | 60 | 61 | 69 | 72 | 73 | 74 | 78 | 81 | 82 | 83 |
NameDescription
.notification 45 | The notification component 46 |
.notification-container 51 | The notification container component to hold its children components with a default max-width of 960px 52 |
.notification-title 57 | The notification content title. 58 |
62 |

.top-left

63 |

.top-center

64 |

.top-right

65 |

.bottom-left

66 |

.bottom-center

67 |

.bottom-right

68 | 		70 | The position of the notification component to the page 71 |
75 |

.open

76 |

:target

77 | 		79 | The switch to control notification open/close 80 |
84 |
85 |
86 | 87 | 88 | ## Features 89 | #### default 90 | The default notification container's background color is transparent. You may paint the color yourself. 91 | 92 |
93 | 97 | 101 | 105 |
106 |
107 | 111 | 115 | 119 |
120 |
121 |
122 | 123 |
124 | 125 |
126 |
127 |
128 | 129 | ```html {} 130 |
131 |
132 |
133 | 134 |
135 | 136 |
137 |
138 | ``` 139 | 140 | #### stack 141 | Notifications can stack up if there are multiple ones to display 142 | 143 |
144 | 145 |
146 |
147 |
148 | 149 | ```html {} 150 |
151 | 152 |
153 |
154 | 155 |
156 | 157 |
158 | 159 | ... 160 | 161 | 162 |
163 |
164 | 165 |
166 | 167 |
168 |
169 | ``` -------------------------------------------------------------------------------- /doc/docs/popover.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Popover 3 | link: /docs/popover/ 4 | slug: popover 5 | section: Components 6 | --- 7 | 8 | 19 | 20 | A floating content component 21 | 22 | ## Properties 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 36 | 37 | 38 | 39 | 42 | 43 | 44 | 48 | 51 | 52 | 53 | 63 | 66 | 67 | 68 |
NameDescription
.popover 34 | The popover component 35 |
.popover-container 40 | The popover container component with a default width of 320px 41 |
45 |

.popover-click

46 |

.popover-hover

47 | 		49 | The popover triger: open by click / hover 50 |
54 |

.popover-left

55 |

.popover-right

56 |

.popover-top-left

57 |

.popover-top-center

58 |

.popover-top-right

59 |

.popover-bottom-left

60 |

.popover-bottom-center

61 |

.popover-bottom-right

62 | 		64 | The popover display position 65 |
69 |
70 |
71 | 72 | 73 | ## Features 74 | #### default 75 | The default popover container's background color is transparent. You may paint the color yourself. 76 | 77 | trigger 78 |
79 | 83 | 84 | 88 |
89 |
90 |
91 | 92 | position 93 |
94 | 98 | 102 | 106 |
107 |
108 | 112 | 113 | 117 |
118 |
119 | 123 | 127 | 131 |
132 |
133 |
134 | 135 |
136 |
143 | 144 |
145 |
146 |
Popover
147 |
148 |

149 | This is the content of the Popover. 150 |

151 |
152 |
153 |
154 |
155 |
156 |
157 | 158 | ```html {} 159 |
160 | 161 |
162 | 163 |
164 |
165 | ``` -------------------------------------------------------------------------------- /doc/src/components/TopbarSearch.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 59 | 60 | -------------------------------------------------------------------------------- /doc/gridsome.config.js: -------------------------------------------------------------------------------- 1 | // This is where project configuration and plugin options are located. 2 | // Learn more: https://gridsome.org/docs/config 3 | 4 | // Changes here require a server restart. 5 | // To restart press CTRL + C in terminal and run `gridsome develop` 6 | const Prism = require('prismjs') 7 | const nodeExternals = require('webpack-node-externals') 8 | 9 | module.exports = { 10 | siteName: 'Rotala', 11 | siteUrl: process.env.SITE_URL, 12 | siteDescription: process.env.SITE_DESCRIPTION, 13 | chainWebpack(config, { isServer }) { 14 | if (isServer) { 15 | config.externals(nodeExternals({ 16 | whitelist: [ 17 | /\.css$/, 18 | /\?vue&type=style/, 19 | /vue-instantsearch/, 20 | /instantsearch.js/, 21 | /typeface-open-sans/ 22 | ] 23 | })) 24 | } 25 | 26 | const postcssConfig = ({ prefix = '', purge = false }) => { 27 | return { 28 | map: false, 29 | plugins: [ 30 | require('postcss-import'), 31 | require('postcss-nested'), 32 | require('postcss-simple-vars')({ variables: { prefix } }), 33 | require('tailwindcss'), 34 | require('autoprefixer'), 35 | ...process.env.NODE_ENV === 'production' && purge 36 | ? [ 37 | require('@fullhuman/postcss-purgecss')({ 38 | content: [ 39 | './node_modules/docsearch.js/dist/cdn/docsearch.min.css', 40 | './src/assets/style/**/*.pcss', 41 | './src/**/*.vue', 42 | './docs/*.md', 43 | './gridsome.config.js' 44 | ], 45 | defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] 46 | }) 47 | ] 48 | : [] 49 | ] 50 | } 51 | } 52 | 53 | // Process styles for Vue components 54 | config.module 55 | .rule('postcss') 56 | .oneOf('normal') 57 | .use('postcss-loader') 58 | .tap(() => postcssConfig({ purge: true })) 59 | 60 | // Process styles for rotala theme default light 61 | config.module 62 | .rule('postcss-loader-theme') 63 | .test(/^(?!.*rotala\.components\.).*\.pcss$/g) 64 | .use('postcss-loader') 65 | .loader('postcss-loader') 66 | .tap(() => postcssConfig({ purge: true, prefix: 'ro-' })) 67 | 68 | // Process styles for only rotala components 69 | config.module 70 | .rule('postcss-loader-components') 71 | .test(/rotala.components.pcss/g) 72 | .use('postcss-loader') 73 | .loader('postcss-loader') 74 | .tap(() => postcssConfig({})) 75 | 76 | // Load SVG images 77 | const svgRule = config.module.rule('svg') 78 | svgRule.uses.clear() 79 | svgRule 80 | .use('vue-svg-loader') 81 | .loader('vue-svg-loader') 82 | }, 83 | plugins: [ 84 | { 85 | use: '@gridsome/vue-remark', 86 | options: { 87 | index: ['introduction'], 88 | baseDir: './docs', 89 | pathPrefix: '/docs', 90 | typeName: 'Doc', 91 | template: './src/templates/Doc.vue', 92 | plugins: [ 93 | '@gridsome/remark-prismjs', 94 | 'remark-attr' 95 | ], 96 | remark: { 97 | autolinkHeadings: { 98 | behavior: 'append', 99 | linkProperties: { 100 | className: ['ro-link ro-link-anchor', 'ml-2'] 101 | }, 102 | content: { 103 | type: 'text', 104 | value: '#' 105 | } 106 | } 107 | } 108 | } 109 | }, 110 | { 111 | use: '@gridsome/source-filesystem', 112 | options: { 113 | path: 'examples/*.md', 114 | typeName: 'Example', 115 | remark: { 116 | plugins: [ 117 | '@gridsome/remark-prismjs' 118 | ] 119 | } 120 | } 121 | }, 122 | { 123 | use: '@gridsome/plugin-google-analytics', 124 | options: { 125 | id: process.env.GA_ID 126 | } 127 | }, 128 | { 129 | use: '@gridsome/plugin-sitemap', 130 | options: { 131 | cacheTime: 600000 132 | } 133 | }, 134 | { 135 | use: 'gridsome-plugin-robots-txt', 136 | options: { 137 | host: process.env.SITE_URL, 138 | sitemap: process.env.SITE_URL + '/sitemap.xml', 139 | policy: [ 140 | { 141 | userAgent: "Googlebot", 142 | allow: "/", 143 | disallow: "/search", 144 | crawlDelay: 2 145 | }, 146 | { 147 | userAgent: "*", 148 | allow: "/", 149 | disallow: "/search", 150 | crawlDelay: 10, 151 | cleanParam: "ref /docs/" 152 | } 153 | ] 154 | } 155 | } 156 | ] 157 | } 158 | 159 | -------------------------------------------------------------------------------- /doc/src/assets/img/extension.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | create 17 | 19 | 21 | 23 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 62 | 65 | 67 | -------------------------------------------------------------------------------- /doc/docs/breadcrumb.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Breadcrumb 3 | link: /docs/breadcrumb/ 4 | slug: breadcrumb 5 | section: Components 6 | --- 7 | 8 | A hierachical inidicator component to display current location 9 |
10 |
11 | 12 | 13 | ## Properties 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 30 | 33 | 34 | 35 |
NameDescription
.breadcrumb 25 | The breadcrumb component container 26 |
.breadcrumb-item 31 | The breadcrumb controller component 32 |
36 |
37 |
38 | 39 | 40 | ## Features 41 | #### default 42 | 59 |
60 |
61 | 62 | 63 | ```html {} 64 | 81 | ``` 82 | 83 | 84 | #### character separator 85 | 86 | 103 |
104 |
105 | 106 | ```html {} 107 | 124 | ``` 125 | 126 | #### icon separator 127 | 128 | 145 |
146 |
147 | 148 | 149 | ```html {} 150 | 167 | ``` 168 |
169 |
170 | 171 | 172 | #### hover & underline 173 | 174 | 191 |
192 |
193 | 194 | ```html {} 195 | 212 | ``` -------------------------------------------------------------------------------- /doc/docs/pagination.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Pagination 3 | link: /docs/pagination/ 4 | slug: pagination 5 | section: Components 6 | --- 7 | 8 | Paging indicator component 9 |
10 |
11 | 12 | ## Properties 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | 35 | 38 | 39 | 40 | 41 | 44 | 45 | 46 | 50 | 53 | 54 | 55 |
NameDescription
.pagination 24 | The pagination component container 25 |
.pagination-item 30 | The pagination controller component 31 |
.pagination-prev 36 | The previous page controller 37 |
.pagination-next 42 | The next page controller 43 |
47 |

.disabled

48 |

[disabled]

49 | 		51 | The disabled style for pagination item/prev/next 52 |
56 |
57 |
58 | 59 | 60 | ## Features 61 | #### default 62 | 91 | 92 | ```html {} 93 | 122 | ``` 123 | 124 | #### disabled 125 | 148 | 149 | 172 |
173 |
174 | 175 | ```html {} 176 | 199 | ``` 200 | 201 | 202 | #### active page 203 | Active status for the pagination item 204 | 205 | 222 |
223 |
224 | 225 | ```css {} 226 | .pagination .pagination-item.active a { 227 | @apply border-2 border-solid border-indigo-500; 228 | @apply rounded; 229 | } 230 | ``` 231 | 232 | ```html {} 233 | 250 | ``` --------------------------------------------------------------------------------