mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-01 13:48: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;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
margin: $spacer-y 0;
|
||||
}
|
||||
|
||||
// To hold things like search icon and view toggle
|
||||
|
||||
@ -48,12 +48,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
//.cms-south-actions {
|
||||
// height: $navbar-total-height;
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// width: 100%;
|
||||
// border-top: 1px solid #ddd;
|
||||
// background-color: #f6f7f8;
|
||||
// padding: 8px 15px;
|
||||
//}
|
||||
.cms-south-actions {
|
||||
height: $navbar-total-height;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid $border-color;
|
||||
background-color: $body-bg;
|
||||
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.
|
||||
*/
|
||||
body, html {
|
||||
line-height: $grid-y * 2;
|
||||
font-family: $font-family;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.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 {
|
||||
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.
|
||||
|
||||
// $body-bg: #fff;
|
||||
$body-bg: #f6f7f8;
|
||||
$body-color: $gray-dark;
|
||||
$body-color-light: lighten($body-color,10);
|
||||
$body-color-lighter: lighten($body-color,20);
|
||||
|
||||
|
||||
// Links
|
||||
//
|
||||
// Style anchor elements.
|
||||
|
||||
// $link-color: $brand-primary;
|
||||
// $link-decoration: none;
|
||||
// $link-hover-color: darken($link-color, 15%);
|
||||
// $link-hover-decoration: underline;
|
||||
$link-color: #0071c4;
|
||||
$link-decoration: none;
|
||||
$link-hover-color: darken($link-color, 15%);
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
|
||||
// Grid breakpoints
|
||||
@ -114,30 +116,30 @@ $body-color: $gray-dark;
|
||||
// Define the minimum and maximum dimensions at which your layout will change,
|
||||
// adapting to different screen sizes, for use in media queries.
|
||||
|
||||
// $grid-breakpoints: (
|
||||
// // Extra small screen / phone
|
||||
// xs: 0,
|
||||
// // Small screen / phone
|
||||
// sm: 544px,
|
||||
// // Medium screen / tablet
|
||||
// md: 768px,
|
||||
// // Large screen / desktop
|
||||
// lg: 992px,
|
||||
// // Extra large screen / wide desktop
|
||||
// xl: 1200px
|
||||
// );
|
||||
$grid-breakpoints: (
|
||||
// Extra small screen / phone
|
||||
xs: 0,
|
||||
// Small screen / phone
|
||||
sm: 544px,
|
||||
// Medium screen / tablet
|
||||
md: 768px,
|
||||
// Large screen / desktop
|
||||
lg: 992px,
|
||||
// Extra large screen / wide desktop
|
||||
xl: 1200px
|
||||
);
|
||||
|
||||
|
||||
// Grid containers
|
||||
//
|
||||
// Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// $container-max-widths: (
|
||||
// sm: 576px,
|
||||
// md: 720px,
|
||||
// lg: 940px,
|
||||
// xl: 1140px
|
||||
// );
|
||||
$container-max-widths: (
|
||||
sm: 576px,
|
||||
md: 720px,
|
||||
lg: 940px,
|
||||
xl: 1140px
|
||||
);
|
||||
|
||||
|
||||
// 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 */
|
||||
|
||||
$headings-margin-bottom: $spacer;
|
||||
// $headings-font-family: inherit;
|
||||
// $headings-font-weight: 500;
|
||||
// $headings-line-height: 1.1;
|
||||
// $headings-color: inherit;
|
||||
$headings-font-family: inherit;
|
||||
$headings-font-weight: 500;
|
||||
$headings-line-height: 1.3;
|
||||
$headings-color: inherit;
|
||||
//
|
||||
// $lead-font-size: 1.25rem;
|
||||
// $lead-font-weight: 300;
|
||||
@ -235,16 +237,16 @@ $text-muted: #7f8b97;
|
||||
//
|
||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
// $table-cell-padding: .75rem;
|
||||
// $table-sm-cell-padding: .3rem;
|
||||
//
|
||||
// $table-bg: transparent;
|
||||
// $table-bg-accent: #f9f9f9;
|
||||
// $table-bg-hover: #f5f5f5;
|
||||
// $table-bg-active: $table-bg-hover;
|
||||
//
|
||||
// $table-border-width: $border-width;
|
||||
// $table-border-color: $gray-lighter;
|
||||
$table-cell-padding: .75rem;
|
||||
$table-sm-cell-padding: .3rem;
|
||||
|
||||
$table-bg: transparent;
|
||||
$table-bg-accent: #f9f9f9;
|
||||
$table-bg-hover: #f5f5f5;
|
||||
$table-bg-active: $table-bg-hover;
|
||||
|
||||
$table-border-width: $border-width;
|
||||
$table-border-color: $gray-lighter;
|
||||
|
||||
|
||||
// Buttons
|
||||
@ -301,9 +303,9 @@ $btn-danger-border: transparent;
|
||||
|
||||
// Forms
|
||||
|
||||
// $input-padding-x: .75rem;
|
||||
// $input-padding-y: .375rem;
|
||||
//
|
||||
$input-padding-x: .75rem;
|
||||
$input-padding-y: .54rem; //.375rem;
|
||||
|
||||
// $input-bg: #fff;
|
||||
// $input-bg-disabled: $gray-lighter;
|
||||
//
|
||||
@ -384,11 +386,10 @@ $btn-danger-border: transparent;
|
||||
|
||||
$navbar-height: 52px;
|
||||
$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-hover-color: rgba(255,255,255,.75);
|
||||
// $navbar-dark-active-color: rgba(255,255,255,1);
|
||||
@ -402,23 +403,23 @@ $navbar-total-height: 53px;
|
||||
|
||||
// Navs
|
||||
|
||||
// $nav-link-padding: .5em 1em;
|
||||
// $nav-link-hover-bg: $gray-lighter;
|
||||
//
|
||||
// $nav-disabled-link-color: $gray-light;
|
||||
// $nav-disabled-link-hover-color: $gray-light;
|
||||
//
|
||||
// $nav-tabs-border-color: #ddd;
|
||||
//
|
||||
// $nav-tabs-link-border-width: $border-width;
|
||||
// $nav-tabs-link-hover-border-color: $gray-lighter;
|
||||
//
|
||||
// $nav-tabs-active-link-hover-bg: $body-bg;
|
||||
// $nav-tabs-active-link-hover-color: $gray;
|
||||
// $nav-tabs-active-link-hover-border-color: #ddd;
|
||||
//
|
||||
// $nav-tabs-justified-link-border-color: #ddd;
|
||||
// $nav-tabs-justified-active-link-border-color: $body-bg;
|
||||
$nav-link-padding: 12px 8px;
|
||||
$nav-link-hover-bg: red; //$gray-lighter;
|
||||
|
||||
$nav-disabled-link-color: $text-muted;
|
||||
$nav-disabled-link-hover-color: $text-muted;
|
||||
|
||||
$nav-tabs-border-color: #d9dee2;
|
||||
|
||||
$nav-tabs-link-border-width: 0;
|
||||
$nav-tabs-link-hover-border-color: green; //$gray-lighter;
|
||||
|
||||
$nav-tabs-active-link-hover-bg: $body-bg;
|
||||
$nav-tabs-active-link-hover-color: $body-color;
|
||||
$nav-tabs-active-link-hover-border-color: #ddd;
|
||||
|
||||
$nav-tabs-justified-link-border-color: #ddd;
|
||||
$nav-tabs-justified-active-link-border-color: $body-bg;
|
||||
//
|
||||
// $nav-pills-border-radius: $border-radius;
|
||||
// $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
|
||||
*/
|
||||
|
||||
/** -----------------------------
|
||||
* CSS reset
|
||||
* ------------------------------ */
|
||||
@import "reset.scss";
|
||||
|
||||
/** -----------------------------
|
||||
* Component base css
|
||||
* ------------------------------ */
|
||||
@ -65,4 +60,3 @@
|
||||
* Retina graphics
|
||||
* ----------------------------- */
|
||||
@import "retina.scss";
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user