├── .gitignore
├── README.md
├── composer.json
├── src
    └── NovaStripeThemeServiceProvider.php
└── resources
    └── css
        └── theme.css


/.gitignore:
--------------------------------------------------------------------------------
 1 | /dist
 2 | /.idea
 3 | /vendor
 4 | /node_modules
 5 | package-lock.json
 6 | composer.phar
 7 | composer.lock
 8 | phpunit.xml
 9 | .phpunit.result.cache
10 | .DS_Store
11 | Thumbs.db
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Laravel Nova Stripe Theme
2 | This package provides a Laravel Nova theme that closely resembles Stripe's dashboard. This theme is a work in progress and due to technical constraints it will not be perfect.
3 | 
4 | To install it simply run `composer require jameslkingsley/nova-stripe-theme`.
5 | 
6 | ![Image](https://i.imgur.com/W2FI6hu.png)
7 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "jameslkingsley/nova-stripe-theme",
 3 |     "description": "A Laravel Nova theme closely resembling Stripe.",
 4 |     "keywords": [
 5 |         "laravel",
 6 |         "nova"
 7 |     ],
 8 |     "license": "MIT",
 9 |     "require": {
10 |         "php": ">=7.1.0"
11 |     },
12 |     "autoload": {
13 |         "psr-4": {
14 |             "Kingsley\\NovaStripeTheme\\": "src/"
15 |         }
16 |     },
17 |     "extra": {
18 |         "laravel": {
19 |             "providers": [
20 |                 "Kingsley\\NovaStripeTheme\\NovaStripeThemeServiceProvider"
21 |             ]
22 |         }
23 |     },
24 |     "config": {
25 |         "sort-packages": true
26 |     },
27 |     "minimum-stability": "dev",
28 |     "prefer-stable": true
29 | }
30 | 


--------------------------------------------------------------------------------
/src/NovaStripeThemeServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Kingsley\NovaStripeTheme;
 4 | 
 5 | use Laravel\Nova\Nova;
 6 | use Laravel\Nova\Events\ServingNova;
 7 | use Illuminate\Support\ServiceProvider;
 8 | 
 9 | class NovaStripeThemeServiceProvider extends ServiceProvider
10 | {
11 |     /**
12 |      * Bootstrap any application services.
13 |      *
14 |      * @return void
15 |      */
16 |     public function boot()
17 |     {
18 |         Nova::serving(function (ServingNova $event) {
19 |             Nova::style('NovaStripeTheme', __DIR__.'/../resources/css/theme.css');
20 |         });
21 |     }
22 | 
23 |     /**
24 |      * Register any application services.
25 |      *
26 |      * @return void
27 |      */
28 |     public function register()
29 |     {
30 |         //
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/resources/css/theme.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --transparent: transparent;
  3 |     --black: #22292f;
  4 |     --white: white;
  5 |     --40: #e3e8ee;
  6 |     --white-50: rgba(255, 255, 255, 0.5);
  7 |     --danger: #e74444;
  8 |     --success: #21b978;
  9 |     --warning: #ffeb3b;
 10 |     --info: #03a9f4;
 11 |     --primary: #586ada;
 12 |     --primary-dark: #586ada;
 13 |     --primary-70: #2E2E5E;
 14 |     --primary-50: #8282BA;
 15 |     --primary-30: #B7B7D8;
 16 |     --primary-10: #EDEDF5;
 17 |     --logo: transparent;
 18 |     --sidebar-icon: #22292f7a;
 19 |     --shadow: 0 0 0 1px rgba(49,49,93,.03), 0 2px 5px 0 rgba(49,49,93,.1), 0 1px 2px 0 rgba(0,0,0,.08);
 20 |     --shadow-button: 0 0 0 1px rgba(88,106,218,.1), 0 2px 5px 0 rgba(88,106,218,.08), 0 1px 1.5px 0 rgba(0,0,0,.07), 0 1px 2px 0 rgba(0,0,0,.08), 0 0 0 0 transparent;
 21 |     --shadow-button-hover: 0 0 0 1px rgba(43,45,80,.1), 0 2px 5px 0 rgba(43,45,80,.1), 0 3px 9px 0 rgba(43,45,80,.08), 0 1px 1.5px 0 rgba(0,0,0,.08), 0 1px 2px 0 rgba(0,0,0,.08);
 22 |     --shadow-card: 0 7px 14px 0 rgba(59,65,94,.1), 0 3px 6px 0 rgba(0,0,0,.07);
 23 | }
 24 | 
 25 | #nova > div > .content > .bg-white {
 26 |     background: transparent;
 27 |     box-shadow: none;
 28 | }
 29 | 
 30 | #nova > div > .content > div > a {
 31 |     display: none;
 32 | }
 33 | 
 34 | .px-view, .py-view {
 35 |     padding: 1.5rem;
 36 | }
 37 | 
 38 | .bg-grad-sidebar {
 39 |     width: 250px;
 40 |     background: transparent;
 41 | }
 42 | 
 43 | .bg-grad-sidebar h3,
 44 | .bg-grad-sidebar h3 span,
 45 | .bg-grad-sidebar h4,
 46 | .bg-grad-sidebar h4 span,
 47 | .bg-grad-sidebar a {
 48 |     color: var(--black);
 49 |     font-weight: 600;
 50 |     font-size: 14px;
 51 | }
 52 | 
 53 | .bg-grad-sidebar ul li {
 54 |     margin-bottom: 0.75rem;
 55 | }
 56 | 
 57 | .bg-grad-sidebar a:not(.sidebar-label) {
 58 |     margin-left: 1.75rem;
 59 | }
 60 | 
 61 | .sidebar-label {
 62 |     font-size: 16px !important;
 63 | }
 64 | 
 65 | .sidebar-icon {
 66 |     width: 1rem;
 67 |     height: 1rem;
 68 | }
 69 | 
 70 | .sidebar-icon path {
 71 |     fill: var(--black);
 72 | }
 73 | 
 74 | .bg-grad-sidebar a.router-link-exact-active {
 75 |     font-weight: bold;
 76 | }
 77 | 
 78 | .card {
 79 |     border-radius: 4px;
 80 |     box-shadow: var(--shadow-card);
 81 | }
 82 | 
 83 | .pt-header {
 84 |     padding-top: 5rem;
 85 | }
 86 | 
 87 | .form-input {
 88 |     border-radius: 4px;
 89 |     box-shadow: var(--shadow);
 90 | }
 91 | 
 92 | .btn-default {
 93 |     border-radius: 4px;
 94 |     text-shadow: none;
 95 |     box-shadow: var(--shadow-button);
 96 | }
 97 | 
 98 | .btn-default:hover {
 99 |     box-shadow: var(--shadow-button-hover);
100 | }
101 | 
102 | .form-input:focus,
103 | .form-input:active,
104 | .btn-default:focus,
105 | .btn-default:active {
106 |     text-shadow: none;
107 |     border-radius: 4px;
108 |     text-shadow: none;
109 |     box-shadow: var(--shadow);
110 | }
111 | 
112 | [dusk="global-search"], [dusk="global-search"]:focus {
113 |     border-width: 0;
114 |     border-radius: 4px;
115 |     box-shadow: var(--shadow);
116 |     background: white;
117 | }
118 | 
119 | .bg-80 {
120 |     background-color: transparent !important;
121 | }
122 | 


--------------------------------------------------------------------------------