From 771da63bc278c2f736a82f4182df7b5e9b0b8864 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 22 Aug 2017 21:41:29 -0400 Subject: [PATCH] Make switches not so gigantic --- dist/shoelace.css | 2 +- source/css/switches.css | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/dist/shoelace.css b/dist/shoelace.css index 4afa86d0f..3fc1a355d 100644 --- a/dist/shoelace.css +++ b/dist/shoelace.css @@ -24,7 +24,7 @@ /*! Progress Bars */.progress{position:relative;width:100%;height:2.25rem;line-height:2.25rem;font-size:1rem;background-color:#f2f2f2;border-radius:.25rem;display:block;overflow:hidden;margin-bottom:1.5rem;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}.progress .progress-bar{position:absolute;top:0;left:0;width:0;height:100%;text-align:center;color:#fff;background-color:#0074d9;-webkit-transition:width .1s;transition:width .1s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.progress.progress-indeterminate .progress-bar{width:75%!important;-webkit-animation:progress-indeterminate ease-in-out 3s infinite;animation:progress-indeterminate ease-in-out 3s infinite}.progress.progress-xs{font-size:.7rem;height:1.25rem;line-height:1.25rem}.progress.progress-sm{font-size:.8rem;height:1.75rem;line-height:1.75rem}.progress.progress-lg{font-size:1.25rem;height:2.75rem;line-height:2.75rem}.progress.progress-xl{font-size:1.5rem;height:3.25rem;line-height:3.25rem}.progress.progress-secondary .progress-bar{background-color:#aaa}.progress.progress-success .progress-bar{background-color:#2ecc40}.progress.progress-info .progress-bar{background-color:#39cccc}.progress.progress-warning .progress-bar{background-color:#ff851b}.progress.progress-danger .progress-bar{background-color:#ff4136}.progress.progress-light{background-color:#111}.progress.progress-light .progress-bar{color:#111;background-color:#fff}.progress.progress-dark{background-color:#fff}.progress.progress-dark .progress-bar{color:#fff;background-color:#111}@-webkit-keyframes progress-indeterminate{0%{left:-65%}50%{left:90%}to{left:-65%}}@keyframes progress-indeterminate{0%{left:-65%}50%{left:90%}to{left:-65%}} -/*! Switches */.switch{font-size:1rem;position:relative}.switch input{position:absolute;height:1px;width:1px;background:none;border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;padding:0}.switch input+label{position:relative;min-width:4.5rem;border-radius:2.25rem;height:2.25rem;line-height:2.25rem;display:inline-block;cursor:pointer;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;text-indent:5rem}.switch input+label:after,.switch input+label:before{content:"";position:absolute;top:0;left:0;width:4.5rem;bottom:0;display:block}.switch input+label:before{right:0;background-color:#ddd;border-radius:2.25rem;-webkit-transition:all .1s;transition:all .1s}.switch input+label:after{top:2px;left:2px;width:calc(2.25rem - 4px);height:calc(2.25rem - 4px);border-radius:50%;background-color:#fff;-webkit-transition:margin .1s;transition:margin .1s}.switch input:checked+label:before{background-color:#0074d9}.switch input:checked+label:after{margin-left:2.25rem}.switch input:focus+label:before{outline:none;-webkit-box-shadow:0 0 0 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px rgba(0,116,217,.5)}.switch input:disabled+label{opacity:.5;cursor:not-allowed}.switch+.switch{margin-left:1rem}.switch.switch-xs{font-size:.7rem}.switch.switch-xs input+label{min-width:2.5rem;height:1.25rem;line-height:1.25rem;text-indent:3rem}.switch.switch-xs input+label:after,.switch.switch-xs input+label:before{width:2.5rem}.switch.switch-xs input+label:after{width:calc(1.25rem - 4px);height:calc(1.25rem - 4px)}.switch.switch-xs input:checked+label:after{margin-left:1.25rem}.switch.switch-sm{font-size:.8rem}.switch.switch-sm input+label{min-width:3.5rem;height:1.75rem;line-height:1.75rem;text-indent:4rem}.switch.switch-sm input+label:after,.switch.switch-sm input+label:before{width:3.5rem}.switch.switch-sm input+label:after{width:calc(1.75rem - 4px);height:calc(1.75rem - 4px)}.switch.switch-sm input:checked+label:after{margin-left:1.75rem}.switch.switch-lg{font-size:1.25rem}.switch.switch-lg input+label{min-width:5.5rem;height:2.75rem;line-height:2.75rem;text-indent:6rem}.switch.switch-lg input+label:after,.switch.switch-lg input+label:before{width:5.5rem}.switch.switch-lg input+label:after{width:calc(2.75rem - 4px);height:calc(2.75rem - 4px)}.switch.switch-lg input:checked+label:after{margin-left:2.75rem}.switch.switch-xl{font-size:1.5rem}.switch.switch-xl input+label{min-width:6.5rem;height:3.25rem;line-height:3.25rem;text-indent:7rem}.switch.switch-xl input+label:after,.switch.switch-xl input+label:before{width:6.5rem}.switch.switch-xl input+label:after{width:calc(3.25rem - 4px);height:calc(3.25rem - 4px)}.switch.switch-xl input:checked+label:after{margin-left:3.25rem}.switch.switch-secondary input{background-color:#ddd}.switch.switch-secondary input+label:after{background-color:#fff}.switch.switch-secondary input+label:before{background-color:#ddd}.switch.switch-secondary input:checked+label:before{background-color:#aaa}.switch.switch-secondary input:focus+label:before{-webkit-box-shadow:0 0 0 2px hsla(0,0%,67%,.5);box-shadow:0 0 0 2px hsla(0,0%,67%,.5)}.switch.switch-success input{background-color:#ddd}.switch.switch-success input+label:after{background-color:#fff}.switch.switch-success input+label:before{background-color:#ddd}.switch.switch-success input:checked+label:before{background-color:#2ecc40}.switch.switch-success input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(46,204,64,.5);box-shadow:0 0 0 2px rgba(46,204,64,.5)}.switch.switch-info input{background-color:#ddd}.switch.switch-info input+label:after{background-color:#fff}.switch.switch-info input+label:before{background-color:#ddd}.switch.switch-info input:checked+label:before{background-color:#39cccc}.switch.switch-info input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(57,204,204,.5);box-shadow:0 0 0 2px rgba(57,204,204,.5)}.switch.switch-warning input{background-color:#ddd}.switch.switch-warning input+label:after{background-color:#fff}.switch.switch-warning input+label:before{background-color:#ddd}.switch.switch-warning input:checked+label:before{background-color:#ff851b}.switch.switch-warning input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(255,133,27,.5);box-shadow:0 0 0 2px rgba(255,133,27,.5)}.switch.switch-danger input{background-color:#ddd}.switch.switch-danger input+label:after{background-color:#fff}.switch.switch-danger input+label:before{background-color:#ddd}.switch.switch-danger input:checked+label:before{background-color:#ff4136}.switch.switch-danger input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(255,65,54,.5);box-shadow:0 0 0 2px rgba(255,65,54,.5)}.switch.switch-light input{background-color:#e6e6e6}.switch.switch-light input+label:after{background-color:#fff}.switch.switch-light input+label:before{background-color:#e6e6e6}.switch.switch-light input:checked+label:before{background-color:#bfbfbf}.switch.switch-light input:focus+label:before{-webkit-box-shadow:0 0 0 2px hsla(0,0%,75%,.5);box-shadow:0 0 0 2px hsla(0,0%,75%,.5)}.switch.switch-dark input{background-color:#4d4d4d}.switch.switch-dark input+label:after{background-color:#fff}.switch.switch-dark input+label:before{background-color:#4d4d4d}.switch.switch-dark input:checked+label:before{background-color:#292929}.switch.switch-dark input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(41,41,41,.5);box-shadow:0 0 0 2px rgba(41,41,41,.5)} +/*! Switches */.switch{font-size:1rem;position:relative}.switch input{position:absolute;height:1px;width:1px;background:none;border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;padding:0}.switch input+label{position:relative;min-width:3.375rem;border-radius:1.6875rem;height:1.6875rem;line-height:1.6875rem;display:inline-block;cursor:pointer;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;text-indent:3.875rem}.switch input+label:after,.switch input+label:before{content:"";position:absolute;top:0;left:0;width:3.375rem;bottom:0;display:block}.switch input+label:before{right:0;background-color:#ddd;border-radius:1.6875rem;-webkit-transition:all .1s;transition:all .1s}.switch input+label:after{top:2px;left:2px;width:calc(1.6875rem - 4px);height:calc(1.6875rem - 4px);border-radius:50%;background-color:#fff;-webkit-transition:margin .1s;transition:margin .1s}.switch input:checked+label:before{background-color:#0074d9}.switch input:checked+label:after{margin-left:1.6875rem}.switch input:focus+label:before{outline:none;-webkit-box-shadow:0 0 0 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px rgba(0,116,217,.5)}.switch input:disabled+label{opacity:.5;cursor:not-allowed}.switch+.switch{margin-left:1rem}.switch.switch-xs{font-size:.7rem}.switch.switch-xs input+label{min-width:1.875rem;height:.9375rem;line-height:.9375rem;text-indent:2.375rem}.switch.switch-xs input+label:after,.switch.switch-xs input+label:before{width:1.875rem}.switch.switch-xs input+label:after{width:calc(.9375rem - 4px);height:calc(.9375rem - 4px)}.switch.switch-xs input:checked+label:after{margin-left:.9375rem}.switch.switch-sm{font-size:.8rem}.switch.switch-sm input+label{min-width:2.625rem;height:1.3125rem;line-height:1.3125rem;text-indent:3.125rem}.switch.switch-sm input+label:after,.switch.switch-sm input+label:before{width:2.625rem}.switch.switch-sm input+label:after{width:calc(1.3125rem - 4px);height:calc(1.3125rem - 4px)}.switch.switch-sm input:checked+label:after{margin-left:1.3125rem}.switch.switch-lg{font-size:1.25rem}.switch.switch-lg input+label{min-width:4.125rem;height:2.0625rem;line-height:2.0625rem;text-indent:4.625rem}.switch.switch-lg input+label:after,.switch.switch-lg input+label:before{width:4.125rem}.switch.switch-lg input+label:after{width:calc(2.0625rem - 4px);height:calc(2.0625rem - 4px)}.switch.switch-lg input:checked+label:after{margin-left:2.0625rem}.switch.switch-xl{font-size:1.5rem}.switch.switch-xl input+label{min-width:4.875rem;height:2.4375rem;line-height:2.4375rem;text-indent:5.375rem}.switch.switch-xl input+label:after,.switch.switch-xl input+label:before{width:4.875rem}.switch.switch-xl input+label:after{width:calc(2.4375rem - 4px);height:calc(2.4375rem - 4px)}.switch.switch-xl input:checked+label:after{margin-left:2.4375rem}.switch.switch-secondary input{background-color:#ddd}.switch.switch-secondary input+label:after{background-color:#fff}.switch.switch-secondary input+label:before{background-color:#ddd}.switch.switch-secondary input:checked+label:before{background-color:#aaa}.switch.switch-secondary input:focus+label:before{-webkit-box-shadow:0 0 0 2px hsla(0,0%,67%,.5);box-shadow:0 0 0 2px hsla(0,0%,67%,.5)}.switch.switch-success input{background-color:#ddd}.switch.switch-success input+label:after{background-color:#fff}.switch.switch-success input+label:before{background-color:#ddd}.switch.switch-success input:checked+label:before{background-color:#2ecc40}.switch.switch-success input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(46,204,64,.5);box-shadow:0 0 0 2px rgba(46,204,64,.5)}.switch.switch-info input{background-color:#ddd}.switch.switch-info input+label:after{background-color:#fff}.switch.switch-info input+label:before{background-color:#ddd}.switch.switch-info input:checked+label:before{background-color:#39cccc}.switch.switch-info input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(57,204,204,.5);box-shadow:0 0 0 2px rgba(57,204,204,.5)}.switch.switch-warning input{background-color:#ddd}.switch.switch-warning input+label:after{background-color:#fff}.switch.switch-warning input+label:before{background-color:#ddd}.switch.switch-warning input:checked+label:before{background-color:#ff851b}.switch.switch-warning input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(255,133,27,.5);box-shadow:0 0 0 2px rgba(255,133,27,.5)}.switch.switch-danger input{background-color:#ddd}.switch.switch-danger input+label:after{background-color:#fff}.switch.switch-danger input+label:before{background-color:#ddd}.switch.switch-danger input:checked+label:before{background-color:#ff4136}.switch.switch-danger input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(255,65,54,.5);box-shadow:0 0 0 2px rgba(255,65,54,.5)}.switch.switch-light input{background-color:#e6e6e6}.switch.switch-light input+label:after{background-color:#fff}.switch.switch-light input+label:before{background-color:#e6e6e6}.switch.switch-light input:checked+label:before{background-color:#bfbfbf}.switch.switch-light input:focus+label:before{-webkit-box-shadow:0 0 0 2px hsla(0,0%,75%,.5);box-shadow:0 0 0 2px hsla(0,0%,75%,.5)}.switch.switch-dark input{background-color:#4d4d4d}.switch.switch-dark input+label:after{background-color:#fff}.switch.switch-dark input+label:before{background-color:#4d4d4d}.switch.switch-dark input:checked+label:before{background-color:#292929}.switch.switch-dark input:focus+label:before{-webkit-box-shadow:0 0 0 2px rgba(41,41,41,.5);box-shadow:0 0 0 2px rgba(41,41,41,.5)} /*! Tabs */.tabs{width:100%}.tabs,.tabs .tabs-nav{margin-bottom:1.5rem}.tabs .tabs-nav{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tabs .tabs-nav a{border-radius:.25rem;padding:.5rem 1rem;display:inline-block;-webkit-transition:box-shadow .1s;transition:box-shadow .1s}.tabs .tabs-nav a,.tabs .tabs-nav a:hover{color:#0074d9;text-decoration:none;background-color:#fff}.tabs .tabs-nav a:focus{outline:none}.tabs .tabs-nav a:focus:not(.disabled){-webkit-box-shadow:0 0 0 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px rgba(0,116,217,.5);-webkit-transform:translateZ(0);transform:translateZ(0)}.tabs .tabs-nav a.active{color:#fff;background-color:#0074d9;cursor:default}.tabs .tabs-nav a.disabled{color:#aaa;background-color:#fff;cursor:not-allowed}.tabs .tabs-pane{border:1px solid #ddd;border-radius:.25rem;padding:1rem}.tabs .tabs-pane:not(.active){display:none}.tabs .tabs-pane :last-child{margin-bottom:0} diff --git a/source/css/switches.css b/source/css/switches.css index da76841a0..d82185b10 100644 --- a/source/css/switches.css +++ b/source/css/switches.css @@ -1,10 +1,10 @@ /*! Switches */ :root { - --switch-height: var(--input-height); - --switch-height-xs: var(--input-height-xs); - --switch-height-sm: var(--input-height-sm); - --switch-height-lg: var(--input-height-lg); - --switch-height-xl: var(--input-height-xl); + --switch-height: calc(var(--input-height) * .75); + --switch-height-xs: calc(var(--input-height-xs) * .75); + --switch-height-sm: calc(var(--input-height-sm) * .75); + --switch-height-lg: calc(var(--input-height-lg) * .75); + --switch-height-xl: calc(var(--input-height-xl) * .75); --switch-font-size: var(--input-font-size); --switch-font-size-xs: var(--input-font-size-xs); --switch-font-size-sm: var(--input-font-size-sm);