Skip to content

Commit

Permalink
Merge pull request #111 from dmytro-krekota/master
Browse files Browse the repository at this point in the history 
Move styles to the new file popper-content.css
  • Loading branch information
@MrFrankel
MrFrankel authored Feb 14, 2019
2 parents 5a8af28 + 33c75bf commit 4db5307
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 152 deletions.
149 changes: 149 additions & 0 deletions src/popper-content.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
.ngxp__container {
display: none;
position: absolute;
border-radius: 3px;
border: 1px solid grey;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
padding: 10px;
}

.ngxp__container.ngxp__animation {
-webkit-animation: ngxp-fadeIn 150ms ease-out;
-moz-animation: ngxp-fadeIn 150ms ease-out;
-o-animation: ngxp-fadeIn 150ms ease-out;
animation: ngxp-fadeIn 150ms ease-out;
}

.ngxp__container > .ngxp__arrow {
border-color: grey;
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
}

.ngxp__container[x-placement^="top"],
.ngxp__container[x-placement^="bottom"],
.ngxp__container[x-placement^="right"],
.ngxp__container[x-placement^="left"] {
display: block;
}

.ngxp__container[x-placement^="top"] {
margin-bottom: 5px;
}

.ngxp__container[x-placement^="top"] > .ngxp__arrow {
border-width: 5px 5px 0 5px;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}

.ngxp__container[x-placement^="top"] > .ngxp__arrow.__force-arrow {
border-right-color: transparent !important;
border-bottom-color: transparent !important;
border-left-color: transparent !important;
}

.ngxp__container[x-placement^="bottom"] {
margin-top: 5px;
}

.ngxp__container[x-placement^="bottom"] > .ngxp__arrow {
border-width: 0 5px 5px 5px;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}

.ngxp__container[x-placement^="bottom"] > .ngxp__arrow.__force-arrow {
border-top-color: transparent !important;
border-right-color: transparent !important;
border-left-color: transparent !important;
}

.ngxp__container[x-placement^="right"] {
margin-left: 5px;
}

.ngxp__container[x-placement^="right"] > .ngxp__arrow {
border-width: 5px 5px 5px 0;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}

.ngxp__container[x-placement^="right"] > .ngxp__arrow.__force-arrow {
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-left-color: transparent !important;
}

.ngxp__container[x-placement^="left"] {
margin-right: 5px;
}

.ngxp__container[x-placement^="left"] > .ngxp__arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}

.ngxp__container[x-placement^="left"] > .ngxp__arrow.__force-arrow {
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-right-color: transparent !important;
}

@-webkit-keyframes ngxp-fadeIn {
0% {
display: none;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}

@keyframes ngxp-fadeIn {
0% {
display: none;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}
153 changes: 1 addition & 152 deletions src/popper-content.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,158 +39,7 @@ import {Placements, PopperContentOptions, Triggers} from './popper-model'
</div>
`,
styles: [`
.ngxp__container {
display: none;
position: absolute;
border-radius: 3px;
border: 1px solid grey;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
padding: 10px;
}
.ngxp__container.ngxp__animation {
-webkit-animation: ngxp-fadeIn 150ms ease-out;
-moz-animation: ngxp-fadeIn 150ms ease-out;
-o-animation: ngxp-fadeIn 150ms ease-out;
animation: ngxp-fadeIn 150ms ease-out;
}
.ngxp__container > .ngxp__arrow {
border-color: grey;
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
}
.ngxp__container[x-placement^="top"],
.ngxp__container[x-placement^="bottom"],
.ngxp__container[x-placement^="right"],
.ngxp__container[x-placement^="left"] {
display: block;
}
.ngxp__container[x-placement^="top"] {
margin-bottom: 5px;
}
.ngxp__container[x-placement^="top"] > .ngxp__arrow {
border-width: 5px 5px 0 5px;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.ngxp__container[x-placement^="top"] > .ngxp__arrow.__force-arrow {
border-right-color: transparent !important;
border-bottom-color: transparent !important;
border-left-color: transparent !important;
}
.ngxp__container[x-placement^="bottom"] {
margin-top: 5px;
}
.ngxp__container[x-placement^="bottom"] > .ngxp__arrow {
border-width: 0 5px 5px 5px;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.ngxp__container[x-placement^="bottom"] > .ngxp__arrow.__force-arrow {
border-top-color: transparent !important;
border-right-color: transparent !important;
border-left-color: transparent !important;
}
.ngxp__container[x-placement^="right"] {
margin-left: 5px;
}
.ngxp__container[x-placement^="right"] > .ngxp__arrow {
border-width: 5px 5px 5px 0;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.ngxp__container[x-placement^="right"] > .ngxp__arrow.__force-arrow {
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-left-color: transparent !important;
}
.ngxp__container[x-placement^="left"] {
margin-right: 5px;
}
.ngxp__container[x-placement^="left"] > .ngxp__arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.ngxp__container[x-placement^="left"] > .ngxp__arrow.__force-arrow {
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-right-color: transparent !important;
}
@-webkit-keyframes ngxp-fadeIn {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@keyframes ngxp-fadeIn {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
`]
styleUrls: ['./popper-content.css'],
})
export class PopperContent implements OnDestroy {

Expand Down

0 comments on commit 4db5307

Please sign in to comment.