From df4599d2e2b71c9789dc98cba74c7099f354aa57 Mon Sep 17 00:00:00 2001 From: alex Date: Wed, 17 Feb 2016 15:57:31 +0300 Subject: [PATCH] refactor(tabs): apply new design --- src/app/pages/ui/panels/panels.html | 6 +-- .../pages/ui/tabs/contextualAccordion.html | 17 ++++++ src/app/pages/ui/tabs/mainTabs.html | 41 ++++++++++++--- src/app/pages/ui/tabs/sampleAccordion.html | 16 +++--- src/app/pages/ui/tabs/sideTabs.html | 52 ++++++++++++------- src/app/pages/ui/tabs/tabs.html | 2 +- src/sass/app/_tabsPage.scss | 18 +++++-- src/sass/app/_typography.scss | 2 +- .../theme/bootstrap-overrides/_panel.scss | 28 +++++++++- src/sass/theme/bootstrap-overrides/_tabs.scss | 49 +++++++++-------- src/sass/theme/conf/_variables.scss | 2 +- 11 files changed, 163 insertions(+), 70 deletions(-) create mode 100644 src/app/pages/ui/tabs/contextualAccordion.html diff --git a/src/app/pages/ui/panels/panels.html b/src/app/pages/ui/panels/panels.html index 999109d..e6c100c 100644 --- a/src/app/pages/ui/panels/panels.html +++ b/src/app/pages/ui/panels/panels.html @@ -9,8 +9,7 @@
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. + pulvinar sagittis quam.
@@ -19,8 +18,7 @@
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. + suscipit consequat tellus.
diff --git a/src/app/pages/ui/tabs/contextualAccordion.html b/src/app/pages/ui/tabs/contextualAccordion.html new file mode 100644 index 0000000..e0dbed8 --- /dev/null +++ b/src/app/pages/ui/tabs/contextualAccordion.html @@ -0,0 +1,17 @@ + + + Primary + + + Success + + + Info + + + Warning + + + Danger + + \ No newline at end of file diff --git a/src/app/pages/ui/tabs/mainTabs.html b/src/app/pages/ui/tabs/mainTabs.html index c7c4a3b..e36b273 100644 --- a/src/app/pages/ui/tabs/mainTabs.html +++ b/src/app/pages/ui/tabs/mainTabs.html @@ -1,18 +1,41 @@ - +

- Take up one idea. Make that one idea your life--think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success. + Take up one idea. Make that one idea your life--think of it, dream of it, live on that idea. Let the brain, + muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the + way to success.

+

- People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a way to succeed. Similarly, when someone is failing, the tendency is to get on a downward spiral that can even become a self-fulfilling prophecy. + People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a + way to succeed. Similarly, when someone is failing, the tendency is to get on a downward spiral that can even + become a self-fulfilling prophecy.

+ +
+
+
+
+
+ +

+ The reason most people never reach their goals is that they don't define them, or ever seriously consider them as + believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who + will be sharing the adventure with them. +

+ - +

- You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life. + You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that + the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma, + whatever. This approach has never let me down, and it has made all the difference in my life.

+

- The reason most people never reach their goals is that they don't define them, or ever seriously consider them as believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who will be sharing the adventure with them. + The reason most people never reach their goals is that they don't define them, or ever seriously consider them as + believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who + will be sharing the adventure with them.

@@ -27,12 +50,14 @@

- Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that benefit others. + Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that + benefit others.

+

Failure is the condiment that gives success its flavor.

-

+

diff --git a/src/app/pages/ui/tabs/sampleAccordion.html b/src/app/pages/ui/tabs/sampleAccordion.html index eb9e443..dedd264 100644 --- a/src/app/pages/ui/tabs/sampleAccordion.html +++ b/src/app/pages/ui/tabs/sampleAccordion.html @@ -1,21 +1,17 @@ - + This content is straight in the template. - +

The body of the uib-accordion group grows to fit the contents

- + - + Hello - -

Please, to delete your account, click the button below

- - - + - I can have markup, too! + I can have markup, too! This is just some content to illustrate fancy headings. diff --git a/src/app/pages/ui/tabs/sideTabs.html b/src/app/pages/ui/tabs/sideTabs.html index 6807ab6..d9cc93a 100644 --- a/src/app/pages/ui/tabs/sideTabs.html +++ b/src/app/pages/ui/tabs/sideTabs.html @@ -1,49 +1,65 @@ - + -

- Take up one idea. Make that one idea your life--think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success. +

+ Take up one idea.

+

- People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a way to succeed. Similarly, when someone is failing, the tendency is to get on a downward spiral that can even become a self-fulfilling prophecy. -

+ People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a + way to succeed.

- +

- You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life. + You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that + the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma, + whatever. This approach has never let me down, and it has made all the difference in my life.

+

- The reason most people never reach their goals is that they don't define them, or ever seriously consider them as believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who will be sharing the adventure with them. + The reason most people never reach their goals is that they don't define them, or ever seriously consider them as + believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who + will be sharing the adventure with them.

- Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that benefit others. + Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that + benefit others.

+

Failure is the condiment that gives success its flavor.

 - + -

- Take up one idea. Make that one idea your life--think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success. +

+ Take up one idea.

+

- People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a way to succeed. Similarly, when someone is failing, the tendency is to get on a downward spiral that can even become a self-fulfilling prophecy. -

+ People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a + way to succeed.

- +

