lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Continue to work on the puzzle that is grids

1.0
jlukic 10 years ago
parent
96172f7a92
commit
8382e2e093
9 changed files with 854 additions and 679 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      RELEASE NOTES.md
  2. 283
      server/documents/collections/grid.html.eco
  3. 23
      server/files/javascript/grid.js
  4. 1092
      server/files/stylesheets/semantic.css
  5. 103
      src/definitions/collections/grid.less
  6. 4
      src/definitions/collections/message.less
  7. 11
      src/definitions/modules/checkbox.js
  8. 9
      src/themes/packages/default/collections/grid.variables
  9. 6
      src/themes/packages/default/collections/message.variables

2
RELEASE NOTES.md
View File

@ -17,6 +17,7 @@
- **Accordion** - Accordion now includes all icons in an embedded font instead of requiring icons
- **Button** - Now has compact form, used for fitting into tight spaces
- **Checkbox** - All styles have been redone. Standard checkboxes are now based around PX and not EM making sure there are no unusual circles or rounding issues. Checkboxes also now use a custom font for glyphs instead of CSS tricks.
- **Checkbox** - Checkbox now have a ``fireOnInit`` setting for firing callbacks on page load
- **Dropdown** - New dropdown type, searchable selection for large lists of choices
- **Dropdown** - Dropdowns can now be initialized directly on a ``<select>`` element without any html
- **Dropdown** - New action combo will change text of adjacent button, select will select element but not change text
@ -28,6 +29,7 @@
- **Form** - Inverted form now properly styles loader
- **Form** - New field type ``required`` formats labels to show filling out field is mandatory
- **Grid** - ``ui divider`` can now be used inside of row columns as well as ``vertically divided grid`` variation
- **Grid** - Grid has been rewritten to automatically create row flow without row wrappers
- **Grid** - Divided and celled grids can now be inverted for dark backgrounds
- **Grid** - Elements inside a grid that are not rows or columns will now align properly
- **Grid** - Fixed page grid allows for fixed pixel size containers used with a grid instead of percentage

283
server/documents/collections/grid.html.eco
View File

