mirror of https://github.com/akveo/blur-admin
refactor(tabs): apply blur design
alex
parent
cb65c522f7
commit
b712b342a2
|
|
@ -1,4 +1,4 @@
|
|||
<uib-tabset class="panel medium-panel horizontal-tabs">
|
||||
<uib-tabset>
|
||||
<uib-tab heading="Start">
|
||||
<p>
|
||||
Take up one idea. Make that one idea your life--think of it, dream of it, live on that idea. Let the brain,
|
||||
|
|
|
|||
|
|
@ -1,65 +1,77 @@
|
|||
<uib-tabset class="tabs-left panel xsmall-panel">
|
||||
<uib-tab heading="Start">
|
||||
<p class="text-center">
|
||||
Take up one idea.
|
||||
</p>
|
||||
<div class="kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Key' | kameleonImg )}}"></div>
|
||||
<p>
|
||||
People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
|
||||
way to succeed. </p>
|
||||
</uib-tab>
|
||||
<uib-tab heading="Get it done">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div ba-panel
|
||||
ba-panel-class="tabs-panel xsmall-panel with-scroll">
|
||||
<uib-tabset class="tabs-left">
|
||||
<uib-tab heading="Start">
|
||||
<p class="text-center">
|
||||
Take up one idea.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</uib-tab>
|
||||
<uib-tab heading="Achieve">
|
||||
<p>
|
||||
Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that
|
||||
benefit others.
|
||||
</p>
|
||||
<div class="kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Key' | kameleonImg )}}"></div>
|
||||
<p>
|
||||
People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
|
||||
way to succeed. </p>
|
||||
</uib-tab>
|
||||
<uib-tab heading="Get it done">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>Failure is the condiment that gives success its flavor.</p>
|
||||
</uib-tab>
|
||||
</uib-tabset>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</uib-tab>
|
||||
<uib-tab heading="Achieve">
|
||||
<p>
|
||||
Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that
|
||||
benefit others.
|
||||
</p>
|
||||
|
||||
<uib-tabset class="tabs-right panel xsmall-panel">
|
||||
<uib-tab heading="Start">
|
||||
<p class="text-center">
|
||||
Take up one idea.
|
||||
</p>
|
||||
<div class="kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Phone-Booth' | kameleonImg )}}"></div>
|
||||
<p>
|
||||
People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
|
||||
way to succeed. </p>
|
||||
</uib-tab>
|
||||
<uib-tab heading="Get it done">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>Failure is the condiment that gives success its flavor.</p>
|
||||
</uib-tab>
|
||||
</uib-tabset>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</uib-tab>
|
||||
<uib-tab heading="Achieve">
|
||||
<p>
|
||||
Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that
|
||||
benefit others.
|
||||
</p>
|
||||
<div ba-panel
|
||||
ba-panel-class="tabs-panel xsmall-panel with-scroll">
|
||||
<uib-tabset class="tabs-right">
|
||||
<uib-tab heading="Start">
|
||||
<p class="text-center">
|
||||
Take up one idea.
|
||||
</p>
|
||||
|
||||
<p>Failure is the condiment that gives success its flavor.</p>
|
||||
</uib-tab>
|
||||
</uib-tabset>
|
||||
<div class="kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Phone-Booth' | kameleonImg )}}"></div>
|
||||
<p>
|
||||
People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
|
||||
way to succeed. </p>
|
||||
</uib-tab>
|
||||
<uib-tab heading="Get it done">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</uib-tab>
|
||||
<uib-tab heading="Achieve">
|
||||
<p>
|
||||
Success is ... knowing your purpose in life, growing to reach your maximum potential, and sowing seeds that
|
||||
benefit others.
|
||||
</p>
|
||||
|
||||
<p>Failure is the condiment that gives success its flavor.</p>
|
||||
</uib-tab>
|
||||
</uib-tabset>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,12 @@
|
|||
<div>
|
||||
<div class="row">
|
||||
<div class="col-md-6" ng-include="'app/pages/ui/tabs/mainTabs.html'"></div>
|
||||
<div class="col-md-6">
|
||||
<div
|
||||
ba-panel
|
||||
ba-panel-class="with-scroll horizontal-tabs tabs-panel medium-panel">
|
||||
<div ng-include="'app/pages/ui/tabs/mainTabs.html'"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 tabset-group" ng-include="'app/pages/ui/tabs/sideTabs.html'"></div>
|
||||
</div>
|
||||
<div class="row accordions-row">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.panel.tabs-panel{
|
||||
.panel-body{
|
||||
padding: 0;
|
||||
}
|
||||
.dropdown-menu{
|
||||
min-width: 132px;
|
||||
top: auto;
|
||||
border: none;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
&.with-scroll .panel-body{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.xsmall-panel {
|
||||
.nav-tabs, .tab-content{
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tabs-right, .tabs-left {
|
||||
.nav-tabs {
|
||||
min-width: 100px;
|
||||
}
|
||||
.tab-content {
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-right .tab-content {
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.tabs-left .tab-content {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.tab-content > .tab-pane,
|
||||
.pill-content > .pill-pane {
|
||||
display: none;
|
||||
|
|
@ -17,7 +34,6 @@
|
|||
|
||||
.tabs-below {
|
||||
> .nav-tabs {
|
||||
border-top: 1px solid #ddd;
|
||||
|
||||
> li {
|
||||
margin-top: -1px;
|
||||
|
|
@ -25,23 +41,21 @@
|
|||
|
||||
> a {
|
||||
&:hover, &:focus {
|
||||
border-top-color: #ddd;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .active a {
|
||||
&, &:hover, &:focus {
|
||||
border-color: transparent #ddd #ddd #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-left, .tabs-right {
|
||||
height: 100%;
|
||||
> .nav-tabs > li {
|
||||
float: none;
|
||||
|
||||
margin-bottom: 0;
|
||||
> a {
|
||||
min-width: 74px;
|
||||
margin-right: 0;
|
||||
|
|
@ -52,39 +66,37 @@
|
|||
|
||||
.tabs-left > .nav-tabs {
|
||||
float: left;
|
||||
|
||||
border-bottom-left-radius: 5px;
|
||||
> li > a {
|
||||
margin-right: -1px;
|
||||
|
||||
&:hover, &:focus {
|
||||
border-color: #eee #ddd #eee #eee;
|
||||
}
|
||||
}
|
||||
|
||||
> .active a {
|
||||
&, &:hover, &:focus {
|
||||
border-color: #ddd transparent #ddd #ddd;
|
||||
*border-right-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-right > .nav-tabs {
|
||||
.tabs-right > .nav.nav-tabs {
|
||||
float: right;
|
||||
border-left: 1px solid #ddd;
|
||||
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: 5px;
|
||||
> li > a {
|
||||
margin-left: -1px;
|
||||
|
||||
&:hover, &:focus {
|
||||
border-color: #eee #eee #eee #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
& > li:first-of-type a {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
> .active a {
|
||||
&, &:hover, &:focus {
|
||||
border-color: #ddd #ddd #ddd transparent;
|
||||
*border-left-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -105,31 +117,68 @@
|
|||
|
||||
.tab-content {
|
||||
padding: 15px 15px 5px 15px;
|
||||
background: #ffffff;
|
||||
color: $default-text;
|
||||
overflow-y: scroll;
|
||||
.tab-pane p{
|
||||
color: $default-text;
|
||||
background: transparent;
|
||||
color: $default;
|
||||
.tab-pane p {
|
||||
color: $default;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs > li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.nav.nav-tabs {
|
||||
border-bottom: none;
|
||||
background-color: #ddd;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .01);
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
a {
|
||||
color: $default;
|
||||
&:hover {
|
||||
color: $default;
|
||||
}
|
||||
}
|
||||
& > li > a {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
&:hover{
|
||||
color: $default;
|
||||
&:hover {
|
||||
border: none;
|
||||
color: $default;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
& > li.active > a {
|
||||
color: $default;
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
}
|
||||
> li:first-of-type a {
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
.dropdown-menu > li > a {
|
||||
color: $default-text;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
|
||||
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.panel-primary, .panel-info, .panel-success, .panel-warning, .panel-danger, {
|
||||
.panel-heading{
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&.panel-open .panel-heading{
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
> .panel-heading + .panel-collapse > .panel-body {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue