tina4ruby 0.4.0

data/lib/tina4/scss/tina4css/_grid.scss

@@ -0,0 +1,81 @@
+// Tina4 CSS Framework - 12-Column Flexbox Grid
+// -----------------------------------------------
+
+.container,
+.container-fluid {
+  width: 100%;
+  padding-right: calc($grid-gutter / 2);
+  padding-left: calc($grid-gutter / 2);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@each $bp, $max-width in $container-max-widths {
+  @media (min-width: map-get($breakpoints, $bp)) {
+    .container {
+      max-width: $max-width;
+    }
+  }
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: calc($grid-gutter / -2);
+  margin-left: calc($grid-gutter / -2);
+  > * {
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 100%;
+    padding-right: calc($grid-gutter / 2);
+    padding-left: calc($grid-gutter / 2);
+  }
+}
+
+.col {
+  flex: 1 0 0%;
+}
+
+// Generate base columns
+@for $i from 1 through $grid-columns {
+  .col-#{$i} {
+    flex: 0 0 auto;
+    width: percentage($i / $grid-columns);
+  }
+}
+@each $i in 1, 2, 3, 4 {
+  .offset-#{$i} {
+    margin-left: percentage($i / $grid-columns);
+  }
+}
+.offset-0 { margin-left: 0; }
+
+// Responsive columns (core breakpoints only for size)
+$grid-breakpoints: (sm, md, lg, xl);
+
+@each $bp in $grid-breakpoints {
+  $min-width: map-get($breakpoints, $bp);
+  @media (min-width: $min-width) {
+    .col-#{$bp} {
+      flex: 1 0 0%;
+    }
+    @for $i from 1 through $grid-columns {
+      .col-#{$bp}-#{$i} {
+        flex: 0 0 auto;
+        width: percentage($i / $grid-columns);
+      }
+    }
+    .offset-#{$bp}-0 { margin-left: 0; }
+  }
+}
+
+// Row alignment
+.justify-start   { justify-content: flex-start; }
+.justify-center  { justify-content: center; }
+.justify-end     { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-around  { justify-content: space-around; }
+
+.align-start  { align-items: flex-start; }
+.align-center { align-items: center; }
+.align-end    { align-items: flex-end; }

data/lib/tina4/scss/tina4css/_modals.scss

@@ -0,0 +1,84 @@
+// Tina4 CSS Framework - Modals
+// -------------------------------
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $zindex-modal;
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+
+  &.show { display: block; }
+}
+
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 1.75rem auto;
+  max-width: 500px;
+}
+
+.modal-sm { max-width: 300px; }
+.modal-lg { max-width: 800px; }
+
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background-color: $white;
+  background-clip: padding-box;
+  border: 1px solid rgba($black, 0.2);
+  border-radius: $border-radius-lg;
+  box-shadow: $shadow;
+  outline: 0;
+}
+
+.modal-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-bottom: 1px solid rgba($black, 0.1);
+}
+
+.modal-title {
+  margin-bottom: 0;
+  font-weight: $font-weight-bold;
+}
+
+.modal-body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: 1rem;
+}
+
+.modal-footer {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0.75rem;
+  border-top: 1px solid rgba($black, 0.1);
+  gap: 0.5rem;
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $zindex-backdrop;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba($black, 0.5);
+  display: none;
+  &.show { display: block; }
+}

data/lib/tina4/scss/tina4css/_nav.scss

