Skip to content

Commit

Permalink
feat: add popover styles
Browse files Browse the repository at this point in the history
  • Loading branch information
Juveniel authored and joneff committed Aug 12, 2021
1 parent 2428c0d commit 28f352c
Show file tree
Hide file tree
Showing 21 changed files with 329 additions and 0 deletions.
12 changes: 12 additions & 0 deletions packages/bootstrap/scss/_bootstrap-overrides.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
$enable-shadows: true !default;

$spacer: 1rem !default;

$font-size-base: 1rem !default;

$white: #ffffff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
Expand Down Expand Up @@ -34,3 +38,11 @@ $breadcrumb-bg: $component-bg !default;
$table-bg: $component-bg !default;
$table-color: $component-text !default;
$table-border-color: $component-border !default;

$popover-font-size: $font-size-base !default;

$popover-header-bg: $component-bg !default;
$popover-header-text: $component-text !default;
$popover-header-border: $component-border !default;
$popover-header-padding-x: $spacer !default;
$popover-header-padding-y: $spacer !default;
1 change: 1 addition & 0 deletions packages/bootstrap/scss/all.scss
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
@import "tooltip/_index.scss";
@import "window/_index.scss";
@import "action-sheet/_index.scss";
@import "popover/_index.scss";


// Navigation
Expand Down
13 changes: 13 additions & 0 deletions packages/bootstrap/scss/popover/_index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@import "../core/_index.scss";


// Dependencies
@import "../common/_index.scss";
@import "../popup/_index.scss";
@import "../card/_index.scss";


// Component
@import "_variables.scss";
@import "_layout.scss";
@import "_theme.scss";
1 change: 1 addition & 0 deletions packages/bootstrap/scss/popover/_layout.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/popover/_layout.scss";
1 change: 1 addition & 0 deletions packages/bootstrap/scss/popover/_theme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/popover/_theme.scss";
35 changes: 35 additions & 0 deletions packages/bootstrap/scss/popover/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// Popover
$popover-border-width: $card-border-width !default;
$popover-border-style: solid !default;
$popover-border-radius: $card-border-radius !default;
$popover-font-size: $card-font-size !default;
$popover-font-family: $card-font-family !default;
$popover-line-height: $card-line-height !default;
$popover-bg: $card-bg !default;
$popover-text: $card-text !default;
$popover-border: $card-border !default;
$popover-shadow: $card-shadow !default;

$popover-header-padding-y: $card-header-padding-y !default;
$popover-header-padding-x: $card-header-padding-x !default;
$popover-header-border-width: $card-header-border-width !default;
$popover-header-border-style: $popover-border-style !default;
$popover-header-bg: $card-header-bg !default;
$popover-header-text: $card-header-text !default;
$popover-header-border: $card-header-border !default;

$popover-body-padding-y: $card-body-padding-y !default;
$popover-body-padding-x: $card-body-padding-x !default;

$popover-actions-border-width: $popover-border-width !default;

$popover-callout-width: $card-callout-width !default;
$popover-callout-height: $card-callout-height !default;
$popover-callout-border-width: $popover-border-width !default;
$popover-callout-border-style: $popover-border-style !default;
$popover-callout-bg: $popover-bg !default;
$popover-callout-border: $popover-border !default;
$popover-callout-shadow-n: null !default;
$popover-callout-shadow-e: null !default;
$popover-callout-shadow-s: null !default;
$popover-callout-shadow-w: null !default;
1 change: 1 addition & 0 deletions packages/classic/scss/all.scss
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
@import "tooltip/_index.scss";
@import "window/_index.scss";
@import "action-sheet/_index.scss";
@import "popover/_index.scss";


// Navigation
Expand Down
13 changes: 13 additions & 0 deletions packages/classic/scss/popover/_index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@import "../core/_index.scss";


// Dependencies
@import "../common/_index.scss";
@import "../popup/_index.scss";
@import "../card/_index.scss";


// Component
@import "_variables.scss";
@import "_layout.scss";
@import "_theme.scss";
1 change: 1 addition & 0 deletions packages/classic/scss/popover/_layout.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/popover/_layout.scss";
1 change: 1 addition & 0 deletions packages/classic/scss/popover/_theme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/popover/_theme.scss";
36 changes: 36 additions & 0 deletions packages/classic/scss/popover/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// Popover
$popover-border-width: $card-border-width !default;
$popover-border-style: solid !default;
$popover-border-radius: $card-border-radius !default;
$popover-font-size: $card-font-size !default;
$popover-font-family: $card-font-family !default;
$popover-line-height: $card-line-height !default;
$popover-bg: $component-bg !default;
$popover-text: $component-text !default;
$popover-border: $component-border !default;
$popover-shadow: $popup-shadow !default;

$popover-header-padding-y: $card-header-padding-y !default;
$popover-header-padding-x: $card-header-padding-x !default;
$popover-header-border-width: $card-header-border-width !default;
$popover-header-border-style: $popover-border-style !default;
$popover-header-bg: $card-header-bg !default;
$popover-header-text: $card-header-text !default;
$popover-header-border: $card-header-border !default;

$popover-body-padding-y: $card-body-padding-y !default;
$popover-body-padding-x: $card-body-padding-x !default;

$popover-actions-border-width: $popover-border-width !default;

$popover-callout-width: $card-callout-width !default;
$popover-callout-height: $card-callout-height !default;
$popover-callout-border-width: $popover-border-width !default;
$popover-callout-border-style: $popover-border-style !default;
$popover-callout-bg: $popover-bg !default;
$popover-callout-border: $popover-border !default;

$popover-callout-shadow-n: $card-callout-box-shadow-n !default;
$popover-callout-shadow-e: $card-callout-box-shadow-e !default;
$popover-callout-shadow-s: $card-callout-box-shadow-s !default;
$popover-callout-shadow-w: $card-callout-box-shadow-w !default;
1 change: 1 addition & 0 deletions packages/default/scss/all.scss
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
@import "tooltip/_index.scss";
@import "window/_index.scss";
@import "action-sheet/_index.scss";
@import "popover/_index.scss";


// Navigation
Expand Down
13 changes: 13 additions & 0 deletions packages/default/scss/popover/_index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@import "../core/_index.scss";


// Dependencies
@import "../common/_index.scss";
@import "../card/_index.scss";
@import "../popup/_index.scss";


// Component
@import "_variables.scss";
@import "_layout.scss";
@import "_theme.scss";
76 changes: 76 additions & 0 deletions packages/default/scss/popover/_layout.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
@include exports("popover/layout") {

// Popover
.k-popover {
@include border-radius( $popover-border-radius );
border-width: $popover-border-width;
border-style: $popover-border-style;
box-sizing: border-box;
outline: 0;
font-size: $popover-font-size;
font-family: $popover-font-family;
line-height: $popover-line-height;
display: flex;
flex-flow: column nowrap;
position: absolute;
z-index: 12000;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: $rgba-transparent;
}

// Header
.k-popover-header {
@include border-top-radius( $popover-border-radius );
padding: $popover-header-padding-y $popover-header-padding-x;
border-width: 0 0 $popover-header-border-width;
border-style: $popover-header-border-style;
}

// Body
.k-popover-body {
padding: $popover-body-padding-y $popover-body-padding-x;
}

// Actions
.k-popover-actions {
border-width: $popover-actions-border-width 0 0;
}

}

@include exports( "popover/layout/callout" ) {

.k-popover-callout {
margin: 0;
width: $popover-callout-width;
height: $popover-callout-height;
border-width: $popover-callout-border-width $popover-callout-border-width 0 0;
border-style: $popover-callout-border-style;
position: absolute;

&.k-callout-n {
top: 0;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}

&.k-callout-e {
top: 50%;
right: 0;
transform: translate(50%, -50%) rotate(135deg) scaleX(-1);
}

&.k-callout-s {
bottom: 0;
left: 50%;
transform: translate(-50%, 50%) rotate(135deg);
}

&.k-callout-w {
top: 50%;
left: 0;
transform: translate(-50%, -50%) rotate(-135deg);
}
}

}
36 changes: 36 additions & 0 deletions packages/default/scss/popover/_theme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
@include exports("popover/theme") {

// Popover
.k-popover {
@include box-shadow( $popover-shadow );

@include fill(
$popover-text,
$popover-bg,
$popover-border
);
}

// Header
.k-popover-header {
@include fill(
$popover-header-text,
$popover-header-bg,
$popover-header-border
);
}

// Callout
.k-popover-callout {
@include fill(
$bg: $popover-callout-bg,
$border: $popover-callout-border
);

&.k-callout-n { @include box-shadow( $popover-callout-shadow-n ); }
&.k-callout-e { @include box-shadow( $popover-callout-shadow-e ); }
&.k-callout-s { @include box-shadow( $popover-callout-shadow-s ); }
&.k-callout-w { @include box-shadow( $popover-callout-shadow-w ); }
}

}
36 changes: 36 additions & 0 deletions packages/default/scss/popover/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// Popover
$popover-border-width: $card-border-width !default;
$popover-border-style: solid !default;
$popover-border-radius: $card-border-radius !default;
$popover-font-size: $card-font-size !default;
$popover-font-family: $card-font-family !default;
$popover-line-height: $card-line-height !default;
$popover-bg: $component-bg !default;
$popover-text: $component-text !default;
$popover-border: $component-border !default;
$popover-shadow: $popup-shadow !default;

