From 06c4d5a57a44fdc469db7de834109444f18bf66a Mon Sep 17 00:00:00 2001 From: Andrey Savchenko Date: Wed, 27 Nov 2013 19:14:33 +0200 Subject: [PATCH] Updates styles with Bootstrap v3 --- css/laps.css | 70 +++++++------------------------------------------ css/laps.less | 33 +++++++++-------------- css/mixins.less | 31 +--------------------- 3 files changed, 23 insertions(+), 111 deletions(-) diff --git a/css/laps.css b/css/laps.css index b3396f4..175c014 100644 --- a/css/laps.css +++ b/css/laps.css @@ -20,83 +20,33 @@ overflow: hidden; height: 20px; margin: 6px 0; - background-color: #f7f7f7; - background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); - background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; + background-color: #f5f5f5; border-radius: 4px; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } #wpadminbar .laps-timeline .event { - width: 0%; - height: 20px; - color: #fff; float: left; + width: 0%; + height: 100%; font-size: 12px; + color: #fff; text-align: center; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #dd514c; - background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); - background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); - background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); - background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); + background-color: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -webkit-transition: width 0.6s ease; - -moz-transition: width 0.6s ease; - -o-transition: width 0.6s ease; transition: width 0.6s ease; position: absolute; } -#wpadminbar .laps-timeline .event + .event { - -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15); - -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15); - box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15); -} #wpadminbar .laps-timeline .event-theme { - background-color: #5eb95e; - background-image: -moz-linear-gradient(top, #62c462, #57a957); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); - background-image: -webkit-linear-gradient(top, #62c462, #57a957); - background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(to bottom, #62c462, #57a957); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); + background-color: #5cb85c; } #wpadminbar .laps-timeline .event-plugin { - background-color: #4bb1cf; - background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); - background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); - background-image: -o-linear-gradient(top, #5bc0de, #339bb9); - background-image: linear-gradient(to bottom, #5bc0de, #339bb9); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); + background-color: #428bca; } #wpadminbar .laps-timeline .event-core { - background-color: #faa732; - background-image: -moz-linear-gradient(top, #fbb450, #f89406); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); - background-image: -webkit-linear-gradient(top, #fbb450, #f89406); - background-image: -o-linear-gradient(top, #fbb450, #f89406); - background-image: linear-gradient(to bottom, #fbb450, #f89406); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); + background-color: #f0ad4e; } #wpadminbar [data-hint]:after { font-size: 13px; diff --git a/css/laps.less b/css/laps.less index a9c1a6d..d7fd473 100644 --- a/css/laps.less +++ b/css/laps.less @@ -4,13 +4,12 @@ #wp-admin-bar-laps { .ab-sub-wrapper { - // display: block !important; min-width: 90%; width: 90%; position: fixed; left: 5%; - } + .ab-submenu { padding: 0; } @@ -27,48 +26,40 @@ .ab-empty-item { display: none; } - } .laps-timeline { overflow: hidden; height: 20px; margin: 6px 0; - #gradient > .vertical(#f5f5f5, #f9f9f9); + background-color: #f5f5f5; + border-radius: 4px; .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); - .border-radius(4px); } .laps-timeline .event { - width: 0%; - height: 20px; - color: #fff; float: left; + width: 0%; + height: 100%; font-size: 12px; + color: #fff; text-align: center; - text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); - #gradient > .vertical(#ee5f5b, #c43c35); - .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); - .box-sizing(border-box); + background-color: #428bca; + .box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15)); .transition(width .6s ease); - - position: absolute; - } - - .laps-timeline .event + .event { - .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)"); + position: absolute; // disable stacking at start } .laps-timeline .event-theme { - #gradient > .vertical(#62c462, #57a957); + background-color: #5cb85c; } .laps-timeline .event-plugin { - #gradient > .vertical(#5bc0de, #339bb9); + background-color: #428bca; } .laps-timeline .event-core { - #gradient > .vertical(lighten(#f89406, 15%), #f89406); + background-color: #f0ad4e; } [data-hint]:after { diff --git a/css/mixins.less b/css/mixins.less index 4e0dbf1..0c58afe 100644 --- a/css/mixins.less +++ b/css/mixins.less @@ -1,38 +1,9 @@ .transition(@transition) { -webkit-transition: @transition; - -moz-transition: @transition; - -o-transition: @transition; transition: @transition; } -.box-sizing(@boxmodel) { - -webkit-box-sizing: @boxmodel; - -moz-box-sizing: @boxmodel; - box-sizing: @boxmodel; -} - -.border-radius(@radius) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} - .box-shadow(@shadow) { - -webkit-box-shadow: @shadow; - -moz-box-shadow: @shadow; + -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow; -} - -#gradient { - - .vertical(@startColor: #555, @endColor: #333) { - background-color: mix(@startColor, @endColor, 60%); - background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 - background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor), argb(@endColor))); // IE9 and down - } } \ No newline at end of file