mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-13 22:41:32 -05:00
56e9f09277
Related to #4844 The newly added user image in the content list uses a CSS property to crop `img` tags, but it's not supported in IE or Firefox. This issue corrects that by chancing them to be background images which can be cropped cross-browser. It also adjusts the nav bar user image (previously an `img` tag) which would squash a non-square image. Also removes the border around the settings/users/ user images, to be consistent with the rest of the UI.
128 lines
No EOL
3.5 KiB
SCSS
128 lines
No EOL
3.5 KiB
SCSS
// ------------------------------------------------------------
|
|
// Mixins
|
|
//
|
|
// Mixins defined here are very general and used in mul
|
|
//
|
|
// * baseline()
|
|
// * clearfix()
|
|
// * tab-focus()
|
|
// * triangle()
|
|
// * set-triangle-color()
|
|
// * circular-image()
|
|
// ------------------------------------------------------------
|
|
|
|
|
|
//
|
|
// Baseline margin
|
|
// --------------------------------------------------
|
|
|
|
@mixin baseline {
|
|
margin: 1.6em 0;
|
|
}
|
|
|
|
|
|
//
|
|
// Fix for clearing float-based overflows
|
|
// --------------------------------------------------
|
|
|
|
@mixin clearfix {
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// WebKit-style focus
|
|
// From Bootstrap
|
|
// --------------------------------------------------
|
|
@mixin tab-focus() {
|
|
// Default
|
|
outline: thin dotted;
|
|
// WebKit
|
|
outline: 0px auto -webkit-focus-ring-color;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
|
|
//
|
|
// Simple SCSS mixin to create CSS triangles
|
|
// Example: @include css-triangle (10px, #fff, "up");
|
|
// --------------------------------------------------
|
|
|
|
@mixin triangle($size: 20px, $color: #000, $direction: "down", $type: "normal") {
|
|
$verticalSize: $size;
|
|
width: 0;
|
|
height: 0;
|
|
|
|
@if $type == "shallow" {
|
|
$verticalSize: floor($size * $popover_triangle_shallow_multiplier);
|
|
}
|
|
|
|
@if $direction == "down" {
|
|
border-left: $size solid #{set-triangle-color($direction, "left", $color)};
|
|
border-right: $size solid #{set-triangle-color($direction, "right", $color)};
|
|
border-top: $verticalSize solid #{set-triangle-color($direction, "top", $color)};
|
|
}
|
|
|
|
@if $direction == "up" {
|
|
border-left: $size solid #{set-triangle-color($direction, "left", $color)};
|
|
border-right: $size solid #{set-triangle-color($direction, "right", $color)};
|
|
border-bottom: $verticalSize solid #{set-triangle-color($direction, "bottom", $color)};
|
|
}
|
|
|
|
@if $direction == "left" {
|
|
border-right: $verticalSize solid #{set-triangle-color($direction, "right", $color)};
|
|
border-top: $size solid #{set-triangle-color($direction, "top", $color)};
|
|
border-bottom: $size solid #{set-triangle-color($direction, "bottom", $color)};
|
|
}
|
|
|
|
@if $direction == "right" {
|
|
border-left: $verticalSize solid #{set-triangle-color($direction, "left", $color)};
|
|
border-bottom: $size solid #{set-triangle-color($direction, "bottom", $color)};
|
|
border-top: $size solid #{set-triangle-color($direction, "top", $color)};
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Utility function to return the relevant colour depending on what type of arrow it is
|
|
// --------------------------------------------------
|
|
|
|
@function set-triangle-color($direction, $side, $color) {
|
|
@if $direction == "left" and $side == "right"
|
|
or $direction == "right" and $side == "left"
|
|
or $direction == "down" and $side == "top"
|
|
or $direction == "up" and $side == "bottom" {
|
|
@return $color
|
|
} @else {
|
|
@return "transparent";
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Reusable styles for creating a circular image which is cropped properly, with the image inside it
|
|
// Example: @circular-image(35px);
|
|
// --------------------------------------------------
|
|
|
|
@mixin circular-image($widthandheight: 20px) {
|
|
@content;
|
|
width: $widthandheight;
|
|
height: $widthandheight;
|
|
border-radius: $widthandheight;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
position: relative;
|
|
|
|
img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
}
|
|
} |