🚑 Grid breakpoint changes, trickles down to other modules as well
This commit is contained in:
Angelos Chalaris
parent
1c7b7a081f
commit
1e86e6fa5a
10
dist/mini-default.css
vendored
10
dist/mini-default.css
vendored
|
|
@ -274,7 +274,7 @@ a {
|
|||
-webkit-order: 999;
|
||||
order: 999; }
|
||||
|
||||
@media (min-width: 800px) {
|
||||
@media (min-width: 768px) {
|
||||
.col-md,
|
||||
[class^='col-md-'],
|
||||
[class^='col-md-offset-'] {
|
||||
|
|
@ -399,7 +399,7 @@ a {
|
|||
.col-md-last {
|
||||
-webkit-order: 999;
|
||||
order: 999; } }
|
||||
@media (min-width: 1080px) {
|
||||
@media (min-width: 1280px) {
|
||||
.col-lg,
|
||||
[class^='col-lg-'],
|
||||
[class^='col-lg-offset-'] {
|
||||
|
|
@ -713,7 +713,7 @@ input[type="file"] {
|
|||
.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"], .button-group button + a.button, .button-group button + label.button, .button-group button + .button, .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"], .button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button, .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"], .button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button, .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"], .button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button, .button-group a.button + button, .button-group a.button + [type="button"], .button-group a.button + [type="submit"], .button-group a.button + [type="reset"], .button-group a.button + a.button, .button-group a.button + label.button, .button-group a.button + .button, .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"], .button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button, .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"], .button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button {
|
||||
border-left: 1px solid #bdbdbd; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
.button-group {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
|
|
@ -798,7 +798,7 @@ th {
|
|||
th:first-child, td:first-child {
|
||||
border-left: 0; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
|
|
@ -984,7 +984,7 @@ th:first-child, td:first-child {
|
|||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
@media (max-width: 768px) {
|
||||
.tabs {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -484,3 +484,10 @@
|
|||
- Started writing `grid.html` page.
|
||||
- Added basic info for grid, set layout for the page, checked styles - they're all good for grid.
|
||||
- Added layout demo showcase for the screen specific layouts.
|
||||
|
||||
|
||||
## 20161121
|
||||
|
||||
- Changed `grid` breakpoints to `768px` and `1280px` accordingly to better support different resolutions.
|
||||
- Updated `$button-group-mobile-breakpoint` to `767px` so that it will break on resolutions under `768px` instead of including `768px`.
|
||||
- Same update for `$table-mobile-breakpoint` to `767px`.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- Live demo styled as of 20161117 -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/e6d74493378ebf8837bb3fc2469864dda719af41/dist/mini-default.min.css">
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/e6d74493378ebf8837bb3fc2469864dda719af41/dist/mini-default.min.css"> -->
|
||||
<link rel="stylesheet" href="../../dist/mini-default.min.css">
|
||||
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
|
||||
<meta charset="utf-8">
|
||||
|
|
|
|||
|
|
@ -126,9 +126,9 @@ $grid-column-padding: 0 4px; // Padding for the columns of the grid
|
|||
//$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
|
||||
//$grid-small-breakpoint: 480px; // Small screen breakpoint for grid
|
||||
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
|
||||
$grid-medium-breakpoint: 800px; // Medium screen breakpoint for grid
|
||||
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
|
||||
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
|
||||
$grid-large-breakpoint: 1080px; // Large screen breakpoint for grid
|
||||
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
|
||||
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
||||
// Notes:
|
||||
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
|
||||
|
|
@ -210,7 +210,7 @@ $button-disabled-opacity: 0.65; // Disabled button elements opacity
|
|||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$button-group-name: 'button-group'; // Class for button groups
|
||||
$button-group-border-style: 1px solid #bdbdbd; // Border style for button groups
|
||||
$button-group-mobile-breakpoint:768px; // Breakpoint for button group mobile view
|
||||
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
||||
$hide-file-inputs: true; // Should a style be added that makes all
|
||||
// <input>s of type `file` hidden?
|
||||
// (`true`/`false`) [1]
|
||||
|
|
@ -278,7 +278,7 @@ $table-head-back-color: #eceff1; // Background color for <th>
|
|||
$table-head-fore-color: $fore-color; // Tex color for <th>
|
||||
$table-body-back-color: #fafafa; // Background color for <td>
|
||||
$table-body-fore-color: $fore-color; // Text color for <td>
|
||||
$table-mobile-breakpoint: 768px; // Breakpoint for <table> mobile view
|
||||
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
|
||||
$table-mobile-card-spacing: 10px; // Space between <tr> cards - mobile view
|
||||
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers
|
||||
// in mobile view [1]
|
||||
|
|
|
|||
|
|
@ -277,7 +277,7 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
|
|||
order: 999;
|
||||
}
|
||||
}
|
||||
$grid-large-breakpoint: 1200px !default; // Large screen breakpoint for grid
|
||||
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid
|
||||
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
|
||||
// Large screen breakpoint.
|
||||
@media (min-width: #{$grid-large-breakpoint}){
|
||||
|
|
|
|||
Loading…
Reference in a new issue