diff options
Diffstat (limited to 'assets/sass/@primer/css/avatars')
-rw-r--r-- | assets/sass/@primer/css/avatars/README.md | 25 | ||||
-rw-r--r-- | assets/sass/@primer/css/avatars/avatar-parent-child.scss | 18 | ||||
-rw-r--r-- | assets/sass/@primer/css/avatars/avatar-stack.scss | 145 | ||||
-rw-r--r-- | assets/sass/@primer/css/avatars/avatar.scss | 22 | ||||
-rw-r--r-- | assets/sass/@primer/css/avatars/circle-badge.scss | 55 | ||||
-rw-r--r-- | assets/sass/@primer/css/avatars/index.scss | 7 |
6 files changed, 0 insertions, 272 deletions
diff --git a/assets/sass/@primer/css/avatars/README.md b/assets/sass/@primer/css/avatars/README.md deleted file mode 100644 index 8fa16ff..0000000 --- a/assets/sass/@primer/css/avatars/README.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -bundle: "avatars" -generated: true ---- - -# Primer CSS: `avatars` bundle - -## Usage - -Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: - -```scss -@import "@primer/css/avatars/index.scss"; -``` - -## Build - -The `@primer/css` npm package includes a standalone CSS build of this module in `dist/avatars.css`. - -## License - -[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) - - -[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/assets/sass/@primer/css/avatars/avatar-parent-child.scss b/assets/sass/@primer/css/avatars/avatar-parent-child.scss deleted file mode 100644 index c2260a4..0000000 --- a/assets/sass/@primer/css/avatars/avatar-parent-child.scss +++ /dev/null @@ -1,18 +0,0 @@ -// .avatar-parent-child is when you see a small avatar at the bottom right -// corner of a larger avatar. -// -// No Styleguide version -.avatar-parent-child { - position: relative; -} - -.avatar-child { - position: absolute; - right: -15%; - bottom: -9%; - background-color: $bg-white; // For transparent backgrounds - // stylelint-disable-next-line primer/borders - border-radius: 2px; - // stylelint-disable-next-line primer/box-shadow - box-shadow: -2px -2px 0 rgba($white, 0.8); -} diff --git a/assets/sass/@primer/css/avatars/avatar-stack.scss b/assets/sass/@primer/css/avatars/avatar-stack.scss deleted file mode 100644 index 9d0247a..0000000 --- a/assets/sass/@primer/css/avatars/avatar-stack.scss +++ /dev/null @@ -1,145 +0,0 @@ -// Stacked avatars can be used to show who is participating in thread when -// there is limited space available. - -.AvatarStack { - position: relative; - min-width: 26px; - height: 20px; - - .AvatarStack-body { - position: absolute; - } - - &.AvatarStack--two { - min-width: 36px; - } - - &.AvatarStack--three-plus { - min-width: 46px; - } -} - -.AvatarStack-body { - display: flex; - background: $bg-white; - - .avatar { - position: relative; - z-index: 2; - display: flex; - width: 20px; - height: 20px; - box-sizing: content-box; - // stylelint-disable-next-line primer/spacing - margin-right: -11px; - background-color: $bg-white; - border-right: $border-width $border-style $border-white; - // stylelint-disable-next-line primer/borders - border-radius: 2px; - transition: margin 0.1s ease-in-out; - - &:first-child { - z-index: 3; - } - - &:last-child { - z-index: 1; - border-right: 0; - } - - // stylelint-disable selector-max-type - img { - // stylelint-disable-next-line primer/borders - border-radius: 2px; - } - // stylelint-enable selector-max-type - - // Account for 4+ avatars - &:nth-child(n+4) { - display: none; - opacity: 0; - } - } - - &:hover { - .avatar { - // stylelint-disable-next-line primer/spacing - margin-right: 3px; - } - - .avatar:nth-child(n+4) { - display: flex; - opacity: 1; - } - - .avatar-more { - display: none !important; - } - } -} - -.avatar.avatar-more { - z-index: 1; - margin-right: 0; - background: $bg-gray; - - &::before, - &::after { - position: absolute; - display: block; - height: 20px; - content: ""; - // stylelint-disable-next-line primer/borders - border-radius: 2px; - outline: $border-width $border-style $white; - } - - &::before { - width: 17px; - // stylelint-disable-next-line primer/colors - background: $gray-200; - } - - &::after { - width: 14px; - // stylelint-disable-next-line primer/colors - background: $gray-300; - } -} - -// Right aligned variation - -.AvatarStack--right { - .AvatarStack-body { - right: 0; - flex-direction: row-reverse; - - &:hover .avatar { - margin-right: 0; - // stylelint-disable-next-line primer/spacing - margin-left: 3px; - } - } - - .avatar.avatar-more { - // stylelint-disable-next-line primer/colors - background: $gray-300; - - &::before { - width: 5px; - } - - &::after { - width: 2px; - background: $bg-gray; - } - } - - .avatar { - margin-right: 0; - // stylelint-disable-next-line primer/spacing - margin-left: -11px; - border-right: 0; - border-left: $border-width $border-style $border-white; - } -} diff --git a/assets/sass/@primer/css/avatars/avatar.scss b/assets/sass/@primer/css/avatars/avatar.scss deleted file mode 100644 index a58c5a4..0000000 --- a/assets/sass/@primer/css/avatars/avatar.scss +++ /dev/null @@ -1,22 +0,0 @@ -.avatar { - display: inline-block; - overflow: hidden; // Ensure page layout in Firefox should images fail to load - line-height: $lh-condensed-ultra; - vertical-align: middle; - border-radius: $border-radius; -} - -// stylelint-disable-next-line primer/borders -.avatar-small { border-radius: 2px; } - -.avatar-link { - float: left; - line-height: $lh-condensed-ultra; -} - -// User for example on /stars and /user for grids of avatars -.avatar-group-item { - display: inline-block; - // stylelint-disable-next-line primer/spacing - margin-bottom: 3px; -} diff --git a/assets/sass/@primer/css/avatars/circle-badge.scss b/assets/sass/@primer/css/avatars/circle-badge.scss deleted file mode 100644 index 8553b3f..0000000 --- a/assets/sass/@primer/css/avatars/circle-badge.scss +++ /dev/null @@ -1,55 +0,0 @@ -// Circle badge icon with drop shadow for icons and logos - -.CircleBadge { - display: flex; - align-items: center; - justify-content: center; - background-color: $bg-white; - border-radius: 50%; - box-shadow: $box-shadow-medium; -} - -.CircleBadge-icon { - max-width: 60% !important; - height: auto !important; - max-height: 55% !important; -} - -// Small badge -.CircleBadge--small { - width: 56px; - height: 56px; -} - -// Medium badge -.CircleBadge--medium { - width: 96px; - height: 96px; -} - -// Large badge -.CircleBadge--large { - width: 128px; - height: 128px; -} - -// Dashed line that connects badges.. -// Wrap around 2 or more badges to create a horizonal line: - -.DashedConnection { - position: relative; - - &::before { - position: absolute; - top: 50%; - left: 0; - width: 100%; - content: ""; - // stylelint-disable-next-line primer/borders - border-bottom: 2px dashed $border-gray; - } - - .CircleBadge { - position: relative; - } -} diff --git a/assets/sass/@primer/css/avatars/index.scss b/assets/sass/@primer/css/avatars/index.scss deleted file mode 100644 index f5dfa93..0000000 --- a/assets/sass/@primer/css/avatars/index.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "../support/index.scss"; - -// Avatars -@import "./avatar.scss"; -@import "./avatar-parent-child.scss"; -@import "./avatar-stack.scss"; -@import "./circle-badge.scss"; |