mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
General CMS typography swap to bootstrap
Start of using bootstrap variables and typography styles, remove old cms reset in favour of bootstrap reboot
This commit is contained in:
Paul Clarke
Ingo Schommer
parent
74454a7557
commit
e0fe90b3c8
@ -19,6 +19,7 @@
|
|||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin: $spacer-y 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// To hold things like search icon and view toggle
|
// To hold things like search icon and view toggle
|
||||||
|
|||||||
@ -48,12 +48,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//.cms-south-actions {
|
.cms-south-actions {
|
||||||
// height: $navbar-total-height;
|
height: $navbar-total-height;
|
||||||
// position: absolute;
|
position: absolute;
|
||||||
// bottom: 0;
|
bottom: 0;
|
||||||
// width: 100%;
|
width: 100%;
|
||||||
// border-top: 1px solid #ddd;
|
border-top: 1px solid $border-color;
|
||||||
// background-color: #f6f7f8;
|
background-color: $body-bg;
|
||||||
// padding: 8px 15px;
|
padding: $spacer-y*.625 $spacer-x;
|
||||||
//}
|
|
||||||
|
.btn-toolbar {
|
||||||
|
// TODO Remove '.cms .btn-toolbar' override
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,142 +0,0 @@
|
|||||||
// Based on [Eric Meyer's reset 2.0](http://meyerweb.com/eric/tools/css/reset/index.html)
|
|
||||||
// Global reset rules.
|
|
||||||
// For more specific resets, use the reset mixins provided below
|
|
||||||
@mixin global-reset {
|
|
||||||
html, body, div, span, applet, object, iframe,
|
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
||||||
a, abbr, acronym, address, big, cite, code,
|
|
||||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
||||||
small, strike, strong, sub, sup, tt, var,
|
|
||||||
b, u, i, center,
|
|
||||||
dl, dt, dd, ol, ul, li,
|
|
||||||
fieldset, form, label, legend,
|
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
||||||
article, aside, canvas, details, embed,
|
|
||||||
figure, figcaption, footer, header, hgroup,
|
|
||||||
menu, nav, output, ruby, section, summary,
|
|
||||||
time, mark, audio, video {
|
|
||||||
@include reset-box-model;
|
|
||||||
@include reset-font; }
|
|
||||||
// Unlike Eric's original reset, we reset the html element to be compatible
|
|
||||||
// with the vertical rhythm mixins.
|
|
||||||
html {
|
|
||||||
@include reset-body; }
|
|
||||||
ol, ul {
|
|
||||||
@include reset-list-style; }
|
|
||||||
table {
|
|
||||||
@include reset-table; }
|
|
||||||
caption, th, td {
|
|
||||||
@include reset-table-cell; }
|
|
||||||
q, blockquote {
|
|
||||||
@include reset-quotation; }
|
|
||||||
a img {
|
|
||||||
@include reset-image-anchor-border; }
|
|
||||||
@include reset-html5; }
|
|
||||||
|
|
||||||
// Reset all elements within some selector scope. To reset the selector itself,
|
|
||||||
// mixin the appropriate reset mixin for that element type as well. This could be
|
|
||||||
// useful if you want to style a part of your page in a dramatically different way.
|
|
||||||
@mixin nested-reset {
|
|
||||||
div, span, applet, object, iframe,
|
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
||||||
a, abbr, acronym, address, big, cite, code,
|
|
||||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
||||||
small, strike, strong, sub, sup, tt, var,
|
|
||||||
b, u, i, center,
|
|
||||||
dl, dt, dd, ol, ul, li,
|
|
||||||
fieldset, form, label, legend,
|
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
||||||
article, aside, canvas, details, embed,
|
|
||||||
figure, figcaption, footer, header, hgroup,
|
|
||||||
menu, nav, output, ruby, section, summary,
|
|
||||||
time, mark, audio, video {
|
|
||||||
@include reset-box-model;
|
|
||||||
@include reset-font; }
|
|
||||||
table {
|
|
||||||
@include reset-table; }
|
|
||||||
caption, th, td {
|
|
||||||
@include reset-table-cell; }
|
|
||||||
q, blockquote {
|
|
||||||
@include reset-quotation; }
|
|
||||||
a img {
|
|
||||||
@include reset-image-anchor-border; } }
|
|
||||||
|
|
||||||
// Reset the box model measurements.
|
|
||||||
@mixin reset-box-model {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0; }
|
|
||||||
|
|
||||||
// Reset the font and vertical alignment.
|
|
||||||
@mixin reset-font {
|
|
||||||
vertical-align: baseline; }
|
|
||||||
|
|
||||||
// Resets the outline when focus.
|
|
||||||
// For accessibility you need to apply some styling in its place.
|
|
||||||
@mixin reset-focus {
|
|
||||||
outline: 0; }
|
|
||||||
|
|
||||||
// Reset a body element.
|
|
||||||
@mixin reset-body {
|
|
||||||
line-height: 1; }
|
|
||||||
|
|
||||||
// Reset the list style of an element.
|
|
||||||
@mixin reset-list-style {
|
|
||||||
list-style: none; }
|
|
||||||
|
|
||||||
// Reset a table
|
|
||||||
@mixin reset-table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0; }
|
|
||||||
|
|
||||||
// Reset a table cell (`th`, `td`)
|
|
||||||
@mixin reset-table-cell {
|
|
||||||
text-align: left;
|
|
||||||
font-weight: normal;
|
|
||||||
vertical-align: middle; }
|
|
||||||
|
|
||||||
// Reset a quotation (`q`, `blockquote`)
|
|
||||||
@mixin reset-quotation {
|
|
||||||
quotes: none;
|
|
||||||
&:before, &:after {
|
|
||||||
content: "";
|
|
||||||
content: none; } }
|
|
||||||
|
|
||||||
// Resets the border.
|
|
||||||
@mixin reset-image-anchor-border {
|
|
||||||
border: none; }
|
|
||||||
|
|
||||||
// Unrecognized elements are displayed inline.
|
|
||||||
// This reset provides a basic reset for block html5 elements
|
|
||||||
// so they are rendered correctly in browsers that don't recognize them
|
|
||||||
// and reset in browsers that have default styles for them.
|
|
||||||
@mixin reset-html5 {
|
|
||||||
#{elements-of-type(html5-block)} {
|
|
||||||
display: block; } }
|
|
||||||
|
|
||||||
// Resets the display of inline and block elements to their default display
|
|
||||||
// according to their tag type. Elements that have a default display that varies across
|
|
||||||
// versions of html or browser are not handled here, but this covers the 90% use case.
|
|
||||||
// Usage Example:
|
|
||||||
//
|
|
||||||
// // Turn off the display for both of these classes
|
|
||||||
// .unregistered-only, .registered-only
|
|
||||||
// display: none
|
|
||||||
// // Now turn only one of them back on depending on some other context.
|
|
||||||
// body.registered
|
|
||||||
// +reset-display(".registered-only")
|
|
||||||
// body.unregistered
|
|
||||||
// +reset-display(".unregistered-only")
|
|
||||||
@mixin reset-display($selector: "", $important: false) {
|
|
||||||
#{append-selector(elements-of-type("inline"), $selector)} {
|
|
||||||
@if $important {
|
|
||||||
display: inline !important; }
|
|
||||||
@else {
|
|
||||||
display: inline; } }
|
|
||||||
#{append-selector(elements-of-type("block"), $selector)} {
|
|
||||||
@if $important {
|
|
||||||
display: block !important; }
|
|
||||||
@else {
|
|
||||||
display: block; } } }
|
|
||||||
|
|
||||||
@include global-reset;
|
|
||||||
@ -3,52 +3,39 @@
|
|||||||
*
|
*
|
||||||
* Contains the basic typography related styles for the admin interface.
|
* Contains the basic typography related styles for the admin interface.
|
||||||
*/
|
*/
|
||||||
body, html {
|
|
||||||
line-height: $grid-y * 2;
|
|
||||||
font-family: $font-family;
|
|
||||||
color: $color-text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cms {
|
.cms {
|
||||||
h2, h3, h4, h5 {
|
|
||||||
font-weight: bold;
|
|
||||||
margin: $grid-y * 2 0 $grid-y * 2 0;
|
|
||||||
line-height: $grid-y * 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
line-height: $grid-y * 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
line-height: $grid-y * 2;
|
|
||||||
margin-bottom: $grid-y * 2;
|
|
||||||
}
|
|
||||||
em {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
code {
|
code {
|
||||||
font-family: 'Bitstream Vera Sans Mono','Courier', monospace;
|
font-family: 'Bitstream Vera Sans Mono','Courier', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
|
|
||||||
thead {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Used for long sentences where you would like to truncate them with an ellipsis (requires a set width)
|
||||||
|
.truncate {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Used for breaking text so it doesn't run horizontally, useful for breaking URLs
|
||||||
|
.break-string {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Standard table styles
|
||||||
|
.table {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: $spacer-y * 2;
|
||||||
|
border-top: 0;
|
||||||
|
|
||||||
|
thead th {
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: normal;
|
||||||
|
border-bottom: 1px solid #bbb;
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -95,18 +95,20 @@ $border-width: 1px;
|
|||||||
//
|
//
|
||||||
// Settings for the `<body>` element.
|
// Settings for the `<body>` element.
|
||||||
|
|
||||||
// $body-bg: #fff;
|
$body-bg: #f6f7f8;
|
||||||
$body-color: $gray-dark;
|
$body-color: $gray-dark;
|
||||||
|
$body-color-light: lighten($body-color,10);
|
||||||
|
$body-color-lighter: lighten($body-color,20);
|
||||||
|
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
//
|
//
|
||||||
// Style anchor elements.
|
// Style anchor elements.
|
||||||
|
|
||||||
// $link-color: $brand-primary;
|
$link-color: #0071c4;
|
||||||
// $link-decoration: none;
|
$link-decoration: none;
|
||||||
// $link-hover-color: darken($link-color, 15%);
|
$link-hover-color: darken($link-color, 15%);
|
||||||
// $link-hover-decoration: underline;
|
$link-hover-decoration: underline;
|
||||||
|
|
||||||
|
|
||||||
// Grid breakpoints
|
// Grid breakpoints
|
||||||
@ -114,30 +116,30 @@ $body-color: $gray-dark;
|
|||||||
// Define the minimum and maximum dimensions at which your layout will change,
|
// Define the minimum and maximum dimensions at which your layout will change,
|
||||||
// adapting to different screen sizes, for use in media queries.
|
// adapting to different screen sizes, for use in media queries.
|
||||||
|
|
||||||
// $grid-breakpoints: (
|
$grid-breakpoints: (
|
||||||
// // Extra small screen / phone
|
// Extra small screen / phone
|
||||||
// xs: 0,
|
xs: 0,
|
||||||
// // Small screen / phone
|
// Small screen / phone
|
||||||
// sm: 544px,
|
sm: 544px,
|
||||||
// // Medium screen / tablet
|
// Medium screen / tablet
|
||||||
// md: 768px,
|
md: 768px,
|
||||||
// // Large screen / desktop
|
// Large screen / desktop
|
||||||
// lg: 992px,
|
lg: 992px,
|
||||||
// // Extra large screen / wide desktop
|
// Extra large screen / wide desktop
|
||||||
// xl: 1200px
|
xl: 1200px
|
||||||
// );
|
);
|
||||||
|
|
||||||
|
|
||||||
// Grid containers
|
// Grid containers
|
||||||
//
|
//
|
||||||
// Define the maximum width of `.container` for different screen sizes.
|
// Define the maximum width of `.container` for different screen sizes.
|
||||||
|
|
||||||
// $container-max-widths: (
|
$container-max-widths: (
|
||||||
// sm: 576px,
|
sm: 576px,
|
||||||
// md: 720px,
|
md: 720px,
|
||||||
// lg: 940px,
|
lg: 940px,
|
||||||
// xl: 1140px
|
xl: 1140px
|
||||||
// );
|
);
|
||||||
|
|
||||||
|
|
||||||
// Grid columns
|
// Grid columns
|
||||||
@ -187,10 +189,10 @@ $line-height: 1.538; /* relative to font-size */
|
|||||||
$line-height-base: 20px; /* can be used with varying font-sizes, holds grid sizing */
|
$line-height-base: 20px; /* can be used with varying font-sizes, holds grid sizing */
|
||||||
|
|
||||||
$headings-margin-bottom: $spacer;
|
$headings-margin-bottom: $spacer;
|
||||||
// $headings-font-family: inherit;
|
$headings-font-family: inherit;
|
||||||
// $headings-font-weight: 500;
|
$headings-font-weight: 500;
|
||||||
// $headings-line-height: 1.1;
|
$headings-line-height: 1.3;
|
||||||
// $headings-color: inherit;
|
$headings-color: inherit;
|
||||||
//
|
//
|
||||||
// $lead-font-size: 1.25rem;
|
// $lead-font-size: 1.25rem;
|
||||||
// $lead-font-weight: 300;
|
// $lead-font-weight: 300;
|
||||||
@ -235,16 +237,16 @@ $text-muted: #7f8b97;
|
|||||||
//
|
//
|
||||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||||
|
|
||||||
// $table-cell-padding: .75rem;
|
$table-cell-padding: .75rem;
|
||||||
// $table-sm-cell-padding: .3rem;
|
$table-sm-cell-padding: .3rem;
|
||||||
//
|
|
||||||
// $table-bg: transparent;
|
$table-bg: transparent;
|
||||||
// $table-bg-accent: #f9f9f9;
|
$table-bg-accent: #f9f9f9;
|
||||||
// $table-bg-hover: #f5f5f5;
|
$table-bg-hover: #f5f5f5;
|
||||||
// $table-bg-active: $table-bg-hover;
|
$table-bg-active: $table-bg-hover;
|
||||||
//
|
|
||||||
// $table-border-width: $border-width;
|
$table-border-width: $border-width;
|
||||||
// $table-border-color: $gray-lighter;
|
$table-border-color: $gray-lighter;
|
||||||
|
|
||||||
|
|
||||||
// Buttons
|
// Buttons
|
||||||
@ -301,9 +303,9 @@ $btn-danger-border: transparent;
|
|||||||
|
|
||||||
// Forms
|
// Forms
|
||||||
|
|
||||||
// $input-padding-x: .75rem;
|
$input-padding-x: .75rem;
|
||||||
// $input-padding-y: .375rem;
|
$input-padding-y: .54rem; //.375rem;
|
||||||
//
|
|
||||||
// $input-bg: #fff;
|
// $input-bg: #fff;
|
||||||
// $input-bg-disabled: $gray-lighter;
|
// $input-bg-disabled: $gray-lighter;
|
||||||
//
|
//
|
||||||
@ -384,11 +386,10 @@ $btn-danger-border: transparent;
|
|||||||
|
|
||||||
$navbar-height: 52px;
|
$navbar-height: 52px;
|
||||||
$navbar-total-height: 53px;
|
$navbar-total-height: 53px;
|
||||||
|
$navbar-border-radius: 0;
|
||||||
|
$navbar-padding-horizontal: $spacer;
|
||||||
|
$navbar-padding-vertical: ($spacer / 2);
|
||||||
|
|
||||||
// $navbar-border-radius: $border-radius;
|
|
||||||
// $navbar-padding-horizontal: $spacer;
|
|
||||||
// $navbar-padding-vertical: ($spacer / 2);
|
|
||||||
//
|
|
||||||
// $navbar-dark-color: rgba(255,255,255,.5);
|
// $navbar-dark-color: rgba(255,255,255,.5);
|
||||||
// $navbar-dark-hover-color: rgba(255,255,255,.75);
|
// $navbar-dark-hover-color: rgba(255,255,255,.75);
|
||||||
// $navbar-dark-active-color: rgba(255,255,255,1);
|
// $navbar-dark-active-color: rgba(255,255,255,1);
|
||||||
@ -402,23 +403,23 @@ $navbar-total-height: 53px;
|
|||||||
|
|
||||||
// Navs
|
// Navs
|
||||||
|
|
||||||
// $nav-link-padding: .5em 1em;
|
$nav-link-padding: 12px 8px;
|
||||||
// $nav-link-hover-bg: $gray-lighter;
|
$nav-link-hover-bg: red; //$gray-lighter;
|
||||||
//
|
|
||||||
// $nav-disabled-link-color: $gray-light;
|
$nav-disabled-link-color: $text-muted;
|
||||||
// $nav-disabled-link-hover-color: $gray-light;
|
$nav-disabled-link-hover-color: $text-muted;
|
||||||
//
|
|
||||||
// $nav-tabs-border-color: #ddd;
|
$nav-tabs-border-color: #d9dee2;
|
||||||
//
|
|
||||||
// $nav-tabs-link-border-width: $border-width;
|
$nav-tabs-link-border-width: 0;
|
||||||
// $nav-tabs-link-hover-border-color: $gray-lighter;
|
$nav-tabs-link-hover-border-color: green; //$gray-lighter;
|
||||||
//
|
|
||||||
// $nav-tabs-active-link-hover-bg: $body-bg;
|
$nav-tabs-active-link-hover-bg: $body-bg;
|
||||||
// $nav-tabs-active-link-hover-color: $gray;
|
$nav-tabs-active-link-hover-color: $body-color;
|
||||||
// $nav-tabs-active-link-hover-border-color: #ddd;
|
$nav-tabs-active-link-hover-border-color: #ddd;
|
||||||
//
|
|
||||||
// $nav-tabs-justified-link-border-color: #ddd;
|
$nav-tabs-justified-link-border-color: #ddd;
|
||||||
// $nav-tabs-justified-active-link-border-color: $body-bg;
|
$nav-tabs-justified-active-link-border-color: $body-bg;
|
||||||
//
|
//
|
||||||
// $nav-pills-border-radius: $border-radius;
|
// $nav-pills-border-radius: $border-radius;
|
||||||
// $nav-pills-active-link-hover-bg: $component-active-bg;
|
// $nav-pills-active-link-hover-bg: $component-active-bg;
|
||||||
|
|||||||
@ -14,11 +14,6 @@
|
|||||||
* * Footer must sit over the content as well so this in the 40 range
|
* * Footer must sit over the content as well so this in the 40 range
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/** -----------------------------
|
|
||||||
* CSS reset
|
|
||||||
* ------------------------------ */
|
|
||||||
@import "reset.scss";
|
|
||||||
|
|
||||||
/** -----------------------------
|
/** -----------------------------
|
||||||
* Component base css
|
* Component base css
|
||||||
* ------------------------------ */
|
* ------------------------------ */
|
||||||
@ -65,4 +60,3 @@
|
|||||||
* Retina graphics
|
* Retina graphics
|
||||||
* ----------------------------- */
|
* ----------------------------- */
|
||||||
@import "retina.scss";
|
@import "retina.scss";
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user