├── .gitignore ├── LICENSE ├── README.md ├── dist ├── larastrator.css └── larastrator.min.css ├── docs ├── CNAME ├── android-chrome-192x192.png ├── android-chrome-256x256.png ├── apple-touch-icon.png ├── browserconfig.xml ├── css │ ├── app.css │ └── larastrator.css ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── images │ ├── avatar.jpeg │ └── larastrator.png ├── index.html ├── javascript │ └── app.js ├── mix-manifest.json ├── mstile-150x150.png ├── safari-pinned-tab.svg ├── signin.html └── site.webmanifest ├── package-lock.json ├── package.json ├── src ├── images │ ├── avatar.jpeg │ └── larastrator.png ├── javascript │ ├── app.js │ └── components │ │ ├── Alerts.vue │ │ ├── App.vue │ │ ├── Breadcrumb.vue │ │ ├── Buttons.vue │ │ ├── Content.vue │ │ ├── DataTable.vue │ │ ├── Footer.vue │ │ ├── HorizontalForm.vue │ │ ├── Main.vue │ │ ├── Navbar.vue │ │ ├── Notifications.vue │ │ ├── Pagination.vue │ │ ├── Sidebar.vue │ │ ├── SidebarDropdown.vue │ │ ├── SignIn.vue │ │ ├── Table.vue │ │ └── VerticalForm.vue └── sass │ ├── components │ ├── alerts.scss │ ├── auth.scss │ ├── breadcrumb.scss │ ├── buttons.scss │ ├── content.scss │ ├── datatable.scss │ ├── datatable │ │ ├── _control-bar.scss │ │ ├── _input.scss │ │ ├── _loading.scss │ │ ├── _rtl.scss │ │ ├── _table-footer.scss │ │ ├── _table-th.scss │ │ ├── _table.scss │ │ ├── _utils.scss │ │ ├── _variables.scss │ │ └── _wrap.scss │ ├── form.scss │ ├── navbar.scss │ ├── normalize.scss │ ├── notifications.scss │ ├── pagination.scss │ ├── panel.scss │ ├── sidebar.scss │ ├── slideout.scss │ ├── table.scss │ ├── utilities.scss │ └── variables.scss │ └── larastrator.scss ├── step-by-step.md ├── tailwind.js └── webpack.mix.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.git 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Abdalla Arbab 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Larastrator 3 |

4 | 5 | # Larastrator 6 | Build a nice looking admin panel in a blink. 7 | _Try it your self now. It's easy._ 8 | 9 | **A full-featured documentation and package improvements are coming soon to make it even more easier.** 10 | 11 | > I build this project to defeat the ugliness of most admin panels on the web with the power of Vue. I don't consider this as a full solution for everyone but mostly it can help a lot of people as I hope. 12 | 13 | ## Demo 14 | [https://larastrator.js.org](https://larastrator.js.org) 15 | 16 | ## Intro 17 | Larastrator is a lightweight admin panel components. it's inspired by [RefactoringUI](https://refactoringui.com/) best practices. It depends on the next tools: 18 | 1. Tailwindcss. 19 | 2. Fontawesome 5. 20 | 3. Vue framework. 21 | 4. `vue-slideout` NPM package. 22 | 5. `vue-slide-up-down` NPM package. 23 | 6. `vue-notification` NPM package. 24 | 7. `vue-good-table` NPM package. 25 | 26 | ## installation 27 | Install the package and the dependencies from NPM: 28 | ```bash 29 | $ npm install larastrator --save 30 | $ npm install vue vue-slideout vue-slide-up-down vue-notification vue-good-table --save 31 | $ npm install tailwindcss --save-dev 32 | ``` 33 | Then, you will need to to complete the tailwindcss installation 34 | https://tailwindcss.com/docs/installation 35 | 36 | ## Setup 37 | 1. After creating the tailwind config file inside your project, add the next configurations as well 38 | ```javascript 39 | // Add these colors to the colors object 40 | let colors = { 41 | 'brand-grey-darker': '#606060', 42 | 'brand-grey-light': '#b6bec6', 43 | 'brand-grey-lighter': '#e9eef2', 44 | 'brand-grey-lightest': '#f7f7f7', 45 | } 46 | 47 | module.exports = { 48 | 49 | // ... 50 | 51 | shadows: { 52 | 'outline': '0 0 0 3px rgba(201, 210, 218, 0.5)', 53 | 'button': '0 0 0 2px rgba(33, 150, 243, 0.3)', 54 | 'alert': '0 1px 1px 0px rgba(0, 0, 0, 0.1)', 55 | } 56 | 57 | // ... 58 | 59 | modules: { 60 | width: ['responsive', 'hover'], 61 | } 62 | 63 | // ... 64 | 65 | plugins: [ 66 | require('tailwindcss/plugins/container')({ 67 | center: true, 68 | padding: '1rem', 69 | }), 70 | ], 71 | 72 | // ... 73 | 74 | // Optional 75 | // Add the default font 76 | fonts: { 77 | 'sans': [ 78 | 'Source\\ Sans\\ Pro', 79 | // ... 80 | ], 81 | 82 | 'serif': [ 83 | 'Source\\ Sans\\ Pro', 84 | // ... 85 | ] 86 | } 87 | } 88 | ``` 89 | 2. Add the default font into your `` or use your own font. 90 | ```html 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | Larastrator 99 | 100 | 101 | 102 | 109 | 110 | 111 | 112 | 113 | 114 | ``` 115 | 3. Import SASS files 116 | After installation import the `sass` files into your project and copy the `variables` file in your working directory if you want to change the styling, colors, and animations. 117 | ```scss 118 | @tailwind preflight; 119 | @tailwind components; 120 | 121 | @import '~larastrator/src/sass/components/variables'; 122 | @import './your/project/directory/variables'; 123 | 124 | @import '~larastrator/src/sass/components/normalize'; 125 | @import '~larastrator/src/sass/components/navbar'; 126 | @import '~larastrator/src/sass/components/slideout'; 127 | @import '~larastrator/src/sass/components/panel'; 128 | @import '~larastrator/src/sass/components/sidebar'; 129 | @import '~larastrator/src/sass/components/content'; 130 | @import '~larastrator/src/sass/components/notifications'; 131 | @import '~larastrator/src/sass/components/breadcrumb'; 132 | @import '~larastrator/src/sass/components/form'; 133 | @import '~larastrator/src/sass/components/buttons'; 134 | @import '~larastrator/src/sass/components/pagination'; 135 | @import '~larastrator/src/sass/components/alerts'; 136 | @import '~larastrator/src/sass/components/datatable'; 137 | @import '~larastrator/src/sass/components/table'; 138 | @import '~larastrator/src/sass/components/auth'; 139 | 140 | // Or 141 | // @import '~larastrator/src/sass/larastrator'; 142 | // @import './your/project/directory/variables'; 143 | 144 | // Here your custom sass 145 | 146 | @tailwind utilities; 147 | ``` 148 | 149 | 4. JavaScript 150 | You will need to import the required icons from fontawesome into your javaScript. 151 | ```javascript 152 | import Vue from 'vue'; 153 | import { dom, config, library } from '@fortawesome/fontawesome-svg-core'; 154 | import { faBell, faArrowAltCircleRight, 155 | faArrowAltCircleLeft } from '@fortawesome/free-regular-svg-icons'; 156 | import { faHome, faCubes, faAngleRight, faArrowRight, 157 | faArrowLeft, faTimes, faCheckCircle, 158 | faExclamationTriangle, faInfoCircle, faExclamationCircle, 159 | faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons'; 160 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; 161 | 162 | config.searchPseudoElements = true; 163 | dom.watch(); 164 | library.add(faBell, faHome, faCubes, faAngleRight, 165 | faArrowRight, faArrowLeft, faTimes, faCheckCircle, 166 | faExclamationTriangle, faInfoCircle, faExclamationCircle, 167 | faArrowDown, faArrowUp, faArrowAltCircleRight, 168 | faArrowAltCircleLeft); 169 | 170 | Vue.component('Fa', FontAwesomeIcon); 171 | // Example 172 | ``` 173 | 174 | 5. Notifications 175 | Then import the notifications package because we will need it later. 176 | ```javascript 177 | import Notifications from 'vue-notification'; 178 | 179 | Vue.use(Notifications); 180 | ``` 181 | 182 | ## Components 183 | 184 | ### Navbar 185 | ```html 186 | 231 | 232 | 241 | 242 | 251 | ``` 252 | 253 | ### Panel 254 | to build the panel area and the sidebar you will need to use `vue-slideout` package. 255 | ```html 256 | 333 | 334 | 348 | ``` 349 | ### Alerts 350 | ```html 351 | 392 | ``` 393 | 394 | ### Notification 395 | If you want to use the notification component some were else: 396 | ```html 397 | 405 | ``` 406 | 407 | ### Breadcrumb 408 | ```html 409 | 425 | ``` 426 | 427 | ### Buttons 428 | ```html 429 | 436 | ``` 437 | 438 | ### Horizontal Form 439 | ```html 440 | 526 | 527 | 546 | ``` 547 | ### Vertical Form 548 | ```html 549 | 689 | 690 | 709 | ``` 710 | 711 | ### Pagination 712 | ```html 713 | 730 | ``` 731 | 732 | ### Table 733 | ```html 734 | 777 | ``` 778 | 779 | ### DataTable 780 | ```html 781 | 833 | 834 | 881 | ``` 882 | 883 | ### Sign in 884 | ```html 885 | 918 | ``` -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | larastrator.js.org 2 | -------------------------------------------------------------------------------- /docs/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the94air/larastrator/f8c34c68540419e5967ddb229f02a4bed6ea7c9a/docs/android-chrome-192x192.png -------------------------------------------------------------------------------- /docs/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the94air/larastrator/f8c34c68540419e5967ddb229f02a4bed6ea7c9a/docs/android-chrome-256x256.png -------------------------------------------------------------------------------- /docs/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the94air/larastrator/f8c34c68540419e5967ddb229f02a4bed6ea7c9a/docs/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #2d89ef 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the94air/larastrator/f8c34c68540419e5967ddb229f02a4bed6ea7c9a/docs/favicon-16x16.png -------------------------------------------------------------------------------- /docs/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the94air/larastrator/f8c34c68540419e5967ddb229f02a4bed6ea7c9a/docs/favicon-32x32.png -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the94air/larastrator/f8c34c68540419e5967ddb229f02a4bed6ea7c9a/docs/favicon.ico -------------------------------------------------------------------------------- /docs/images/avatar.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the94air/larastrator/f8c34c68540419e5967ddb229f02a4bed6ea7c9a/docs/images/avatar.jpeg -------------------------------------------------------------------------------- /docs/images/larastrator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the94air/larastrator/f8c34c68540419e5967ddb229f02a4bed6ea7c9a/docs/images/larastrator.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Larastrator - Build a nice looking admin panel in a blink. 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 26 | 27 | 28 | 35 | 36 | 37 | 38 | 39 |
40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /docs/mix-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "/dist/larastrator.min.css": "/dist/larastrator.min.css" 3 | } 4 | -------------------------------------------------------------------------------- /docs/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the94air/larastrator/f8c34c68540419e5967ddb229f02a4bed6ea7c9a/docs/mstile-150x150.png -------------------------------------------------------------------------------- /docs/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /docs/signin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Larastrator - Build a nice looking admin panel in a blink. 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 26 | 27 | 28 | 35 | 36 | 37 | 38 | 39 |
40 |
41 |
42 |
43 |

Sign in

