Skip to content

Commit

Permalink
Merge pull request #482 from Royal-Navy/release/1.9.0
Browse files Browse the repository at this point in the history 
Release/1.9.0
  • Loading branch information
@thyhjwb6
thyhjwb6 committed Dec 11, 2019
2 parents 5076d09 + 359cd4c commit 69dc993
Show file tree
Hide file tree
Showing 188 changed files with 3,526 additions and 2,529 deletions.
3 changes: 3 additions & 0 deletions .circleci/config.yml
View file
Expand Up @@ -224,6 +224,9 @@ jobs:
- run:
name: Build React Components
command: yarn --cwd packages/react-component-library build
- run:
name: Build site
command: yarn --cwd packages/docs-site build
- run:
name: Jest
environment:
Expand Down
2 changes: 1 addition & 1 deletion lerna.json
View file
Expand Up @@ -2,6 +2,6 @@
"packages": [
"packages/*"
],
"version": "1.8.0",
"version": "1.9.0",
"npmClient": "yarn"
}
3 changes: 2 additions & 1 deletion package.json
View file
Expand Up @@ -23,7 +23,8 @@
},
"resolutions": {
"**/**/handlebars": "^4.5.3",
"**/**/mem": "^4.0.0"
"**/**/mem": "^4.0.0",
"**/**/terser-webpack-plugin": "^1.4.2"
},
"prettier": {
"bracketSpacing": true,
Expand Down
1 change: 1 addition & 0 deletions packages/css-framework/index.scss
View file
Expand Up @@ -90,6 +90,7 @@ $__states: null;

// Objects
@import "src/objects/divider";
@import "src/objects/floating-box";
@import "src/objects/hyperlink";
@import "src/objects/media";
@import "src/objects/wrapper";
Expand Down
4 changes: 2 additions & 2 deletions packages/css-framework/package.json
View file
@@ -1,7 +1,7 @@
{
"name": "@royalnavy/css-framework",
"description": "Foundational CSS Framework for Royal Navy components and applications.",
"version": "1.8.0",
"version": "1.9.0",
"publishConfig": {
"access": "public"
},
Expand Down Expand Up @@ -32,7 +32,7 @@
"*.@(scss)": "stylelint"
},
"devDependencies": {
"lint-staged": "^9.4.3",
"lint-staged": "^9.5.0",
"sass": "^1.23.7",
"stylelint": "^11.1.1",
"stylelint-junit-formatter": "^0.2.2"
Expand Down
234 changes: 8 additions & 226 deletions packages/css-framework/src/components/_popover.scss
View file
@@ -1,228 +1,10 @@
$lightBackground: color(neutral, white);
$lightBorder: color(neutral, 100);
$darkBackground: color(neutral, 700);
$darkBorder: color(neutral, 700);
$borderThick: 2px;
$inner: 8px;
$outer: $inner + 1;
$offset: $outer + $borderThick;

.rn-popover__content {
@include z-index(modal);
position: absolute;
top: 0;
left: 0;
background: color(neutral, white);
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}

.rn-popover__footer {
padding: spacing(3);
margin: 0;
border-top: 1px solid color(neutral, 100);
background-color: color(neutral, 000);
text-align: right;
}

a.rn-popover__footer-link {
text-decoration: none;
color: color(neutral, 300);
font-size: font-size(xs);
cursor: pointer;
}


@include breakpoint("s") {
.rn-popover {
position: absolute;
}

.rn-popover__content {
position: relative;
top: auto;
left: auto;
height: auto;
width: auto;
padding: 0;
border-radius: 5px;
}

.rn-popover--light .rn-popover__content {
background: $lightBackground;
border: $lightBorder solid $borderThick;
}

.rn-popover--dark .rn-popover__content {
background: $darkBackground;
border: $darkBorder solid $borderThick;
color: color(neutral, white);
}

.rn-popover__content:before {
border-style: solid;
content: "";
display: block;
position: absolute;
width: 0;
z-index: 0;
}

.rn-popover__content:after {
border-style: solid;
content: "";
display: block;
position: absolute;
width: 0;
z-index: 1;
}

.rn-popover--top_left .rn-popover__content:before,
.rn-popover--top_right .rn-popover__content:before {
border-width: 0 $outer $outer;
margin-left: -$outer;
top: -$offset;
}
.rn-popover--top_left.rn-popover--light .rn-popover__content:before,
.rn-popover--top_right.rn-popover--light .rn-popover__content:before {
border-color: $lightBorder transparent;
}
.rn-popover--top_left.rn-popover--dark .rn-popover__content:before,
.rn-popover--top_right.rn-popover--dark .rn-popover__content:before {
border-color: $darkBorder transparent;
}
.rn-popover--top_left .rn-popover__content:after,
.rn-popover--top_right .rn-popover__content:after {
border-width: 0 $inner $inner;
margin-left: -$inner;
top: -$inner;
}
.rn-popover--top_left.rn-popover--light .rn-popover__content:after,
.rn-popover--top_right.rn-popover--light .rn-popover__content:after {
border-color: $lightBackground transparent;
}
.rn-popover--top_left.rn-popover--dark .rn-popover__content:after,
.rn-popover--top_right.rn-popover--dark .rn-popover__content:after {
border-color: $darkBackground transparent;
}


.rn-popover--right_top .rn-popover__content:before,
.rn-popover--right_bottom .rn-popover__content:before {
border-width: $outer 0 $outer $outer;
right: -$offset;
margin-top: -$outer;
}
.rn-popover--right_top.rn-popover--light .rn-popover__content:before,
.rn-popover--right_bottom.rn-popover--light .rn-popover__content:before {
border-color: transparent $lightBorder;
}
.rn-popover--right_top.rn-popover--dark .rn-popover__content:before,
.rn-popover--right_bottom.rn-popover--dark .rn-popover__content:before {
border-color: transparent $darkBorder;
}
.rn-popover--right_top .rn-popover__content:after,
.rn-popover--right_bottom .rn-popover__content:after {
border-width: $inner 0 $inner $inner;
right: -$inner;
margin-top: -$inner;

}
.rn-popover--right_top.rn-popover--light .rn-popover__content:after,
.rn-popover--right_bottom.rn-popover--light .rn-popover__content:after {
border-color: transparent $lightBackground;
}
.rn-popover--right_top.rn-popover--dark .rn-popover__content:after,
.rn-popover--right_bottom.rn-popover--dark .rn-popover__content:after {
border-color: transparent $darkBackground;
}


.rn-popover--bottom_right .rn-popover__content:before,
.rn-popover--bottom_left .rn-popover__content:before {
border-width: $inner $inner 0;
bottom: -$inner - $borderThick;
margin-left: -$outer;
}
.rn-popover--bottom_right.rn-popover--light .rn-popover__content:before,
.rn-popover--bottom_left.rn-popover--light .rn-popover__content:before {
border-color: $lightBorder transparent;
}
.rn-popover--bottom_right.rn-popover--dark .rn-popover__content:before,
.rn-popover--bottom_left.rn-popover--dark .rn-popover__content:before {
border-color: $darkBorder transparent;
}
.rn-popover--bottom_right .rn-popover__content:after,
.rn-popover--bottom_left .rn-popover__content:after {
border-width: $inner $inner 0;
bottom: -$inner;
margin-left: -$outer;
}
.rn-popover--bottom_right.rn-popover--light .rn-popover__content:after,
.rn-popover--bottom_left.rn-popover--light .rn-popover__content:after {
border-color: $lightBackground transparent;
}
.rn-popover--bottom_right.rn-popover--dark .rn-popover__content:after,
.rn-popover--bottom_left.rn-popover--dark .rn-popover__content:after {
border-color: $darkBackground transparent;
}


.rn-popover--left_bottom .rn-popover__content:before,
.rn-popover--left_top .rn-popover__content:before {
border-width: $outer $outer $outer 0;
left: -$offset;
margin-top: -$outer;
}
.rn-popover--left_bottom.rn-popover--light .rn-popover__content:before,
.rn-popover--left_top.rn-popover--light .rn-popover__content:before {
border-color: transparent $lightBorder;
}
.rn-popover--left_bottom.rn-popover--dark .rn-popover__content:before,
.rn-popover--left_top.rn-popover--dark .rn-popover__content:before {
border-color: transparent $darkBorder;
}
.rn-popover--left_bottom .rn-popover__content:after,
.rn-popover--left_top .rn-popover__content:after {
border-width: $inner $inner $inner 0;
left: -$inner;
margin-top: -$inner;
}
.rn-popover--left_bottom.rn-popover--light .rn-popover__content:after,
.rn-popover--left_top.rn-popover--light .rn-popover__content:after {
border-color: transparent $lightBackground;
}
.rn-popover--left_bottom.rn-popover--dark .rn-popover__content:after,
.rn-popover--left_top.rn-popover--dark .rn-popover__content:after {
border-color: transparent $darkBackground;
}


.rn-popover--left_bottom .rn-popover__content:before,
.rn-popover--left_bottom .rn-popover__content:after,
.rn-popover--right_bottom .rn-popover__content:before,
.rn-popover--right_bottom .rn-popover__content:after {
top: 80%;
}

.rn-popover--left_top .rn-popover__content:before,
.rn-popover--left_top .rn-popover__content:after,
.rn-popover--right_top .rn-popover__content:before,
.rn-popover--right_top .rn-popover__content:after {
top: 20%;
}
.rn-popover--top_left .rn-popover__content:before,
.rn-popover--top_left .rn-popover__content:after,
.rn-popover--bottom_left .rn-popover__content:before,
.rn-popover--bottom_left .rn-popover__content:after {
left: 10%;
}
.rn-popover--top_right .rn-popover__content:before,
.rn-popover--top_right .rn-popover__content:after,
.rn-popover--bottom_right .rn-popover__content:before,
.rn-popover--bottom_right .rn-popover__content:after {
left: 90%;
.rn-popover {
pointer-events: none;
opacity: 0;
transition: linear opacity 0.3s;

&.is-visible {
pointer-events: all;
opacity: 1;
}
}

0 comments on commit 69dc993

Please sign in to comment.