$popover-header-padding-y: $card-header-padding-y !default;
$popover-header-padding-x: $card-header-padding-x !default;
$popover-header-border-width: $card-header-border-width !default;
$popover-header-border-style: $popover-border-style !default;
$popover-header-bg: $card-header-bg !default;
$popover-header-text: $card-header-text !default;
$popover-header-border: $card-header-border !default;

$popover-body-padding-y: $card-body-padding-y !default;
$popover-body-padding-x: $card-body-padding-x !default;

$popover-actions-border-width: $popover-border-width !default;

$popover-callout-width: $card-callout-width !default;
$popover-callout-height: $card-callout-height !default;
$popover-callout-border-width: $popover-border-width !default;
$popover-callout-border-style: $popover-border-style !default;
$popover-callout-bg: $popover-bg !default;
$popover-callout-border: $popover-border !default;

$popover-callout-shadow-n: null !default;
$popover-callout-shadow-e: rgba( black, .03 ) 2px -1px 4px 0px !default;
$popover-callout-shadow-s: rgba( black, .06 ) 2px -2px 4px 0px !default;
$popover-callout-shadow-w: rgba( black, .03 ) 2px -1px 4px 0px !default;
1 change: 1 addition & 0 deletions packages/material/scss/all.scss
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
@import "tooltip/_index.scss";
@import "window/_index.scss";
@import "action-sheet/_index.scss";
@import "popover/_index.scss";


// Navigation
Expand Down
13 changes: 13 additions & 0 deletions packages/material/scss/popover/_index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@import "../core/_index.scss";


// Dependencies
@import "../common/_index.scss";
@import "../popup/_index.scss";
@import "../card/_index.scss";


// Component
@import "_variables.scss";
@import "_layout.scss";
@import "_theme.scss";
1 change: 1 addition & 0 deletions packages/material/scss/popover/_layout.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/popover/_layout.scss";
1 change: 1 addition & 0 deletions packages/material/scss/popover/_theme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/popover/_theme.scss";
36 changes: 36 additions & 0 deletions packages/material/scss/popover/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// Popover
$popover-border-width: 1px !default;
$popover-border-style: solid !default;
$popover-border-radius: $card-border-radius !default;
$popover-font-size: $card-font-size !default;
$popover-font-family: $card-font-family !default;
$popover-line-height: $card-line-height !default;
$popover-bg: $component-bg !default;
$popover-text: $component-text !default;
$popover-border: $component-border !default;
$popover-shadow: $card-shadow !default;

$popover-header-padding-y: $card-header-padding-y !default;
$popover-header-padding-x: $card-header-padding-x !default;
$popover-header-border-width: $card-header-border-width !default;
$popover-header-border-style: $popover-border-style !default;
$popover-header-bg: $card-header-bg !default;
$popover-header-text: $card-header-text !default;
$popover-header-border: $card-header-border !default;

$popover-body-padding-y: $card-body-padding-y !default;
$popover-body-padding-x: $card-body-padding-x !default;

$popover-actions-border-width: $popover-border-width !default;

$popover-callout-width: $card-callout-width !default;
$popover-callout-height: $card-callout-height !default;
$popover-callout-border-width: $popover-border-width !default;
$popover-callout-border-style: $popover-border-style !default;
$popover-callout-bg: $popover-bg !default;
$popover-callout-border: $popover-border !default;

$popover-callout-shadow-n: $card-callout-box-shadow-n !default;
$popover-callout-shadow-e: $card-callout-box-shadow-e !default;
$popover-callout-shadow-s: $card-callout-box-shadow-s !default;
$popover-callout-shadow-w: $card-callout-box-shadow-w !default;

0 comments on commit 28f352c

Please sign in to comment.