From e61d51a071db8e2f25642ba2030748a1feafa146 Mon Sep 17 00:00:00 2001 From: alex Date: Wed, 17 Feb 2016 13:46:18 +0300 Subject: [PATCH] refactor(panels): apply new page design --- src/app/pages/ui/panels/panels.html | 179 ++++++++++++++---- .../theme/bootstrap-overrides/_panel.scss | 35 +++- src/sass/theme/conf/_mixins.scss | 2 +- src/sass/theme/conf/_variables.scss | 1 + 4 files changed, 174 insertions(+), 43 deletions(-) diff --git a/src/app/pages/ui/panels/panels.html b/src/app/pages/ui/panels/panels.html index a2a23ab..999109d 100644 --- a/src/app/pages/ui/panels/panels.html +++ b/src/app/pages/ui/panels/panels.html @@ -1,83 +1,184 @@ -
+
+

Default panels

+
+
-
-
-

A panel in bootstrap is a bordered box with some padding around its content.

-

Panels are created with the .panel class, and content inside the panel has a - .panel-body class. The .panel-default class is used to style the color of the - panel. See the last example on this page for more contextual classes.

+
+

Simple panel

+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac mi erat. Phasellus placerat, elit a laoreet + semper, enim ipsum ultricies orci, ac tincidunt tellus massa eu est. Nam non porta purus, sed facilisis justo. Nam + pulvinar sagittis quam, eget posuere turpis facilisis pharetra. Integer facilisis ex sed aliquet euismod. Interdum + et malesuada fames ac ante ipsum primis in faucibus.
+
+

Panel with Header

- -
-
Panel Heading
-
-

The .panel-heading class adds a heading to the panel.

+
+ Phasellus maximus venenatis augue, et vestibulum neque aliquam ut. Morbi mattis libero vitae vulputate dignissim. + Praesent placerat, sem non dapibus cursus, lacus nisi blandit quam, vitae porttitor lectus lacus non turpis. Donec + suscipit consequat tellus, non blandit purus porttitor a. Sed scelerisque ac purus id sollicitudin. Vestibulum + magna ligula, tristique eu aliquam id, mollis vel nunc.
+
+

Panel with scroll

+ +
+

+ Suspendisse nec tellus urna. Sed id est metus. Nullam sit amet dolor nec ipsum dictum suscipit. Mauris sed nisi + mauris. Nulla iaculis nisl ut velit ornare imperdiet. Suspendisse potenti. In tempor leo sed sem malesuada + pellentesque. Maecenas faucibus metus lacus, ac egestas diam vulputate vitae. +

+

+ Sed dapibus, purus vel hendrerit consectetur, lectus orci gravida massa, sed bibendum dui mauris et eros. Nulla + dolor massa, posuere et dictum sit amet, dignissim quis odio. Fusce mollis finibus dignissim. Integer sodales + augue erat. Pellentesque laoreet vestibulum urna at iaculis. Nulla libero augue, euismod at diam eget, aliquam + condimentum ligula. Donec a leo eu est molestie lacinia hendrerit sed lorem. Duis id diam eu metus sodales + consequat vel eu elit. Praesent dolor nibh, convallis eleifend feugiat a, finibus porttitor nibh. Ut non libero + vel velit pulvinar scelerisque non vel lorem. Integer porta tempor nulla. Sed nibh erat, ultrices vel lorem eu, + rutrum vehicula sem. +

+ +

+ Donec nec tellus urna. Sed id est metus. Nullam sit amet dolor nec ipsum dictum suscipit. Mauris sed nisi + mauris. Nulla iaculis nisl ut velit ornare imperdiet. Suspendisse potenti. In tempor leo sed sem malesuada + pellentesque. Maecenas faucibus metus lacus, ac egestas diam vulputate vitae. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum nec ligula egestas rhoncus. Sed + dignissim, augue vel scelerisque vulputate, nisi ante posuere lorem, quis iaculis eros dolor eu nisl. Etiam + sagittis, ipsum ac tempor iaculis, justo neque mattis ante, ac maximus sapien risus eu sapien. Morbi erat urna, + varius et lectus vel, porta dictum orci. Duis bibendum euismod elit, et lobortis purus venenatis in. Mauris eget + lacus enim. Cras quis sem et magna fringilla convallis. Proin hendrerit nulla vel gravida mollis. Interdum et + malesuada fames ac ante ipsum primis in faucibus. Vestibulum consectetur quis purus vel aliquam. +

-
-
-

The .panel-footer class adds a footer to the panel.

-
Panel Footer
+
-
-

