Created
August 31, 2018 17:41
-
-
Save SierraKomodo/2f81c50f150a58951d1fcb1d1a8d1be4 to your computer and use it in GitHub Desktop.
The CSS for the row/column borders provided in GalaxyAnvil
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
/* 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