@ -12,6 +12,7 @@ type : 'UI Collection'
themes : ['Default']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/grid.less" />
<script src="/javascript/grid.js"></script>
<%- @partial('header', { tabs: { overview: 'Overview', definition: 'Definition' } }) %>
@ -19,9 +20,16 @@ themes : ['Default']
<div class="ui active tab" data-tab="overview">
<h3 class="ui dividing header">Grids</h3>
<div class="highlighted example">
<h4 class="ui header">Basic Grids</h4>
<h4 class="ui header">Overview</h4>
<p>A grid is a structure, with a <a href="http://99designs.com/designer-blog/2013/03/21/history-of-the-grid-part-1/" target="_blank">very rich history</a> used to align negative space in your design.</p>
<p>By default, grid <code>column</code> will sit with flush with the edge of the <code>ui grid</code>
<div class="ui toggle animation checkbox">
<input type="checkbox" name="animation" />
<label>Toggle Animation</label>
</div>
<div class="ui ignored info message">
<p>All grid systems use an arbitrary column count. Semantic's default theme assumes <b>16 columns</b>. This number can be adjusted in your project by adjust the <code>@columnCount</code> value in <code>site.variables</code>.</p>
</div>
@ -42,77 +50,53 @@ themes : ['Default']
</div>
</div>
<div class="highlighted example">
<h4 class="ui header">Page Grids</h4>
<p>A page grid is designed to provide a responsive container suitable for wrapping the entire contents of your page.</p>
<div class="ui page grid">
<div class="five wide column">
<h4 class="ui header">Specifying Column Widths</h4>
<p>Column widths can be specified either using <code>(x) wide</code> class names or subdividing a grid or row using an <code>(x) column grid</code> or <code>(x) column row</code></p>
<div class="ui grid">
<div class="four wide column">
<div class="ui segment"></div>
</div>
<div class="ten wide column">
<div class="four wide column">
<div class="ui segment"></div>
</div>
<div class="four wide column">
<div class="ui segment"></div>
</div>
<div class="four wide column">
<div class="ui segment"></div>
</div>
</div>
</div>
<div class="highlighted example">
<h4 class="ui header">Responsive Breakpoints</h4>
<p>Semantic's page grid, by default, uses percentage values for page gutters. This means your page container will <b>constantly adjust</b> as the browser width changes, giving you the largest possible space for each breakpoint</p>
<p><code>grid</code> <code>row</code> and <code>column</code> all can receive responsive classes to make them appear only on a particular device.</p>
<table class="ui blue celled table">
<thead>
<tr>
<th>Name</th>
<th>Breakpoint</th>
<th>Page Gutter</th>
<th>Responsive Class</th>
<th>Variable</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mobile</td>
<td>Below 768px</td>
<td>1rem</td>
<td>mobile only</td>
<td>$mobileBreakpoint</td>
</tr>
<tr>
<td>Tablet</td>
<td>Above 768px and below 992px</td>
<td>8%</td>
<td>tablet only</td>
<td>$tabletBreakpoint</td>
</tr>
<tr>
<td>Computer</td>
<td>Above 992px</td>
<td>13%</td>
<td>computer only</td>
<td>$computerBreakpoint</td>
</tr>
<tr>
<td>Large Monitor</td>
<td>Above 1400px</td>
<td>18%</td>
<td><em>None</em></td>
<td>$largeMonitorBreakpoint</td>
</tr>
<tr>
<td>Widescreen Monitor</td>
<td>Above 1920px</td>
<td>23%</td>
<td><em>None</em></td>
<td>$widescreenBreakpoint</td>
</tr>
</tbody>
</table>
<div class="another highlighted example">
<div class="ui two column grid">
<div class="column">
<div class="ui segment"></div>
</div>
<div class="column">
<div class="ui segment"></div>
</div>
<div class="four column row">
<div class="column">
<div class="ui segment"></div>
</div>
<div class="column">
<div class="ui segment"></div>
</div>
<div class="column">
<div class="ui segment"></div>
</div>
<div class="column">
<div class="ui segment"></div>
</div>
</div>
</div>
</div>
<div class="highlighted example">
<h4 class="ui header">Automatic Rows</h4>
<p>A grid does not necessarily need to specify rows. If you include <code>columns</code> as direct children of your grid, and not inside row containers</b> then <b>content will automatically flow to the next row when all the grid columns are taken in the current row</b>.</p>
<h4 class="ui header">Column Flow</h4>
<p>A grid does not necessarily need to specify rows. If you include <code>columns</code> as direct child of <code>ui grid</code> content will automatically flow to the next row when all the grid columns are taken in the current row</b>.</p>
<div class="ui grid">
<div class="four wide column">
@ -144,28 +128,21 @@ themes : ['Default']
<div class="highlighted example">
<h4 class="ui header">Specifying Rows</h4>
<p>Specifying rows for your grid, allows the bottom and top rows to sit flush with the edge of the grid, and allows you to use row variations</p>
<p>Specifying wrapping <code>row</code> elements allows you to manually control line breaks for rows, and use additional row variations.</p>
<div class="ui ignored info icon message">
<i class="help circle icon"></i>
<div class="content">
<div class="header">Why Include Row Markup?</div>
<p>It's often easier to have dynamic content output without nested rows, but using row wrappers is the only way for variations like <code>equal height</code> and <code>vertically divided</code> to function correctly.</p>
<p>In addition, the bottom and top rows, when specified will sit flush with the edge of the grid.</p>
</div>
</div>
<div class="ui grid">
<div class="ui four column row">
<div class="column">
<div class="right floated column">
<div class="ui segment"></div>
</div>
<div class="column">
<div class="ui segment"></div>
</div>
<div class="column">
<div class="ui segment"></div>
</div>
<div class="column">
<div class="left floated column column">
<div class="ui segment"></div>
</div>
</div>
@ -183,15 +160,46 @@ themes : ['Default']
</div>
</div>
<div class="highlighted negative example">
<h4 class="ui header">Grid Row Spacing</h4>
<p>Grid columns have vertical spacing above and below each column to create vertical flow between columns.</p>
<div class="ui ignored warning message">
Grids use negative margins to ensure the first and last row of columns will set flush with the edge of the grid. To allow first and last columns to have vertical padding use a <code>vertically spaced grid</code> variation.
</div>
<div class="ui top attached button">Button before grid</div>
<div class="ui grid">
<div class="sixteen wide column">
<div class="ui segment">
This content will sit flush against the content above it
</div>
</div>
<div class="ten wide column">
<div class="ui segment"></div>
</div>
<div class="six wide column">
<div class="ui segment"></div>
</div>
</div>
<div class="ui grid">
<div class="sixteen wide column">
<div class="ui segment">
Consecutive grids will collapse their negative margins to preserve equal row height between grids.
</div>
</div>
</div>
<div class="ui bottom attached button">Button after grid</div>
</div>
<div class="highlighted example">
<h4 class="ui header">Nested grids</h4>
<p>A grid can include another grid inside it.</p>
<h4 class="ui header">Nesting Grids</h4>
<p>You can include grids even inside other grids, this can be useful for things like dividing rows inside of a page grid.</p>
<div class="ui ignored info message">
<div class="ui header">Column Count</div>
<p>Each grid is divided into 16 columns, so a grid inside a grid inside a column, <b>sub-divides that column into 16 more columns</b>. This means for example, a <code>eight wide column</code> on a nested grid inside a <code>two wide column</code>, is the same as a <code>one wide column</code> on the outer grid.</p>
<div class="ui header">Matching Column Widths on Nested Grids</div>
<p>Each grid is divided into 16 columns, so a grid inside another grid column <b>sub-divides that column into sixteen more columns</b>.</p>
<p>This means, an <code>eight wide column</code> in grid located inside a <code>two wide column</code>, is the same width as a <code>one wide column</code> on the outer grid.</p>
</div>
<div class="ui two column grid">
<div class="ui two column page grid">
<div class="column">
<div class="ui two column grid">
<div class="column">
@ -202,6 +210,12 @@ themes : ['Default']
</div>
</div>
</div>
<div class="column">
<div class="ui segment"></div>
</div>
<div class="column">
<div class="ui segment"></div>
</div>
<div class="column">
<div class="ui grid">
<div class="eight wide column">
@ -212,14 +226,94 @@ themes : ['Default']
</div>
</div>
</div>
<div class="column">
</div>
</div>
<h3 class="ui dividing header">Page Grids </h3>
<div class="highlighted example">
<h4 class="ui header">Page Gutters</h4>
<p>A page grid is designed to provide a responsive container suitable for wrapping the entire contents of your page.</p>
<div class="ui page grid">
<div class="four wide column">
<div class="ui segment"></div>
</div>
<div class="column">
<div class="four wide column">
<div class="ui segment"></div>
</div>
<div class="four wide column">
<div class="ui segment"></div>
</div>
<div class="four wide column">
<div class="ui segment"></div>
</div>
<div class="four wide column">
<div class="ui segment"></div>
</div>
<div class="four wide column">
<div class="ui segment"></div>
</div>
<div class="four wide column">
<div class="ui segment"></div>
</div>
<div class="four wide column">
<div class="ui segment"></div>
</div>
</div>
</div>
<div class="highlighted example">
<h4 class="ui header">Page Grid Breakpoints</h4>
<p>Semantic's page grid, by default, uses percentage values for page gutters. This means your page container will <b>constantly adjust</b> as the browser width changes, giving you the largest possible space for each breakpoint</p>
<p><code>grid</code> <code>row</code> and <code>column</code> all can receive responsive classes to make them appear only on a particular device.</p>
<table class="ui black celled table">
<thead>
<tr>
<th>Name</th>
<th>Breakpoint</th>
<th>Page Gutter</th>
<th>Responsive Class</th>
<th>Variable</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mobile</td>
<td>Below 768px</td>
<td>1rem</td>
<td>mobile only</td>
<td>$mobileBreakpoint</td>
</tr>
<tr>
<td>Tablet</td>
<td>Above 768px and below 992px</td>
<td>8%</td>
<td>tablet only</td>
<td>$tabletBreakpoint</td>
</tr>
<tr>
<td>Computer</td>
<td>Above 992px</td>
<td>13%</td>
<td>computer only</td>
<td>$computerBreakpoint</td>
</tr>
<tr>
<td>Large Monitor</td>
<td>Above 1400px</td>
<td>18%</td>
<td><em>None</em></td>
<td>$largeMonitorBreakpoint</td>
</tr>
<tr>
<td>Widescreen Monitor</td>
<td>Above 1920px</td>
<td>23%</td>
<td><em>None</em></td>
<td>$widescreenBreakpoint</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="ui tab" data-tab="definition">
@ -485,18 +579,37 @@ themes : ['Default']
</div>
<div class="example">
<h4 class="ui header">Spaced</h4>
<p>A spaced grid preserves the gutters on its first and last rows</p>
<h4 class="ui header">Padded</h4>
<p>A padded grid preserves the vertical and horizontal gutters</p>
<h3 class="ui header">Content Outside Grid</h3>
<p>This paragraph of text will automatically align with the edges of the grid below because it is fitted to remove left and right margins.
<div class="ui two column spaced grid">
<p>This paragraph of text will not align with the edges of the grid below because the grid preserves its outter gutters</p>
<div class="ui two column padded grid">
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
</div>
<div class="another example">
<p>This paragraph of text will not align vertically with the edges of the grid below because the grid preserves its outter gutters</p>
<div class="ui two column vertically padded grid">
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
</div>
<div class="another example">
<p>This paragraph of text will not align horizontally with the edges of the grid below because the grid preserves its outter gutters</p>
<div class="ui two column horizontally padded grid">
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
@ -604,7 +717,7 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Doubling Grid</h4>
<p>A grid can double its</p>
<p>A grid can double its column width on tablet and mobile sizes</p>
<div class="ui text message info ignore">
<i class="icon heart"></i> A grid will round its columns to the closest reasonable value when doubling, for example a <code>five column grid</code> will double <code>1 mobile, 3 tablet, 5 desktop</code>
</div>

23
server/files/javascript/grid.js
View File

@ -0,0 +1,23 @@
semantic.grid = {};
// ready event
semantic.grid.ready = function() {
$('.animation.checkbox')
.checkbox({
onChecked: function() {
$('body').addClass('animated');
},
onUnchecked: function() {
$('body').removeClass('animated');
}
})
;
};
// attach ready event
$(document)
.ready(semantic.grid.ready)
;

1092
server/files/stylesheets/semantic.css
View File

File diff suppressed because it is too large

103
src/definitions/collections/grid.less
View File

@ -24,15 +24,12 @@
*******************************/
.ui.grid {
position: relative;
display: block;
text-align: left;
font-size: 0em;
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
.ui.grid:after,
@ -49,16 +46,23 @@
-----------------------*/
.ui.grid {
margin-left: -@gutterWidth;
margin-right: -@gutterWidth;
margin-top: -(@rowSpacing / 2);
margin-bottom: -(@rowSpacing / 2);
margin-left: -(@gutterWidth / 2);
margin-right: -(@gutterWidth / 2);
}
.ui.relaxed.grid {
margin-left: -@relaxedGutterWidth;
margin-right: -@relaxedGutterWidth;
margin-left: -(@relaxedGutterWidth / 2);
margin-right: -(@relaxedGutterWidth / 2);
}
.ui.very.relaxed.grid {
margin-left: -@veryRelaxedGutterWidth;
margin-right: -@veryRelaxedGutterWidth;
margin-left: -(@veryRelaxedGutterWidth / 2);
margin-right: -(@veryRelaxedGutterWidth / 2);
}
/* Collapse Margins on Consecutive Grids */
.ui.grid + .grid {
margin-top: (@rowSpacing / 2);
}
/*-------------------
@ -66,23 +70,21 @@
--------------------*/
/* Standard 16 column */
.ui.grid > .column,
.ui.grid > .column:not(.row),
.ui.grid > .row > .column {
display: inline-block;
text-align: left;
font-size: 1rem;
width: @oneWide;
padding-left: @gutterWidth;
padding-right: @gutterWidth;
box-sizing: border-box;
padding-left: (@gutterWidth / 2);
padding-right: (@gutterWidth / 2);
vertical-align: top;
}
.ui.grid > * {
padding-left: @gutterWidth;
padding-right: @gutterWidth;
padding-left: (@gutterWidth / 2);
padding-right: (@gutterWidth / 2);
}
/*-------------------
@ -90,48 +92,43 @@
--------------------*/
.ui.grid > .row {
display: block;
display: inline-block;
width: 100% !important;
margin-top: (@rowSpacing / 2);
padding: (@rowSpacing / 2) 0% 0%;
padding: 0rem;
font-size: 0rem;
}
.ui.grid > :first-child {
padding-top: @firstRowSpacing;
margin-top: @firstRowSpacing;
margin-top: (@rowSpacing / 2);
margin-bottom: (@rowSpacing / 2);
}
/*-------------------
Columns
--------------------*/
/* Vertical padding when no rows */
.ui.grid > .column:not(.row) {
margin-top: (@rowSpacing / 2);
margin-bottom: (@rowSpacing / 2);
}
.ui.grid > .row > .column {
margin-top: 0em;
margin-bottom: 0em;
}
/*-------------------
Content
--------------------*/
.ui.grid > .row > img,
.ui.grid > .row > .column > img {
max-width: @columnMaxImageWidth;
}
.ui.grid .column > .ui.segment:only-child {
margin: 0em;
}
/*-------------------
Loose Coupling
--------------------*/
.ui.grid .row + .ui.divider {
margin: (@rowSpacing / 2) @gutterWidth;
margin: (@rowSpacing / 2) (@gutterWidth / 2);
}
/*******************************
@ -483,38 +480,45 @@
.ui.relaxed.grid > .column:not(.row),
.ui.relaxed.grid > .row > .column,
.ui.grid > .relaxed.row > .column {
padding-left: @relaxedGutterWidth;
padding-right: @relaxedGutterWidth;
padding-left: (@relaxedGutterWidth / 2);
padding-right: (@relaxedGutterWidth / 2);
}
.ui.very.relaxed.grid > .column:not(.row),
.ui.very.relaxed.grid > .row > .column,
.ui.grid > .very.relaxed.row > .column {
padding-left: @veryRelaxedGutterWidth;
padding-right: @veryRelaxedGutterWidth;
padding-left: (@veryRelaxedGutterWidth / 2);
padding-right: (@veryRelaxedGutterWidth / 2);
}
/* Coupling with UI Divider */
.ui.relaxed.grid .row + .ui.divider,
.ui.grid .relaxed.row + .ui.divider {
margin-left: @relaxedGutterWidth;
margin-right: @relaxedGutterWidth;
margin-left: (@relaxedGutterWidth / 2);
margin-right: (@relaxedGutterWidth / 2);
}
.ui.very.relaxed.grid .row + .ui.divider,
.ui.grid .very.relaxed.row + .ui.divider {
margin-left: @veryRelaxedGutterWidth;
margin-right: @veryRelaxedGutterWidth;
margin-left: (@veryRelaxedGutterWidth / 2);
margin-right: (@veryRelaxedGutterWidth / 2);
}
/*----------------------
Spaced
Padded
-----------------------*/
.ui.spaced.grid {
.ui.padded.grid:not(.horizontally):not(.vertically) {
margin: 0em !important;
}
.ui.horizontally.padded.grid {
margin-left: 0em !important;
margin-right: 0em !important;
}
.ui.vertically.padded.grid {
margin-top: 0em !important;
margin-bottom: 0em !important;
}
/*----------------------
@ -558,13 +562,13 @@
.ui.vertically.divided.grid > .row:before {
position: absolute;
content: '';
top: 0px;
top: -(@rowSpacing / 2);
left: 0px;
width: (100% - (@gutterWidth * 2));
width: ~"calc(100% - "@gutterWidth~")";
height: 1px;
margin: 0% @gutterWidth;
margin: 0% (@gutterWidth / 2);
box-shadow: @verticallyDividedBorder;
}
.ui.vertically.divided.grid > .row:first-child:before {
@ -581,14 +585,14 @@
/* Relaxed */
.ui.relaxed.vertically.divided.grid > .row:before {
margin-left: @relaxedGutterWidth;
margin-right: @relaxedGutterWidth;
width: (100% - (@relaxedGutterWidth * 2));
margin-left: (@relaxedGutterWidth / 2);
margin-right: (@relaxedGutterWidth / 2);
width: ~"calc(100% - "@relaxedGutterWidth~")";
}
.ui.very.relaxed.vertically.divided.grid > .row:before {
margin-left: @veryRelaxedGutterWidth;
margin-right: @veryRelaxedGutterWidth;
width: (100% - (@veryRelaxedGutterWidth * 2));
width: ~"calc(100% - "@veryRelaxedGutterWidth~")";
}
/*----------------------
@ -609,8 +613,8 @@
display: table;
table-layout: fixed;
width: 100%;
margin-top: 0em;
padding-top: 0em;
margin: 0em;
padding: 0em;
box-shadow: 0px (-@celledWidth) 0px 0px @celledBorderColor;
}
.ui.celled.grid > .column:not(.row),
@ -623,7 +627,6 @@
.ui.celled.grid > .row > .column:first-child {
box-shadow: none;
}
.ui.celled.page.grid {
box-shadow: none;
}

4
src/definitions/collections/message.less
View File

@ -53,7 +53,7 @@
font-family: @headerFont;
font-size: @headerFontSize;
font-weight: @headerFontWeight;
margin: 0em @headerHorizontalDistance 0em 0em;
margin: 0em 0em 0em @headerDistance;
}
/* Paragraph */
@ -202,7 +202,7 @@
vertical-align: @iconVerticalAlign;
font-size: @iconSize;
opacity: @iconOpacity;
width: auto;
width: 1em;
}
.ui.icon.message > .content {
display: table-cell;

11
src/definitions/modules/checkbox.js
View File

@ -73,6 +73,15 @@ $.fn.checkbox = function(parameters) {
.on('click' + eventNamespace, module.toggle)
;
}
if(settings.fireOnInit) {
$.proxy(settings.onChange, $input.get())();
if( module.is.checked() ) {
$.proxy(settings.onChecked, $input.get())();
}
else {
$.proxy(settings.onUnchecked, $input.get())();
}
}
module.instantiate();
},
@ -360,6 +369,8 @@ $.fn.checkbox.settings = {
context : false,
required : 'auto',
fireOnInit : true,
onChange : function(){},
onChecked : function(){},
onUnchecked : function(){},

9
src/themes/packages/default/collections/grid.variables
View File

@ -15,10 +15,9 @@
*******************************/
@minWidth: 320px;
@gutterWidth: 1.5rem;
@rowSpacing: 1rem;
@firstRowSpacing: 0rem;
@gutterWidth: 2rem;
@rowSpacing: 2rem;
@columnMaxImageWidth: 100%;
@ -51,8 +50,8 @@
Relaxed
---------------*/
@relaxedGutterWidth: 2rem;
@veryRelaxedGutterWidth: 3rem;
@relaxedGutterWidth: 3rem;
@veryRelaxedGutterWidth: 4rem;
/*--------------
Divided

6
src/themes/packages/default/collections/message.variables
View File

@ -31,11 +31,11 @@
;
/* Header */
@headerFontSize: 1.2rem;
@headerFontSize: 1rem;
@headerFontWeight: bold;
@headerDisplay: block;
@headerHorizontalDistance: 0em;
@headerParagraphDistance: 0em;
@headerDistance: 0rem;
@headerParagraphDistance: 0.25em;
/* Paragraph */
@messageTextOpacity: 0.85;

Write Preview
Loading…
Cancel
Save