@@ -0,0 +1,149 @@
+// Tina4 CSS Framework - Navigation
+// -----------------------------------
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-item { }
+
+.nav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  color: $link-color;
+  text-decoration: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+
+  &:hover, &:focus {
+    color: $link-hover-color;
+  }
+
+  &.disabled {
+    color: $muted;
+    pointer-events: none;
+    cursor: default;
+  }
+
+  &.active {
+    color: $primary;
+    font-weight: $font-weight-bold;
+  }
+}
+
+// Navbar
+.navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+}
+
+.navbar-brand {
+  padding-top: 0.3125rem;
+  padding-bottom: 0.3125rem;
+  margin-right: 1rem;
+  font-size: $font-size-xl;
+  font-weight: $font-weight-bold;
+  color: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  &:hover { color: inherit; opacity: 0.8; }
+}
+
+.navbar-nav {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+  .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+}
+
+.navbar-toggler {
+  padding: 0.25rem 0.75rem;
+  font-size: $font-size-lg;
+  line-height: 1;
+  background-color: transparent;
+  border: 1px solid rgba($black, 0.1);
+  border-radius: $border-radius;
+  cursor: pointer;
+  &:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba($primary, 0.25); }
+}
+
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
+  align-items: center;
+  display: none;
+  &.show { display: flex; }
+}
+
+// Responsive expand classes
+@each $bp, $px in $breakpoints {
+  .navbar-expand-#{$bp} {
+    @media (min-width: $px) {
+      .navbar-nav { flex-direction: row; }
+      .navbar-collapse { display: flex; flex-basis: auto; }
+      .navbar-toggler { display: none; }
+    }
+  }
+}
+
+// Legacy: bare .navbar also expands at lg
+@media (min-width: map-get($breakpoints, lg)) {
+  .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-collapse {
+    display: flex;
+    flex-basis: auto;
+  }
+  .navbar-toggler {
+    display: none;
+  }
+}
+
+.navbar-dark {
+  color: $white;
+  background-color: $dark;
+  .navbar-brand { color: $white; }
+  .nav-link { color: rgba($white, 0.75); &:hover, &.active { color: $white; } }
+}
+
+.navbar-light {
+  background-color: $light;
+  .nav-link { color: rgba($black, 0.55); &:hover, &.active { color: rgba($black, 0.9); } }
+}
+
+// Breadcrumb
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.5rem 1rem;
+  margin-bottom: 1rem;
+  list-style: none;
+  background-color: $light;
+  border-radius: $border-radius;
+}
+
+.breadcrumb-item {
+  & + .breadcrumb-item::before {
+    display: inline-block;
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+    color: $muted;
+    content: "/";
+  }
+  &.active {
+    color: $muted;
+  }
+}

data/lib/tina4/scss/tina4css/_reset.scss

@@ -0,0 +1,94 @@
+// Tina4 CSS Framework - Modern Reset
+// ------------------------------------
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  line-height: $line-height-base;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  font-weight: $font-weight-normal;
+  line-height: $line-height-base;
+  color: $body-color;
+  background-color: $body-bg;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: $line-height-sm;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol, ul {
+  padding-left: 2rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+a {
+  color: $link-color;
+  text-decoration: none;
+  &:hover {
+    color: $link-hover-color;
+    text-decoration: underline;
+  }
+}
+
+img, svg {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: collapse;
+  caption-side: bottom;
+}
+
+button, input, optgroup, select, textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button, select {
+  text-transform: none;
+}
+
+button, [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  border: 0;
+  border-top: 1px solid rgba($black, 0.1);
+  opacity: 0.25;
+}
+
+pre, code, kbd, samp { font-family: $font-family-mono; font-size: 1em; }
+pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; }
+[hidden] { display: none !important; }

data/lib/tina4/scss/tina4css/_tables.scss

@@ -0,0 +1,54 @@
+// Tina4 CSS Framework - Tables
+// -------------------------------
+
+.table {
+  width: 100%;
+  margin-bottom: 1rem;
+  vertical-align: top;
+  border-color: rgba($black, 0.1);
+
+  > :not(caption) > * > * {
+    padding: 0.5rem;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: inherit;
+  }
+
+  > thead {
+    vertical-align: bottom;
+    border-bottom: 2px solid currentColor;
+  }
+
+  > tbody > tr:last-child > * {
+    border-bottom-color: transparent;
+  }
+}
+
+.table-sm {
+  > :not(caption) > * > * {
+    padding: 0.25rem;
+  }
+}
+
+.table-bordered {
+  border: 1px solid rgba($black, 0.1);
+  > :not(caption) > * > * {
+    border-width: 1px;
+    border-style: solid;
+    border-color: inherit;
+  }
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) > * {
+  background-color: rgba($black, 0.02);
+}
+
+.table-hover > tbody > tr:hover > * {
+  background-color: rgba($black, 0.04);
+}
+
+.table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+