- You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life. + You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that + the dots will somehow connect in your future. You have to trust in something--your gut, destiny, life, karma, + whatever. This approach has never let me down, and it has made all the difference in my life.

+

- The reason most people never reach their goals is that they don't define them, or ever seriously consider them as believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who will be sharing the adventure with them. + The reason most people never reach their goals is that they don't define them, or ever seriously consider them as + believable or achievable. Winners can tell you where they are going, what they plan to do along the way, and who + will be sharing the adventure with them.

- Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that benefit others. + Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that + benefit others.

+

Failure is the condiment that gives success its flavor.

 \ No newline at end of file diff --git a/src/app/pages/ui/tabs/tabs.html b/src/app/pages/ui/tabs/tabs.html index 046c293..d91f02b 100644 --- a/src/app/pages/ui/tabs/tabs.html +++ b/src/app/pages/ui/tabs/tabs.html @@ -5,6 +5,6 @@
-
+
\ No newline at end of file diff --git a/src/sass/app/_tabsPage.scss b/src/sass/app/_tabsPage.scss index 5d56213..f777085 100644 --- a/src/sass/app/_tabsPage.scss +++ b/src/sass/app/_tabsPage.scss @@ -4,6 +4,18 @@ } } -.accordions-row { - margin-top: 30px; -} \ No newline at end of file +.xsmall-panel { + .nav-tabs, .tab-content{ + height: 100%; + } +} +.inline-icon{ + display: inline-block; + margin: 20px 5px; +} +.panel.horizontal-tabs { + .tab-content{ + height: calc(100% - 40px); + } +} + diff --git a/src/sass/app/_typography.scss b/src/sass/app/_typography.scss index ef40499..4a959d0 100644 --- a/src/sass/app/_typography.scss +++ b/src/sass/app/_typography.scss @@ -1,6 +1,6 @@ h1, h2, h3, h4, h5, h6 { font-family: $font-family; - width: 90%; + width: 100%; margin-top: 0; } diff --git a/src/sass/theme/bootstrap-overrides/_panel.scss b/src/sass/theme/bootstrap-overrides/_panel.scss index 5e50885..d8a6b9e 100644 --- a/src/sass/theme/bootstrap-overrides/_panel.scss +++ b/src/sass/theme/bootstrap-overrides/_panel.scss @@ -129,8 +129,32 @@ $panel-heading-font-size: 16px; } } -.panel.bootstrap-panel .panel-body p { - color: $default-text; +.panel.bootstrap-panel{ + .panel-body, .panel-heading { + p, div, span { + color: $default-text; + } + } +} + +.accordion-panel.panel.bootstrap-panel{ + &.panel-primary, + &.panel-success, + &.panel-info, + &.panel-warning, + &.panel-danger{ + .panel-heading { + p, div, span { + color: rgba(255, 255, 255, 0.8); + } + } + } +} + +.panel-group .panel.accordion-panel{ + .panel-heading{ + border-bottom: 0; + } } .panel-group .panel { diff --git a/src/sass/theme/bootstrap-overrides/_tabs.scss b/src/sass/theme/bootstrap-overrides/_tabs.scss index a5cadc4..d934906 100644 --- a/src/sass/theme/bootstrap-overrides/_tabs.scss +++ b/src/sass/theme/bootstrap-overrides/_tabs.scss @@ -24,10 +24,6 @@ margin-bottom: 0; > a { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; - &:hover, &:focus { border-top-color: #ddd; border-bottom-color: transparent; @@ -56,14 +52,9 @@ .tabs-left > .nav-tabs { float: left; - margin-right: 19px; - border-right: 1px solid #ddd; > li > a { margin-right: -1px; - -webkit-border-radius: 4px 0 0 4px; - -moz-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; &:hover, &:focus { border-color: #eee #ddd #eee #eee; @@ -80,14 +71,10 @@ .tabs-right > .nav-tabs { float: right; - margin-left: 19px; border-left: 1px solid #ddd; > li > a { margin-left: -1px; - -webkit-border-radius: 0 4px 4px 0; - -moz-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; &:hover, &:focus { border-color: #eee #eee #eee #ddd; @@ -104,13 +91,6 @@ /** /Different tabs positions, which were removed from bootstrap */ -.nav-tabs { - border-bottom: none; - background-color: #ddd; - border-top-left-radius: 4px; - border-top-right-radius: 4px; -} - .nav-tabs > li.with-dropdown { > a { padding: 0; @@ -124,7 +104,32 @@ } .tab-content { - padding: 15px; + padding: 15px 15px 5px 15px; background: #ffffff; color: $default-text; -} \ No newline at end of file + overflow-y: scroll; + .tab-pane p{ + color: $default-text; + } +} + +.nav-tabs > li { + margin-bottom: 0; +} +.nav.nav-tabs { + border-bottom: none; + background-color: #ddd; + & > li > a { + margin-right: 0; + margin-bottom: 0; + border-radius: 0; + border: none; + &:hover{ + border: none; + } + } +} + +.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{ + border: none; +} diff --git a/src/sass/theme/conf/_variables.scss b/src/sass/theme/conf/_variables.scss index 0897db2..eb65d0d 100644 --- a/src/sass/theme/conf/_variables.scss +++ b/src/sass/theme/conf/_variables.scss @@ -71,7 +71,7 @@ $resMin: 320px; $top-height: 66px; $small-panel-height: 114px; -$xsmall-panel-height: 250px; +$xsmall-panel-height: 187px; $medium-panel-height: 400px; $extra-medium-panel-height: 550px; $large-panel-height: 974px;