Panel Group

+
+

Bootstrap panels

+
+
-
-
-
Panel group 1
+
+
-

To group many panels together, wrap a <div> with class - .panel-group around them.

-
-
-
-
Panel group 2
-
-

The .panel-group class clears the bottom-margin of each panel.

+

A panel in bootstrap is a bordered box with some padding around its content.

+ +

Panels are created with the .panel class, and content inside the panel has a + .panel-body class. The .panel-default .panel-primary .panel-danger and other classes + are used to style the color of the + panel. See the next example on this page for more contextual classes.

-
+
+
+
Panel Heading
+
+

The .panel-heading class adds a heading to the panel.Easily add a heading + container to your + panel with .panel-heading. You may also include any + h1-h6 with a .panel-title class to add a pre-styled heading. +

+
+
+
+
+
+
+

+ Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors + and + borders when + using contextual variations as they are not meant to be in the foreground. +

+
+
Panel Footer
+
+
+
+ +

Panels with Contextual Classes

-
-
+
+
+
+
Panel with panel-default class
-
To color the panel, use contextual classes. This is sample .panel-default panel
+
To color the panel, use contextual classes. This is sample .panel-default + panel +
+
-
+
+
Panel with panel-primary class
Sample .panel-primary panel
+
-
+
+
Panel with panel-success class
Sample .panel-success panel
+
-
+
+
Panel with panel-info class
Sample .panel-info panel
+
-
+
+
Panel with panel-warning class
Sample .panel-warning panel
+
-
+
+
Panel with panel-danger class
Sample .panel-danger panel
-
\ No newline at end of file + +
+ +
+
+

Panel Group

+ +
+
+
Panel group 1
+
+

To group many panels together, wrap a <div> with class + .panel-group around them.

+
+
+
+
Panel group 2
+
+

The .panel-group class clears the bottom-margin of each panel.

+
+
+
+
+
+ diff --git a/src/sass/theme/bootstrap-overrides/_panel.scss b/src/sass/theme/bootstrap-overrides/_panel.scss index 1b8e8d7..5e50885 100644 --- a/src/sass/theme/bootstrap-overrides/_panel.scss +++ b/src/sass/theme/bootstrap-overrides/_panel.scss @@ -9,7 +9,7 @@ $panel-heading-font-size: 16px; position: relative; //transition: all 0.2s ease; margin-bottom: 24px; - box-shadow:0 5px 5px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25); /*&:hover { background: $panel-bg-hover; }*/ @@ -19,6 +19,9 @@ $panel-heading-font-size: 16px; &.small-panel { height: $small-panel-height; } + &.xsmall-panel { + height: $xsmall-panel-height; + } &.medium-panel { height: $medium-panel-height; } @@ -70,11 +73,11 @@ $panel-heading-font-size: 16px; } } -.panel-white{ +.panel-white { background-color: $panel-bg; } -.panel-blur{ +.panel-blur { $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg'; background: url($blurredBgUrl); } @@ -119,6 +122,32 @@ $panel-heading-font-size: 16px; } } +.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger { + .panel-heading { + color: rgba(255, 255, 255, 0.8); + border-radius: 0; + } +} + +.panel.bootstrap-panel .panel-body p { + color: $default-text; +} + +.panel-group .panel { + border-radius: 0; + .panel-heading { + border-bottom: 1px solid #ddd; + } +} + +.p-with-code { + line-height: 1.5em; +} + +.contextual-example-panel { + height: 120px; +} + /* .panel-group .panel { border-radius: 0; diff --git a/src/sass/theme/conf/_mixins.scss b/src/sass/theme/conf/_mixins.scss index 5c11173..070f58e 100644 --- a/src/sass/theme/conf/_mixins.scss +++ b/src/sass/theme/conf/_mixins.scss @@ -109,7 +109,7 @@ } @mixin overridePanelBg($color, $borderColor, $dropdownColor) { - .panel, .panel:hover { + .panel.panel-blur, .panel.panel-blur:hover { border-color: $borderColor; background-color: $color; } diff --git a/src/sass/theme/conf/_variables.scss b/src/sass/theme/conf/_variables.scss index 2da45de..0897db2 100644 --- a/src/sass/theme/conf/_variables.scss +++ b/src/sass/theme/conf/_variables.scss @@ -71,6 +71,7 @@ $resMin: 320px; $top-height: 66px; $small-panel-height: 114px; +$xsmall-panel-height: 250px; $medium-panel-height: 400px; $extra-medium-panel-height: 550px; $large-panel-height: 974px;