Skip to content

Commit

Permalink
Merge branch 'feature-readylaunch' of github.com:buddyboss/buddyboss-…
Browse files Browse the repository at this point in the history 
…platform into feature-readylaunch

* 'feature-readylaunch' of github.com:buddyboss/buddyboss-platform:
  PRJ-55 - Style Activity Document block basic UI
  • Loading branch information
@jitendrabanjara1991
jitendrabanjara1991 committed Feb 5, 2025
2 parents ac8fd7e + 493721f commit e10c047
Show file tree
Hide file tree
Showing 3 changed files with 769 additions and 3 deletions.
381 changes: 381 additions & 0 deletions src/bp-templates/bp-nouveau/readylaunch/css/activity.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1163,6 +1163,387 @@
transform-origin: bottom;
}

.bb-rl-activity-media-elem {
/* Document */
}

.bb-rl-activity-media-elem.bb-rl-document-activity {
background-color: var(--bb-rl-background-secondary-color);
border-radius: var(--bb-rl-radius-lg);
position: relative;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-preview-wrap {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
overflow: hidden;
text-align: center;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-description-wrap {
width: 100%;
display: flex;
flex-direction: row;
background-color: var(--bb-rl-background-secondary-color);
border-radius: var(--bb-rl-radius-sm);
padding: var(--bb-rl-space-300);
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-audio-wrap audio::-webkit-media-controls-enclosure {
border-radius: var(--bb-rl-radius-sm);
}

.bb-rl-activity-media-elem.bb-rl-document-activity .document-text:not(.loaded):after {
content: "\ef30";
font-family: "bb-icons";
/* stylelint-disable-line */
display: inline-block;
text-align: center;
margin: 10px 0;
animation: spin 2s infinite linear;
}

.bb-media-info-section .bb-rl-activity-media-elem.bb-rl-document-activity {
padding: 5px 5px;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-entry-img {
flex-basis: 64px;
width: 64px;
line-height: 1.5;
text-align: center;
display: inline-block;
vertical-align: middle;
position: relative;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-entry-img > i {
font-size: 64px;
color: var(--bb-rl-text-tertiary-color);
font-style: normal;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-detail-wrap {
flex-basis: calc(100% - 70px);
width: calc(100% - 70px);
display: inline-block;
vertical-align: middle;
padding: var(--bb-rl-space-100) 0 var(--bb-rl-space-100) var(--bb-rl-space-100);
}

.bb-media-info-section .bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-detail-wrap {
padding: var(--bb-rl-space-100) 0 var(--bb-rl-space-100) var(--bb-rl-space-50);
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-detail-wrap .bb-rl-document-title {
display: block;
color: var(--bb-rl-text-color);
font-size: 14px;
font-weight: 600;
width: calc(100% - 70px);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-detail-wrap .bb-rl-document-description,
.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-detail-wrap .bb-rl-document-extension-description,
.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-detail-wrap .bb-rl-document-helper-text {
float: left;
color: var(--bb-rl-text-tertiary-color);
font-size: var(--bb-rl-font-size-sm);
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-detail-wrap .bb-rl-document-description {
margin-right: 6px;
text-transform: lowercase;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-detail-wrap .bb-rl-document-helper-text-click {
margin-left: 3px;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-detail-wrap .bb-rl-document-extension-description {
transition: opacity ease 0.3s;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-detail-wrap .bb-rl-document-helper-text {
position: relative;
top: -10px;
opacity: 0;
visibility: hidden;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap {
position: absolute;
right: 15px;
top: 21px;
z-index: var(--bb-rl-z-index-dropdown);
transition: all 0.3s ease;
}

.bb-media-info-section .bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap {
right: 10px;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap > a {
float: left;
transition: all 0.3s ease;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap > a i {
font-size: 24px;
font-style: normal;
color: var(--bb-rl-icon-secondary-color);
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap > a:hover {
color: #461212;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap > a:hover i {
color: #461212;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap > a[data-balloon]:after {
margin-top: 4px;
font-size: 12px;
padding: 5px 10px;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap > a[data-balloon][data-balloon-pos="down"]:before {
margin-top: -1px;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap > a.document-action_more {
margin-left: var(--bb-rl-space-50);
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap .bb-rl-document-action_list {
position: absolute;
top: 36px;
right: 1px;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.05), 0 6px 32px 0 rgba(18, 43, 70, 0.1);
border-radius: 4px;
width: 198px;
z-index: 1;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap .bb-rl-document-action_list ul {
list-style: none;
margin: 5px 0 !important;
padding: 0 !important;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap .bb-rl-document-action_list ul li {
margin: 0;
padding: 0;
list-style-type: none !important;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap .bb-rl-document-action_list ul li a {
padding: 10px 14px !important;
display: block !important;
font-size: 13px;
line-height: 1;
color: #7f868f;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap .bb-rl-document-action_list ul li a:hover {
background-color: #f5f5f5;
color: var(--bb-rl-primary);
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap .bb-rl-document-action_list ul li a:before {
font-family: "bb-icons";
/* stylelint-disable-line */
font-size: 18px;
display: inline-block;
margin-right: 10px;
width: 20px;
text-align: center;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap .bb-rl-document-action_list ul li.bb_rl_move_file.bb-rl-move-disabled a {
pointer-events: none;
opacity: 0.7;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap .bb-rl-document-action_list ul li.bb_rl_move_file.bb-rl-move-disabled[data-balloon]:after {
content: attr(data-balloon);
white-space: normal;
max-width: 200px;
width: 100%;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap .bb-rl-document-action_list ul li.bb_rl_move_file a:before {
content: "\ee9f";
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap .bb-rl-document-action_list ul li.bb_rl_delete_file a:before {
content: "\ef48";
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap .bb-rl-document-action_list ul li.bb_rl_privacy_file a:before {
content: "\eecc";
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap .bb-rl-document-action_list ul li.bb_rl_copy_download_file_url a:before {
content: "\ee3b";
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-action-wrap .bb-rl-document-action_list:after {
content: " ";
position: absolute;
width: 0;
height: 0;
top: 0;
margin: 0 auto;
right: 13px;
box-sizing: border-box;
border: 6px solid #000;
border-color: #fff #fff transparent transparent;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
box-shadow: 2px -3px 3px 0 rgba(0, 0, 0, 0.02);
z-index: 101;
opacity: 1;
visibility: visible;
pointer-events: none;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .document-expand {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 11;
visibility: hidden;
opacity: 0;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .document-expand .document-expand-anchor {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
background-color: #122b46 !important;
color: #fff;
border-radius: 30px;
padding: 8px 15px !important;
z-index: 11;
font-size: 14px;
line-height: 1;
font-weight: 500;
opacity: 0;
visibility: hidden;
margin-top: 25px;
transition: all ease 0.3s;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .document-expand .document-expand-anchor > i {
margin-right: 5px;
font-weight: 300;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .document-expand .document-expand-anchor > span,
.bb-rl-activity-media-elem.bb-rl-document-activity .document-expand .document-expand-anchor > i {
line-height: 1;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-audio-wrap {
padding: 0;
width: 100%;
float: left;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-audio-wrap audio {
border-radius: 4px;
width: 100%;
float: left;
outline: 0;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-preview-wrap {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 4px 4px 0 0;
height: 200px;
overflow: hidden;
text-align: center;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-audio-wrap ~ .document-action-wrap,
.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-preview-wrap ~ .document-action-wrap {
bottom: 21px;
top: inherit;
}

.bb-rl-activity-media-elem.bb-rl-document-activity .bb-rl-document-text-wrap .CodeMirror {
/* stylelint-disable-line */
height: auto;
border-radius: 4px;
}

.bb-rl-activity-media-elem.bb-rl-document-activity.code-full-view .document-text {
max-height: inherit;
overflow: initial;
}

.bb-rl-activity-media-elem.bb-rl-document-activity.code-full-view .document-text:after {
display: none !important;
}

.bb-rl-activity-media-elem.bb-rl-document-activity.code-full-view .bb-rl-document-action-wrap .bb-rl-document-action_collapse {
opacity: 1;
visibility: visible;
}

.bb-rl-activity-media-elem.bb-rl-document-activity.code-full-view .bb-rl-document-action-wrap .bb-rl-document-action_collapse i {
border-right-width: 0;
border-left-width: 1px;
border-radius: 3px 0 0 3px;
}

.bb-rl-activity-media-elem.bb-rl-document-activity.code-full-view .bb-rl-document-action-wrap .bb-rl-document-action_collapse + .document-action_download i {
border-left-width: 1px;
border-radius: 0;
}

.bb-rl-activity-media-elem.bb-rl-document-activity.code-full-view .bb-rl-document-expand {
opacity: 0 !important;
visibility: hidden !important;
}

.bb-rl-activity-media-elem.bb-rl-document-activity.code-full-view .bb-rl-document-expand .bb-rl-document-expand-anchor {
opacity: 0 !important;
visibility: hidden !important;
}

.bb-rl-activity-media-elem.bb-rl-document-activity.is-visible {
z-index: var(--bb-rl-z-index-dropdown);
}

.bb-rl-activity-media-elem.bb-rl-document-activity.is-visible .bb-rl-document-action_more[data-balloon]:before,
.bb-rl-activity-media-elem.bb-rl-document-activity.is-visible .bb-rl-document-action_more[data-balloon]:after {
display: none;
}

.bb-rl-activity-media-elem.bb-rl-document-activity.is-visible .bb-rl-document-action-wrap,
.bb-rl-activity-media-elem.bb-rl-document-activity.is-visible .bb-rl-document-action_list {
opacity: 1;
visibility: visible;
}

/* Privacy */
.bb-media-privacy-wrap {
display: inline-block;
Expand Down
Loading

0 comments on commit e10c047

Please sign in to comment.