Unverified Commit 2148c219 authored by srinivasan pusuluri's avatar srinivasan pusuluri Committed by GitHub
Browse files

Merge pull request #8346 from vinodkumar45/5.0.2

Issue #ED-384 kabab menu css merged from different components and created as common styles
No related merge requests found
Showing with 62 additions and 201 deletions
+62 -201
@import "mixins/mixins";
.kabab-menu {
color: var(--primary-400);
width: calculateRem(30px);
height: calculateRem(30px);
line-height: calculateRem(28px);
text-align: center;
border-radius: 50%;
padding-left: calculateRem(6px);
&:hover {
background: var(--gray-0);
cursor: pointer;
}
}
.kabab-menu::after {
content: "\2807";
font-size: calculateRem(24px);
}
.kabab-menu-dropdown-content {
position: absolute;
border-radius: calculateRem(2px);
background-color: var(--kabab-menu-dropdown-bg);
box-shadow: 0 calculateRem(3px) calculateRem(5px) calculateRem(4px) rgba(0, 0, 0, 0.05);
padding: calculateRem(8px);
z-index: 1;
text-align: left;
right: 0;
top: 0;
min-width: calculateRem(170px);
.list {
display: flex;
align-items: center;
cursor: pointer;
font-size: calculateRem(14px);
padding: calculateRem(8px);
&:hover,&:active{
background-color: var(--kabab-menu-dropdown-item-active);
}
}
}
@import "pages/kabab-menu";
:host {
.header {
display: flex;
......
@import 'mixins/mixins';
.kabab-menu{
color: var(--primary-400);
width: calculateRem(30px);
height: calculateRem(30px);
line-height: calculateRem(28px);
text-align: center;
border-radius: 50%;
padding-left: calculateRem(6px);
&:hover{
background: var(--kabab-menu-hover-bg);
cursor: pointer;
}
&::after {
content: '\2807';
font-size: calculateRem(24px);
}
}
.kabab-menu-dropdown-content {
position: absolute;
border-radius: calculateRem(2px);
background-color: var(--kabab-menu-dropdown-bg);
box-shadow: 0 calculateRem(3px) calculateRem(5px) calculateRem(4px) rgba(var(--rc-rgba-black), 0.05);
padding: calculateRem(8px);
z-index: 1;
text-align: left;
right:0;
top: 0;
min-width: calculateRem(210px);
.list{
cursor: pointer;
font-size: calculateRem(14px);
padding: calculateRem(8px);
&:hover,&:active{
background-color: var(--kabab-menu-dropdown-item-active);
}
&:last-child{
.sb-btn-normal{
color: var(--red-400);
}
}
.sb-btn-normal{
font-size: calculateRem(14px);
}
}
}
::ng-deep {
html[dir='rtl'] .kabab-menu-dropdown-content {
right:auto;
left:0;
}
}
@import "pages/kabab-menu";
@import "mixins/mixins";
@import "pages/kabab-menu";
.devided-line {
border-bottom: calculateRem(0.5px) solid var(--gray-100);
}
......@@ -12,52 +12,3 @@
color: var(--gray-200);
}
}
.kabab-menu{
color: var(--primary-400);
width: calculateRem(30px);
height: calculateRem(30px);
line-height: calculateRem(28px);
text-align: center;
border-radius: 50%;
padding-left: calculateRem(6px);
&:hover{
background: var(--gray-0);
cursor: pointer;
}
&::after {
content: '\2807';
font-size: calculateRem(24px);
}
}
.kabab-menu-dropdown-content {
position: absolute;
border-radius: calculateRem(2px);
background-color: var(--kabab-menu-dropdown-bg);
box-shadow: 0 calculateRem(3px) calculateRem(5px) calculateRem(4px) rgba(var(--rc-rgba-black), 0.05);
padding: calculateRem(8px);
z-index: 1;
text-align: left;
right: 0;
top: 0;
min-width: calculateRem(170px);
.list {
display: flex;
align-items: center;
cursor: pointer;
font-size: calculateRem(14px);
padding: calculateRem(8px);
&:hover {
color: var(--primary-400);
background-color: var(--kabab-menu-dropdown-item-active);
}
}
}
::ng-deep {
html[dir='rtl'] .kabab-menu-dropdown-content {
right:auto;
left:0;
}
}
@import "variables";
@import "mixins/mixins";
@import "pages/course-player";
@import "pages/kabab-menu";
.course-list_title {
color: var(--gray-800);
......@@ -208,57 +209,3 @@ xxl calculateRem(88px) 24px 20px;
color:var(--gray-800)
}
}
.kabab-menu{
color: var(--primary-400);
width: calculateRem(30px);
height: calculateRem(30px);
line-height: calculateRem(28px);
text-align: center;
border-radius: 50%;
padding-left: calculateRem(6px);
&:hover{
background: var(--kabab-menu-hover-bg);
cursor: pointer;
}
&::after {
content: '\2807';
font-size: calculateRem(24px);
}
}
.kabab-menu-dropdown-content {
position: absolute;
border-radius: calculateRem(2px);
background-color: var(--kabab-menu-dropdown-bg);
box-shadow: 0 calculateRem(3px) calculateRem(5px) calculateRem(4px) rgba(var(--rc-rgba-black), 0.05);
padding: calculateRem(8px);
z-index: 2;
text-align: left;
right:0;
top: 2rem;
min-width: calculateRem(210px);
.list{
cursor: pointer;
font-size: calculateRem(14px);
padding: calculateRem(8px);
&:hover,&:active{
background-color: var(--kabab-menu-dropdown-item-active);
}
&:last-child{
.sb-btn-normal{
color: var(--red-400);
}
}
.sb-btn-normal{
font-size: calculateRem(14px);
}
}
}
::ng-deep {
html[dir='rtl'] .kabab-menu-dropdown-content {
right:auto;
left:0;
}
}
\ No newline at end of file
// Course Player & My Groups kabab menu styles
.kabab-menu {
color: var(--primary-400);
width: calculateRem(30px);
height: calculateRem(30px);
line-height: calculateRem(28px);
text-align: center;
border-radius: 50%;
padding-left: calculateRem(6px);
&:hover {
background: var(--kabab-menu-hover-bg);
cursor: pointer;
}
}
.kabab-menu::after {
content: "\2807";
font-size: calculateRem(24px);
}
.kabab-menu-dropdown-content {
position: absolute;
border-radius: calculateRem(2px);
background-color: var(--kabab-menu-dropdown-bg);
box-shadow: 0 calculateRem(3px) calculateRem(5px) calculateRem(4px) rgba(0, 0, 0, 0.05);
padding: calculateRem(8px);
z-index: 1;
text-align: left;
right: 0;
top: 0;
min-width: calculateRem(170px);
.list {
display: flex;
align-items: center;
cursor: pointer;
font-size: calculateRem(14px);
padding: calculateRem(8px);
&:hover,&:active{
background-color: var(--kabab-menu-dropdown-item-active);
}
&:last-child{
.sb-btn-normal{
color: var(--red-400);
}
}
.sb-btn-normal{
font-size: calculateRem(14px);
}
}
}
::ng-deep {
html[dir='rtl'] .kabab-menu-dropdown-content {
right:auto;
left:0;
}
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment