From 86e822333854e17ac2351366cd69fb65c6b8e9ec Mon Sep 17 00:00:00 2001 From: Christopher Garvis Date: Tue, 16 Sep 2014 16:15:12 -0400 Subject: [PATCH] Update to bootstrap 3 --- angular-toggle-switch-bootstrap.css | 79 ++++++++++------------------- 1 file changed, 28 insertions(+), 51 deletions(-) diff --git a/angular-toggle-switch-bootstrap.css b/angular-toggle-switch-bootstrap.css index 9d6712b..7dcc1de 100644 --- a/angular-toggle-switch-bootstrap.css +++ b/angular-toggle-switch-bootstrap.css @@ -1,58 +1,35 @@ -.switch { - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -o-border-radius: 5px; - border-radius: 5px; +.toggle-switch { + display: inline-block; + cursor: pointer; + border-radius: 4px; + border: 1px solid; + border-color: #cccccc; + position: relative; + text-align: left; + overflow: hidden; + line-height: 8px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + min-width: 100px; + -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } -.switch .knob { - background-color: #f5f5f5; - background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); - background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); - background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); - border-color: #e6e6e6 #e6e6e6 #bfbfbf; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - *background-color: #e6e6e6; - /* Darken IE7 buttons by default so they stand out more given they won't have borders */ - - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +.toggle-switch .knob { + color: #333333; + background: #ffffff; + border: 3px; } -.switch .switch-left { - background-image: -moz-linear-gradient(top, #0044cc, #0088cc); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0044cc), to(#0088cc)); - background-image: -webkit-linear-gradient(top, #0044cc, #0088cc); - background-image: -o-linear-gradient(top, #0044cc, #0088cc); - background-image: linear-gradient(to bottom, #0044cc, #0088cc); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0044cc', endColorstr='#ff0088cc', GradientType=0); - border-color: #0088cc #0088cc #005580; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - *background-color: #0088cc; - /* Darken IE7 buttons by default so they stand out more given they won't have borders */ - - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +.toggle-switch .switch-left { + color: #fff; + background: #428bca; } -.switch .switch-right { - background-color: #f0f0f0; - background-image: -moz-linear-gradient(top, #e6e6e6, #ffffff); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#ffffff)); - background-image: -webkit-linear-gradient(top, #e6e6e6, #ffffff); - background-image: -o-linear-gradient(top, #e6e6e6, #ffffff); - background-image: linear-gradient(to bottom, #e6e6e6, #ffffff); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0); - border-color: #ffffff #ffffff #d9d9d9; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - *background-color: #ffffff; - /* Darken IE7 buttons by default so they stand out more given they won't have borders */ - - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +.toggle-switch .switch-right { + color: #000; + background: #eeeeee; }