diff --git a/src/components/ContainerHomePreview.react.js b/src/components/ContainerHomePreview.react.js index 66cff5a098..e44461498c 100644 --- a/src/components/ContainerHomePreview.react.js +++ b/src/components/ContainerHomePreview.react.js @@ -83,7 +83,7 @@ var ContainerHomePreview = React.createClass({
IP & PORTS
- +

You can access this container using the following IP address and port:

diff --git a/src/components/Containers.react.js b/src/components/Containers.react.js index 8d0fb669e1..449afb4835 100644 --- a/src/components/Containers.react.js +++ b/src/components/Containers.react.js @@ -161,7 +161,7 @@ var Containers = React.createClass({

Containers

- + New
diff --git a/src/components/ImageCard.react.js b/src/components/ImageCard.react.js index 7b995de430..663a703d03 100644 --- a/src/components/ImageCard.react.js +++ b/src/components/ImageCard.react.js @@ -152,7 +152,7 @@ var ImageCard = React.createClass({ SELECTED TAG: {this.state.chosenTag}
- VIEW ON DOCKER HUB + VIEW ON DOCKER HUB
diff --git a/styles/left-panel.less b/styles/left-panel.less index 631469725a..f63d18d835 100644 --- a/styles/left-panel.less +++ b/styles/left-panel.less @@ -41,19 +41,6 @@ &.active { .btn-new { opacity: 0.3; - &:hover { - color: @brand-action; - } - } - } - .btn-new { - color: @brand-action; - transition: all 0.25s; - .icon { - font-size: 14px; - } - &:hover { - color: darken(@brand-action, 15%); } } } diff --git a/styles/right-panel.less b/styles/right-panel.less index 800ea7cf7d..4db5bbc702 100644 --- a/styles/right-panel.less +++ b/styles/right-panel.less @@ -123,6 +123,20 @@ box-shadow: inset 0 0 1px @color-divider; background-color: darken(@color-box-button, 1%); } + &.disabled { + color: @gray-lightest; + &:hover { + background-color: white; + } + &:active { + background-color: white; + } + &.active { + &:hover { + background-color: @color-background; + } + } + } } } } diff --git a/styles/theme.less b/styles/theme.less index bf0a0b2c9e..18c7aa3bb9 100644 --- a/styles/theme.less +++ b/styles/theme.less @@ -65,12 +65,13 @@ input[type="text"] { } // Mixin for generating new styles -.btn-styles(@btn-color: @gray-normal) { +.btn-hollow-styles(@btn-color: @gray-normal) { .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners transition: all 100ms; background: transparent; - border-color: @btn-color; + border: 1px solid @btn-color; color: @btn-color; + font-weight: 500; &:hover { background-color: fade(@btn-color, 3%); @@ -109,8 +110,10 @@ input[type="text"] { .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners transition: all 100ms; background: @btn-color; + border: none; color: white; - + font-weight: 500; + &:hover { background-color: darken(@btn-color, 4%); color: white; @@ -163,17 +166,27 @@ input[type="text"] { // Common styles .btn { - font-size: 13px; background-color: transparent; color: @gray-normal; border: 1px solid @gray-normal; border-radius: @border-radius; box-shadow: none; - font-weight: 400; text-shadow: none; - padding: 5px 14px 5px 14px; cursor: default; - + font-size: 12px; + padding: 0.4rem 1rem; + text-transform: uppercase; + + &.has-icon { + .icon { + font-size: 0.9rem; + margin-right: 0.4rem; + &::before { + -webkit-font-smoothing: subpixel-antialiased; + } + } + } + &.circular { border-radius: 100%; width: 25px; @@ -241,20 +254,20 @@ input[type="text"] { // Apply the mixin to the buttons .btn-action { - .btn-styles(@brand-action); - &.btn-filled { - .btn-filled-styles(@brand-action); + .btn-hollow-styles(@brand-action); + &.btn-hollow { + .btn-hollow-styles(@brand-action); } } .btn-positive { - .btn-styles(@brand-positive); + .btn-filled-styles(@brand-positive); } -.btn-default { .btn-styles(@btn-default-bg); } -.btn-primary { .btn-styles(@btn-primary-bg); } -.btn-success { .btn-styles(@btn-success-bg); } -.btn-info { .btn-styles(@btn-info-bg); } -.btn-warning { .btn-styles(@btn-warning-bg); } -.btn-danger { .btn-styles(@btn-danger-bg); } +.btn-default { .btn-filled-styles(@btn-default-bg); } +.btn-primary { .btn-filled-styles(@btn-primary-bg); } +.btn-success { .btn-filled-styles(@btn-success-bg); } +.btn-info { .btn-filled-styles(@btn-info-bg); } +.btn-warning { .btn-filled-styles(@btn-warning-bg); } +.btn-danger { .btn-filled-styles(@btn-danger-bg); } .tooltip { .tooltip-inner {