@sendbird/uikit-react 3.4.6 → 3.4.7-rc.0

package/cjs/dist/index.css

@@ -65,65 +65,10 @@
 }
 .sendbird-word .sendbird-word__url,
 .sendbird-word .sendbird-word__normal {
-  margin-right: 4px;
+  margin: 0 4px;
   display: inline-block;
   color: inherit;
 }
-.sendbird-create-open-channel-ui {
-  position: relative;
-  display: inline-flex;
-}
-
-.sendbird-create-open-channel-ui__profile-input {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
-.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section {
-  position: relative;
-  margin-top: 16px;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-}
-.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  height: 80px;
-}
-.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-}
-.sendbird-theme--light .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
-  background-color: var(--sendbird-light-background-200);
-}
-.sendbird-theme--dark .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
-  background-color: var(--sendbird-dark-background-400);
-}
-.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__button {
-  position: relative;
-  margin-left: 18px;
-  display: inline-flex;
-}
-.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__name-section {
-  position: relative;
-  margin-top: 8px;
-  display: inline-flex;
-  flex-direction: row;
-}
 .sendbird-open-channel-preview {
   position: relative;
   display: inline-flex;
@@ -335,6 +280,61 @@
 .sendbird-theme--dark .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
   background-color: var(--sendbird-dark-background-500);
 }
+.sendbird-create-open-channel-ui {
+  position: relative;
+  display: inline-flex;
+}
+
+.sendbird-create-open-channel-ui__profile-input {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section {
+  position: relative;
+  margin-top: 16px;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+}
+.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+}
+.sendbird-theme--light .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
+  background-color: var(--sendbird-light-background-200);
+}
+.sendbird-theme--dark .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
+  background-color: var(--sendbird-dark-background-400);
+}
+.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__button {
+  position: relative;
+  margin-left: 18px;
+  display: inline-flex;
+}
+.sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__name-section {
+  position: relative;
+  margin-top: 8px;
+  display: inline-flex;
+  flex-direction: row;
+}
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
 :root {
   --sendbird-light-primary-500: #491389;
@@ -5052,6 +5052,106 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-theme--dark .sendbird-accordion__panel-icon__leave path {
   fill: var(--sendbird-dark-error-300);
 }
+.sendbird-input-toggle-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.sendbird-theme--light .sendbird-input-toggle-button--checked {
+  background-color: var(--sendbird-light-primary-300);
+  border: 1px solid var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-input-toggle-button--checked {
+  background-color: var(--sendbird-dark-primary-200);
+  border: 1px solid var(--sendbird-dark-primary-200);
+}
+
+.sendbird-theme--light .sendbird-input-toggle-button--unchecked {
+  background-color: var(--sendbird-light-background-300);
+  border: 1px solid var(--sendbird-light-background-300);
+}
+.sendbird-theme--dark .sendbird-input-toggle-button--unchecked {
+  background-color: var(--sendbird-dark-background-400);
+  border: 1px solid var(--sendbird-dark-background-400);
+}
+
+.sendbird-input-toggle-button--disabled {
+  cursor: not-allowed;
+}
+.sendbird-theme--light .sendbird-input-toggle-button--disabled {
+  background-color: var(--sendbird-light-background-200);
+  border: 1px solid var(--sendbird-light-background-200);
+}
+.sendbird-theme--dark .sendbird-input-toggle-button--disabled {
+  background-color: var(--sendbird-dark-background-400);
+  border: 1px solid var(--sendbird-dark-background-400);
+}
+
+.sendbird-input-toggle-button input {
+  position: absolute;
+  display: none;
+}
+
+.sendbird-input-toggle-button__inner-dot {
+  position: absolute;
+  border-radius: 50%;
+  animation-iteration-count: 1;
+}
+.sendbird-theme--light .sendbird-input-toggle-button__inner-dot {
+  background-color: var(--sendbird-light-background-50);
+}
+.sendbird-theme--dark .sendbird-input-toggle-button__inner-dot {
+  background-color: var(--sendbird-dark-background-600);
+}
+
+/* Manage animation and position by status */
+@keyframes sendbirdMoveToRight {
+  0% {
+    right: 60%;
+  }
+  100% {
+    right: 10%;
+  }
+}
+@keyframes sendbirdMoveToLeft {
+  0% {
+    right: 10%;
+  }
+  100% {
+    right: 60%;
+  }
+}
+.sendbird-input-toggle-button--turned-on .sendbird-input-toggle-button__inner-dot {
+  animation-name: sendbirdMoveToRight;
+}
+
+.sendbird-input-toggle-button--turned-off .sendbird-input-toggle-button__inner-dot {
+  animation-name: sendbirdMoveToLeft;
+}
+
+.sendbird-input-toggle-button--unchecked .sendbird-input-toggle-button__inner-dot {
+  right: 60%;
+}
+
+.sendbird-input-toggle-button--checked .sendbird-input-toggle-button__inner-dot {
+  right: 10%;
+}
+
+.sendbird-input-toggle-button--reversed .sendbird-input-toggle-button--turned-on .sendbird-input-toggle-button__inner-dot {
+  animation-name: sendbirdMoveToLeft;
+}
+.sendbird-input-toggle-button--reversed .sendbird-input-toggle-button--turned-off .sendbird-input-toggle-button__inner-dot {
+  animation-name: sendbirdMoveToRight;
+}
+.sendbird-input-toggle-button--reversed.sendbird-input-toggle-button--unchecked .sendbird-input-toggle-button__inner-dot {
+  right: 10%;
+}
+.sendbird-input-toggle-button--reversed.sendbird-input-toggle-button--checked .sendbird-input-toggle-button__inner-dot {
+  right: 60%;
+}
 .sendbird-user-list-item--small {
   display: block;
   position: relative;
@@ -7335,6 +7435,10 @@ div.sendbird-og-message-item-body__text-bubble {
   margin-left: 8px;
 }
 
+.sendbird-participants-accordion__member-avatar__avatar {
+  position: absolute;
+}
+
 .sendbird-more-users__popup-scroll {
   max-height: 420px;
   overflow: scroll;