diff --git a/design/custom_amelia.css b/design/custom_amelia.css index ca1b77aa0299d84980dd7800d2a005c086150ec0..420eb0d192c66fc68e11ea848609dc1021b76b78 100644 --- a/design/custom_amelia.css +++ b/design/custom_amelia.css @@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 20px; + margin-bottom: 20px; + background-color: #0d747c; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #ffffff; + text-align: center; + background-color: #ad1d28; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #48ca3b; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #debb27; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #df6e1e; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; diff --git a/design/custom_bootstrap.css b/design/custom_bootstrap.css index bef1b1a12685a6d96891de77e806620ca33a0e0d..fbd949d1ed27fe10d013ec0998a98729c2195819 100644 --- a/design/custom_bootstrap.css +++ b/design/custom_bootstrap.css @@ -3425,6 +3425,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 20px; + margin-bottom: 20px; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #ffffff; + text-align: center; + background-color: #428bca; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #5cb85c; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #f0ad4e; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #d9534f; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; @@ -5075,6 +5134,44 @@ img.jcrop-preview { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0); border-color: #dca7a7; } +.PasswordStrength { + background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5)); + background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0); +} +.PasswordStrength .StrengthText { + background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3071a9)); + background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0); +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44)); + background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0); +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f)); + background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0); +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c)); + background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0); +} .PanelInfo, .DataList { border-radius: 4px; diff --git a/design/custom_cerulean.css b/design/custom_cerulean.css index 92c3083f77bd27b869e34b6dd2b26903e737f688..f87eb3107bc51382ae590d06843cefcca3abef58 100644 --- a/design/custom_cerulean.css +++ b/design/custom_cerulean.css @@ -3397,6 +3397,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 20px; + margin-bottom: 20px; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #ffffff; + text-align: center; + background-color: #2fa4e7; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #73a839; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #dd5600; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #c71c22; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; diff --git a/design/custom_cosmo.css b/design/custom_cosmo.css index c21ac5e346c43b7d3ebae00cf542cba63fa04689..f5ae9c1d5e464cee7d98a1a7ecd6fc9505b42541 100644 --- a/design/custom_cosmo.css +++ b/design/custom_cosmo.css @@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 21px; + margin-bottom: 21px; + background-color: #cccccc; + border-radius: 0; + -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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 13px; + line-height: 21px; + color: #ffffff; + text-align: center; + background-color: #007fff; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #3fb618; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #ff7518; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #ff0039; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; @@ -4953,7 +5012,8 @@ table .info a { .token-input-token { border-radius: 0; } -.progress { +.progress, +.PasswordStrength { height: 8px; -webkit-box-shadow: none; box-shadow: none; diff --git a/design/custom_cyborg.css b/design/custom_cyborg.css index a85e87798181f631731509415a3c9e7c66258042..c067985a13c563dfd3bf6a36c65c4b437a51e4b0 100644 --- a/design/custom_cyborg.css +++ b/design/custom_cyborg.css @@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 20px; + margin-bottom: 20px; + background-color: #222222; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #ffffff; + text-align: center; + background-color: #2a9fd6; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #77b300; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #ff8800; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #cc0000; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; diff --git a/design/custom_darkly.css b/design/custom_darkly.css index f4c0c9a8f608d7d0ae9a72397aa27d7d18437363..6fa65f0945ba361c471bd83d51127ed10c8ae62a 100644 --- a/design/custom_darkly.css +++ b/design/custom_darkly.css @@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 21px; + margin-bottom: 21px; + background-color: #ebebeb; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 13px; + line-height: 21px; + color: #ffffff; + text-align: center; + background-color: #375a7f; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #00bc8c; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #f39c12; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #e74c3c; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; @@ -5017,7 +5076,8 @@ select:focus, color: #fff; text-decoration: underline; } -.progress { +.progress, +.PasswordStrength { height: 10px; -webkit-box-shadow: none; box-shadow: none; diff --git a/design/custom_flatly.css b/design/custom_flatly.css index a1cc1eed1ba394fe9eee08f1a4c0dc60654b5083..fe5c9e8c813e03677e85254e6348998465ef95e6 100644 --- a/design/custom_flatly.css +++ b/design/custom_flatly.css @@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 21px; + margin-bottom: 21px; + background-color: #ecf0f1; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 13px; + line-height: 21px; + color: #ffffff; + text-align: center; + background-color: #2c3e50; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #18bc9c; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #f39c12; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #e74c3c; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; @@ -5019,7 +5078,8 @@ select:focus, color: #fff; opacity: 1; } -.progress { +.progress, +.PasswordStrength { height: 10px; -webkit-box-shadow: none; box-shadow: none; diff --git a/design/custom_journal.css b/design/custom_journal.css index 612b54a3c7a583bfc4fc64c3af09e9205451876f..4cc564d1673c307aa428426ca4795b5e841d09e5 100644 --- a/design/custom_journal.css +++ b/design/custom_journal.css @@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 21px; + margin-bottom: 21px; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 13px; + line-height: 21px; + color: #ffffff; + text-align: center; + background-color: #eb6864; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #22b24c; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #f5e625; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #f57a00; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; diff --git a/design/custom_lumen.css b/design/custom_lumen.css index 198a13067701352cfa31c126eab2be3e4a3cdec6..35eeae7978bc47e73f88a0b03cfc9479c2ef0e62 100644 --- a/design/custom_lumen.css +++ b/design/custom_lumen.css @@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 20px; + margin-bottom: 20px; + background-color: #fafafa; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #ffffff; + text-align: center; + background-color: #158cba; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #28b62c; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #ff851b; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #ff4136; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; @@ -5168,7 +5227,8 @@ label { .token-input-token { font-weight: normal; } -.progress { +.progress, +.PasswordStrength { border: 1px solid #e7e7e7; -webkit-box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.1); diff --git a/design/custom_readable.css b/design/custom_readable.css index 8b51b40bc06d24518d78794272bc9d52afdd3f88..be336356f9bfd030a94706eeb1e1e9fb19566d4d 100644 --- a/design/custom_readable.css +++ b/design/custom_readable.css @@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 22px; + margin-bottom: 22px; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 14px; + line-height: 22px; + color: #ffffff; + text-align: center; + background-color: #4582ec; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #3fad46; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #f0ad4e; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #d9534f; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; diff --git a/design/custom_simplex.css b/design/custom_simplex.css index 625499f2d050defcd9f55a4fb4a04fd95728a598..0ca7ddb3068ce3b80a54bf8626456da04edaebd2 100644 --- a/design/custom_simplex.css +++ b/design/custom_simplex.css @@ -3397,6 +3397,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 20px; + margin-bottom: 20px; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #ffffff; + text-align: center; + background-color: #d9230f; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #469408; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #9b479f; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #d9831f; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; diff --git a/design/custom_slate.css b/design/custom_slate.css index 4a6c0be39fc585bb4a8afd21e6a9c490491cef21..4814a045e515d2672c5d290590d4e3f08dc95295 100644 --- a/design/custom_slate.css +++ b/design/custom_slate.css @@ -3409,6 +3409,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 20px; + margin-bottom: 20px; + background-color: #1c1e22; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #ffffff; + text-align: center; + background-color: #7a8288; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #62c462; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #f89406; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #ee5f5b; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; diff --git a/design/custom_spacelab.css b/design/custom_spacelab.css index 5df66b9b8a0735bc58d36c3ecb1ef6a8339d30d4..02a790d7d960315914f53053bd116bf5a1f7afe0 100644 --- a/design/custom_spacelab.css +++ b/design/custom_spacelab.css @@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 20px; + margin-bottom: 20px; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #ffffff; + text-align: center; + background-color: #446e9b; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #3cb521; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #d47500; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #cd0200; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; diff --git a/design/custom_superhero.css b/design/custom_superhero.css index 07d67f72ce44048eb2fd4fd1257f116d2f061df9..aea8ed7ea17e757e23b89607af4c36cb5eb097da 100644 --- a/design/custom_superhero.css +++ b/design/custom_superhero.css @@ -3397,6 +3397,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 21px; + margin-bottom: 21px; + background-color: #4e5d6c; + border-radius: 0; + -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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 13px; + line-height: 21px; + color: #ffffff; + text-align: center; + background-color: #df691a; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #5cb85c; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #f0ad4e; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #d9534f; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; diff --git a/design/custom_united.css b/design/custom_united.css index 479bbc46309a3e02dd950cb92dd45fe8ef7fa1db..527f5bf77c5df44cd391e4e9d6464b4192b07968 100644 --- a/design/custom_united.css +++ b/design/custom_united.css @@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 20px; + margin-bottom: 20px; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #ffffff; + text-align: center; + background-color: #dd4814; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #38b44a; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #efb73e; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #df382c; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; diff --git a/design/custom_yeti.css b/design/custom_yeti.css index 69f13481c67fd85b01ef13c372209eb58a7fcf93..d41386ee7e29721b56e191f7a35ccbe5f7699856 100644 --- a/design/custom_yeti.css +++ b/design/custom_yeti.css @@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 21px; + margin-bottom: 21px; + background-color: #f5f5f5; + border-radius: 0; + -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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 21px; + color: #ffffff; + text-align: center; + background-color: #008cba; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #43ac6a; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #e99002; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #f04124; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; @@ -5153,7 +5212,8 @@ a.Delete:focus, .Alert { font-weight: 300; } -.progress { +.progress, +.PasswordStrength { height: 22px; padding: 2px; background-color: #f6f6f6; diff --git a/design/style.css b/design/style.css index 50986308220dbc42529be5b49205b1fb755c135b..34af5c4b5a6533c5c09b0b71527a404c50300931 100644 --- a/design/style.css +++ b/design/style.css @@ -3397,6 +3397,65 @@ fieldset[disabled] .Button.Danger:active { .Errors ul li { margin-bottom: 0 !important; } +.PasswordStrength { + overflow: hidden; + height: 20px; + margin-bottom: 20px; + 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); +} +.PasswordStrength .StrengthText { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #ffffff; + text-align: center; + background-color: #428bca; + -webkit-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-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.PasswordStrength.Score-4 .StrengthText, +.PasswordStrength.Score-5 .StrengthText { + background-color: #5cb85c; +} +.PasswordStrength.Score-2 .StrengthText, +.PasswordStrength.Score-3 .StrengthText { + background-color: #f0ad4e; +} +.PasswordStrength.Score-0 .StrengthText, +.PasswordStrength.Score-1 .StrengthText { + background-color: #d9534f; +} +.PasswordStrength { + width: 100% !important; +} +.InputBox + .PasswordStrength { + margin-top: 5px; +} +.PasswordStrength.Score-0 .StrengthText { + width: 20%; +} +.PasswordStrength.Score-1 .StrengthText { + width: 36%; +} +.PasswordStrength.Score-2 .StrengthText { + width: 52%; +} +.PasswordStrength.Score-3 .StrengthText { + width: 68%; +} +.PasswordStrength.Score-4 .StrengthText { + width: 84%; +} +.PasswordStrength.Score-5 .StrengthText { + width: 100%; +} .PanelInfo, .DataList { margin-bottom: 20px; diff --git a/less/components/progress-bars.less b/less/components/progress-bars.less new file mode 100644 index 0000000000000000000000000000000000000000..265164cc3dc59d310bd3a6fa3c53a5abbae7d230 --- /dev/null +++ b/less/components/progress-bars.less @@ -0,0 +1,56 @@ +// +// # Progress Bars +// +// No styleguide reference. + +// WARNING: DO NOT EDIT THIS FILE + +// Library +// ----------------------------------------------------------------------------- +@import (reference) "@{bootstrap}/progress-bars"; + +// Extensions +// ----------------------------------------------------------------------------- + +.PasswordStrength { + width: 100% !important; + &:extend(.progress); + + .InputBox + & { + margin-top: 5px; + } + + .StrengthText { + &:extend(.progress-bar); + } + + &.Score-0 .StrengthText { + width: 20%; + &:extend(.progress-bar-danger); + } + + &.Score-1 .StrengthText { + width: 36%; + &:extend(.progress-bar-danger); + } + + &.Score-2 .StrengthText { + width: 52%; + &:extend(.progress-bar-warning); + } + + &.Score-3 .StrengthText { + width: 68%; + &:extend(.progress-bar-warning); + } + + &.Score-4 .StrengthText { + width: 84%; + &:extend(.progress-bar-success); + } + + &.Score-5 .StrengthText { + width: 100%; + &:extend(.progress-bar-success); + } +} diff --git a/less/library.less b/less/library.less index 1e8150344f3f503c03460a8d31ccfe5c90341fb8..a8911c85d2f3ba63af9d745d512f5308ec154a83 100644 --- a/less/library.less +++ b/less/library.less @@ -42,6 +42,7 @@ @import "components/badges"; @import "components/thumbnails"; @import "components/alerts"; +@import "components/progress-bars"; @import "components/list-group"; @import "components/panels"; @import "components/wells";