44 |
45 |
46 | 47 | 48 | The email field is required. 49 |
50 |
51 | 52 | 53 | The password field is required. 54 |
55 |
56 | 57 | 58 |
59 |
60 | 61 |
62 |
63 |
64 |
65 | Forgot password? 66 |
67 |
68 |
69 |
70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /docs/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Larastrator", 3 | "short_name": "Larastrator", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "start_url": "https://larastrator.js.org", 19 | "display": "standalone" 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "larastrator", 3 | "version": "0.0.2-alpha.5", 4 | "description": "A lightweight admin panel components", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "npm run development", 8 | "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 9 | "watch": "npm run development -- --watch", 10 | "minify": "npm run production", 11 | "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/the94air/larastrator.git" 16 | }, 17 | "keywords": [ 18 | "larastrator", 19 | "tailwindcss", 20 | "vuejs2", 21 | "fontawesome5", 22 | "admin-panel", 23 | "lightweight", 24 | "vue-good-table", 25 | "vue-slide-up-down", 26 | "vue-notification" 27 | ], 28 | "author": "Abdalla Arbab", 29 | "license": "MIT", 30 | "devDependencies": { 31 | "cross-env": "^5.2.0", 32 | "laravel-mix": "^4.0.13", 33 | "postcss-import": "^12.0.1", 34 | "resolve-url-loader": "^3.0.0", 35 | "sass": "^1.15.3", 36 | "sass-loader": "^7.1.0", 37 | "tailwindcss": "^0.6.6", 38 | "vue": "^2.5.21", 39 | "vue-good-table": "^2.16.0", 40 | "vue-notification": "^1.3.14", 41 | "vue-slide-up-down": "^1.6.0", 42 | "vue-slideout": "^1.7.0", 43 | "vue-template-compiler": "^2.5.21" 44 | }, 45 | "dependencies": { 46 | "@fortawesome/fontawesome-svg-core": "^1.2.12", 47 | "@fortawesome/free-regular-svg-icons": "^5.6.3", 48 | "@fortawesome/free-solid-svg-icons": "^5.6.3", 49 | "@fortawesome/vue-fontawesome": "^0.1.4" 50 | }, 51 | "bugs": { 52 | "url": "https://github.com/the94air/larastrator/issues" 53 | }, 54 | "homepage": "https://larastrator.js.org" 55 | } 56 | -------------------------------------------------------------------------------- /src/images/avatar.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the94air/larastrator/f8c34c68540419e5967ddb229f02a4bed6ea7c9a/src/images/avatar.jpeg -------------------------------------------------------------------------------- /src/images/larastrator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the94air/larastrator/f8c34c68540419e5967ddb229f02a4bed6ea7c9a/src/images/larastrator.png -------------------------------------------------------------------------------- /src/javascript/app.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Notifications from 'vue-notification'; 3 | import { dom, config, library } from '@fortawesome/fontawesome-svg-core'; 4 | import { faBell, faArrowAltCircleRight, faArrowAltCircleLeft } from '@fortawesome/free-regular-svg-icons'; 5 | import { faHome, faUser, faUsers, faCubes, faAngleRight, faArrowRight, 6 | faArrowLeft, faTimes, faCheckCircle, faExclamationTriangle, 7 | faInfoCircle, faExclamationCircle, faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons'; 8 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; 9 | import App from './components/App'; 10 | 11 | Vue.use(Notifications); 12 | 13 | config.searchPseudoElements = true; 14 | 15 | dom.watch(); 16 | 17 | library.add(faBell, faHome, faUser, faUsers, faCubes, faAngleRight, 18 | faArrowRight, faArrowLeft, faTimes, faCheckCircle, faExclamationTriangle, 19 | faInfoCircle, faExclamationCircle, faArrowDown, faArrowUp, faArrowAltCircleRight, faArrowAltCircleLeft); 20 | 21 | Vue.component('Fa', FontAwesomeIcon); 22 | 23 | const app = new Vue({ 24 | el: '#app', 25 | render: h => h(App) 26 | }); 27 | -------------------------------------------------------------------------------- /src/javascript/components/Alerts.vue: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /src/javascript/components/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | -------------------------------------------------------------------------------- /src/javascript/components/Breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /src/javascript/components/Buttons.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 42 | -------------------------------------------------------------------------------- /src/javascript/components/Content.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 40 | -------------------------------------------------------------------------------- /src/javascript/components/DataTable.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 101 | -------------------------------------------------------------------------------- /src/javascript/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /src/javascript/components/HorizontalForm.vue: -------------------------------------------------------------------------------- 1 | 87 | 88 | 107 | -------------------------------------------------------------------------------- /src/javascript/components/Main.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /src/javascript/components/Navbar.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 53 | 54 | 63 | -------------------------------------------------------------------------------- /src/javascript/components/Notifications.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /src/javascript/components/Pagination.vue: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /src/javascript/components/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 69 | -------------------------------------------------------------------------------- /src/javascript/components/SidebarDropdown.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | -------------------------------------------------------------------------------- /src/javascript/components/SignIn.vue: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /src/javascript/components/Table.vue: -------------------------------------------------------------------------------- 1 | 44 | -------------------------------------------------------------------------------- /src/javascript/components/VerticalForm.vue: -------------------------------------------------------------------------------- 1 | 141 | 142 | 161 | -------------------------------------------------------------------------------- /src/sass/components/alerts.scss: -------------------------------------------------------------------------------- 1 | .alert { 2 | @apply flex flex-row-reverse items-start bg-white shadow-alert p-5 mb-5 rounded-t w-full; 3 | border-top: 0.3rem solid $success-alert-border-top-color; 4 | padding-top: 0.95rem; 5 | div { 6 | @apply w-full; 7 | } 8 | .title { 9 | @apply mb-2; 10 | color: $success-alert-title-color; 11 | font-weight: 600; 12 | } 13 | p { 14 | @apply leading-tight mb-0; 15 | } 16 | .icon { 17 | @apply block mr-3; 18 | font-size: 2rem; 19 | color: $success-alert-icon-color; 20 | @screen sm { 21 | font-size: 3rem; 22 | } 23 | &::before { 24 | @apply hidden; 25 | font-family: 'Font Awesome 5 Solid'; 26 | content: "\f058"; 27 | } 28 | .svg-inline--fa { 29 | width: 1.25em; 30 | } 31 | } 32 | &.danger { 33 | border-color: $danger-alert-border-top-color; 34 | .title { 35 | color: $danger-alert-title-color; 36 | } 37 | .icon { 38 | color: $danger-alert-icon-color; 39 | &::before { 40 | content: "\f06a"; 41 | } 42 | } 43 | } 44 | &.info { 45 | border-color: $info-alert-border-top-color; 46 | .title { 47 | color: $info-alert-title-color; 48 | } 49 | .icon { 50 | color: $info-alert-icon-color; 51 | &::before { 52 | content: "\f05a"; 53 | } 54 | } 55 | } 56 | &.warning { 57 | border-color: $warning-alert-border-top-color; 58 | .title { 59 | color: $warning-alert-title-color; 60 | } 61 | .icon { 62 | color: $warning-alert-icon-color; 63 | &::before { 64 | content: "\f071"; 65 | } 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/sass/components/auth.scss: -------------------------------------------------------------------------------- 1 | .auth { 2 | @apply flex justify-center items-center; 3 | .auth-main { 4 | .auth-content { 5 | @apply shadow-md p-4 rounded; 6 | min-width: 320px; 7 | background: #fff; 8 | .auth-title { 9 | @apply text-2xl text-center mb-6; 10 | } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/sass/components/breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | @apply flex flex-wrap px-4 py-3 mb-5 list-reset select-none; 3 | li { 4 | .svg-inline--fa { 5 | @apply text-xs mr-2; 6 | } 7 | a { 8 | @apply text-xs no-underline; 9 | } 10 | a.select { 11 | @apply pointer-events-none; 12 | color: $links-color-hover; 13 | } 14 | } 15 | li + li { 16 | @apply pl-2; 17 | &::before { 18 | @apply hidden; 19 | font-family: 'Font Awesome 5 Solid'; 20 | content: "\f105"; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/sass/components/buttons.scss: -------------------------------------------------------------------------------- 1 | .button, .paginate a { 2 | @apply inline-block text-center no-underline rounded-sm select-none align-middle whitespace-no-wrap px-4 py-2 leading-tight cursor-pointer; 3 | font-weight: 600; 4 | color: $button-color !important; 5 | background-color: $button-background-color; 6 | transform: scale(1); 7 | transition: all $button-transition-duration $button-transition-function; 8 | &:hover { 9 | @apply no-underline; 10 | background: $button-background-color-hover; 11 | transform: scale(.985); 12 | } 13 | &:focus { 14 | @apply outline-none shadow-button; 15 | } 16 | &:active { 17 | transform: scale(.97); 18 | } 19 | &:disabled { 20 | @apply pointer-events-none opacity-50; 21 | } 22 | } 23 | 24 | a.success, button.success, [type="button"].success, [type="reset"].success, [type="submit"].success { 25 | background-color: $success-button-background-color; 26 | &:hover { 27 | background: $success-button-background-color-hover; 28 | } 29 | } 30 | a.danger, button.danger, [type="button"].danger, [type="reset"].danger, [type="submit"].danger { 31 | background-color: $danger-button-background-color; 32 | &:hover { 33 | background: $danger-button-background-color-hover; 34 | } 35 | } 36 | a.info, button.info, [type="button"].info, [type="reset"].info, [type="submit"].info { 37 | background-color: $info-button-background-color; 38 | &:hover { 39 | background: $info-button-background-color-hover; 40 | } 41 | } 42 | a.warning, button.warning, [type="button"].warning, [type="reset"].warning, [type="submit"].warning { 43 | background-color: $warning-button-background-color; 44 | &:hover { 45 | background: $warning-button-background-color-hover; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/sass/components/content.scss: -------------------------------------------------------------------------------- 1 | .content { 2 | @apply w-full px-4; 3 | margin-top: 9rem; 4 | @screen sm { 5 | margin-top: 7rem; 6 | margin-bottom: 4rem; 7 | } 8 | @screen md { 9 | @apply px-2; 10 | width: 70%; 11 | } 12 | @screen lg { 13 | @apply w-4/5 px-2; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/sass/components/datatable.scss: -------------------------------------------------------------------------------- 1 | // @import '~vue-good-table/dist/vue-good-table.css'; 2 | // base table styles 3 | @import './datatable/variables'; 4 | @import './datatable/utils'; 5 | @import './datatable/wrap'; 6 | @import './datatable/table'; 7 | @import './datatable/table-th'; 8 | @import './datatable/input'; 9 | @import './datatable/loading'; 10 | 11 | // table enhancements 12 | @import './datatable/rtl'; 13 | 14 | // controls on top 15 | @import './datatable/control-bar'; 16 | 17 | // table footer 18 | @import './datatable/table-footer'; 19 | -------------------------------------------------------------------------------- /src/sass/components/datatable/_control-bar.scss: -------------------------------------------------------------------------------- 1 | .vgt-global-search { 2 | @apply flex flex-no-wrap items-stretch; 3 | margin-bottom: 0.45rem; 4 | .button { 5 | font-size: 0.8rem; 6 | padding-top: .4rem; 7 | padding-bottom: .4rem; 8 | border: 1px solid transparent; 9 | } 10 | .button + .button { 11 | @apply ml-1; 12 | } 13 | } 14 | 15 | .vgt-global-search__input { 16 | @apply relative flex-grow; 17 | } 18 | 19 | // .vgt-global-search__actions { 20 | // margin-left: 0.5rem; 21 | // } 22 | 23 | .vgt-selection-info-row { 24 | @apply rounded py-2 px-4; 25 | font-size: 0.8rem; 26 | font-weight: 600; 27 | background: $datatable-selection-info-background-color; 28 | margin-bottom: 0.45rem; 29 | color: $datatable-selection-info-color; 30 | a { 31 | @apply inline-block no-underline ml-3; 32 | font-weight: 600; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/sass/components/datatable/_input.scss: -------------------------------------------------------------------------------- 1 | .vgt-input { 2 | @apply block w-full px-2 leading-tight border border-solid rounded-sm; 3 | font-size: 0.8rem; 4 | padding-top: .4rem; 5 | padding-bottom: .4rem; 6 | border-color: $input-box-border-color; 7 | -webkit-appearance: none; 8 | box-sizing: border-box; 9 | transition: all $input-box-transition-duration $input-box-transition-function; 10 | &::placeholder { 11 | opacity: 0.3; 12 | } 13 | &:focus { 14 | @apply outline-none shadow-outline; 15 | } 16 | } 17 | 18 | .vgt-select { 19 | @apply relative block w-full px-2 pr-5 leading-tight border border-solid rounded-sm; 20 | font-size: 0.8rem; 21 | padding-top: .4rem; 22 | padding-bottom: .4rem; 23 | border-color: $input-select-border-color; 24 | background-color: $input-select-background-color; 25 | color: $input-select-color; 26 | background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='41' height='26' viewBox='0 0 41 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 5.382l19.983 19.983L40.14 5.208 34.932 0 19.869 15.062 4.84.032z' fill-rule='evenodd'/%3E%3C/svg%3E"); 27 | background-position: right .4rem center; 28 | background-repeat: no-repeat; 29 | background-size: .75rem; 30 | -webkit-appearance: none; 31 | transition: all $input-select-transition-duration $input-select-transition-function; 32 | &:focus { 33 | @apply outline-none shadow-outline; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/sass/components/datatable/_loading.scss: -------------------------------------------------------------------------------- 1 | .vgt-loading { 2 | @apply absolute z-10 w-full; 3 | margin-top: 117px; 4 | &__content { 5 | padding: 1.2rem 1.85rem; 6 | background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibGRzLXNwaW5uZXIiIHdpZHRoPSI2MHB4IiAgaGVpZ2h0PSI2MHB4IiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj48ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+ICA8cmVjdCB4PSI0Ny41IiB5PSIyMi41IiByeD0iOS41IiByeT0iNC41IiB3aWR0aD0iNSIgaGVpZ2h0PSIxNSIgZmlsbD0iIzYwNjA2MCI+ICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjEuNHMiIGJlZ2luPSItMS4yODMzMzMzMzMzMzMzMzMycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4gIDwvcmVjdD48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzAgNTAgNTApIj4gIDxyZWN0IHg9IjQ3LjUiIHk9IjIyLjUiIHJ4PSI5LjUiIHJ5PSI0LjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjE1IiBmaWxsPSIjNjA2MDYwIj4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMS40cyIgYmVnaW49Ii0xLjE2NjY2NjY2NjY2NjY2NjdzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPiAgPC9yZWN0PjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg2MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTEuMDVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPiAgPC9yZWN0PjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuOTMzMzMzMzMzMzMzMzMzMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDEyMCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuODE2NjY2NjY2NjY2NjY2NXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE1MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuNjk5OTk5OTk5OTk5OTk5OHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDIxMCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuNDY2NjY2NjY2NjY2NjY2NnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI0MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuMzQ5OTk5OTk5OTk5OTk5OXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI3MCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuMjMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+ICA8L3JlY3Q+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPiAgPHJlY3QgeD0iNDcuNSIgeT0iMjIuNSIgcng9IjkuNSIgcnk9IjQuNSIgd2lkdGg9IjUiIGhlaWdodD0iMTUiIGZpbGw9IiM2MDYwNjAiPiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxLjRzIiBiZWdpbj0iLTAuMTE2NjY2NjY2NjY2NjY2NjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPiAgPC9yZWN0PjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMzAgNTAgNTApIj4gIDxyZWN0IHg9IjQ3LjUiIHk9IjIyLjUiIHJ4PSI5LjUiIHJ5PSI0LjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjE1IiBmaWxsPSIjNjA2MDYwIj4gICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMS40cyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPiAgPC9yZWN0PjwvZz48L3N2Zz4=); 7 | background-repeat: no-repeat; 8 | } 9 | } 10 | 11 | .vgt-inner-wrap.is-loading { 12 | @apply opacity-50 pointer-events-none; 13 | } 14 | -------------------------------------------------------------------------------- /src/sass/components/datatable/_rtl.scss: -------------------------------------------------------------------------------- 1 | .vgt-wrap.rtl { 2 | direction: rtl; 3 | .vgt-global-search__actions { 4 | @apply ml-0; 5 | margin-right: 0.45rem; 6 | .button + .button { 7 | @apply ml-0 mr-1; 8 | } 9 | } 10 | .vgt-table { 11 | th.line-numbers, th.vgt-checkbox-col { 12 | border-right: none; 13 | border-left: 1px solid $datatable-header-border-color; 14 | } 15 | th { 16 | &.sorting { 17 | [data-fa-pseudo-element=":before"] { 18 | right: auto; 19 | left: 1.7rem; 20 | } 21 | [data-fa-pseudo-element=":after"] { 22 | right: auto; 23 | left: 1rem; 24 | } 25 | } 26 | } 27 | tr:first-child th:first-child { 28 | border-top-right-radius: $datatable-border-radius; 29 | } 30 | tr:first-child th:last-child { 31 | border-top-left-radius: $datatable-border-radius; 32 | } 33 | tr:last-child th.line-numbers:first-child { 34 | border-bottom-right-radius: $datatable-border-radius; 35 | } 36 | } 37 | .vgt-selection-info-row { 38 | a { 39 | @apply mr-3; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/sass/components/datatable/_table-footer.scss: -------------------------------------------------------------------------------- 1 | .vgt-wrap__footer { 2 | font-size: 0.8rem; 3 | padding-top: 0.16rem; 4 | .footer__row-count { 5 | &__label, &__select { 6 | @apply inline-block align-middle; 7 | } 8 | &__label { 9 | font-weight: 600; 10 | } 11 | &__select { 12 | width: auto; 13 | height: auto; 14 | background: $datatable-row-count-select-background; 15 | color: inherit; 16 | &:focus { 17 | @apply outline-none shadow-outline; 18 | } 19 | } 20 | } 21 | .footer__navigation { 22 | &__page-btn, &__info, &__page-info { 23 | @apply inline-block align-middle; 24 | } 25 | &__page-btn { 26 | @apply rounded no-underline whitespace-no-wrap; 27 | font-weight: 600; 28 | &:focus { 29 | @apply outline-none shadow-outline; 30 | } 31 | &.disabled { 32 | @apply opacity-50 cursor-not-allowed; 33 | } 34 | .chevron { 35 | &.left::after { 36 | @apply hidden absolute; 37 | font-family: 'Font Awesome 5 Regular'; 38 | content: "\f359"; 39 | } 40 | &.right::after { 41 | @apply hidden absolute; 42 | font-family: 'Font Awesome 5 Regular'; 43 | content: "\f35a"; 44 | } 45 | } 46 | } 47 | &__info, &__page-info { 48 | @apply inline-block my-0 mx-5; 49 | } 50 | &__page-info { 51 | &__current-entry { 52 | @apply inline-block text-center mx-2 my-0 rounded; 53 | color: inherit; 54 | width: 2rem; 55 | height: auto; 56 | font-weight: 600; 57 | &:focus { 58 | @apply outline-none shadow-outline; 59 | } 60 | } 61 | } 62 | } 63 | } 64 | 65 | @media only screen and (max-width: 750px) { 66 | .vgt-wrap__footer .footer__navigation__info { 67 | display: none; 68 | } 69 | .vgt-wrap__footer .footer__navigation__page-btn { 70 | margin-left: 16px; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/sass/components/datatable/_table-th.scss: -------------------------------------------------------------------------------- 1 | .vgt-table { 2 | thead { 3 | border-bottom: 2px solid $datatable-header-border-color; 4 | th { 5 | @apply align-bottom pr-4 uppercase; 6 | background: $datatable-header-background-color; 7 | &.vgt-checkbox-col { 8 | @apply align-middle; 9 | } 10 | &.sorting-asc { 11 | [data-fa-pseudo-element=":before"] { 12 | @apply opacity-100; 13 | } 14 | } 15 | &.sorting-desc { 16 | [data-fa-pseudo-element=":after"] { 17 | @apply opacity-100; 18 | } 19 | } 20 | } 21 | th.line-numbers, th.vgt-checkbox-col { 22 | border-bottom: 2px solid $datatable-header-border-color; 23 | } 24 | } 25 | th { 26 | @apply relative py-2 px-4 align-middle; 27 | &.sorting { 28 | @apply cursor-pointer; 29 | .svg-inline--fa { 30 | @apply absolute opacity-50; 31 | font-size: 0.6rem; 32 | bottom: 1.2em; 33 | } 34 | [data-fa-pseudo-element=":before"] { 35 | right: 1.7rem; 36 | } 37 | [data-fa-pseudo-element=":after"] { 38 | right: 1rem; 39 | } 40 | } 41 | &.sorting:after { 42 | @apply hidden absolute; 43 | font-family: 'Font Awesome 5 Solid'; 44 | content: "\f063"; 45 | } 46 | &.sorting:before { 47 | @apply hidden; 48 | font-family: 'Font Awesome 5 Solid'; 49 | content: "\f062"; 50 | } 51 | } 52 | th.line-numbers, th.vgt-checkbox-col { 53 | @apply break-words py-0 px-3 text-center; 54 | border-bottom: 1px solid $datatable-row-border-color; 55 | border-right: 1px solid $datatable-row-border-color; 56 | width: 25px; 57 | background: $datatable-header-background-color; 58 | } 59 | tr:last-child { 60 | th.line-numbers, th.vgt-checkbox-col { 61 | border-bottom: none; 62 | } 63 | th.line-numbers:first-child { 64 | border-bottom-left-radius: $datatable-border-radius; 65 | } 66 | } 67 | th.filter-th { 68 | @apply py-2 px-4; 69 | border-top: 2px solid $datatable-header-border-color; 70 | } 71 | th.vgt-row-header { 72 | border-bottom: 2px solid $datatable-header-border-color; 73 | border-top: 2px solid $datatable-header-border-color; 74 | background-color: $datatable-header-background-color; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/sass/components/datatable/_table.scss: -------------------------------------------------------------------------------- 1 | table.vgt-table { 2 | @apply border-collapse w-full max-w-full table-auto; 3 | background-color: $datatable-background-color; 4 | border-radius: $datatable-border-radius; 5 | margin-bottom: 0.45rem; 6 | &.vgt-fixed-header { 7 | @apply absolute z-10; 8 | } 9 | .button { 10 | @apply px-3 py-1; 11 | font-size: 0.8rem; 12 | } 13 | .button + .button { 14 | @apply ml-1; 15 | } 16 | tr:last-child td { 17 | border-bottom: none; 18 | } 19 | tr.clickable { 20 | @apply cursor-pointer; 21 | &:hover { 22 | background-color: $datatable-clickable-row-hover-background-color; 23 | } 24 | } 25 | tr:first-child th:first-child { 26 | border-top-left-radius: $datatable-border-radius; 27 | } 28 | tr:first-child th:last-child { 29 | border-top-right-radius: $datatable-border-radius; 30 | } 31 | td { 32 | @apply py-2 px-4 align-top; 33 | border-bottom: 1px solid $datatable-row-border-color; 34 | color: $datatable-body-color; 35 | } 36 | tr:last-child td:last-child { 37 | border-bottom-right-radius: $datatable-border-radius; 38 | } 39 | tr:last-child td { 40 | border-bottom: none; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/sass/components/datatable/_utils.scss: -------------------------------------------------------------------------------- 1 | .vgt-right-align { 2 | @apply text-right; 3 | } 4 | 5 | .vgt-left-align { 6 | @apply text-left; 7 | } 8 | 9 | .vgt-center-align { 10 | @apply text-center; 11 | } 12 | 13 | .vgt-pull-left { 14 | float: left !important; 15 | } 16 | 17 | .vgt-pull-right { 18 | float: right !important; 19 | } 20 | 21 | .vgt-clearfix::after { 22 | display: block; 23 | content: ""; 24 | clear: both; 25 | } 26 | 27 | .vgt-responsive { 28 | @apply w-full overflow-x-auto; 29 | } 30 | 31 | .vgt-text-disabled { 32 | color: $datatable-text-disabled; 33 | } 34 | -------------------------------------------------------------------------------- /src/sass/components/datatable/_variables.scss: -------------------------------------------------------------------------------- 1 | // grey ramp 2 | $base-grey: #DCDFE6 !default; 3 | $light-grey: #E4E7ED !default; 4 | $lighter-grey: #EBEEF5 !default; 5 | $extra-light: #F2F6FC !default; 6 | 7 | $text-color: #606266 !default; 8 | $secondary-text-color: #909399 !default; 9 | $input-border-color: $base-grey !default; 10 | $border-color: $base-grey !default; 11 | $highlight-color: #F1F5FD !default; 12 | 13 | $thead-bg-color-1: #F4F5F8 !default; 14 | $thead-bg-color-2: #F1F3F6 !default; 15 | 16 | // link 17 | $link-color: #409eff; 18 | $notify-bg-color: #fdf9e8; 19 | $notify-fg-color: #b38d28; 20 | -------------------------------------------------------------------------------- /src/sass/components/datatable/_wrap.scss: -------------------------------------------------------------------------------- 1 | .vgt-wrap { 2 | @apply relative; 3 | } 4 | -------------------------------------------------------------------------------- /src/sass/components/form.scss: -------------------------------------------------------------------------------- 1 | .input { 2 | @apply relative block w-full pb-2; 3 | label { 4 | @apply inline-block mb-2; 5 | font-weight: 600; 6 | } 7 | input[type=color], input[type=date], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week] { 8 | @apply block w-full px-2 mb-2 leading-tight border border-solid rounded-sm; 9 | padding-top: .4rem; 10 | padding-bottom: .4rem; 11 | border-color: $input-box-border-color; 12 | -webkit-appearance: none; 13 | transition: all $input-box-transition-duration $input-box-transition-function; 14 | &:focus { 15 | @apply outline-none shadow-outline; 16 | } 17 | &:disabled { 18 | @apply pointer-events-none opacity-50; 19 | background: $input-box-disabled-background-color; 20 | } 21 | } 22 | input[type=file] { 23 | @apply absolute h-px w-px border-0 overflow-hidden p-0; 24 | background: none; 25 | clip: rect(0 0 0 0); 26 | clip-path: inset(50%); 27 | + label { 28 | @apply inline-block rounded-sm select-none align-middle whitespace-no-wrap px-3 py-1 cursor-pointer; 29 | background-color: $input-file-background-color; 30 | color: $input-file-color; 31 | font-weight: 600; 32 | transform: scale(1); 33 | transition: all $input-file-transition-duration $input-file-transition-function; 34 | &:hover { 35 | background-color: $input-file-background-color-hover; 36 | transform: scale(0.95); 37 | } 38 | &:active { 39 | transform: scale(0.9); 40 | } 41 | } 42 | &:focus { 43 | + label { 44 | @apply outline-none shadow-button; 45 | } 46 | } 47 | &:disabled { 48 | + label { 49 | @apply pointer-events-none opacity-50; 50 | } 51 | } 52 | } 53 | select:not([multiple]) { 54 | @apply relative block w-full px-2 pr-5 mb-2 leading-tight border border-solid rounded-sm; 55 | padding-top: .4rem; 56 | padding-bottom: .4rem; 57 | border-color: $input-select-border-color; 58 | background-color: $input-select-background-color; 59 | color: $input-select-color; 60 | background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDEnIGhlaWdodD0nMjYnIHZpZXdCb3g9JzAgMCA0MSAyNicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPScjNjA2MDYwJyBkPSdNMCA1LjM4MmwxOS45ODMgMTkuOTgzTDQwLjE0IDUuMjA4IDM0LjkzMiAwIDE5Ljg2OSAxNS4wNjIgNC44NC4wMzJ6JyBmaWxsLXJ1bGU9J2V2ZW5vZGQnLz48L3N2Zz4=); 61 | background-position: right .4rem center; 62 | background-repeat: no-repeat; 63 | background-size: .75rem; 64 | -webkit-appearance: none; 65 | transition: all $input-select-transition-duration $input-select-transition-function; 66 | &:focus { 67 | @apply outline-none shadow-outline; 68 | } 69 | &:disabled { 70 | @apply pointer-events-none opacity-50; 71 | background-color: $input-select-disabled-background-color; 72 | } 73 | } 74 | textarea { 75 | @apply block w-full px-2 mb-2 leading-tight border border-solid rounded-sm; 76 | padding-top: .4rem; 77 | padding-bottom: .4rem; 78 | border-color: $input-textarea-border-color; 79 | -webkit-appearance: none; 80 | min-height: 100px; 81 | transition: box-shadow $input-textarea-transition-duration $input-textarea-transition-function; 82 | &:focus { 83 | @apply outline-none shadow-outline; 84 | } 85 | &:disabled { 86 | @apply pointer-events-none opacity-50; 87 | background: $input-textarea-disabled-background-color; 88 | } 89 | } 90 | select[multiple] { 91 | @apply relative block w-full px-0 py-0 mb-2 leading-tight border border-solid rounded-sm; 92 | border-color: $input-select-border-color; 93 | background-color: $input-select-background-color; 94 | color: $input-select-color; 95 | -webkit-appearance: none; 96 | min-height: 100px; 97 | transition: all $input-select-transition-duration $input-select-transition-function; 98 | &:focus { 99 | @apply outline-none shadow-outline; 100 | option:checked { 101 | background: $input-select-multiple-selected-background-color linear-gradient(0deg, $input-select-multiple-selected-background-color 0%, $input-select-multiple-selected-background-color 100%); 102 | font-weight: 600; 103 | } 104 | } 105 | &:disabled { 106 | @apply pointer-events-none opacity-50; 107 | background: $input-select-disabled-background-color; 108 | } 109 | } 110 | .input-error { 111 | @apply block text-right; 112 | font-size: 0.8rem; 113 | color: $input-error-color; 114 | } 115 | } 116 | .checkbox { 117 | @apply mb-2; 118 | input[type=checkbox] { 119 | @apply mr-1 leading-tight; 120 | &:disabled { 121 | @apply pointer-events-none opacity-50; 122 | } 123 | } 124 | } 125 | .checkbox-label { 126 | @apply inline-block mb-2; 127 | font-weight: 600; 128 | } 129 | .radio { 130 | @apply mb-2; 131 | input[type=radio] { 132 | @apply mr-1 leading-tight; 133 | &:disabled { 134 | @apply pointer-events-none opacity-50; 135 | } 136 | } 137 | } 138 | .radio-label { 139 | @apply inline-block mb-2; 140 | font-weight: 600; 141 | } 142 | -------------------------------------------------------------------------------- /src/sass/components/navbar.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | @apply shadow py-2 px-4; 3 | background: $navbar-background; 4 | &.navbar-fixed { 5 | @apply fixed pin-t pin-l pin-r z-30; 6 | } 7 | .navbar-main { 8 | @apply relative flex flex-col flex-wrap items-center justify-between; 9 | @screen sm { 10 | @apply flex-row; 11 | } 12 | .navbar-brand { 13 | @apply inline-block text-xl leading-normal whitespace-no-wrap; 14 | padding-top: 0.3125rem; 15 | padding-bottom: 0.3125rem; 16 | > a { 17 | @apply no-underline; 18 | } 19 | } 20 | } 21 | } 22 | 23 | .navbar-dot, .navbar-status { 24 | background: $links-color-hover; 25 | } 26 | 27 | .navbar-menu { 28 | @apply flex flex-row items-center pl-0 mb-0 list-reset; 29 | padding-top: 0.3125rem; 30 | padding-bottom: 0.3125rem; 31 | > .navbar-item { 32 | @apply relative ml-4; 33 | &:nth-child(1) { 34 | @apply ml-0; 35 | } 36 | > .navbar-link, > .navbar-notify { 37 | @apply relative no-underline; 38 | } 39 | > .navbar-link.select { 40 | @apply underline; 41 | } 42 | > .navbar-notify { 43 | @apply mr-2; 44 | > .svg-inline--fa { 45 | @apply text-xl; 46 | } 47 | > .navbar-dot { 48 | @apply absolute rounded-full z-10 text-xs text-center; 49 | top: 2px; 50 | right: -6px; 51 | width: 14px; 52 | height: 14px; 53 | } 54 | } 55 | > .navbar-avatar { 56 | @apply flex flex-row items-center no-underline; 57 | > img { 58 | @apply ml-1; 59 | height: 2.3rem; 60 | width: 2.3rem; 61 | } 62 | > .navbar-avatar-info { 63 | @apply flex flex-col; 64 | > span:nth-child(1) { 65 | @apply text-sm mb-1; 66 | } 67 | > span:nth-child(2) { 68 | @apply flex uppercase flex-row items-center text-xs; 69 | font-weight: bold; 70 | > .navbar-status { 71 | @apply inline-block border-2 border-solid rounded-full mr-1; 72 | 73 | width: 12px; 74 | height: 12px; 75 | } 76 | } 77 | } 78 | } 79 | > .navbar-dropdown { 80 | @apply absolute rounded z-20 list-reset shadow; 81 | margin-top: 1.4rem; 82 | right: 0; 83 | width: 150px; 84 | background: $navbar-dropdown-background; 85 | border: 0.3rem solid $navbar-dropdown-background; 86 | > .navbar-dropdown-item { 87 | > .navbar-dropdown-link { 88 | @apply block rounded no-underline p-2 mb-1; 89 | background: $navbar-dropdown-link-background; 90 | transition: all $navbar-dropdown-link-transition-duration $navbar-dropdown-link-transition-function; 91 | &:hover, &:focus { 92 | background: $navbar-dropdown-link-background-hover; 93 | color: inherit; 94 | } 95 | &:last-child { 96 | @apply mb-0; 97 | } 98 | } 99 | } 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/sass/components/normalize.scss: -------------------------------------------------------------------------------- 1 | // Fonts 2 | html { 3 | font-family: $main-font-family; 4 | color: $main-text-color; 5 | } 6 | 7 | body { 8 | font-family: $main-font-family; 9 | background: $body-background-color; 10 | width: 100%; 11 | height: 100%; 12 | } 13 | 14 | ::selection { 15 | background: $selection-background-color; 16 | text-shadow: none; 17 | } 18 | 19 | a { 20 | color: $links-color; 21 | text-decoration: none; 22 | background-color: transparent; 23 | -webkit-text-decoration-skip: objects; 24 | transition: color $links-color-transition-function $links-color-transition-duration; 25 | } 26 | 27 | a:hover { 28 | color: $links-color-hover; 29 | text-decoration: underline; 30 | } 31 | 32 | a:not([href]):not([tabindex]) { 33 | color: inherit; 34 | text-decoration: none; 35 | } 36 | 37 | a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { 38 | color: inherit; 39 | text-decoration: none; 40 | } 41 | 42 | a:not([href]):not([tabindex]):focus { 43 | outline: 0; 44 | } 45 | 46 | hr { 47 | @apply h-px my-4; 48 | background: $horizonal-rule-background-color; 49 | } 50 | -------------------------------------------------------------------------------- /src/sass/components/notifications.scss: -------------------------------------------------------------------------------- 1 | .notifications { 2 | bottom: 1rem !important; 3 | right: 1rem !important; 4 | width: auto !important; 5 | max-width: 270px !important; 6 | @screen sm { 7 | max-width: 320px !important; 8 | } 9 | } 10 | .notification { 11 | @apply justify-between content-start px-4 py-4 m-2 rounded-sm; 12 | display: flex !important; 13 | background: $notification-background-color !important; 14 | color: $notification-color; 15 | box-shadow: $notification-shadow !important; 16 | .close { 17 | @apply ml-4 cursor-pointer; 18 | &:hover, &:focus { 19 | @apply ml-4 cursor-pointer opacity-75; 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/sass/components/pagination.scss: -------------------------------------------------------------------------------- 1 | .paginate { 2 | @apply flex justify-between; 3 | .previous, .next { 4 | .svg-inline--fa { 5 | font-size: 0.85rem; 6 | } 7 | } 8 | ul { 9 | @apply flex list-reset; 10 | li:not(:last-child) { 11 | @apply mr-2; 12 | span { 13 | @apply block px-2 py-2; 14 | } 15 | .select { 16 | @apply pointer-events-none; 17 | transform: scale(.9); 18 | background: $pagination-selected-background; 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/sass/components/panel.scss: -------------------------------------------------------------------------------- 1 | .panel { 2 | @apply flex -mx-4; 3 | @screen md { 4 | @apply -mx-2; 5 | } 6 | } 7 | 8 | .panel-card { 9 | @apply bg-white shadow rounded p-5 mb-5 w-full; 10 | } 11 | 12 | .panel-title { 13 | @apply mb-5; 14 | } 15 | -------------------------------------------------------------------------------- /src/sass/components/sidebar.scss: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | @apply w-4/5 px-4; 3 | @screen sm { 4 | margin-top: 7rem; 5 | } 6 | @screen md { 7 | @apply px-2; 8 | width: 30%; 9 | } 10 | @screen lg { 11 | @apply w-1/5 px-2; 12 | } 13 | .sidebar-title { 14 | @apply text-base uppercase mb-5; 15 | font-weight: 600; 16 | } 17 | .sidebar-menu { 18 | @apply list-reset flex flex-col mb-5 select-none; 19 | > .sidebar-item { 20 | > .sidebar-link { 21 | @apply block flex flex-row no-underline p-2 px-0; 22 | border-left: 2px solid $sidebar-line-color; 23 | .sidebar-link-icon { 24 | @apply block; 25 | .svg-inline--fa { 26 | @apply mx-2; 27 | color: $sidebar-icons-color; 28 | transition: color $sidebar-icons-color-transition-function $sidebar-icons-color-transition-duration; 29 | } 30 | } 31 | &:hover .sidebar-link-icon .svg-inline--fa { 32 | color: $sidebar-icons-color-hover; 33 | } 34 | &:hover { 35 | border-color: $sidebar-line-color-hover; 36 | } 37 | &.select { 38 | border-color: $sidebar-line-color-select; 39 | color: $links-color; 40 | .sidebar-link-icon .svg-inline--fa { 41 | color: $sidebar-icons-color-select; 42 | } 43 | } 44 | } 45 | > .sidebar-dropdown { 46 | @apply list-reset flex flex-col; 47 | margin-left: 1.25rem; 48 | > .sidebar-item { 49 | > .sidebar-link { 50 | @apply block flex flex-row no-underline p-2 px-4; 51 | border-left: 2px solid $sidebar-line-color; 52 | &:hover { 53 | border-color: $sidebar-line-color-hover; 54 | } 55 | &.select { 56 | border-color: $sidebar-line-color-select; 57 | color: $links-color; 58 | .sidebar-link-icon .svg-inline--fa { 59 | color: $sidebar-icons-color-select; 60 | } 61 | } 62 | } 63 | } 64 | } 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/sass/components/slideout.scss: -------------------------------------------------------------------------------- 1 | .slideout-menu { 2 | display: none; 3 | height: 100vh; 4 | position: fixed; 5 | top: 9rem; 6 | bottom: 0; 7 | z-index: 0; 8 | -webkit-overflow-scrolling: touch; 9 | overflow-y: scroll; 10 | @screen md { 11 | display: block; 12 | height: auto; 13 | position: relative; 14 | top: 0; 15 | overflow-y: hidden; 16 | } 17 | } 18 | 19 | .slideout-menu-left { 20 | left: 0; 21 | } 22 | 23 | .slideout-menu-right { 24 | right: 0; 25 | } 26 | 27 | .slideout-panel { 28 | background: $body-background-color; 29 | position: relative; 30 | z-index: 1; 31 | will-change: transform; 32 | } 33 | 34 | .slideout-open, 35 | .slideout-open body, 36 | .slideout-open .slideout-panel { 37 | overflow: hidden; 38 | } 39 | 40 | .slideout-open .slideout-menu { 41 | display: block; 42 | } 43 | -------------------------------------------------------------------------------- /src/sass/components/table.scss: -------------------------------------------------------------------------------- 1 | .table { 2 | @apply w-full border-collapse; 3 | background: $table-background-color; 4 | border-radius: $table-border-radius; 5 | thead, tfoot { 6 | @apply text-left uppercase; 7 | color: $table-header-and-footer-color; 8 | th { 9 | font-weight: 600; 10 | background: $table-header-and-footer-background-color; 11 | } 12 | } 13 | thead { 14 | border-bottom: 2px solid $table-header-and-footer-border-color; 15 | } 16 | tfoot { 17 | border-top: 2px solid $table-header-and-footer-border-color; 18 | } 19 | td, th { 20 | @apply py-2 px-4; 21 | color: $table-body-color; 22 | } 23 | td { 24 | border-bottom: 1px solid $table-row-border-color; 25 | } 26 | tr:first-child th:first-child { 27 | border-top-left-radius: $table-border-radius; 28 | } 29 | tr:first-child th:last-child { 30 | border-top-right-radius: $table-border-radius; 31 | } 32 | tr:last-child td:first-child { 33 | border-bottom-left-radius: $table-border-radius; 34 | } 35 | tr:last-child td:last-child { 36 | border-bottom-right-radius: $table-border-radius; 37 | } 38 | tr:last-child td { 39 | border-bottom: none; 40 | } 41 | tfoot { 42 | tr:last-child th:first-child { 43 | border-bottom-left-radius: $table-border-radius; 44 | } 45 | tr:last-child th:last-child { 46 | border-bottom-right-radius: $table-border-radius; 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/sass/components/utilities.scss: -------------------------------------------------------------------------------- 1 | .img-fluid { 2 | max-width: 100%; 3 | height: auto; 4 | } 5 | -------------------------------------------------------------------------------- /src/sass/components/variables.scss: -------------------------------------------------------------------------------- 1 | // Fonts 2 | $main-font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 3 | $main-text-color: config('colors.brand-grey-darker'); 4 | 5 | // body 6 | $body-background-color: config('colors.brand-grey-lightest'); 7 | 8 | // Selection 9 | $selection-background-color: config('colors.grey-light'); 10 | 11 | // Navbar 12 | $navbar-background: config('colors.white'); 13 | $navbar-dropdown-background: config('colors.white'); 14 | $navbar-dropdown-link-background: config('colors.white'); 15 | $navbar-dropdown-link-background-hover: config('colors.grey-light'); 16 | $navbar-dropdown-link-transition-duration: 100ms; 17 | $navbar-dropdown-link-transition-function: ease; 18 | 19 | // Links 20 | $links-color: $main-text-color; 21 | $links-color-hover: config('colors.grey-dark'); 22 | $links-color-transition-duration: 100ms; 23 | $links-color-transition-function: ease; 24 | 25 | // Sidebar 26 | $sidebar-links-color: $links-color; 27 | $sidebar-links-color-hover: config('colors.brand-grey-light'); 28 | $sidebar-icons-color: config('colors.brand-grey-light'); 29 | $sidebar-icons-color-hover: $links-color-hover; 30 | $sidebar-icons-color-transition-function: 100ms; 31 | $sidebar-icons-color-transition-duration: ease; 32 | $sidebar-icons-color-select: $links-color-hover; 33 | $sidebar-line-color: config('colors.grey-light'); 34 | $sidebar-line-color-hover: config('colors.grey'); 35 | $sidebar-line-color-select: $sidebar-icons-color-hover; 36 | $sidebar-dropdowns-slide-transition-function: 100ms; 37 | $sidebar-dropdowns-slide-transition-duration: ease; 38 | 39 | // Inputs 40 | //## input box ## 41 | $input-box-border-color: config('colors.brand-grey-light'); 42 | $input-box-transition-function: 200ms; 43 | $input-box-transition-duration: ease; 44 | $input-box-disabled-background-color: #f1f1f1; 45 | //## input file ## 46 | $input-file-background-color: #dae1e7; 47 | $input-file-background-color-hover: lighten(#dae1e7, 5%); 48 | $input-file-color: $main-text-color; 49 | $input-file-transition-function: 200ms; 50 | $input-file-transition-duration: ease; 51 | //## input select ## 52 | $input-select-background-color: config('colors.white'); 53 | $input-select-color: $main-text-color; 54 | $input-select-border-color: config('colors.brand-grey-light'); 55 | $input-select-multiple-selected-background-color: config('colors.grey-dark'); 56 | $input-select-transition-duration: 200ms; 57 | $input-select-transition-function: ease; 58 | $input-select-disabled-background-color: #f1f1f1; 59 | //## input textarea ## 60 | $input-textarea-border-color: config('colors.brand-grey-light'); 61 | $input-textarea-transition-duration: 200ms; 62 | $input-textarea-transition-function: ease; 63 | $input-textarea-disabled-background-color: #f1f1f1; 64 | //## input error ## 65 | $input-error-color: #a10000; 66 | 67 | // Buttons 68 | $button-color: $main-text-color; 69 | $button-background-color: #dae1e7; 70 | $button-background-color-hover: lighten(#dae1e7, 5%); 71 | $button-transition-function: 200ms; 72 | $button-transition-duration: ease; 73 | 74 | $success-button-background-color: #cbf2cf; 75 | $success-button-background-color-hover: lighten(#cbf2cf, 5%); 76 | 77 | $danger-button-background-color: #ffd0cd; 78 | $danger-button-background-color-hover: lighten(#ffd0cd, 5%); 79 | 80 | $info-button-background-color: #cef2f2; 81 | $info-button-background-color-hover: lighten(#cef2f2, 5%); 82 | 83 | $warning-button-background-color: #ffe1c6; 84 | $warning-button-background-color-hover: lighten(#ffe1c6, 5%); 85 | 86 | // Horizonal rule 87 | $horizonal-rule-background-color: config('colors.grey-light'); 88 | 89 | // Pagination 90 | $pagination-selected-background: darken(#dae1e7, 10%); 91 | 92 | // Notification 93 | $notification-background-color: config('colors.black'); 94 | $notification-color: config('colors.white'); 95 | $notification-shadow: 0 0px 8px black; 96 | 97 | // Alerts 98 | $success-alert-icon-color: #cbf2cf; 99 | $success-alert-border-top-color: darken(#cbf2cf, 15%); 100 | $success-alert-title-color: darken(#cbf2cf, 15%); 101 | 102 | $danger-alert-icon-color: #ffd0cd; 103 | $danger-alert-border-top-color: darken(#ffd0cd, 15%); 104 | $danger-alert-title-color: darken(#ffd0cd, 15%); 105 | 106 | $info-alert-icon-color: #cef2f2; 107 | $info-alert-border-top-color: darken(#cef2f2, 15%); 108 | $info-alert-title-color: darken(#cef2f2, 15%); 109 | 110 | $warning-alert-icon-color: #ffe1c6; 111 | $warning-alert-border-top-color: darken(#ffe1c6, 15%); 112 | $warning-alert-title-color: darken(#ffe1c6, 15%); 113 | 114 | // Table 115 | $table-background-color: config('colors.grey-lighter'); 116 | $table-border-radius: 0.25em; 117 | $table-header-and-footer-color: config('colors.grey-darker'); 118 | $table-header-and-footer-border-color: config('colors.grey'); 119 | $table-body-color: config('colors.grey-darker'); 120 | $table-row-border-color: config('colors.grey'); 121 | $table-header-and-footer-background-color: config('colors.brand-grey-lighter'); 122 | 123 | // Datatable 124 | $datatable-text-disabled: #909399; 125 | $datatable-background-color: config('colors.grey-lighter'); 126 | $datatable-border-radius: 0.25em; 127 | $datatable-body-color: config('colors.grey-darker'); 128 | $datatable-header-border-color: config('colors.grey'); 129 | $datatable-header-background-color: config('colors.brand-grey-lighter'); 130 | $datatable-row-border-color: config('colors.grey'); 131 | $datatable-clickable-row-hover-background-color: config('colors.grey-light'); 132 | $datatable-selection-info-background-color: #faf0c1; 133 | $datatable-selection-info-color: #d3aa3b; 134 | $datatable-row-count-select-background: config('colors.brand-grey-lighter'); -------------------------------------------------------------------------------- /src/sass/larastrator.scss: -------------------------------------------------------------------------------- 1 | @tailwind preflight; 2 | @tailwind components; 3 | 4 | @import './components/variables'; 5 | @import './components/normalize'; 6 | @import './components/navbar'; 7 | @import './components/slideout'; 8 | @import './components/panel'; 9 | @import './components/sidebar'; 10 | @import './components/content'; 11 | @import './components/notifications'; 12 | @import './components/breadcrumb'; 13 | @import './components/form'; 14 | @import './components/buttons'; 15 | @import './components/pagination'; 16 | @import './components/alerts'; 17 | @import './components/datatable'; 18 | @import './components/table'; 19 | @import './components/auth'; 20 | 21 | @tailwind utilities; 22 | -------------------------------------------------------------------------------- /step-by-step.md: -------------------------------------------------------------------------------- 1 | 1. Install Tailwindcss + Vue. 2 | 2. Setup Tailwindcss. 3 | 3. Setup Vuejs. 4 | 4. Setup Fonts + Font color. 5 | 5. Change 'container' confing in tailwind.js 6 | 6. Create the navbar. 7 | 7. Default links style. 8 | 8. Setup font awesome icons. 9 | 9. Create panel style. 10 | 10. Create sidebar style. 11 | 11. Install 'vue-slide-up-down' vue plugin. 12 | 12. Use 'vue-slide-up-down' plugin on the sidebar dropdown. 13 | 13. Configure fontawesome with pseudo elements and DOM MutationObserver. 14 | 14. Create the horizonal and the vertical forms. 15 | 15. Create the buttons. 16 | 16. Create the pagination. 17 | 17. Install 'vue-notification' for showing fast notes. 18 | 18. Create custom 'vue-notification' template. 19 | 19. Create the notifications component. 20 | 20. Create the alerts component. 21 | 21. Create the table compoenent. 22 | 22. Install 'vue-good-table' for making vuejs datatables. 23 | 23. Create the DataTable compoenent. 24 | 24. Create the DataTable remote mode loader. 25 | 25. Install 'vue-slideout' for sidebar slideout effect. 26 | 26. Create sidebar slideout using 'vue-slidout'. 27 | 27. Add disabled event styling for inputs and buttons. 28 | 28. Create 'input error' component. 29 | 29. Add 'navbar dropdown' styles. 30 | -------------------------------------------------------------------------------- /tailwind.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Tailwind - The Utility-First CSS Framework 4 | 5 | A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), 6 | David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). 7 | 8 | Welcome to the Tailwind config file. This is where you can customize 9 | Tailwind specifically for your project. Don't be intimidated by the 10 | length of this file. It's really just a big JavaScript object and 11 | we've done our very best to explain each section. 12 | 13 | View the full documentation at https://tailwindcss.com. 14 | 15 | 16 | |------------------------------------------------------------------------------- 17 | | The default config 18 | |------------------------------------------------------------------------------- 19 | | 20 | | This variable contains the default Tailwind config. You don't have 21 | | to use it, but it can sometimes be helpful to have available. For 22 | | example, you may choose to merge your custom configuration 23 | | values with some of the Tailwind defaults. 24 | | 25 | */ 26 | 27 | // let defaultConfig = require('tailwindcss/defaultConfig')() 28 | 29 | 30 | /* 31 | |------------------------------------------------------------------------------- 32 | | Colors https://tailwindcss.com/docs/colors 33 | |------------------------------------------------------------------------------- 34 | | 35 | | Here you can specify the colors used in your project. To get you started, 36 | | we've provided a generous palette of great looking colors that are perfect 37 | | for prototyping, but don't hesitate to change them for your project. You 38 | | own these colors, nothing will break if you change everything about them. 39 | | 40 | | We've used literal color names ("red", "blue", etc.) for the default 41 | | palette, but if you'd rather use functional names like "primary" and 42 | | "secondary", or even a numeric scale like "100" and "200", go for it. 43 | | 44 | */ 45 | 46 | let colors = { 47 | 'transparent': 'transparent', 48 | 49 | 'brand-grey-darker': '#606060', 50 | 'brand-grey-light': '#b6bec6', 51 | 'brand-grey-lighter': '#e9eef2', 52 | 'brand-grey-lightest': '#f7f7f7', 53 | 54 | 'black': '#22292f', 55 | 'grey-darkest': '#3d4852', 56 | 'grey-darker': '#606f7b', 57 | 'grey-dark': '#8795a1', 58 | 'grey': '#b8c2cc', 59 | 'grey-light': '#dae1e7', 60 | 'grey-lighter': '#f1f5f8', 61 | 'grey-lightest': '#f8fafc', 62 | 'white': '#ffffff', 63 | 64 | 'red-darkest': '#3b0d0c', 65 | 'red-darker': '#621b18', 66 | 'red-dark': '#cc1f1a', 67 | 'red': '#e3342f', 68 | 'red-light': '#ef5753', 69 | 'red-lighter': '#f9acaa', 70 | 'red-lightest': '#fcebea', 71 | 72 | 'orange-darkest': '#462a16', 73 | 'orange-darker': '#613b1f', 74 | 'orange-dark': '#de751f', 75 | 'orange': '#f6993f', 76 | 'orange-light': '#faad63', 77 | 'orange-lighter': '#fcd9b6', 78 | 'orange-lightest': '#fff5eb', 79 | 80 | 'yellow-darkest': '#453411', 81 | 'yellow-darker': '#684f1d', 82 | 'yellow-dark': '#f2d024', 83 | 'yellow': '#ffed4a', 84 | 'yellow-light': '#fff382', 85 | 'yellow-lighter': '#fff9c2', 86 | 'yellow-lightest': '#fcfbeb', 87 | 88 | 'green-darkest': '#0f2f21', 89 | 'green-darker': '#1a4731', 90 | 'green-dark': '#1f9d55', 91 | 'green': '#38c172', 92 | 'green-light': '#51d88a', 93 | 'green-lighter': '#a2f5bf', 94 | 'green-lightest': '#e3fcec', 95 | 96 | 'teal-darkest': '#0d3331', 97 | 'teal-darker': '#20504f', 98 | 'teal-dark': '#38a89d', 99 | 'teal': '#4dc0b5', 100 | 'teal-light': '#64d5ca', 101 | 'teal-lighter': '#a0f0ed', 102 | 'teal-lightest': '#e8fffe', 103 | 104 | 'blue-darkest': '#12283a', 105 | 'blue-darker': '#1c3d5a', 106 | 'blue-dark': '#2779bd', 107 | 'blue': '#3490dc', 108 | 'blue-light': '#6cb2eb', 109 | 'blue-lighter': '#bcdefa', 110 | 'blue-lightest': '#eff8ff', 111 | 112 | 'indigo-darkest': '#191e38', 113 | 'indigo-darker': '#2f365f', 114 | 'indigo-dark': '#5661b3', 115 | 'indigo': '#6574cd', 116 | 'indigo-light': '#7886d7', 117 | 'indigo-lighter': '#b2b7ff', 118 | 'indigo-lightest': '#e6e8ff', 119 | 120 | 'purple-darkest': '#21183c', 121 | 'purple-darker': '#382b5f', 122 | 'purple-dark': '#794acf', 123 | 'purple': '#9561e2', 124 | 'purple-light': '#a779e9', 125 | 'purple-lighter': '#d6bbfc', 126 | 'purple-lightest': '#f3ebff', 127 | 128 | 'pink-darkest': '#451225', 129 | 'pink-darker': '#6f213f', 130 | 'pink-dark': '#eb5286', 131 | 'pink': '#f66d9b', 132 | 'pink-light': '#fa7ea8', 133 | 'pink-lighter': '#ffbbca', 134 | 'pink-lightest': '#ffebef', 135 | } 136 | 137 | module.exports = { 138 | 139 | /* 140 | |----------------------------------------------------------------------------- 141 | | Colors https://tailwindcss.com/docs/colors 142 | |----------------------------------------------------------------------------- 143 | | 144 | | The color palette defined above is also assigned to the "colors" key of 145 | | your Tailwind config. This makes it easy to access them in your CSS 146 | | using Tailwind's config helper. For example: 147 | | 148 | | .error { color: config('colors.red') } 149 | | 150 | */ 151 | 152 | colors: colors, 153 | 154 | 155 | /* 156 | |----------------------------------------------------------------------------- 157 | | Screens https://tailwindcss.com/docs/responsive-design 158 | |----------------------------------------------------------------------------- 159 | | 160 | | Screens in Tailwind are translated to CSS media queries. They define the 161 | | responsive breakpoints for your project. By default Tailwind takes a 162 | | "mobile first" approach, where each screen size represents a minimum 163 | | viewport width. Feel free to have as few or as many screens as you 164 | | want, naming them in whatever way you'd prefer for your project. 165 | | 166 | | Tailwind also allows for more complex screen definitions, which can be 167 | | useful in certain situations. Be sure to see the full responsive 168 | | documentation for a complete list of options. 169 | | 170 | | Class name: .{screen}:{utility} 171 | | 172 | */ 173 | 174 | screens: { 175 | 'sm': '576px', 176 | 'md': '768px', 177 | 'lg': '992px', 178 | 'xl': '1200px', 179 | }, 180 | 181 | 182 | /* 183 | |----------------------------------------------------------------------------- 184 | | Fonts https://tailwindcss.com/docs/fonts 185 | |----------------------------------------------------------------------------- 186 | | 187 | | Here is where you define your project's font stack, or font families. 188 | | Keep in mind that Tailwind doesn't actually load any fonts for you. 189 | | If you're using custom fonts you'll need to import them prior to 190 | | defining them here. 191 | | 192 | | By default we provide a native font stack that works remarkably well on 193 | | any device or OS you're using, since it just uses the default fonts 194 | | provided by the platform. 195 | | 196 | | Class name: .font-{name} 197 | | 198 | */ 199 | 200 | fonts: { 201 | 'sans': [ 202 | 'Source\\ Sans\\ Pro', 203 | 'system-ui', 204 | 'BlinkMacSystemFont', 205 | '-apple-system', 206 | 'Segoe UI', 207 | 'Roboto', 208 | 'Oxygen', 209 | 'Ubuntu', 210 | 'Cantarell', 211 | 'Fira Sans', 212 | 'Droid Sans', 213 | 'Helvetica Neue', 214 | 'sans-serif', 215 | ], 216 | 'serif': [ 217 | 'Source\\ Sans\\ Pro', 218 | 'Constantia', 219 | 'Lucida Bright', 220 | 'Lucidabright', 221 | 'Lucida Serif', 222 | 'Lucida', 223 | 'DejaVu Serif', 224 | 'Bitstream Vera Serif', 225 | 'Liberation Serif', 226 | 'Georgia', 227 | 'serif', 228 | ], 229 | 'mono': [ 230 | 'Menlo', 231 | 'Monaco', 232 | 'Consolas', 233 | 'Liberation Mono', 234 | 'Courier New', 235 | 'monospace', 236 | ] 237 | }, 238 | 239 | 240 | /* 241 | |----------------------------------------------------------------------------- 242 | | Text sizes https://tailwindcss.com/docs/text-sizing 243 | |----------------------------------------------------------------------------- 244 | | 245 | | Here is where you define your text sizes. Name these in whatever way 246 | | makes the most sense to you. We use size names by default, but 247 | | you're welcome to use a numeric scale or even something else 248 | | entirely. 249 | | 250 | | By default Tailwind uses the "rem" unit type for most measurements. 251 | | This allows you to set a root font size which all other sizes are 252 | | then based on. That said, you are free to use whatever units you 253 | | prefer, be it rems, ems, pixels or other. 254 | | 255 | | Class name: .text-{size} 256 | | 257 | */ 258 | 259 | textSizes: { 260 | 'xs': '.75rem', // 12px 261 | 'sm': '.875rem', // 14px 262 | 'base': '1rem', // 16px 263 | 'lg': '1.125rem', // 18px 264 | 'xl': '1.25rem', // 20px 265 | '2xl': '1.5rem', // 24px 266 | '3xl': '1.875rem', // 30px 267 | '4xl': '2.25rem', // 36px 268 | '5xl': '3rem', // 48px 269 | }, 270 | 271 | 272 | /* 273 | |----------------------------------------------------------------------------- 274 | | Font weights https://tailwindcss.com/docs/font-weight 275 | |----------------------------------------------------------------------------- 276 | | 277 | | Here is where you define your font weights. We've provided a list of 278 | | common font weight names with their respective numeric scale values 279 | | to get you started. It's unlikely that your project will require 280 | | all of these, so we recommend removing those you don't need. 281 | | 282 | | Class name: .font-{weight} 283 | | 284 | */ 285 | 286 | fontWeights: { 287 | 'hairline': 100, 288 | 'thin': 200, 289 | 'light': 300, 290 | 'normal': 400, 291 | 'medium': 500, 292 | 'semibold': 600, 293 | 'bold': 700, 294 | 'extrabold': 800, 295 | 'black': 900, 296 | }, 297 | 298 | 299 | /* 300 | |----------------------------------------------------------------------------- 301 | | Leading (line height) https://tailwindcss.com/docs/line-height 302 | |----------------------------------------------------------------------------- 303 | | 304 | | Here is where you define your line height values, or as we call 305 | | them in Tailwind, leadings. 306 | | 307 | | Class name: .leading-{size} 308 | | 309 | */ 310 | 311 | leading: { 312 | 'none': 1, 313 | 'tight': 1.25, 314 | 'normal': 1.5, 315 | 'loose': 2, 316 | }, 317 | 318 | 319 | /* 320 | |----------------------------------------------------------------------------- 321 | | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing 322 | |----------------------------------------------------------------------------- 323 | | 324 | | Here is where you define your letter spacing values, or as we call 325 | | them in Tailwind, tracking. 326 | | 327 | | Class name: .tracking-{size} 328 | | 329 | */ 330 | 331 | tracking: { 332 | 'tight': '-0.05em', 333 | 'normal': '0', 334 | 'wide': '0.05em', 335 | }, 336 | 337 | 338 | /* 339 | |----------------------------------------------------------------------------- 340 | | Text colors https://tailwindcss.com/docs/text-color 341 | |----------------------------------------------------------------------------- 342 | | 343 | | Here is where you define your text colors. By default these use the 344 | | color palette we defined above, however you're welcome to set these 345 | | independently if that makes sense for your project. 346 | | 347 | | Class name: .text-{color} 348 | | 349 | */ 350 | 351 | textColors: colors, 352 | 353 | 354 | /* 355 | |----------------------------------------------------------------------------- 356 | | Background colors https://tailwindcss.com/docs/background-color 357 | |----------------------------------------------------------------------------- 358 | | 359 | | Here is where you define your background colors. By default these use 360 | | the color palette we defined above, however you're welcome to set 361 | | these independently if that makes sense for your project. 362 | | 363 | | Class name: .bg-{color} 364 | | 365 | */ 366 | 367 | backgroundColors: colors, 368 | 369 | 370 | /* 371 | |----------------------------------------------------------------------------- 372 | | Background sizes https://tailwindcss.com/docs/background-size 373 | |----------------------------------------------------------------------------- 374 | | 375 | | Here is where you define your background sizes. We provide some common 376 | | values that are useful in most projects, but feel free to add other sizes 377 | | that are specific to your project here as well. 378 | | 379 | | Class name: .bg-{size} 380 | | 381 | */ 382 | 383 | backgroundSize: { 384 | 'auto': 'auto', 385 | 'cover': 'cover', 386 | 'contain': 'contain', 387 | }, 388 | 389 | 390 | /* 391 | |----------------------------------------------------------------------------- 392 | | Border widths https://tailwindcss.com/docs/border-width 393 | |----------------------------------------------------------------------------- 394 | | 395 | | Here is where you define your border widths. Take note that border 396 | | widths require a special "default" value set as well. This is the 397 | | width that will be used when you do not specify a border width. 398 | | 399 | | Class name: .border{-side?}{-width?} 400 | | 401 | */ 402 | 403 | borderWidths: { 404 | default: '1px', 405 | '0': '0', 406 | '2': '2px', 407 | '4': '4px', 408 | '8': '8px', 409 | }, 410 | 411 | 412 | /* 413 | |----------------------------------------------------------------------------- 414 | | Border colors https://tailwindcss.com/docs/border-color 415 | |----------------------------------------------------------------------------- 416 | | 417 | | Here is where you define your border colors. By default these use the 418 | | color palette we defined above, however you're welcome to set these 419 | | independently if that makes sense for your project. 420 | | 421 | | Take note that border colors require a special "default" value set 422 | | as well. This is the color that will be used when you do not 423 | | specify a border color. 424 | | 425 | | Class name: .border-{color} 426 | | 427 | */ 428 | 429 | borderColors: global.Object.assign({ default: colors['grey-light'] }, colors), 430 | 431 | 432 | /* 433 | |----------------------------------------------------------------------------- 434 | | Border radius https://tailwindcss.com/docs/border-radius 435 | |----------------------------------------------------------------------------- 436 | | 437 | | Here is where you define your border radius values. If a `default` radius 438 | | is provided, it will be made available as the non-suffixed `.rounded` 439 | | utility. 440 | | 441 | | If your scale includes a `0` value to reset already rounded corners, it's 442 | | a good idea to put it first so other values are able to override it. 443 | | 444 | | Class name: .rounded{-side?}{-size?} 445 | | 446 | */ 447 | 448 | borderRadius: { 449 | 'none': '0', 450 | 'sm': '.125rem', 451 | default: '.25rem', 452 | 'lg': '.5rem', 453 | 'full': '9999px', 454 | }, 455 | 456 | 457 | /* 458 | |----------------------------------------------------------------------------- 459 | | Width https://tailwindcss.com/docs/width 460 | |----------------------------------------------------------------------------- 461 | | 462 | | Here is where you define your width utility sizes. These can be 463 | | percentage based, pixels, rems, or any other units. By default 464 | | we provide a sensible rem based numeric scale, a percentage 465 | | based fraction scale, plus some other common use-cases. You 466 | | can, of course, modify these values as needed. 467 | | 468 | | 469 | | It's also worth mentioning that Tailwind automatically escapes 470 | | invalid CSS class name characters, which allows you to have 471 | | awesome classes like .w-2/3. 472 | | 473 | | Class name: .w-{size} 474 | | 475 | */ 476 | 477 | width: { 478 | 'auto': 'auto', 479 | 'px': '1px', 480 | '1': '0.25rem', 481 | '2': '0.5rem', 482 | '3': '0.75rem', 483 | '4': '1rem', 484 | '5': '1.25rem', 485 | '6': '1.5rem', 486 | '8': '2rem', 487 | '10': '2.5rem', 488 | '12': '3rem', 489 | '16': '4rem', 490 | '24': '6rem', 491 | '32': '8rem', 492 | '48': '12rem', 493 | '64': '16rem', 494 | '1/2': '50%', 495 | '1/3': '33.33333%', 496 | '2/3': '66.66667%', 497 | '1/4': '25%', 498 | '3/4': '75%', 499 | '1/5': '20%', 500 | '2/5': '40%', 501 | '3/5': '60%', 502 | '4/5': '80%', 503 | '1/6': '16.66667%', 504 | '5/6': '83.33333%', 505 | 'full': '100%', 506 | 'screen': '100vw' 507 | }, 508 | 509 | 510 | /* 511 | |----------------------------------------------------------------------------- 512 | | Height https://tailwindcss.com/docs/height 513 | |----------------------------------------------------------------------------- 514 | | 515 | | Here is where you define your height utility sizes. These can be 516 | | percentage based, pixels, rems, or any other units. By default 517 | | we provide a sensible rem based numeric scale plus some other 518 | | common use-cases. You can, of course, modify these values as 519 | | needed. 520 | | 521 | | Class name: .h-{size} 522 | | 523 | */ 524 | 525 | height: { 526 | 'auto': 'auto', 527 | 'px': '1px', 528 | '1': '0.25rem', 529 | '2': '0.5rem', 530 | '3': '0.75rem', 531 | '4': '1rem', 532 | '5': '1.25rem', 533 | '6': '1.5rem', 534 | '8': '2rem', 535 | '10': '2.5rem', 536 | '12': '3rem', 537 | '16': '4rem', 538 | '24': '6rem', 539 | '32': '8rem', 540 | '48': '12rem', 541 | '64': '16rem', 542 | 'full': '100%', 543 | 'screen': '100vh' 544 | }, 545 | 546 | 547 | /* 548 | |----------------------------------------------------------------------------- 549 | | Minimum width https://tailwindcss.com/docs/min-width 550 | |----------------------------------------------------------------------------- 551 | | 552 | | Here is where you define your minimum width utility sizes. These can 553 | | be percentage based, pixels, rems, or any other units. We provide a 554 | | couple common use-cases by default. You can, of course, modify 555 | | these values as needed. 556 | | 557 | | Class name: .min-w-{size} 558 | | 559 | */ 560 | 561 | minWidth: { 562 | '0': '0', 563 | 'full': '100%', 564 | }, 565 | 566 | 567 | /* 568 | |----------------------------------------------------------------------------- 569 | | Minimum height https://tailwindcss.com/docs/min-height 570 | |----------------------------------------------------------------------------- 571 | | 572 | | Here is where you define your minimum height utility sizes. These can 573 | | be percentage based, pixels, rems, or any other units. We provide a 574 | | few common use-cases by default. You can, of course, modify these 575 | | values as needed. 576 | | 577 | | Class name: .min-h-{size} 578 | | 579 | */ 580 | 581 | minHeight: { 582 | '0': '0', 583 | 'full': '100%', 584 | 'screen': '100vh' 585 | }, 586 | 587 | 588 | /* 589 | |----------------------------------------------------------------------------- 590 | | Maximum width https://tailwindcss.com/docs/max-width 591 | |----------------------------------------------------------------------------- 592 | | 593 | | Here is where you define your maximum width utility sizes. These can 594 | | be percentage based, pixels, rems, or any other units. By default 595 | | we provide a sensible rem based scale and a "full width" size, 596 | | which is basically a reset utility. You can, of course, 597 | | modify these values as needed. 598 | | 599 | | Class name: .max-w-{size} 600 | | 601 | */ 602 | 603 | maxWidth: { 604 | 'xs': '20rem', 605 | 'sm': '30rem', 606 | 'md': '40rem', 607 | 'lg': '50rem', 608 | 'xl': '60rem', 609 | '2xl': '70rem', 610 | '3xl': '80rem', 611 | '4xl': '90rem', 612 | '5xl': '100rem', 613 | 'full': '100%', 614 | }, 615 | 616 | 617 | /* 618 | |----------------------------------------------------------------------------- 619 | | Maximum height https://tailwindcss.com/docs/max-height 620 | |----------------------------------------------------------------------------- 621 | | 622 | | Here is where you define your maximum height utility sizes. These can 623 | | be percentage based, pixels, rems, or any other units. We provide a 624 | | couple common use-cases by default. You can, of course, modify 625 | | these values as needed. 626 | | 627 | | Class name: .max-h-{size} 628 | | 629 | */ 630 | 631 | maxHeight: { 632 | 'full': '100%', 633 | 'screen': '100vh', 634 | }, 635 | 636 | 637 | /* 638 | |----------------------------------------------------------------------------- 639 | | Padding https://tailwindcss.com/docs/padding 640 | |----------------------------------------------------------------------------- 641 | | 642 | | Here is where you define your padding utility sizes. These can be 643 | | percentage based, pixels, rems, or any other units. By default we 644 | | provide a sensible rem based numeric scale plus a couple other 645 | | common use-cases like "1px". You can, of course, modify these 646 | | values as needed. 647 | | 648 | | Class name: .p{side?}-{size} 649 | | 650 | */ 651 | 652 | padding: { 653 | 'px': '1px', 654 | '0': '0', 655 | '1': '0.25rem', 656 | '2': '0.5rem', 657 | '3': '0.75rem', 658 | '4': '1rem', 659 | '5': '1.25rem', 660 | '6': '1.5rem', 661 | '8': '2rem', 662 | '10': '2.5rem', 663 | '12': '3rem', 664 | '16': '4rem', 665 | '20': '5rem', 666 | '24': '6rem', 667 | '32': '8rem', 668 | }, 669 | 670 | 671 | /* 672 | |----------------------------------------------------------------------------- 673 | | Margin https://tailwindcss.com/docs/margin 674 | |----------------------------------------------------------------------------- 675 | | 676 | | Here is where you define your margin utility sizes. These can be 677 | | percentage based, pixels, rems, or any other units. By default we 678 | | provide a sensible rem based numeric scale plus a couple other 679 | | common use-cases like "1px". You can, of course, modify these 680 | | values as needed. 681 | | 682 | | Class name: .m{side?}-{size} 683 | | 684 | */ 685 | 686 | margin: { 687 | 'auto': 'auto', 688 | 'px': '1px', 689 | '0': '0', 690 | '1': '0.25rem', 691 | '2': '0.5rem', 692 | '3': '0.75rem', 693 | '4': '1rem', 694 | '5': '1.25rem', 695 | '6': '1.5rem', 696 | '8': '2rem', 697 | '10': '2.5rem', 698 | '12': '3rem', 699 | '16': '4rem', 700 | '20': '5rem', 701 | '24': '6rem', 702 | '32': '8rem', 703 | }, 704 | 705 | 706 | /* 707 | |----------------------------------------------------------------------------- 708 | | Negative margin https://tailwindcss.com/docs/negative-margin 709 | |----------------------------------------------------------------------------- 710 | | 711 | | Here is where you define your negative margin utility sizes. These can 712 | | be percentage based, pixels, rems, or any other units. By default we 713 | | provide matching values to the padding scale since these utilities 714 | | generally get used together. You can, of course, modify these 715 | | values as needed. 716 | | 717 | | Class name: .-m{side?}-{size} 718 | | 719 | */ 720 | 721 | negativeMargin: { 722 | 'px': '1px', 723 | '0': '0', 724 | '1': '0.25rem', 725 | '2': '0.5rem', 726 | '3': '0.75rem', 727 | '4': '1rem', 728 | '5': '1.25rem', 729 | '6': '1.5rem', 730 | '8': '2rem', 731 | '10': '2.5rem', 732 | '12': '3rem', 733 | '16': '4rem', 734 | '20': '5rem', 735 | '24': '6rem', 736 | '32': '8rem', 737 | }, 738 | 739 | 740 | /* 741 | |----------------------------------------------------------------------------- 742 | | Shadows https://tailwindcss.com/docs/shadows 743 | |----------------------------------------------------------------------------- 744 | | 745 | | Here is where you define your shadow utilities. As you can see from 746 | | the defaults we provide, it's possible to apply multiple shadows 747 | | per utility using comma separation. 748 | | 749 | | If a `default` shadow is provided, it will be made available as the non- 750 | | suffixed `.shadow` utility. 751 | | 752 | | Class name: .shadow-{size?} 753 | | 754 | */ 755 | 756 | shadows: { 757 | default: '0 2px 4px 0 rgba(0,0,0,0.10)', 758 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 759 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 760 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 761 | 'outline': '0 0 0 3px rgba(201, 210, 218, 0.5)', 762 | 'none': 'none', 763 | 'button': '0 0 0 2px rgba(33, 150, 243, 0.3)', 764 | 'alert': '0 1px 1px 0px rgba(0, 0, 0, 0.1)', 765 | }, 766 | 767 | 768 | /* 769 | |----------------------------------------------------------------------------- 770 | | Z-index https://tailwindcss.com/docs/z-index 771 | |----------------------------------------------------------------------------- 772 | | 773 | | Here is where you define your z-index utility values. By default we 774 | | provide a sensible numeric scale. You can, of course, modify these 775 | | values as needed. 776 | | 777 | | Class name: .z-{index} 778 | | 779 | */ 780 | 781 | zIndex: { 782 | 'auto': 'auto', 783 | '0': 0, 784 | '10': 10, 785 | '20': 20, 786 | '30': 30, 787 | '40': 40, 788 | '50': 50, 789 | }, 790 | 791 | 792 | /* 793 | |----------------------------------------------------------------------------- 794 | | Opacity https://tailwindcss.com/docs/opacity 795 | |----------------------------------------------------------------------------- 796 | | 797 | | Here is where you define your opacity utility values. By default we 798 | | provide a sensible numeric scale. You can, of course, modify these 799 | | values as needed. 800 | | 801 | | Class name: .opacity-{name} 802 | | 803 | */ 804 | 805 | opacity: { 806 | '0': '0', 807 | '25': '.25', 808 | '50': '.5', 809 | '75': '.75', 810 | '100': '1', 811 | }, 812 | 813 | 814 | /* 815 | |----------------------------------------------------------------------------- 816 | | SVG fill https://tailwindcss.com/docs/svg 817 | |----------------------------------------------------------------------------- 818 | | 819 | | Here is where you define your SVG fill colors. By default we just provide 820 | | `fill-current` which sets the fill to the current text color. This lets you 821 | | specify a fill color using existing text color utilities and helps keep the 822 | | generated CSS file size down. 823 | | 824 | | Class name: .fill-{name} 825 | | 826 | */ 827 | 828 | svgFill: { 829 | 'current': 'currentColor', 830 | }, 831 | 832 | 833 | /* 834 | |----------------------------------------------------------------------------- 835 | | SVG stroke https://tailwindcss.com/docs/svg 836 | |----------------------------------------------------------------------------- 837 | | 838 | | Here is where you define your SVG stroke colors. By default we just provide 839 | | `stroke-current` which sets the stroke to the current text color. This lets 840 | | you specify a stroke color using existing text color utilities and helps 841 | | keep the generated CSS file size down. 842 | | 843 | | Class name: .stroke-{name} 844 | | 845 | */ 846 | 847 | svgStroke: { 848 | 'current': 'currentColor', 849 | }, 850 | 851 | 852 | /* 853 | |----------------------------------------------------------------------------- 854 | | Modules https://tailwindcss.com/docs/configuration#modules 855 | |----------------------------------------------------------------------------- 856 | | 857 | | Here is where you control which modules are generated and what variants are 858 | | generated for each of those modules. 859 | | 860 | | Currently supported variants: 861 | | - responsive 862 | | - hover 863 | | - focus 864 | | - active 865 | | - group-hover 866 | | 867 | | To disable a module completely, use `false` instead of an array. 868 | | 869 | */ 870 | 871 | modules: { 872 | appearance: ['responsive'], 873 | backgroundAttachment: ['responsive'], 874 | backgroundColors: ['responsive', 'hover', 'focus'], 875 | backgroundPosition: ['responsive'], 876 | backgroundRepeat: ['responsive'], 877 | backgroundSize: ['responsive'], 878 | borderCollapse: [], 879 | borderColors: ['responsive', 'hover', 'focus'], 880 | borderRadius: ['responsive'], 881 | borderStyle: ['responsive'], 882 | borderWidths: ['responsive'], 883 | cursor: ['responsive'], 884 | display: ['responsive'], 885 | flexbox: ['responsive'], 886 | float: ['responsive'], 887 | fonts: false, 888 | fontWeights: ['responsive', 'hover', 'focus'], 889 | height: ['responsive'], 890 | leading: ['responsive'], 891 | lists: ['responsive'], 892 | margin: ['responsive'], 893 | maxHeight: ['responsive'], 894 | maxWidth: ['responsive'], 895 | minHeight: ['responsive'], 896 | minWidth: ['responsive'], 897 | negativeMargin: ['responsive'], 898 | opacity: ['responsive'], 899 | outline: ['focus'], 900 | overflow: ['responsive'], 901 | padding: ['responsive'], 902 | pointerEvents: ['responsive'], 903 | position: ['responsive'], 904 | resize: ['responsive'], 905 | shadows: ['responsive', 'hover', 'focus'], 906 | svgFill: [], 907 | svgStroke: [], 908 | tableLayout: ['responsive'], 909 | textAlign: ['responsive'], 910 | textColors: ['responsive', 'hover', 'focus'], 911 | textSizes: ['responsive'], 912 | textStyle: ['responsive', 'hover', 'focus'], 913 | tracking: ['responsive'], 914 | userSelect: ['responsive'], 915 | verticalAlign: ['responsive'], 916 | visibility: ['responsive'], 917 | whitespace: ['responsive'], 918 | width: ['responsive', 'hover'], 919 | zIndex: ['responsive'], 920 | }, 921 | 922 | 923 | /* 924 | |----------------------------------------------------------------------------- 925 | | Plugins https://tailwindcss.com/docs/plugins 926 | |----------------------------------------------------------------------------- 927 | | 928 | | Here is where you can register any plugins you'd like to use in your 929 | | project. Tailwind's built-in `container` plugin is enabled by default to 930 | | give you a Bootstrap-style responsive container component out of the box. 931 | | 932 | | Be sure to view the complete plugin documentation to learn more about how 933 | | the plugin system works. 934 | | 935 | */ 936 | 937 | plugins: [ 938 | require('tailwindcss/plugins/container')({ 939 | center: true, 940 | padding: '1rem', 941 | }), 942 | ], 943 | 944 | 945 | /* 946 | |----------------------------------------------------------------------------- 947 | | Advanced Options https://tailwindcss.com/docs/configuration#options 948 | |----------------------------------------------------------------------------- 949 | | 950 | | Here is where you can tweak advanced configuration options. We recommend 951 | | leaving these options alone unless you absolutely need to change them. 952 | | 953 | */ 954 | 955 | options: { 956 | prefix: '', 957 | important: false, 958 | separator: ':', 959 | }, 960 | 961 | } 962 | -------------------------------------------------------------------------------- /webpack.mix.js: -------------------------------------------------------------------------------- 1 | let mix = require('laravel-mix'); 2 | let tailwindcss = require('tailwindcss'); 3 | 4 | 5 | mix.setPublicPath('docs') 6 | .setResourceRoot('http://larastrator.alpha/'); 7 | 8 | if (!mix.inProduction()) { 9 | mix.js('src/javascript/app.js', 'docs/javascript') 10 | .sass('src/sass/larastrator.scss', 'docs/css') 11 | .copy('docs/css/app.css', 'dist/larastrator.css') 12 | .copyDirectory('src/images', 'docs/images') 13 | .options({ 14 | processCssUrls: false, 15 | postCss: [ 16 | tailwindcss('./tailwind.js') 17 | ], 18 | }); 19 | } else { 20 | mix.minify('dist/larastrator.css'); 21 | } 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | // Full API 31 | // mix.js(src, output); 32 | // mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation. 33 | // mix.extract(vendorLibs); 34 | // mix.sass(src, output); 35 | // mix.standaloneSass('src', output); <-- Faster, but isolated from Webpack. 36 | // mix.fastSass('src', output); <-- Alias for mix.standaloneSass(). 37 | // mix.less(src, output); 38 | // mix.stylus(src, output); 39 | // mix.browserSync('my-site.dev'); 40 | // mix.combine(files, destination); 41 | // mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation. 42 | // mix.copy(from, to); 43 | // mix.copyDirectory(fromDir, toDir); 44 | // mix.minify(file); 45 | // mix.sourceMaps(); // Enable sourcemaps 46 | // mix.version(); // Enable versioning. 47 | // mix.disableNotifications(); 48 | // mix.setPublicPath('path/to/public'); 49 | // mix.setResourceRoot('prefix/for/resource/locators'); 50 | // mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin. 51 | // mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly. 52 | // mix.then(function () {}) <-- Will be triggered each time Webpack finishes building. 53 | // mix.options({ 54 | // extractVueStyles: false, // Extract .vue component styling to file, rather than inline. 55 | // processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched. 56 | // purifyCss: false, // Remove unused CSS selectors. 57 | // uglify: {}, // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin 58 | // postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md 59 | // }); 60 | --------------------------------------------------------------------------------