data/lib/tina4/scss/tina4css/_typography.scss

@@ -0,0 +1,55 @@
+// Tina4 CSS Framework - Typography
+// ------------------------------------
+
+h1 { font-size: $font-size-4xl; }
+h2 { font-size: $font-size-3xl; }
+h3 { font-size: $font-size-2xl; }
+h4 { font-size: $font-size-xl; }
+h5 { font-size: $font-size-lg; }
+h6 { font-size: $font-size-base; }
+
+small, .small {
+  font-size: 0.875em;
+}
+
+mark, .mark {
+  padding: 0.2em;
+  background-color: rgba($warning, 0.3);
+}
+
+blockquote {
+  margin: 0 0 1rem;
+  padding: 0.5rem 1rem;
+  border-left: 0.25rem solid rgba($black, 0.1);
+  font-size: $font-size-lg;
+}
+
+code {
+  font-size: 0.875em;
+  color: $danger;
+  word-wrap: break-word;
+}
+
+pre {
+  display: block;
+  padding: 1rem;
+  font-size: 0.875em;
+  color: $dark;
+  background-color: $light;
+  border-radius: $border-radius;
+}
+
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline-item {
+  display: inline-block;
+  &:not(:last-child) { margin-right: 0.5rem; }
+}

data/lib/tina4/scss/tina4css/_utilities.scss

