Skip to content

Instantly share code, notes, and snippets.

@SierraKomodo
Created August 31, 2018 17:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SierraKomodo/2f81c50f150a58951d1fcb1d1a8d1be4 to your computer and use it in GitHub Desktop.
Save SierraKomodo/2f81c50f150a58951d1fcb1d1a8d1be4 to your computer and use it in GitHub Desktop.
The CSS for the row/column borders provided in GalaxyAnvil
/* LAYOUT */
.user-css-presentation .user-css .row-border-group .user-row {
display: flex;
}
.user-css-presentation .user-css .row-border-group .user-row .col-md-6 {
border-left: 1px solid;
border-right: 1px solid;
}
.user-css-presentation .user-css .row-border-group .user-row .col-md-4 {
border-left: 1px solid;
border-right: 1px solid;
border-top: 1px solid;
border-bottom: 1px solid;
}
.user-css-presentation .user-css .row-border-group .user-row .col-md-6:first-child {
border-left: none;
}
.user-css-presentation .user-css .row-border-group .user-row .col-md-6:last-child {
border-right: none;
}
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-6 {
border: none;
}
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-6 {
border: none;
}
.user-css-presentation .user-css .row-border-group .user-row .col-md-4:first-child {
border-left: none;
border-top: none;
border-bottom: none;
}
.user-css-presentation .user-css .row-border-group .user-row .col-md-4:last-child {
border-right: none;
border-top: none;
border-bottom: none;
}
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-4 {
border-top: none;
border-left: none;
border-right: none;
}
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-4 {
border-bottom: none;
border-left: none;
border-right: none;
}
.user-css-presentation .user-css .row-border-group .user-row .col-md-6:after, .user-css-presentation .user-css .row-border-group .user-row .col-md-6:before,
.user-css-presentation .user-css .row-border-group .user-row .col-md-4:after, .user-css-presentation .user-css .row-border-group .user-row .col-md-4:before
{
content: url(https://www.worldanvil.com/uploads/images/d4222ca4f7e45bb789519bd04deb8449.gif);
position: absolute;
}
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-6:first-child:after, /* 2-col Middle left cell, top border */
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-6:last-child:after, /* 2-col Middle right cell, top border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-6:first-child:before, /* 2-col Bottom left cell, top border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-6:last-child:before, /* 2-col Bottom right cell, top border */
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-4:first-child:after, /* 3-col Middle left cell, top border */
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-4:last-child:after, /* 3-col Middle right cell, top border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-4:first-child:before, /* 3-col Bottom left cell, top border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-4:last-child:before /* 3-col Bottom right cell, top border */
{
left: 0;
right: 0;
top: 0;
height: 1px;
}
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-6:first-child:before, /* 2-col Middle left cell, bottom border */
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-6:last-child:before, /* 2-col Middle right cell, bottom border */
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-6:first-child:before, /* 2-col Top left cell, bottom border */
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-6:last-child:before, /* 2-col Top right cell, bottom border */
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-4:first-child:before, /* 3-col Middle left cell, bottom border */
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-4:last-child:before, /* 3-col Middle right cell, bottom border */
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-4:first-child:before, /* 3-col Top left cell, bottom border */
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-4:last-child:before /* 3-col Top right cell, bottom border */
{
left: 0;
right: 0;
bottom: 0;
height: 1px;
}
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-6:first-child:after, /* 2-col Top left cell, right border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-6:first-child:after, /* 2-col Bottom left cell, right border */
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-4:not(:first-child):not(:last-child):before, /* 3-col Top middle cell, right border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-4:not(:first-child):not(:last-child):before, /* 3-col Bottom middle cell, right border */
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-4:first-child:after, /* 3-col Top left cell, right border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-4:first-child:after /* 3-col Bottom left cell, right border */
{
top: 0;
bottom: 0;
right: 0;
width: 1px;
}
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-6:last-child:after, /* 2-col Top right cell, left border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-6:last-child:after, /* 2-col Bottom right cell, left border */
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-4:not(:first-child):not(:last-child):after, /* 3-col Top middle cell, left border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-4:not(:first-child):not(:last-child):after, /* 3-col Bottom middle cell, left border */
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-4:last-child:after, /* 3-col Top right cell, left border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-4:last-child:after /* 3-col Bottom right cell, left border */
{
top: 0;
bottom: 0;
left: 0;
width: 1px;
}
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-6:first-child:after, /* 2-col Single row left cell, right border */
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-4:first-child:after, /* 3-col Single row left cell, right border */
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-4:not(:first-child):not(:last-child):after /* 3-col Single row middle cell, right border */
{
left: auto;
right: 0;
top: 0;
bottom: 0;
width: 1px;
}
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-6:last-child:after, /* 2-col Single row right cell, left border */
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-4:last-child:after, /* 3-col Single row right cell, left border */
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-4:not(:first-child):not(:last-child):before /* 3-col Single row middle cell, left border */
{
left: 0;
right: auto;
top: 0;
bottom: 0;
width: 1px;
}
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-6:first-child:before,
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-6:last-child:before,
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-4:first-child:before,
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-4:last-child:before
{
display: none;
}
/* THEMEING */
.user-css-presentation .user-css .row-border-group .user-row .col-md-6,
.user-css-presentation .user-css .row-border-group .user-row .col-md-4
{
border-color: var(--accentA);
}
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-6:first-child:after,
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-6:first-child:before,
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-6:first-child:before,
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-6:first-child:before,
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-4:first-child:before, /* 3-col Top left cell, bottom border */
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-4:first-child:after, /* 3-col Middle left cell, top border */
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-4:first-child:before, /* 3-col Middle left cell, bottom border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-4:first-child:before /* 3-col Bottom left cell, top border */
{
background-image: linear-gradient(to right, var(--defaultAFullTransparent), var(--accentA));
}
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-6:last-child:after,
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-6:last-child:before,
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-6:last-child:before,
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-6:last-child:before,
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-4:last-child:before, /* 3-col Top right cell, bottom border */
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-4:last-child:after, /* 3-col Middle right cell, top border */
.user-css-presentation .user-css .row-border-group .user-row:not(:first-child):not(:last-child) .col-md-4:last-child:before, /* 3-col Middle right cell, bottom border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-4:last-child:before /* 3-col Bottom right cell, top border */
{
background-image: linear-gradient(to left, var(--defaultAFullTransparent), var(--accentA));
}
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-6:first-child:after,
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-6:last-child:after,
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-4:first-child:after, /* 3-col Top left cell, right border */
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-4:not(:first-child):not(:last-child):after, /* 3-col Top middle cell, left border */
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-4:not(:first-child):not(:last-child):before, /* 3-col Top middle cell, right border */
.user-css-presentation .user-css .row-border-group .user-row:first-child .col-md-4:last-child:after /* 3-col Top right cell, left border */
{
background-image: linear-gradient(to bottom, var(--defaultAFullTransparent), var(--accentA));
}
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-6:first-child:after,
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-6:last-child:after,
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-4:first-child:after, /* 3-col Bottom left cell, right border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-4:not(:first-child):not(:last-child):after, /* 3-col Bottom middle cell, left border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-4:not(:first-child):not(:last-child):before, /* 3-col Bottom middle cell, right border */
.user-css-presentation .user-css .row-border-group .user-row:last-child .col-md-4:last-child:after /* 3-col Bottom right cell, left border */
{
background-image: linear-gradient(to top, var(--defaultAFullTransparent), var(--accentA));
}
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-6:first-child:after,
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-6:last-child:after,
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-4:first-child:after, /* 3-col Single row left cell, right border */
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-4:not(:first-child):not(:last-child):after, /* 3-col Single row middle cell, right border */
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-4:last-child:after, /* 3-col Single row right cell, left border */
.user-css-presentation .user-css .row-border-group .user-row:only-child .col-md-4:not(:first-child):not(:last-child):before /* 3-col Single row middle cell, left border */
{
background-image: linear-gradient(to top, var(--defaultAFullTransparent), var(--accentA), var(--defaultAFullTransparent));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment