nitro_rails 0.1.0 → 0.1.2

data/app/assets/stylesheets/nitro_rails/modules/checkbox.css

@@ -0,0 +1,42 @@
+.checkbox [type='checkbox'] {
+  display: none;
+}
+
+.checkbox {
+  position: relative;
+  cursor: pointer;
+}
+
+.checkbox::before {
+  content: "";
+  display: block;
+  border: 2px solid var(--gray);
+  border-radius: 3px;
+  width: 15px;
+  height: 15px;
+}
+
+.checkbox::after {
+  content: "";
+  position: absolute;
+  display: block;
+  border-radius: 2px;
+  width: 13px;
+  height: 13px;
+  top: 3px;
+  right: 3px;
+}
+
+.checkbox:hover::after {
+  background-color: var(--gray);
+} 
+
+.checkbox:has(:checked)::before {
+  border-color: var(--active-green);
+  border-color: white;
+}
+
+.checkbox:has(:checked)::after {
+  background-color: var(--active-green);
+  background-color: white;
+}

data/app/assets/stylesheets/nitro_rails/modules/clickable.css

@@ -0,0 +1,9 @@
+.clickable {
+  padding: 2px 5px;
+  margin: -2px -5px;
+  border-radius: 5px;
+}
+
+.clickable:hover {
+  background-color: var(--backdrop-4);
+}

data/app/assets/stylesheets/nitro_rails/modules/editable-text.css

@@ -0,0 +1,45 @@
+.editable-text-container {
+  position: relative;
+}
+
+.editable-text-content {
+  flex-direction: row;
+  align-items: center;
+}
+
+.editable-text-content .error-badge {
+  background-color: red;
+  margin-right: 10px;
+  font-size: var(--small-fs-2);
+  font-weight: bold;
+  text-align: center;
+  color: white;
+  line-height: 25px;
+  border-radius: 20px;
+  width: 25px;
+  height: 25px;
+}
+
+.editable-text-content .error-message {
+  font-size: var(--small-fs-2);
+  background-color: rgba(255, 0, 0, 0.8);
+  backdrop-filter: blur(5px);
+  font-weight: bold;
+  color: white;
+  margin-right: 10px;
+  padding: 5px;
+  border-radius: 3px;
+  margin-left: 5px;
+  position: absolute;
+  top: -30px;
+  left: 20px;
+  width: fit-content;
+}
+
+.error-badge, .error-message {
+  display: none;
+}
+
+.error-badge.visible, .error-message.visible {
+  display: block;
+}

data/app/assets/stylesheets/nitro_rails/modules/forms.css

@@ -0,0 +1,108 @@
+.form {
+  gap: 30px;
+  /* align-items: flex-start; */
+}
+
+.form .label-detail {
+  font-size: var(--small-fs-2);
+}
+
+.form .field {
+  gap: 5px;
+}
+
+.form label {
+  font-size: var(--small-fs-2);
+  color: var(--foreground-3);
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.form label::after {
+  content: ":";
+}
+
+.form .error-message {
+  text-transform: uppercase;
+  font-size: var(--small-fs-2);
+  color: red;
+  font-weight: 600;
+}
+
+.form input[type="text"],
+.form input[type="email"],
+.form input[type="password"],
+.form input[type="date"],
+.form input[type="datetime-local"],
+.form input[type="time"] {
+  font-size: var(--large-fs);
+  padding: 6px 12px;
+  border: none;
+  border-bottom: 1px solid var(--backdrop-6);
+  outline-color: var(--theme-accent);
+  max-width: 350px;
+  background-color: var(--backdrop-1);
+  color: var(--foreground-1);
+}
+
+.popup.panel-container .form input[type="text"],
+.popup.panel-container .form input[type="email"],
+.popup.panel-container .form input[type="password"],
+.popup.panel-container .form input[type="date"],
+.popup.panel-container .form input[type="datetime-local"],
+.popup.panel-container .form input[type="time"] {
+  max-width: 100%;
+}
+
+.form input[type="text"]:focus,
+.form input[type="email"]:focus,
+.form input[type="password"]:focus,
+.form input[type="date"]:focus,
+.form input[type="datetime-local"]:focus,
+.form input[type="time"]:focus {
+  outline: none;
+  border-color: var(--theme-accent);
+  background-color: var(--backdrop-3);
+}
+
+.form textarea {
+  width: 500px;
+  max-width: 100%;
+  box-sizing: border-box;
+  height: 150px;
+  padding: 15px 20px;
+
+  color: var(--foreground-1);
+  background-color: var(--backdrop-2);
+  border: none;
+  border-radius: 5px;
+
+  font-size: var(--large-fs);
+}
+
+.form input::placeholder,
+.form textarea::placeholder {
+  font-weight: 200;
+  font-style: italic;
+}
+
+.form .actions {
+  margin-top: 25px;
+  margin-bottom: 25px;
+
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+}
+
+/* Devise */
+
+.devise-link {
+  margin-left: 10px;
+  font-weight: 600;
+  color: var(--accent);
+}
+
+.devise-link:hover {
+  text-decoration: underline;
+}

data/app/assets/stylesheets/nitro_rails/modules/hover-reveal.css

@@ -0,0 +1,11 @@
+.hover-reveal {
+  visibility: hidden;
+}
+
+.hover-context:hover .hover-reveal {
+  visibility: visible;
+}
+
+.hover-context:hover .hover-context .hover-reveal {
+  visibility: hidden;
+}

data/app/assets/stylesheets/nitro_rails/modules/inline-svg.css

@@ -0,0 +1,14 @@
+.inline-svg svg {
+  width: auto;
+  height: 20px;
+  /* max-width: 100%; */
+  /* max-height: 100%; */
+}
+
+.inline-svg.tiny svg {
+  height: 5px;
+}
+
+.inline-svg.large svg {
+  height: 50px;
+}

data/app/assets/stylesheets/nitro_rails/modules/list.css

@@ -0,0 +1,29 @@
+.list {
+  /* margin-left: -10px; */
+  gap: 5px;
+}
+
+.list--arrow-detail a::after {
+  position: absolute;
+  content: "›";
+  margin-left: 10px;
+  right: 10px;
+  top: 7px;
+  font-weight: 300;
+  color: var(--foreground-1);
+  font-style: normal;
+}
+
+.list--basic-link a {
+  font-size: var(--large-fs-2);
+  font-weight: 400;
+  width: 100%;
+  padding: 10px;
+  border-radius: 5px;
+  position: relative;
+} 
+
+.list--basic-link a:hover {
+  background-color: var(--backdrop-3)
+}
+

data/app/assets/stylesheets/nitro_rails/modules/main-navigation.css

@@ -0,0 +1,20 @@
+.main-navigation {
+  display: flex; 
+  flex-direction: row;
+  gap: 30px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 20px var(--side-padding);
+  /* background-color: var(--backdrop-4); */
+}
+
+.main-navigation a,
+.main-navigation button {
+  text-transform: capitalize;
+  font-weight: 500;
+}
+
+.main-navigation a:hover,
+.main-navigation button:hover {
+  /* text-decoration: underline; */
+}

data/app/assets/stylesheets/nitro_rails/modules/nitro-checkbox.css

@@ -0,0 +1,42 @@
+.nitro-checkbox [type='checkbox'] {
+  display: none;
+}
+
+.nitro-checkbox {
+  position: relative;
+  cursor: pointer;
+}
+
+.nitro-checkbox::before {
+  content: "";
+  display: block;
+  border: 2px solid var(--gray);
+  border-radius: 3px;
+  width: 15px;
+  height: 15px;
+}
+
+.nitro-checkbox::after {
+  content: "";
+  position: absolute;
+  display: block;
+  border-radius: 2px;
+  width: 13px;
+  height: 13px;
+  top: 3px;
+  right: 3px;
+}
+
+.nitro-checkbox:hover::after {
+  background-color: var(--gray);
+} 
+
+.nitro-checkbox:has(:checked)::before {
+  border-color: var(--active-green);
+  border-color: white;
+}
+
+.nitro-checkbox:has(:checked)::after {
+  background-color: var(--active-green);
+  background-color: white;
+}

data/app/assets/stylesheets/nitro_rails/modules/resource-collection.css

@@ -0,0 +1,12 @@
+.resource-collection {
+  gap: 0;
+  max-width: 100%;
+}
+
+.resource-collection > form {
+  position: sticky;
+  bottom: 5px;
+  background-color: var(--backdrop-1);
+  padding: 20px 0;
+  width: 100%;
+}

data/app/assets/stylesheets/nitro_rails/modules/search-bar.css

@@ -0,0 +1,36 @@
+.search-bar {
+  align-items: center;
+  gap: 5px;
+  border: 1px solid var(--backdrop-9);
+  border-radius: 5px;
+  padding: 3px 7px;
+  background-color: var(--backdrop-3);
+  overflow: hidden;
+}
+
+.search-bar .fa-search {
+  color: var(--backdrop-9);
+  font-size: var(--small-fs-2);
+}
+
+.search-bar input[type="text"] {
+  color: var(--foreground-1);
+  background-color: transparent;
+  border: none;
+  width: auto;
+  min-width: auto;
+  max-width: auto;
+}
+
+.search-bar:has(input[type="text"]:focus) {
+  border: 1px solid var(--theme-accent);
+  background-color: var(--backdrop-1);
+}
+
+.search-bar:has(input[type="text"]:focus) .fa-search {
+  color: var(--theme-accent);
+}
+
+.search-bar input[type="text"]:focus {
+  outline: none;
+}

data/app/assets/stylesheets/nitro_rails/modules/settings.css

@@ -0,0 +1,33 @@
+.settings {
+  margin-top: 10px;
+  max-width: 500px;
+}
+
+.settings li label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.settings li {
+  background-color: var(--backdrop-4);
+  border-radius: 5px;
+}
+
+.settings li > a,
+.settings li > label,
+.settings li > .button_to button[type="submit"] {
+  padding: 15px 20px;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: left;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.settings li > a:hover,
+.settings li > .button_to button[type="submit"]:hover {
+  text-decoration: none;
+  color: var(--foreground-8);
+}

data/app/assets/stylesheets/nitro_rails/modules/tabs.css

@@ -0,0 +1,38 @@
+.tabs-container {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.tabs {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.tabs .tab {
+  padding: 5px 10px;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: bold;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  color: var(--foreground-8);
+}
+
+.tabs .tab:hover {
+  background-color: var(--backdrop-6);
+  color: var(--foreground-1);
+}
+
+.tabs .tab.active {
+  background-color: var(--backdrop-6);
+  color: var(--foreground-1);
+  pointer-events: none; /* Prevents click events */
+}
+
+.tabs-container .tab-screen {
+  gap: 10px;
+}

data/app/assets/stylesheets/nitro_rails/modules/toggle-switch.css

@@ -0,0 +1,60 @@
+/* TOGGLE SWITCH */
+
+/* Hide the default checkbox */
+.toggle input[type="checkbox"] {
+  display: none;
+}
+
+/* Style the toggle switch */
+.toggle {
+  display: inline-block;
+  position: relative;
+  width: 50px;
+  height: 25px;
+  border-radius: 20px;
+  background-color: #ccc;
+  cursor: pointer;
+}
+
+/* Style the toggle switch when it's checked */
+.toggle input[type="checkbox"]:checked + .switch {
+  background-color: var(--theme-accent);
+}
+
+.toggle input[type="checkbox"]:checked + .switch:before {
+  right: 2px;
+  left: auto;
+}
+
+/* Style the switch */
+.switch {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 20px;
+  transition: .4s;
+}
+
+/* Style the circle inside the switch */
+.switch:before {
+  position: absolute;
+  content: "";
+  height: 21px;
+  width: 21px;
+  left: 2px;
+  bottom: 2px;
+  border-radius: 50%;
+  background-color: #fff;
+  transition: .4s;
+  background-color: white;
+}
+
+
+/* Style the label */
+.toggle label {
+  display: block;
+  height: 100%;
+  width: 100%;
+}

data/app/assets/stylesheets/nitro_rails/panels/embedded-panel.css

@@ -0,0 +1,31 @@
+.embedded.panel-container {
+  position: relative;
+}
+
+.embedded.panel-container > a {
+  padding: 15px 20px;
+  margin: -17px -22px;
+  border-radius: 10px 10px 0 0;
+  box-sizing: border-box;
+  border: 2px solid transparent;
+  z-index: 1005;
+}
+
+.embedded.panel-container.active > a {
+  background-color: var(--backdrop-1);
+  border: 2px solid var(--backdrop-3);
+  border-bottom: none;
+}
+
+.right.embedded.panel-container .panel-display {
+  border-radius: 10px 0 10px 10px;
+  right: -22px;
+  top: 36px;
+}
+
+.left.embedded.panel-container .panel-display {
+  border-radius: 0 10px 10px 10px;
+  left: -22px;
+  top: 36px;
+}
+

data/app/assets/stylesheets/nitro_rails/panels/panel-display.css

@@ -0,0 +1,111 @@
+.panel-container {
+  position: relative;
+}
+
+.panel-display {
+  container-type: inline-size;
+  position: absolute;
+  overflow: scroll;
+  
+  z-index: 1000; 
+
+  width: 350px; 
+  height: fit-content(1ch);
+  max-height: 80vh;
+  max-width: 100vw;
+
+  text-align: left;
+
+  box-sizing: border-box;
+
+  border-radius: 10px;
+
+  flex-direction: column;
+  background-color: var(--backdrop-1);
+  border: 2px solid var(--backdrop-3);
+
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.panel-display .content {
+  padding: 20px;
+}
+
+.panel-display::-webkit-scrollbar { 
+  display: none;  /* Safari and Chrome */
+}
+
+.panel-display .load-screen {
+  height: 250px;
+  line-height: 240px;
+  width: 100%;
+  text-align: center;
+  font-weight: 800;
+  color: var(--backdrop-6);
+  text-transform: uppercase;
+  font-style: italic;
+}
+
+.panel--overlay {
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(15px) brightness(1);
+  -webkit-backdrop-filter: blur(15px) brightness(1);
+  background-color: rgba(255, 255, 255, 0.5);
+  border: 2px solid rgba(235, 235, 235, 0.5);
+}
+
+.dark-mode .panel--overlay {
+  background-color: rgba(10, 10, 10, 0.5);
+  border: 2px solid rgba(50, 50, 50, 0.5);
+}
+
+.panel-frame-container, .panel-display turbo-frame, .panel-display .content {
+  min-height: 100%;
+  height: 100%;
+}
+
+
+/* MEDIA QUERY MOBILE */
+
+@media (max-width: 768px) {
+  .panel-display {
+    border-radius: 0;
+    position: fixed; 
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: auto;
+    width: 100vw;
+    min-height: 100px;
+    padding: 20px;
+    /* color: black; */
+    border-top-right-radius: 20px;
+    border-top-left-radius: 20px;
+    z-index: 100;
+    padding: 20px;
+    text-align: center;
+    max-height: 85vh;
+    background-color: var(--backdrop-3);
+    border: none;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
+  }
+
+  .panel-container.active > a {
+    background-color: transparent;
+    border: none;
+    border-bottom: none;
+    z-index: -1;
+  }
+
+  .panel-display .content {
+    padding: 0px;
+    --backdrop-4: var(--backdrop-6);
+  }
+
+  .panel-container > a {
+    /* border-radius: 0; */
+    /* margin: 0; */
+  }
+}