Created
April 18, 2023 12:07
-
-
Save nolvuscodes/6cad6a11ab99a947862b10224d312089 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @import "compass/css3"; | |
$container-width: 980px; | |
$container-gutter-width: 30px; | |
// Colors | |
$brand-linkBlue: #4183c4; | |
$brand-lightGrey: #999; | |
$brand-medGrey: #666; | |
$brand-darkGrey: #333; | |
$brand-green: #6cc644; | |
$brand-red: #bd2c00; | |
$brand-orange: #f93; | |
// Default Box Sizing | |
*, | |
*:before, | |
*:after { @include box-sizing(border-box); } | |
// Clearfix | |
@mixin clearfix() { | |
&:before, | |
&:after { | |
display: table; | |
content: " "; | |
} | |
&:after { | |
clear: both; | |
} | |
}; | |
// Default Styles | |
// Main Container Styles | |
// ------------------------- | |
.main-container { | |
@include clearfix(); | |
padding: 0; | |
@media (min-width: 992px), | |
(max-width: 1200px) { | |
// width: 740px; | |
margin-left: ($container-gutter-width / 2); | |
margin-right: ($container-gutter-width / 2); | |
padding: (($container-gutter-width / 2) - 5); | |
} | |
@media (min-width: 1000px), | |
(min-width: 1200px) { | |
width: $container-width; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
} | |
// Group List | |
// ------------------------- | |
// Group List Container | |
.group-list-container { | |
@include clearfix(); | |
position: relative; | |
margin-left: ($container-gutter-width / -2); | |
margin-right: ($container-gutter-width / -2); | |
margin-bottom: ($container-gutter-width - 10); | |
padding-left: $container-gutter-width; | |
&:before { | |
position: absolute; | |
top: 0; | |
left: 6px; | |
z-index: -1; | |
content: " "; | |
display: block; | |
width: 2px; | |
height: 98.5%; | |
background-color: rgba($brand-lightGrey, .15); | |
} | |
@media (max-width: 480px) { | |
padding-left: ($container-gutter-width / 2); | |
&:before { | |
left: 2px; | |
} | |
} | |
} | |
// Group List Title | |
.group-list-title { | |
@include clearfix(); | |
display: block; | |
margin-top: ($container-gutter-width / 2); | |
margin-left: -$container-gutter-width; | |
margin-bottom: 0; | |
font-size: 13px; | |
color: $brand-medGrey; | |
line-height: 1; | |
background-color: #fff; | |
.octicon { | |
color: lighten($brand-medGrey, 40%); | |
} | |
@media (max-width: 480px) { | |
margin-left: -($container-gutter-width - 11) | |
} | |
} | |
// The List | |
.group-list { | |
position: relative; | |
width: 100%; | |
padding: 0; | |
} | |
// List Items | |
.group-list-item { | |
position: relative; | |
display: table; | |
table-layout: fixed; | |
width: 100%; | |
margin-top: -1px; | |
border: 1px solid lighten($brand-lightGrey, 32%); | |
&:hover { | |
z-index: 2; | |
background-color: rgba($brand-linkBlue, .05); | |
} | |
} | |
// List Sections | |
.group-list-avatar, | |
.group-list-body, | |
.group-list-links { | |
display: table-cell; | |
vertical-align: top; | |
padding: 10px 10px 5px; | |
@media (max-width: 480px) { | |
display: block; | |
float: left; | |
padding: 5px; | |
} | |
} | |
// List Avatar | |
.group-list-avatar { | |
@media (max-width: 480px) { width: 18%; } | |
@media (min-width: 768px) { width: 6%; } | |
@media (min-width: 992px) { width: 5%; } | |
@media (min-width: 1200px) { width: 5%; } | |
img { | |
width: 36px; | |
height: 36px; | |
} | |
} | |
// List Body | |
.group-list-body { | |
width: 60%; | |
.group-list-body-title, | |
.group-list-body-meta, | |
.group-list-body-desc { | |
margin-top: 0; | |
} | |
@media (max-width: 480px) { | |
width: 82%; | |
} | |
// Group List: Body Title | |
.group-list-body-title { | |
margin-bottom: 0; | |
padding: 0; | |
font-size: 16px; | |
font-weight: 500; | |
color: $brand-medGrey; | |
a:hover { | |
text-decoration: underline; | |
} | |
@media (max-width: 480px) { | |
font-size: 13px; | |
line-height: 1; | |
} | |
// Text Helpers | |
.message-link { | |
color: lighten($brand-darkGrey, 15%); | |
} | |
.text-expander { | |
position: relative; | |
top: -1px; | |
display: inline-block; | |
margin-left: 5px; | |
line-height: 0; | |
} | |
.text-expander a { | |
display: inline-block; | |
height: 12px; | |
padding: 0 5px; | |
font-size: 12px; | |
font-weight: bold; | |
line-height: 6px; | |
color: #555; | |
text-decoration: none; | |
vertical-align: middle; | |
background: #ddd; | |
border-radius: 1px; | |
} | |
.text-expander a:hover { | |
background-color: lighten($brand-lightGrey, 10%); | |
} | |
} | |
// Group List: Body Meta | |
.group-list-body-meta { | |
margin-bottom: 5px; | |
font-size: 12px; | |
a:hover { | |
text-decoration: underline; | |
} | |
// Text Helpers | |
.author-link { | |
color: lighten($brand-medGrey, 5%); | |
} | |
} | |
// Group List: Body Description | |
.group-list-body-desc { | |
margin: 0; | |
padding-left: (($container-gutter-width / 2) - 5); | |
font-size: 12px; | |
border-left: 1px solid rgba($brand-lightGrey, .55); | |
} | |
} | |
[data-expand] { | |
display: none; | |
&.active { | |
display: block; | |
} | |
} | |
// List Links | |
.group-list-links { | |
width: 30%; | |
text-align: right; | |
vertical-align: middle; | |
} | |
// Group List Button Group | |
.group-list-btn-group { | |
display: inline-block; | |
margin-left: 5px; | |
margin-right: 5px; | |
a, button { | |
position: relative; | |
display: inline-block; | |
height: 29px; | |
margin-left: -3px; | |
margin-right: -2px; | |
padding: 5px 8px; | |
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; | |
line-height: 1.4; | |
text-align: center; | |
vertical-align: middle; | |
border: 1px solid lighten($brand-lightGrey, 25%); | |
background-color: #fff; | |
&:hover { | |
z-index: 2; | |
color: #fff; | |
border-color: darken($brand-linkBlue, 5%); | |
background-color: $brand-linkBlue; | |
} | |
&:first-child { | |
border-top-left-radius: 3px; | |
border-bottom-left-radius: 3px; | |
} | |
&:last-child { | |
border-top-right-radius: 3px; | |
border-bottom-right-radius: 3px; | |
} | |
span { | |
font-size: 12px; | |
font-weight: bold; | |
} | |
} | |
&.group-list-btn-group-large a, | |
&.group-list-btn-group-large button { | |
height: 40px; | |
padding: 10px 16px; | |
span { | |
font-size: 18px; | |
} | |
} | |
@media (max-width: 480px) { | |
display: none; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment