diff --git a/src/styles/tink/_buttons.scss b/src/styles/tink/_buttons.scss index 64c7a4004b..17def39549 100644 --- a/src/styles/tink/_buttons.scss +++ b/src/styles/tink/_buttons.scss @@ -112,6 +112,37 @@ input[type="submit"], @include button-variant($btn-transparent-invert-color, $btn-transparent-invert-bg, $btn-transparent-invert-border, $btn-transparent-invert-hover-bg); } +// Close button +.btn-close { + //@extend %btn; + @include button-variant($upload-delete-icon-color, $btn-transparent-bg, $btn-transparent-border, $upload-delete-icon-bg-hover-color); + @include button-size(0, 0, $font-size-base, rem(15), $border-radius-base); + height: rem(15); + opacity: .5; + text-align: center; + text-decoration: none; + user-select: none; + transition: all $animation-speed linear; + width: rem(15); + + &:before { + content: "×"; + } + + &:hover { + //background-color: $upload-delete-icon-bg-hover-color; + + &:before { + color: rgba($black, .85) + } + } + span { + @extend .sr-only; + } + } + + + // Line buttons (only outline has color) // -------------------------------------------------- diff --git a/src/styles/tink/_callout.scss b/src/styles/tink/_callout.scss index e55576bcce..e13c96bdc4 100644 --- a/src/styles/tink/_callout.scss +++ b/src/styles/tink/_callout.scss @@ -10,10 +10,10 @@ border-radius: rem($callout-border-radius); box-shadow: 0 1px 1px rgba(0,0,0,.05); color: $callout-color; - margin: rem($line-height-computed) 0; + //margin: rem($line-height-computed) 0; padding: rem($padding-large-vertical $padding-large-horizontal); - a { + a:not(.btn-close) { color: darken($callout-link-color, 8%); text-decoration: underline; @@ -28,8 +28,8 @@ margin: rem($line-height-computed / 2) 0; } - > p:last-child, - > ul { + > p:last-of-type, + > ul:last-of-type { margin-bottom: 0; } } @@ -40,7 +40,7 @@ border-color: $callout-border-success; color: $callout-color-success; - a { + a:not(.btn-close) { color: darken($callout-link-color-success, 8%); &:hover, @@ -60,7 +60,7 @@ border-color: $callout-border-warning; color: $callout-color-warning; - a { + a:not(.btn-close) { color: darken($callout-link-color-warning, 8%); &:hover, @@ -80,7 +80,7 @@ border-color: $callout-border-danger; color: $callout-color-danger; - a { + a:not(.btn-close) { color: darken($callout-link-color-danger, 8%); &:hover, diff --git a/src/styles/tink/_notifications.scss b/src/styles/tink/_notifications.scss new file mode 100644 index 0000000000..aeb4b41463 --- /dev/null +++ b/src/styles/tink/_notifications.scss @@ -0,0 +1,59 @@ +/** + * Notifications + * -------------------------------------------------- + */ + +.notifications { + @extend .container; + left: 0; + overflow: hidden; + position: fixed; + right: 0; + top: rem($bar-height); + z-index: layer('notification'); + + > ul { + @extend .list-unstyled; + @extend .row; + margin-top: $grid-gutter-width / 2; + + // actual notification + > li { + @extend .col-xs-12; + margin-bottom: rem(3); + + @media (min-width: $screen-sm) { + @extend .col-sm-8; + @extend .col-sm-offset-2; + } + + @media (min-width: $screen-md) { + @extend .col-md-6; + @extend .col-md-offset-3; + } + + @media (min-width: $screen-lg) { + @extend .col-lg-4; + @extend .col-lg-offset-4; + } + + > * { + padding-right: $notification-padding-right; + position: relative; + + // close button + .btn-close { + position: absolute; + top: rem($notification-padding); + right: rem($notification-padding); + } + } + + // callout styling is a bit different + .callout { + border-left-width: 1px; + box-shadow: 0px 1px 3px rgba($black, .15); + } + } + } +} diff --git a/src/styles/tink/_scaffolding.scss b/src/styles/tink/_scaffolding.scss index eb74db04eb..d346cdc239 100644 --- a/src/styles/tink/_scaffolding.scss +++ b/src/styles/tink/_scaffolding.scss @@ -66,7 +66,7 @@ textarea { // Links -a { +a:not(.btn-close) { color: $link-color; text-decoration: none; transition: all $animation-speed linear; diff --git a/src/styles/tink/_tink.scss b/src/styles/tink/_tink.scss index 89f59dbb12..05646ff863 100644 --- a/src/styles/tink/_tink.scss +++ b/src/styles/tink/_tink.scss @@ -45,6 +45,7 @@ @import "hit-area-box"; // @import "timeline"; @import "bar"; +@import "notifications"; /** * Angular related components diff --git a/src/styles/tink/_variables.scss b/src/styles/tink/_variables.scss index 8a2dc8f81f..34dcbf90fb 100644 --- a/src/styles/tink/_variables.scss +++ b/src/styles/tink/_variables.scss @@ -346,7 +346,7 @@ $input-group-addon-border-color: $input-border !default; // Border color for tex * Complete layer list (for reference, add these to $layers only if needed) * $layers: base, navbar, dropdown, tooltip, navbar-sticky, navbar-fixed, modal-background, modal, popover; */ -$layers: base, pseudo, above-pseudo, nav-aside, popover, sticky, nav-top, modal !default; +$layers: base, pseudo, above-pseudo, nav-aside, popover, sticky, nav-top, notification, modal !default; @@ -814,3 +814,14 @@ $breadcrumb-separator-size: $breadcrumb-font-size * .6 !default; $loader-color: rgba($brand, .8) !default; $loader-color-alt: rgba($brand-light, .8) !default; $loader-border-width: 2px !default; + + + +/** + * Notification + */ + +$notification-padding: $padding-base-vertical !default; +$notification-padding-right: $padding-large-horizontal * 2 !default; + + diff --git a/src/views/main.html b/src/views/main.html index 204a565bd7..27a7175208 100644 --- a/src/views/main.html +++ b/src/views/main.html @@ -1,4 +1,40 @@ +
+ +
+ + + +
+
+
+
+ +
+
+
+
+