From 2431a6c2a8ebf1bf68bd16ba6115298aa159d40f Mon Sep 17 00:00:00 2001 From: pvincent Date: Thu, 27 Jun 2024 18:47:12 +0400 Subject: [PATCH] tailwind structured folder --- app/assets/stylesheets/application.css | 18 ++++---------- .../stylesheets/application.tailwind.css | 22 ++++++++--------- app/assets/stylesheets/css/main.css | 5 ++++ app/assets/stylesheets/{ => css}/toastify.css | 9 ++++--- app/assets/stylesheets/{ => css}/turbo.css | 0 app/assets/stylesheets/navbar.css | 21 ---------------- .../stylesheets/tailwind/main.tailwind.css | 12 ++++++++++ .../stylesheets/tailwind/navbar.tailwind.css | 24 +++++++++++++++++++ app/views/layouts/_navbar.html.erb | 4 +++- config/initializers/rails_live_reload.rb | 4 +++- config/tailwind.config.js | 4 ++++ 11 files changed, 72 insertions(+), 51 deletions(-) create mode 100644 app/assets/stylesheets/css/main.css rename app/assets/stylesheets/{ => css}/toastify.css (94%) rename app/assets/stylesheets/{ => css}/turbo.css (100%) delete mode 100644 app/assets/stylesheets/navbar.css create mode 100644 app/assets/stylesheets/tailwind/main.tailwind.css create mode 100644 app/assets/stylesheets/tailwind/navbar.tailwind.css diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 288b9ab..30237e6 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -1,15 +1,5 @@ /* - * This is a manifest file that'll be compiled into application.css, which will include all the files - * listed below. - * - * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's - * vendor/assets/stylesheets directory can be referenced here using a relative path. - * - * You're free to add application-wide styles to this file and they'll appear at the bottom of the - * compiled file so the styles you add here take precedence over styles defined in any other CSS - * files in this directory. Styles in this file should be added after the last require_* statement. - * It is generally better to create a new file per style scope. - * - *= require_tree . - *= require_self - */ +* this manifest loads automatically any css file from the ./css folder +* +*= require_tree ./css +*/ \ No newline at end of file diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index 08d74a7..02e9fc6 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -1,13 +1,13 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +/* From Vendor */ +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; -/* +/* +* Your stylesheets ending with tailwind.css +* Bear in mind, you have to declare @import for each new file below +* The .css suffix might be omitted! +*/ +@import "tailwind/main.tailwind"; +@import "tailwind/navbar.tailwind"; -@layer components { - .btn-primary { - @apply py-2 px-4 bg-blue-200; - } -} - -*/ \ No newline at end of file diff --git a/app/assets/stylesheets/css/main.css b/app/assets/stylesheets/css/main.css new file mode 100644 index 0000000..287adf2 --- /dev/null +++ b/app/assets/stylesheets/css/main.css @@ -0,0 +1,5 @@ +:root { + --color-primary: #00a19a; + --color-secondary: #535786; + --color-tertiary: yellow; +} \ No newline at end of file diff --git a/app/assets/stylesheets/toastify.css b/app/assets/stylesheets/css/toastify.css similarity index 94% rename from app/assets/stylesheets/toastify.css rename to app/assets/stylesheets/css/toastify.css index 97390c5..6489ae6 100644 --- a/app/assets/stylesheets/toastify.css +++ b/app/assets/stylesheets/css/toastify.css @@ -19,8 +19,9 @@ } .toastify-alert { - background: linear-gradient(135deg, darkred, red) + background: linear-gradient(135deg, darkred, blue) } + .toastify.on { opacity: 1; top: 0; @@ -82,11 +83,13 @@ } @media only screen and (max-width: 360px) { - .toastify-right, .toastify-left { + + .toastify-right, + .toastify-left { margin-left: auto; margin-right: auto; left: 0; right: 0; max-width: fit-content; } -} +} \ No newline at end of file diff --git a/app/assets/stylesheets/turbo.css b/app/assets/stylesheets/css/turbo.css similarity index 100% rename from app/assets/stylesheets/turbo.css rename to app/assets/stylesheets/css/turbo.css diff --git a/app/assets/stylesheets/navbar.css b/app/assets/stylesheets/navbar.css deleted file mode 100644 index 6894899..0000000 --- a/app/assets/stylesheets/navbar.css +++ /dev/null @@ -1,21 +0,0 @@ -nav { - background-color: black; - color: azure; - - p { - background-color: aqua; - } - - - p:hover { - background-color: blueviolet; - } - - &:hover p { - background-color: yellow; - } -} - -p { - background-color: red; -} \ No newline at end of file diff --git a/app/assets/stylesheets/tailwind/main.tailwind.css b/app/assets/stylesheets/tailwind/main.tailwind.css new file mode 100644 index 0000000..be5ce68 --- /dev/null +++ b/app/assets/stylesheets/tailwind/main.tailwind.css @@ -0,0 +1,12 @@ +/* +@layer components { + .btn-primary { + @apply py-2 px-4 bg-blue-200; + } +} + +*/ + +.title { + @apply bg-gradient-to-r from-color-primary to-color-secondary text-yellow-400 sm:rounded-t-lg; +} \ No newline at end of file diff --git a/app/assets/stylesheets/tailwind/navbar.tailwind.css b/app/assets/stylesheets/tailwind/navbar.tailwind.css new file mode 100644 index 0000000..661344d --- /dev/null +++ b/app/assets/stylesheets/tailwind/navbar.tailwind.css @@ -0,0 +1,24 @@ +nav { + @apply mb-4 text-red-300 bg-gradient-to-r from-color-primary to-color-secondary; + + p { + background-color: aqua; + } + + + p:hover { + background-color: blueviolet; + } + + &:hover p { + background-color: green; + } + + span { + @apply bg-gradient-to-r from-color-primary to-color-secondary text-black sm:rounded-t-lg p-4; + } +} + +p { + background-color: yellow; +} \ No newline at end of file diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb index 69e6f7b..1b9a371 100644 --- a/app/views/layouts/_navbar.html.erb +++ b/app/views/layouts/_navbar.html.erb @@ -1,4 +1,6 @@ -