diff options
23 files changed, 316 insertions, 310 deletions
| -rw-r--r-- | src/animations.less | 2 | ||||
| -rw-r--r-- | src/autocomplete.less | 40 | ||||
| -rw-r--r-- | src/avatars.less | 40 | ||||
| -rw-r--r-- | src/badges.less | 20 | ||||
| -rw-r--r-- | src/base.less | 21 | ||||
| -rw-r--r-- | src/buttons.less | 76 | ||||
| -rw-r--r-- | src/cards.less | 20 | ||||
| -rw-r--r-- | src/chips.less | 42 | ||||
| -rw-r--r-- | src/fileicons.less | 88 | ||||
| -rw-r--r-- | src/forms.less | 3 | ||||
| -rw-r--r-- | src/labels.less | 14 | ||||
| -rw-r--r-- | src/layout.less | 10 | ||||
| -rw-r--r-- | src/media.less | 18 | ||||
| -rw-r--r-- | src/menus.less | 38 | ||||
| -rw-r--r-- | src/modals.less | 42 | ||||
| -rw-r--r-- | src/navigation.less | 15 | ||||
| -rw-r--r-- | src/normalize.less | 41 | ||||
| -rw-r--r-- | src/tables.less | 8 | ||||
| -rw-r--r-- | src/toasts.less | 12 | ||||
| -rw-r--r-- | src/tooltips.less | 30 | ||||
| -rw-r--r-- | src/typography.less | 8 | ||||
| -rw-r--r-- | src/utilities.less | 30 | ||||
| -rw-r--r-- | src/variables.less | 8 |
diff --git a/src/animations.less b/src/animations.less index a54d61c..fa7b72a 100644 --- a/src/animations.less +++ b/src/animations.less @@ -16,4 +16,4 @@ margin-top: 0; opacity: 1; } -}
\ No newline at end of file +} diff --git a/src/autocomplete.less b/src/autocomplete.less index 1a27c57..7cff686 100644 --- a/src/autocomplete.less +++ b/src/autocomplete.less @@ -3,49 +3,49 @@ position: relative; .form-autocomplete-input { - display: block; - width: 100%; - max-width: 100%; - min-height: 3.2rem; background-color: #fff; - padding: .3rem .5rem 0 .5rem; border: .1rem solid @control-color; border-radius: .3rem; color: @body-font-color; + display: block; font-size: 1.4rem; line-height: 1.6rem; + max-width: 100%; + min-height: 3.2rem; outline: 0; + padding: .3rem .5rem 0 .5rem; + width: 100%; .chip-sm { margin-bottom: .3rem; } .form-input { - display: inline-block; - border-color: transparent; background-color: #fff; - width: auto; + border-color: transparent; + display: inline-block; height: 2.4rem; - padding: .3rem; margin-bottom: .3rem; + padding: .3rem; vertical-align: top; + width: auto; } } .form-autocomplete-list { - position: absolute; - top: 100%; - left: 0; - z-index: 1988; - display: block; - width: 100%; - height: auto; - padding: .5rem; - margin: .3rem 0 0 0; + background-color: #fff; border: .1rem solid lighten(@control-color, 5%); border-radius: .3rem; - background-color: #fff; + display: block; + height: auto; + left: 0; .light-shadow; + margin: .3rem 0 0 0; + padding: .5rem; + position: absolute; + top: 100%; + width: 100%; + z-index: 1988; .chip { background-color: transparent; @@ -56,4 +56,4 @@ } } } -}
\ No newline at end of file +} diff --git a/src/avatars.less b/src/avatars.less index 159cbbd..3679372 100644 --- a/src/avatars.less +++ b/src/avatars.less @@ -1,59 +1,59 @@ // Avatars .avatar { + border-radius: 50%; display: inline-block; - width: 3.2rem; - height: 3.2rem; font-size: 1.4rem; font-weight: 300; + height: 3.2rem; line-height: 1; margin: 0; - border-radius: 50%; - vertical-align: middle; position: relative; + vertical-align: middle; + width: 3.2rem; &.avatar-xs { - width: 1.6rem; - height: 1.6rem; font-size: .8rem; + height: 1.6rem; + width: 1.6rem; } &.avatar-sm { - width: 2.4rem; - height: 2.4rem; font-size: 1rem; + height: 2.4rem; + width: 2.4rem; } &.avatar-lg { - width: 4.8rem; - height: 4.8rem; font-size: 2rem; + height: 4.8rem; + width: 4.8rem; } &.avatar-xl { - width: 6.4rem; - height: 6.4rem; font-size: 2.6rem; + height: 6.4rem; + width: 6.4rem; } img { - width: 100%; - height: 100%; border-radius: 50%; + height: 100%; + width: 100%; } .avatar-icon { - width: 50%; + background-color: #fff; + bottom: -.2em; height: 50%; padding: 5%; position: absolute; right: -.2em; - bottom: -.2em; - background-color: #fff; + width: 50%; } &[data-initial]::after { + color: #fff; content: attr(data-initial); + left: 50%; position: absolute; top: 50%; - left: 50%; - color: #fff; transform: translate(-50%, -50%); } -}
\ No newline at end of file +} diff --git a/src/badges.less b/src/badges.less index cd4a70d..c18757b 100644 --- a/src/badges.less +++ b/src/badges.less @@ -1,21 +1,21 @@ // Badges .badge { position: relative; - + &::after { - content: attr(data-badge); + background-color: @core-color; + border: .1rem solid #fff; + border-radius: 1rem; color: #fff; + content: attr(data-badge); + display: inline-block; font-size: 1.2rem; - text-align: center; + height: 2rem; line-height: 1.4rem; - background-color: @core-color; - display: inline-block; min-width: 2rem; - height: 2rem; padding: .2rem .5rem; - border: .1rem solid #fff; - border-radius: 1rem; - white-space: nowrap; + text-align: center; transform: translate(-.2rem, -.8rem); + white-space: nowrap; } -}
\ No newline at end of file +} diff --git a/src/base.less b/src/base.less index 01d06bb..284e9b5 100644 --- a/src/base.less +++ b/src/base.less @@ -1,20 +1,19 @@ // Base -* { - box-sizing: border-box; -} -*:before, -*:after { - box-sizing: border-box; +*, +*::before, +*::after { + box-sizing: inherit; } html { + box-sizing: border-box; font-size: 10px; -webkit-tap-highlight-color: transparent; } body { + background-color: @body-bg; color: @body-font-color; font-family: @body-font-family; font-size: @body-font-size; - background-color: @body-bg; } a { color: @core-link-color; @@ -28,8 +27,8 @@ a { // Disabled state &[disabled], .disabled { - opacity: .5; cursor: default; + opacity: .5; pointer-events: none; } @@ -38,9 +37,9 @@ a { .toast, .menu { .icon { - margin-right: .2rem; font-size: 1.3333em; - line-height: 0.8em; + line-height: .8em; + margin-right: .2rem; vertical-align: -20%; } -}
\ No newline at end of file +} diff --git a/src/buttons.less b/src/buttons.less index 41edb47..96cd96b 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -1,53 +1,53 @@ // Buttons .btn { - display: inline-block; - height: 3.2rem; - padding: .7rem 1.5rem; - border: .1rem solid @core-color; + -webkit-appearance: none; background-color: transparent; + border: .1rem solid @core-color; border-radius: .3rem; color: @core-link-color; + cursor: pointer; + display: inline-block; font-size: 1.4rem; + height: 3.2rem; line-height: 1.6rem; + outline: 0; + padding: .7rem 1.5rem; text-align: center; text-decoration: none; + user-select: none; vertical-align: middle; white-space: nowrap; - cursor: pointer; - user-select: none; - -webkit-appearance: none; - outline: 0; &:hover, &:focus { - color: #fff; - border-color: darken(@core-color, 5%); background-color: @core-color; + border-color: darken(@core-color, 5%); + color: #fff; } &:active, &.active { - color: #fff; - border-color: darken(@core-color, 10%); background-color: darken(@core-color, 5%); + border-color: darken(@core-color, 10%); + color: #fff; } // Button Primary &.btn-primary { - color: #fff; - border-color: darken(@core-color, 5%); background-color: @core-color; + border-color: darken(@core-color, 5%); + color: #fff; &:hover, &:focus { - color: #fff; - border-color: darken(@core-color, 10%); background-color: darken(@core-color, 5%); + border-color: darken(@core-color, 10%); + color: #fff; } &:active, &.active { - color: #fff; - border-color: darken(@core-color, 15%); background-color: darken(@core-color, 10%); + border-color: darken(@core-color, 15%); + color: #fff; } &.loading { @@ -61,9 +61,9 @@ // Button Link &.btn-link { - color: @core-link-color; - border-color: transparent; background-color: transparent; + border-color: transparent; + color: @core-link-color; &:hover, &:focus { @@ -77,40 +77,40 @@ // Button Small &.btn-sm { - height: 2.4rem; border-radius: .2rem; font-size: 1.2rem; + height: 2.4rem; line-height: 1.4rem; padding: .4rem 1rem; } // Button Large &.btn-lg { - height: 4.2rem; border-radius: .4rem; font-size: 1.8rem; + height: 4.2rem; line-height: 2rem; padding: 1rem 1.8rem; } // Button Block &.btn-block { - width: 100%; display: block; + width: 100%; } // Button Clear &.btn-clear { - width: 1.4rem; - height: 1.4rem; - padding: 0; - margin: .1rem -.2rem .1rem .2rem; + background-color: transparent; border: 0; border-radius: .7rem; - vertical-align: top; - position: relative; - background-color: transparent; + height: 1.4rem; + margin: .1rem -.2rem .1rem .2rem; opacity: .35; + padding: 0; + position: relative; + vertical-align: top; + width: 1.4rem; &:hover { opacity: .75; @@ -118,26 +118,26 @@ &::before, &::after { + background-color: #333; content: ""; display: block; + left: 50%; position: absolute; top: 50%; - left: 50%; - background-color: #333; transform: rotate(-45deg); } &::before { - width: 1rem; height: .2rem; margin-left: -.5rem; margin-top: -.1rem; + width: 1rem; } &::after { - width: .2rem; height: 1rem; margin-left: -.1rem; margin-top: -.5rem; + width: .2rem; } } } @@ -151,17 +151,17 @@ flex: 1 0 auto; &:first-child:not(:last-child) { - border-top-right-radius: 0; border-bottom-right-radius: 0; + border-top-right-radius: 0; } &:not(:first-child):not(:last-child) { - margin-left: -.1rem; border-radius: 0; + margin-left: -.1rem; } &:last-child:not(:first-child) { - margin-left: -.1rem; - border-top-left-radius: 0; border-bottom-left-radius: 0; + border-top-left-radius: 0; + margin-left: -.1rem; } &:hover, &:focus { diff --git a/src/cards.less b/src/cards.less index 3338fd6..4a46dfd 100644 --- a/src/cards.less +++ b/src/cards.less @@ -1,13 +1,13 @@ // Cards .card { + background-color: #fff; + border-radius: .3rem; display: block; - text-align: left; margin: 0; padding: 0; - border-radius: .3rem; - background-color: #fff; - z-index: 999; .shadow; + text-align: left; + z-index: 999; .card-header, .card-image, @@ -33,15 +33,15 @@ } } .card-title { - margin-top: 0; - margin-bottom: .5rem; font-size: 1.6em; line-height: 1; + margin-bottom: .5rem; + margin-top: 0; } .card-meta { - margin-top: 0; - margin-bottom: 0; - font-size: 1em; color: lighten(@body-font-color, 50%); + font-size: 1em; + margin-bottom: 0; + margin-top: 0; } -}
\ No newline at end of file +} diff --git a/src/chips.less b/src/chips.less index 4ea0016..a6f05f8 100644 --- a/src/chips.less +++ b/src/chips.less @@ -1,14 +1,14 @@ // Chips .chip { - display: flex; - padding: .3rem .8rem; + align-content: space-around; + align-items: center; border: .1rem solid transparent; border-radius: .3rem; - margin: 0; - list-style: none; - align-items: center; - align-content: space-around; color: #666; + display: flex; + list-style: none; + margin: 0; + padding: .3rem .8rem; .chip-icon { flex: 0 0 auto; @@ -22,21 +22,21 @@ flex: 0 0 auto; .btn { - padding: .7rem .5rem; border-color: transparent; color: @control-color; + padding: .7rem .5rem; &:hover, &:focus { - color: @core-color; - border-color: transparent; background-color: transparent; + border-color: transparent; + color: @core-color; } &:active, &.active { - color: darken(@core-color, 5%); - border-color: transparent; background-color: transparent; + border-color: transparent; + color: darken(@core-color, 5%); } } } @@ -44,17 +44,17 @@ // Small chips .chip-sm { - display: inline-flex; align-items: center; - vertical-align: middle; - max-width: 100%; - height: 2.4rem; - padding: .3rem .6rem; - border-radius: .3rem; - font-size: 1.2rem; background-color: lighten(@core-color, 40%); + border-radius: .3rem; color: #666; + display: inline-flex; + font-size: 1.2rem; + height: 2.4rem; + max-width: 100%; + padding: .3rem .6rem; text-decoration: none; + vertical-align: middle; &:hover, &:focus { @@ -86,8 +86,8 @@ } .avatar { - width: 1.6rem; - height: 1.6rem; font-size: .8rem; + height: 1.6rem; + width: 1.6rem; } -}
\ No newline at end of file +} diff --git a/src/fileicons.less b/src/fileicons.less index 585cbaa..534ed0c 100644 --- a/src/fileicons.less +++ b/src/fileicons.less @@ -1,113 +1,113 @@ // File icons .file-icon { - display: inline-block; - width: 2.4rem; - height: 3.2rem; background-color: transparent; - position: relative; - border-width: 0 0 2.2rem 1.4rem; - border-style: solid; border-color: @control-color; border-radius: .2rem; + border-style: solid; + border-width: 0 0 2.2rem 1.4rem; + display: inline-block; + height: 3.2rem; + position: relative; text-align: left; + width: 2.4rem; zoom: 1; &::before, &::after { - position: absolute; - top: 0; - right: 0; - content: ''; - width: 1rem; - height: 1rem; + background-color: transparent; border: .5rem solid @control-color; border-right-color: transparent; border-top-color: transparent; - background-color: transparent; + content: ""; + height: 1rem; + position: absolute; + right: 0; + top: 0; + width: 1rem; z-index: 2; } &::after { - content: attr(data-type); - border-color: rgba(255, 255, 255, .5); border-bottom-left-radius: .2rem; + border-color: rgba(255, 255, 255, .5); color: #fff; + content: attr(data-type); font-size: 1rem; - text-indent: -1.6rem; line-height: 3.6rem; + text-indent: -1.6rem; z-index: 3; } &.file-icon-xs { - width: 1.2rem; - height: 1.6rem; border-width: 0 0 1.2rem .8rem; + height: 1.6rem; + width: 1.2rem; &::before, &::after { - width: .4rem; - height: .4rem; border-width: .2rem; + height: .4rem; + width: .4rem; } &::after { - text-indent: -.8rem; - line-height: 1.6rem; - font-size: .8rem; border-radius: .1rem; - content: '--'; + content: "--"; + font-size: .8rem; + line-height: 1.6rem; + text-indent: -.8rem; } } &.file-icon-sm { - width: 1.8rem; - height: 2.4rem; border-width: 0 0 1.6rem 1rem; + height: 2.4rem; + width: 1.8rem; &::before, &::after { - width: .8rem; - height: .8rem; border-width: .4rem; + height: .8rem; + width: .8rem; } &::after { - text-indent: -1.2rem; - line-height: 2.6rem; font-size: .8rem; + line-height: 2.6rem; + text-indent: -1.2rem; } } &.file-icon-lg { - width: 3.6rem; - height: 4.8rem; border-width: 0 0 3.4rem 2.2rem; + height: 4.8rem; + width: 3.6rem; &::before, &::after { - width: 1.4rem; - height: 1.4rem; border-width: .7rem; + height: 1.4rem; + width: 1.4rem; } &::after { - text-indent: -2.6rem; - line-height: 6.2rem; font-size: 1.2rem; + line-height: 6.2rem; + text-indent: -2.6rem; } } &.file-icon-xl { - width: 4.8rem; - height: 6.4rem; - border-width: 0 0 4.6rem 3rem; border-radius: .3rem; + border-width: 0 0 4.6rem 3rem; + height: 6.4rem; + width: 4.8rem; &::before, &::after { - width: 1.8rem; - height: 1.8rem; border-width: .9rem; + height: 1.8rem; + width: 1.8rem; } &::after { - text-indent: -3.4rem; - line-height: 8.8rem; font-size: 1.4rem; + line-height: 8.8rem; + text-indent: -3.4rem; } } } -// TODO: File types
\ No newline at end of file +// TODO: File types diff --git a/src/forms.less b/src/forms.less index a9f9703..6dbe030 100644 --- a/src/forms.less +++ b/src/forms.less @@ -123,7 +123,7 @@ &:focus { border-color: @core-color; } - select::-ms-expand { + &::-ms-expand { display: none; } @@ -300,4 +300,3 @@ } } } - diff --git a/src/labels.less b/src/labels.less index f08f5bc..29b3b81 100644 --- a/src/labels.less +++ b/src/labels.less @@ -1,16 +1,16 @@ // Labels .label { + background-color: @core-border-color; + border-radius: .2rem; + color: lighten(@body-font-color, 20%); display: inline-block; - padding: .2rem .4rem; font-size: .9em; line-height: 1em; - color: lighten(@body-font-color, 20%); - background-color: @core-border-color; + margin: -.2rem .1em 0 .1em; + padding: .2rem .4rem; text-align: center; - white-space: nowrap; vertical-align: baseline; - margin: -.2rem .1em 0 .1em; - border-radius: .2rem; + white-space: nowrap; &.label-primary { .toast-variant(@core-color); @@ -27,4 +27,4 @@ &.label-danger { .toast-variant(@control-color-danger); } -}
\ No newline at end of file +} diff --git a/src/layout.less b/src/layout.less index 3425d0c..1a4ed06 100644 --- a/src/layout.less +++ b/src/layout.less @@ -1,25 +1,25 @@ // Layout .container { - width: 100%; - overflow-x: hidden; margin-left: auto; margin-right: auto; + overflow-x: hidden; padding-left: 1rem; padding-right: 1rem; + width: 100%; &:extend(.clearfix all); } @media screen and (min-width: 981px) { .grid-960 { - width: 96rem; margin-left: auto; margin-right: auto; + width: 96rem; } } @media screen and (min-width: 481px) { .grid-480 { - width: 48rem; margin-left: auto; margin-right: auto; + width: 48rem; } } @@ -138,4 +138,4 @@ .hide-xl { display: none !important; } -}
\ No newline at end of file +} diff --git a/src/media.less b/src/media.less index a3e055e..f27c068 100644 --- a/src/media.less +++ b/src/media.less @@ -1,28 +1,28 @@ // Media .img-responsive { display: block; - max-width: 100%; height: auto; + max-width: 100%; } .video-responsive { - position: relative; height: 0; - padding-top: 3rem; - padding-bottom: 56.25%; /* 16:9 */ overflow: hidden; + padding-bottom: 56.25%; /* 16:9 */ + padding-top: 3rem; + position: relative; iframe, object, embed { + height: 100%; + left: 0; position: absolute; top: 0; - left: 0; width: 100%; - height: 100%; } video { - width: 100%; - max-width: 100%; height: auto; + max-width: 100%; + width: 100%; } -}
\ No newline at end of file +} diff --git a/src/menus.less b/src/menus.less index 649cd53..17060cf 100644 --- a/src/menus.less +++ b/src/menus.less @@ -1,30 +1,30 @@ // Menus .menu { + background-color: #fff; + border-radius: .3rem; display: block; - text-align: left; margin: 0; padding: .5rem; - border-radius: .3rem; - background-color: #fff; - z-index: 999; .shadow; + text-align: left; + z-index: 999; .menu-item { - display: block; - padding: .2rem 1rem; - margin-top: .1rem; border-radius: .3rem; color: @body-font-color; + display: block; line-height: 2.4rem; + margin-top: .1rem; + padding: .2rem 1rem; text-decoration: none; user-select: none; a { + border-radius: .3rem; + color: inherit; display: block; margin: -.2rem -1rem; padding: .2rem 1rem; - border-radius: .3rem; - color: inherit; text-decoration: none; &:hover, @@ -33,42 +33,42 @@ } &:active, &.active { - color: darken(@core-link-color, 5%); background-color: lighten(@core-color, 40%); + color: darken(@core-link-color, 5%); } } } .menu-header { + color: lighten(@body-font-color, 60%); display: block; - padding: .2rem 1rem; - margin-top: 0; font-size: 1.2rem; line-height: 1.8rem; - color: lighten(@body-font-color, 60%); + margin-top: 0; + padding: .2rem 1rem; .menu-header-text { + background-color: #fff; display: inline-block; - padding: 0 .6rem; margin-left: -.6rem; - background-color: #fff; + padding: 0 .6rem; position: relative; z-index: 99; } - &:after { + &::after { + border-bottom: .1rem solid @core-border-color; content: ""; display: block; - width: 100%; height: .1rem; transform: translateY(-1rem); - border-bottom: .1rem solid @core-border-color; + width: 100%; } } .divider { - display: block; border-bottom: .1rem solid @core-border-color; + display: block; margin: .5rem; } } diff --git a/src/modals.less b/src/modals.less index bdfe8b8..f2d36b7 100644 --- a/src/modals.less +++ b/src/modals.less @@ -1,29 +1,29 @@ // Modals .modal { - display: none; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; align-items: center; + bottom: 0; + display: none; justify-content: center; - overflow: hidden; + left: 0; opacity: 0; + overflow: hidden; + position: fixed; + right: 0; + top: 0; &.active { display: flex; - z-index: 1988; opacity: 1; + z-index: 1988; .modal-overlay { + background-color: rgba(0, 0, 0, .75); + bottom: 0; display: block; + left: 0; position: absolute; - top: 0; right: 0; - bottom: 0; - left: 0; - background-color: rgba(0, 0, 0, .75); + top: 0; } .modal-container { animation: slide-down .216s; @@ -31,29 +31,29 @@ } } .modal-container { + animation: slide-up .216s; + background-color: #fff; + border-radius: .3rem; display: block; - text-align: left; margin: 0 auto; padding: 0; - border-radius: .3rem; - background-color: #fff; - z-index: 1988; - animation: slide-up .216s; .shadow; + text-align: left; + z-index: 1988; .modal-header { padding: 1.5rem; .modal-title { - margin: 0; font-size: 1.5rem; + margin: 0; } } .modal-body { - position: relative; - padding: 1.5rem; max-height: 50vh; overflow-y: auto; + padding: 1.5rem; + position: relative; } .modal-footer { padding: 1.5rem; @@ -71,4 +71,4 @@ width: 32rem; } } -}
\ No newline at end of file +} diff --git a/src/navigation.less b/src/navigation.less index b7f42f7..5f51b0e 100644 --- a/src/navigation.less +++ b/src/navigation.less @@ -27,27 +27,27 @@ &:not(:last-child) { &::after { + color: @control-color; content: "/"; padding: 0 .4rem; - color: @control-color; } } } } // Tabs .tab { - display: block; border-bottom: .1rem solid @control-color; + display: block; .tab-item { display: inline-block; margin-bottom: -.1rem; a { - display: block; - padding: .5rem 1.5rem; border-bottom: .2rem solid transparent; color: @body-font-color; + display: block; + padding: .5rem 1.5rem; text-decoration: none; &:hover, @@ -87,10 +87,10 @@ padding: .6rem .5rem; } a { + border-radius: .3rem; display: inline-block; - padding: .6rem 1.2rem; margin: 0 .1rem; - border-radius: .3rem; + padding: .6rem 1.2rem; text-decoration: none; &:hover, @@ -101,10 +101,9 @@ &.active { a { - color: #fff; background-color: @core-color; + color: #fff; } } } } - diff --git a/src/normalize.less b/src/normalize.less index e376c84..f48215b 100644 --- a/src/normalize.less +++ b/src/normalize.less @@ -7,8 +7,8 @@ html { font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ } /** @@ -30,16 +30,19 @@ body { article, aside, -details, /* 1 */ +details, +/* 1 */ figcaption, figure, footer, header, -main, /* 2 */ +main, +/* 2 */ menu, nav, section, -summary { /* 1 */ +summary { + /* 1 */ display: block; } @@ -76,7 +79,8 @@ progress { * 1. Add the correct display in IE. */ -template, /* 1 */ +template, +/* 1 */ [hidden] { display: none; } @@ -112,8 +116,8 @@ a:hover { abbr[title] { border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ + text-decoration: underline; /* 2 */ } /** @@ -149,7 +153,7 @@ dfn { h1 { font-size: 2em; - margin: 0.67em 0; + margin: .67em 0; } /** @@ -183,11 +187,11 @@ sup { } sub { - bottom: -0.25em; + bottom: -.25em; } sup { - top: -0.5em; + top: -.5em; } /* Embedded content @@ -273,8 +277,10 @@ optgroup { */ button, -input, /* 1 */ -select { /* 2 */ +input, +/* 1 */ +select { + /* 2 */ overflow: visible; } @@ -286,7 +292,8 @@ select { /* 2 */ button, input, select, -textarea { /* 1 */ +textarea { + /* 1 */ margin: 0; } @@ -296,7 +303,8 @@ textarea { /* 1 */ */ button, -select { /* 1 */ +select { + /* 1 */ text-transform: none; } @@ -326,7 +334,8 @@ button, */ button, -html [type="button"], /* 1 */ +html [type="button"], +/* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ @@ -358,7 +367,7 @@ input:-moz-focusring { fieldset { border: 1px solid #c0c0c0; margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + padding: .35em .625em .75em; } /** @@ -421,4 +430,4 @@ textarea { [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; -}
\ No newline at end of file +} diff --git a/src/tables.less b/src/tables.less index 85306ee..d071b0d 100644 --- a/src/tables.less +++ b/src/tables.less @@ -1,14 +1,14 @@ // Tables .table { - width: 100%; border-collapse: collapse; border-spacing: 0; + width: 100%; th, td { - text-align: left; - padding: 1.5rem 1rem; border-bottom: .1rem solid @core-border-color; + padding: 1.5rem 1rem; + text-align: left; } th { border-color: darken(@core-border-color, 15%); @@ -16,4 +16,4 @@ .selected { background-color: lighten(@core-border-color, 2%); } -}
\ No newline at end of file +} diff --git a/src/toasts.less b/src/toasts.less index fe6081a..a495e89 100644 --- a/src/toasts.less +++ b/src/toasts.less @@ -1,12 +1,12 @@ // Toasts .toast { - display: block; - width: 100%; - padding: 1.4rem; - color: #666; + background-color: @core-border-color; border: .1rem solid darken(@core-border-color, 2%); border-radius: .3rem; - background-color: @core-border-color; + color: #666; + display: block; + padding: 1.4rem; + width: 100%; &.toast-primary { .toast-variant(@core-color); @@ -37,4 +37,4 @@ border-top-right-radius: 0; margin-top: -.1rem; } -}
\ No newline at end of file +} diff --git a/src/tooltips.less b/src/tooltips.less index ab3e754..6659604 100644 --- a/src/tooltips.less +++ b/src/tooltips.less @@ -3,25 +3,25 @@ position: relative; &::after { - content: attr(data-tooltip); - display: block; - max-width: 32rem; - padding: .6rem 1rem; - border-radius: .3rem; background-color: fade(#333, 90%); - opacity: 0; + border-radius: .3rem; + bottom: 100%; color: #fff; + content: attr(data-tooltip); + display: block; font-size: 1.2rem; - line-height: 1.6rem; - text-overflow: ellipsis; - position: absolute; - bottom: 100%; left: 50%; - transform: translate(-50%, 0); + line-height: 1.6rem; + max-width: 32rem; + opacity: 0; overflow: hidden; - z-index: 99; + padding: .6rem 1rem; pointer-events: none; + position: absolute; + text-overflow: ellipsis; + transform: translate(-50%, 0); transition: all .216s ease; + z-index: 99; } &:hover, &:focus { @@ -46,8 +46,8 @@ } &.tooltip-bottom { &::after { - top: 100%; bottom: auto; + top: 100%; transform: translate(-50%, 0); } &:hover, @@ -59,9 +59,9 @@ } &.tooltip-left { &::after { - right: 100%; bottom: 50%; left: auto; + right: 100%; transform: translate(0, 50%); } &:hover, @@ -71,4 +71,4 @@ } } } -}
\ No newline at end of file +} diff --git a/src/typography.less b/src/typography.less index d6e7714..f3c0fc3 100644 --- a/src/typography.less +++ b/src/typography.less @@ -5,11 +5,11 @@ h3, h4, h5, h6 { + color: inherit; font-weight: 300; line-height: 1.1; - margin-top: 2.5rem; margin-bottom: 1.5rem; - color: inherit; + margin-top: 2.5rem; } h1 { font-size: 5rem; @@ -34,15 +34,15 @@ p { margin: 0 0 1rem; } blockquote { - padding: 1rem 2rem; border-left: .2rem solid #ddd; + padding: 1rem 2rem; margin-left: 0; p:last-child { margin-bottom: 0; } - .blockquote-source { + cite { color: lighten(@body-font-color, 50%); } } diff --git a/src/utilities.less b/src/utilities.less index c47f5a0..9cea197 100644 --- a/src/utilities.less +++ b/src/utilities.less @@ -101,11 +101,11 @@ visibility: hidden; } .text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; background-color: transparent; border: 0; + color: transparent; + font: 0/0 a; + text-shadow: none; } // Text .text-left { @@ -142,19 +142,19 @@ } .text-ellipsis { - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } .text-clip { - white-space: nowrap; overflow: hidden; text-overflow: clip; + white-space: nowrap; } .text-break { + hyphens: auto; word-break: break-word; word-wrap: break-word; - hyphens: auto; } .hand { cursor: pointer; @@ -178,25 +178,25 @@ // Loading .loading { + color: transparent !important; min-height: 1.6rem; - position: relative; pointer-events: none; - color: transparent !important; + position: relative; &::after { + animation: loading 500ms infinite linear; border: .2rem solid @core-color; + border-radius: .8rem; border-right-color: transparent; border-top-color: transparent; - border-radius: .8rem; content: ""; - position: absolute; + display: block; + height: 1.6rem; left: 50%; - top: 50%; margin-left: -.8rem; margin-top: -.8rem; - display: block; + position: absolute; + top: 50%; width: 1.6rem; - height: 1.6rem; - animation: loading 500ms infinite linear; } -}
\ No newline at end of file +} diff --git a/src/variables.less b/src/variables.less index d875d93..198ab0e 100644 --- a/src/variables.less +++ b/src/variables.less @@ -20,18 +20,18 @@ // Mixins .clearfix() { &::after { + clear: both; content: ""; display: table; - clear: both; } } .toast-variant(@color) { - color: #fff; background-color: @color; border-color: darken(@color, 2%); + color: #fff; } .label-variant(@color) { - color: #fff; background-color: @color; -}
\ No newline at end of file + color: #fff; +} |