@@ -0,0 +1,197 @@
+// Tina4 CSS Framework - Utilities
+// ----------------------------------
+
+// Display
+$displays: none, block, flex, inline, inline-block;
+
+@each $d in $displays {
+  .d-#{$d} { display: $d !important; }
+}
+.d-grid { display: grid !important; }
+
+// Responsive display (sm, md, lg only to save size)
+@each $bp in sm, md, lg {
+  @media (min-width: map-get($breakpoints, $bp)) {
+    @each $d in $displays {
+      .d-#{$bp}-#{$d} { display: $d !important; }
+    }
+  }
+}
+
+// Flex utilities
+.flex-row           { flex-direction: row !important; }
+.flex-column        { flex-direction: column !important; }
+.flex-wrap          { flex-wrap: wrap !important; }
+.flex-nowrap        { flex-wrap: nowrap !important; }
+.flex-grow-0        { flex-grow: 0 !important; }
+.flex-grow-1        { flex-grow: 1 !important; }
+
+.justify-content-start   { justify-content: flex-start !important; }
+.justify-content-end     { justify-content: flex-end !important; }
+.justify-content-center  { justify-content: center !important; }
+.justify-content-between { justify-content: space-between !important; }
+.justify-content-around  { justify-content: space-around !important; }
+
+.align-items-start   { align-items: flex-start !important; }
+.align-items-end     { align-items: flex-end !important; }
+.align-items-center  { align-items: center !important; }
+
+@each $key, $val in $spacers {
+  .gap-#{$key} { gap: $val !important; }
+}
+
+// Spacing: margin and padding
+$spacing-props: (
+  "m":  "margin",
+  "p":  "padding"
+);
+$spacing-dirs: (
+  "t": "-top",
+  "b": "-bottom",
+  "s": "-left",
+  "e": "-right"
+);
+
+@each $abbr, $prop in $spacing-props {
+  @each $key, $val in $spacers {
+    .#{$abbr}-#{$key} { #{$prop}: $val !important; }
+  }
+  @each $dir, $suffix in $spacing-dirs {
+    @each $key, $val in $spacers {
+      .#{$abbr}#{$dir}-#{$key} { #{$prop}#{$suffix}: $val !important; }
+    }
+  }
+}
+
+.mx-auto { margin-left: auto !important; margin-right: auto !important; }
+
+// Text
+.text-start      { text-align: left !important; }
+.text-center     { text-align: center !important; }
+.text-end        { text-align: right !important; }
+.text-uppercase  { text-transform: uppercase !important; }
+.text-capitalize { text-transform: capitalize !important; }
+.text-nowrap     { white-space: nowrap !important; }
+.text-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.fw-bold   { font-weight: $font-weight-bold !important; }
+.fw-normal { font-weight: $font-weight-normal !important; }
+.fw-light  { font-weight: $font-weight-light !important; }
+
+@each $key, $size in $font-sizes {
+  .fs-#{$key} { font-size: $size !important; }
+}
+
+// Text colors
+@each $name, $color in $theme-colors {
+  .text-#{$name} { color: $color !important; }
+}
+.text-muted { color: $muted !important; }
+.text-white { color: $white !important; }
+
+// Background colors
+@each $name, $color in $theme-colors {
+  .bg-#{$name} { background-color: $color !important; }
+}
+.bg-white { background-color: $white !important; }
+
+// Borders
+.border   { border: 1px solid rgba($black, 0.1) !important; }
+.border-0 { border: 0 !important; }
+.rounded        { border-radius: $border-radius !important; }
+.rounded-0      { border-radius: 0 !important; }
+.rounded-circle { border-radius: 50% !important; }
+.rounded-pill   { border-radius: $border-radius-pill !important; }
+
+// Width and height
+@each $val in 25, 50, 75, 100 {
+  .w-#{$val}  { width: percentage($val / 100) !important; }
+  .h-#{$val}  { height: percentage($val / 100) !important; }
+}
+.mw-100 { max-width: 100% !important; }
+.mh-100 { max-height: 100% !important; }
+
+// Position
+.position-relative { position: relative !important; }
+.position-absolute { position: absolute !important; }
+.position-fixed    { position: fixed !important; }
+.position-sticky   { position: sticky !important; }
+.position-static   { position: static !important; }
+
+// Visibility
+.visible   { visibility: visible !important; }
+.invisible { visibility: hidden !important; }
+
+.overflow-hidden { overflow: hidden !important; }
+.overflow-auto   { overflow: auto !important; }
+
+// Shadows
+.shadow      { box-shadow: $shadow !important; }
+.shadow-sm   { box-shadow: $shadow-sm !important; }
+.shadow-lg   { box-shadow: $shadow-lg !important; }
+.shadow-none { box-shadow: none !important; }
+
+// Collapse
+.collapse { display: none; &.show { display: block; } }
+
+// Fade transition
+.fade { opacity: 0; transition: opacity 0.15s linear; &.show { opacity: 1; } }
+
+// Misc
+.clearfix::after { display: block; clear: both; content: ""; }
+.cursor-pointer { cursor: pointer !important; }
+
+// Close button (replaces Bootstrap's btn-close)
+.btn-close {
+  box-sizing: content-box;
+  width: 1em;
+  height: 1em;
+  padding: 0.25em;
+  color: $black;
+  background: transparent;
+  border: 0;
+  opacity: 0.5;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  &:hover { opacity: 0.75; }
+  &:focus { opacity: 1; outline: 0; box-shadow: 0 0 0 0.2rem rgba($primary, 0.25); }
+}
+
+// Image utilities
+.img-fluid    { max-width: 100%; height: auto; }
+.img-thumbnail {
+  padding: 0.25rem;
+  background-color: $body-bg;
+  border: 1px solid rgba($black, 0.1);
+  border-radius: $border-radius;
+  max-width: 100%;
+  height: auto;
+}
+
+// Border top/bottom helpers
+.border-top    { border-top: 1px solid rgba($black, 0.1) !important; }
+.border-bottom { border-bottom: 1px solid rgba($black, 0.1) !important; }
+
+// Vertical alignment
+.align-middle  { vertical-align: middle !important; }
+.align-top     { vertical-align: top !important; }
+.align-bottom  { vertical-align: bottom !important; }
+
+// Float
+.float-start { float: left !important; }
+.float-end   { float: right !important; }
+.float-none  { float: none !important; }
+
+// Screen reader only
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}