diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css index c17f442495..b67891042c 100644 --- a/dist/framework-with-theme.css +++ b/dist/framework-with-theme.css @@ -34,6 +34,9 @@ ul { -webkit-transform: translateZ(0px); transform: translateZ(0px); } +.content-padded { + padding: 10px; } + .bar { position: fixed; right: 0; @@ -100,6 +103,52 @@ ul { cursor: pointer; margin: 0; } +.button-group { + position: relative; + display: inline-block; + vertical-align: middle; } + .button-group > .button { + position: relative; + float: left; } + .button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active { + z-index: 2; } + .button-group > .button:focus { + outline: none; } + +.button-group .button + .button, +.button-group .button + .button-group, +.button-group .button-group + .button, +.button-group .button-group + .button-group { + margin-left: -1px; } + +.button-group > .button:not(:first-child):not(:last-child) { + border-radius: 0; } + +.button-group > .button:first-child { + margin-left: 0; } + .button-group > .button:first-child:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + +.button-group > .button:last-child:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + +.button-group > .button-group { + float: left; } + +.button-group > .button-group:not(:first-child):not(:last-child) > .button { + border-radius: 0; } + +.button-group > .button-group:first-child > .button:last-child, +.button-group > .button-group:first-child > .dropdown-toggle { + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + +.button-group > .button-group:last-child > .button:first-child { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + .list { margin-bottom: 20px; padding-left: 0; } diff --git a/example/buttons.html b/example/buttons.html index 63a8ccc4bb..675fbcda2e 100644 --- a/example/buttons.html +++ b/example/buttons.html @@ -33,7 +33,7 @@

Willkommen!

-
+

Default Secondary @@ -44,6 +44,14 @@ Danger Dark

+

+

+

diff --git a/scss/framework/structure/_base.scss b/scss/framework/structure/_base.scss index 5f71244745..10149b70ee 100644 --- a/scss/framework/structure/_base.scss +++ b/scss/framework/structure/_base.scss @@ -39,3 +39,7 @@ ul { margin: 0; padding: 0; } -webkit-transform: translateZ(0px); transform: translateZ(0px); } + +.content-padded { + padding: $contentPadding; +} diff --git a/scss/framework/structure/_button-group.scss b/scss/framework/structure/_button-group.scss index e69de29bb2..d2e72c1cff 100644 --- a/scss/framework/structure/_button-group.scss +++ b/scss/framework/structure/_button-group.scss @@ -0,0 +1,64 @@ +.button-group { + position: relative; + display: inline-block; + vertical-align: middle; // match .button alignment given font-size hack above + + > .button { + position: relative; + float: left; + // Bring the "active" button to the front + &:hover, + &:focus, + &:active, + &.active { + z-index: 2; + } + &:focus { + // Remove focus outline when dropdown JS adds it after closing the menu + outline: none; + } + } +} + + +.button-group { + .button + .button, + .button + .button-group, + .button-group + .button, + .button-group + .button-group { + margin-left: -1px; + } +} + +.button-group > .button:not(:first-child):not(:last-child) { + border-radius: 0; +} + +// Set corners individual because sometimes a single button can be in a .button-group and we need :first-child and :last-child to both match +.button-group > .button:first-child { + margin-left: 0; + &:not(:last-child) { + @include border-right-radius(0); + } +} +// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it +.button-group > .button:last-child:not(:first-child) { + @include border-left-radius(0); +} + +// Custom edits for including button-groups within button-groups (useful for including dropdown buttons within a button-group) +.button-group > .button-group { + float: left; +} +.button-group > .button-group:not(:first-child):not(:last-child) > .button { + border-radius: 0; +} +.button-group > .button-group:first-child { + > .button:last-child, + > .dropdown-toggle { + @include border-right-radius(0); + } +} +.button-group > .button-group:last-child > .button:first-child { + @include border-left-radius(0); +} diff --git a/scss/framework/structure/_mixins.scss b/scss/framework/structure/_mixins.scss index 2e5ebf5d50..8f947a7be2 100644 --- a/scss/framework/structure/_mixins.scss +++ b/scss/framework/structure/_mixins.scss @@ -18,3 +18,21 @@ box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15); } } + +// Single side border-radius +@mixin border-top-radius($radius) { + border-top-right-radius: $radius; + border-top-left-radius: $radius; +} +@mixin border-right-radius($radius) { + border-bottom-right-radius: $radius; + border-top-right-radius: $radius; +} +@mixin border-bottom-radius($radius) { + border-bottom-right-radius: $radius; + border-bottom-left-radius: $radius; +} +@mixin border-left-radius($radius) { + border-bottom-left-radius: $radius; + border-top-left-radius: $radius; +} diff --git a/scss/framework/structure/_variables.scss b/scss/framework/structure/_variables.scss index d628dc9fff..5985de2265 100644 --- a/scss/framework/structure/_variables.scss +++ b/scss/framework/structure/_variables.scss @@ -10,6 +10,10 @@ $fontSizeLarge: ceil($baseFontSize * 1.25); $baseLineHeight: 1.428571429; // 20/14 $baseLineHeightComputed: floor($baseFontSize * $baseLineHeight); // ~20px +// Content stuff +$contentPadding: 10px; + +// Bar stuff $barHeight: 50px !default; $barLineHeight: 50px !default; $barTitleFontSize: $fontSizeLarge; @@ -17,5 +21,7 @@ $barTitleLineHeightComputed: $baseLineHeightComputed; $barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2); + // Lists $listItemBorder: 1px solid #ddd; +