ben.carrasco/next-static-site
1
0
Fork 0
mirror of https://github.com/jambonz/next-static-site.git synced 2025-12-19 04:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor SASS files

Browse Source
This commit is contained in:
kitajchuk
2021-03-31 08:35:22 -07:00
parent c838deb672
commit edf126468c
6 changed files with 265 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
styles/_backgrounds.scss Normal file
View File

@@ -0,0 +1,22 @@
.bg-jambonz {
background-color: $jambonz;
color: $white;
}
.bg-black {
background-color: $black;
color: $white;
}
.bg-charcoal {
background-color: $charcoal;
color: $white;
}
.bg-grey {
background-color: $grey;
}
.bg-pink {
background-color: $pink;
}

77
styles/_buttons.scss Normal file
View File

@@ -0,0 +1,77 @@
.btn {
font-size: 16px;
line-height: 1;
padding: 23px 65px 21px;
background-color: $jambonz;
color: $white;
text-decoration: none;
font-family: 'objectivitybold';
border-radius: 30px;
display: inline-block;
&--fill {
&--dark {
background-color: $charcoal;
}
&--purple {
background-color: $purple;
}
&--teal {
background-color: $teal;
}
&--blue {
background-color: $blue;
}
&--light {
background-color: $white;
color: $jambonz;
}
}
&--pill {
background-color: transparent;
border: 2px solid $charcoal;
color: $charcoal;
padding: 19px 32px 18px;
font-family: 'objectivityregular';
svg, span {
display: inline-block;
vertical-align: middle;
}
svg {
margin-right: 16px;
}
&--jambonz {
border-color: $jambonz;
color: $jambonz;
svg {
stroke: $jambonz;
}
}
}
&--login {
background-color: transparent;
border: 2px solid $jambonz;
color: $jambonz;
padding: 10px 26px 8px;
font-family: 'objectivityregular';
font-size: 14px;
}
}
.btns {
margin: 0 -32px;
.btn {
margin: 0 32px;
}
}

47
styles/_icons.scss Normal file
View File

