tina4ruby 3.11.13 → 3.11.15

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

@@ -1,81 +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; }
+// 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

@@ -1,84 +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; }
-}
+// 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

@@ -1,149 +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;
-  }
-}
+// 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;
+  }
+}