@@ -0,0 +1,47 @@
.icon {
display: inline-block;
background-color: $jambonz;
width: 48px;
height: 48px;
border-radius: 24px;
position: relative;
svg {
stroke: $white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
&--pill {
background-color: transparent;
border: 2px solid $jambonz;
svg {
stroke: $jambonz;
}
}
&--fill {
&--purple {
background-color: $purple;
}
&--blue {
background-color: $blue;
}
&--teal {
background-color: $teal;
}
}
}
.icons {
margin: 0 -16px;
.icon {
margin: 0 16px;
}
}

263
styles/_jambonz-ui.scss
View File

@@ -1,263 +0,0 @@
/******************************************************************************
* Typography
*******************************************************************************/
html,
body {
font-family: 'objectivityregular';
letter-spacing: -0.02px;
color: $charcoal;
}
a {
color: $jambonz;
svg, span {
display: inline-block;
vertical-align: middle;
}
svg:last-child {
margin-left: 8px;
}
svg:first-child {
margin-right: 8px;
}
}
strong {
font-family: 'objectivitybold';
}
em {
font-family: 'objectivityitalic';
}
.h1 {
font-size: 48px;
line-height: 1.33;
letter-spacing: -0.06px;
font-family: 'objectivitybold';
em {
font-family: 'objectivitybold_italic';
}
}
.h2 {
font-size: 40px;
line-height: 1.35;
letter-spacing: -0.05px;
font-family: 'objectivitybold';
em {
font-family: 'objectivitybold_italic';
}
}
.h3 {
font-size: 36px;
line-height: 1.33;
letter-spacing: -0.05px;
font-family: 'objectivitybold';
em {
font-family: 'objectivitybold_italic';
}
}
.h4 {
font-size: 32px;
line-height: 1.56;
letter-spacing: -0.04px;
}
.h5 {
font-size: 24px;
line-height: 1.67;
letter-spacing: -0.03px;
}
.h6 {
font-size: 20px;
line-height: 1.8;
letter-spacing: -0.03px;
}
.p {
font-size: 18px;
line-height: 1.9;
}
.m {
font-size: 16px;
line-height: 1.9;
}
.ms {
font-size: 14px;
line-height: 2;
}
.mxs {
font-size: 12px;
line-height: 2;
}
/******************************************************************************
* Buttons
*******************************************************************************/
.btn {
font-size: 16px;
line-height: 1;
padding: 23px 65px 21px;
background-color: $jambonz;
color: $white;
text-decoration: none;
font-family: 'objectivitybold';
border-radius: 30px;
display: inline-block;
&--fill {
&--dark {
background-color: $charcoal;
}
&--purple {
background-color: $purple;
}
&--teal {
background-color: $teal;
}
&--blue {
background-color: $blue;
}
&--light {
background-color: $white;
color: $jambonz;
}
}
&--pill {
background-color: transparent;
border: 2px solid $charcoal;
color: $charcoal;
padding: 19px 32px 18px;
font-family: 'objectivityregular';
svg, span {
display: inline-block;
vertical-align: middle;
}
svg {
margin-right: 16px;
}
&--jambonz {
border-color: $jambonz;
color: $jambonz;
svg {
stroke: $jambonz;
}
}
}
&--login {
background-color: transparent;
border: 2px solid $jambonz;
color: $jambonz;
padding: 10px 26px 8px;
font-family: 'objectivityregular';
font-size: 14px;
}
}
.btns {
margin: 0 -32px;
.btn {
margin: 0 32px;
}
}
/******************************************************************************
* Icons
*******************************************************************************/
.icon {
display: inline-block;
background-color: $jambonz;
width: 48px;
height: 48px;
border-radius: 24px;
position: relative;
svg {
stroke: $white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
&--pill {
background-color: transparent;
border: 2px solid $jambonz;
svg {
stroke: $jambonz;
}
}
&--fill {
&--purple {
background-color: $purple;
}
&--blue {
background-color: $blue;
}
&--teal {
background-color: $teal;
}
}
}
.icons {
margin: 0 -16px;
.icon {
margin: 0 16px;
}
}
/******************************************************************************
* Backgrounds
*******************************************************************************/
.bg-jambonz {
background-color: $jambonz;
color: $white;
}
.bg-black {
background-color: $black;
color: $white;
}
.bg-charcoal {
background-color: $charcoal;
color: $white;
}
.bg-grey {
background-color: $grey;
}
.bg-pink {
background-color: $pink;
}

102
styles/_typography.scss Normal file
View File

@@ -0,0 +1,102 @@
html,
body {
font-family: 'objectivityregular';
letter-spacing: -0.02px;
color: $charcoal;
}
a {
color: $jambonz;
svg, span {
display: inline-block;
vertical-align: middle;
}
svg:last-child {
margin-left: 8px;
}
svg:first-child {
margin-right: 8px;
}
}
strong {
font-family: 'objectivitybold';
}
em {
font-family: 'objectivityitalic';
}
.h1 {
font-size: 48px;
line-height: 1.33;
letter-spacing: -0.06px;
font-family: 'objectivitybold';
em {
font-family: 'objectivitybold_italic';
}
}
.h2 {
font-size: 40px;
line-height: 1.35;
letter-spacing: -0.05px;
font-family: 'objectivitybold';
em {
font-family: 'objectivitybold_italic';
}
}
.h3 {
font-size: 36px;
line-height: 1.33;
letter-spacing: -0.05px;
font-family: 'objectivitybold';
em {
font-family: 'objectivitybold_italic';
}
}
.h4 {
font-size: 32px;
line-height: 1.56;
letter-spacing: -0.04px;
}
.h5 {
font-size: 24px;
line-height: 1.67;
letter-spacing: -0.03px;
}
.h6 {
font-size: 20px;
line-height: 1.8;
letter-spacing: -0.03px;
}
.p {
font-size: 18px;
line-height: 1.9;
}
.m {
font-size: 16px;
line-height: 1.9;
}
.ms {
font-size: 14px;
line-height: 2;
}
.mxs {
font-size: 12px;
line-height: 2;
}

19
styles/global.scss
View File

@@ -9,9 +9,24 @@
@import 'fonts.scss';
/******************************************************************************
* Jambonz UI
* Typography
*******************************************************************************/
@import 'jambonz-ui.scss';
@import 'typography.scss';
/******************************************************************************
* Buttons
*******************************************************************************/
@import 'buttons.scss';
/******************************************************************************
* Icons
*******************************************************************************/
@import 'icons.scss';
/******************************************************************************
* Backgrounds
*******************************************************************************/
@import 'backgrounds.scss';
/******************************************************************************
* Kit of Parts