|
|
@@ -1,23 +1,223 @@
|
|
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
|
|
exports[`Search when placeholder is not provided matches the snapshot 1`] = `
|
|
|
-<Styled(Input)
|
|
|
- defaultValue=""
|
|
|
- inputSize="M"
|
|
|
- leftIcon="fas fa-search"
|
|
|
- onChange={[Function]}
|
|
|
- placeholder="Search"
|
|
|
- type="text"
|
|
|
-/>
|
|
|
+<body>
|
|
|
+ .c1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ line-height: 0;
|
|
|
+ z-index: 1;
|
|
|
+ left: 12px;
|
|
|
+ right: unset;
|
|
|
+ height: 11px;
|
|
|
+ width: 11px;
|
|
|
+ color: #454F54;
|
|
|
+}
|
|
|
+
|
|
|
+.c2 {
|
|
|
+ border: 1px #ABB5BA solid;
|
|
|
+ border-radius: 4px;
|
|
|
+ height: 32px;
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 36px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.c2::-webkit-input-placeholder {
|
|
|
+ color: #ABB5BA;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.c2::-moz-placeholder {
|
|
|
+ color: #ABB5BA;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:-ms-input-placeholder {
|
|
|
+ color: #ABB5BA;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.c2::placeholder {
|
|
|
+ color: #ABB5BA;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:hover {
|
|
|
+ border-color: #73848C;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #454F54;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:focus::-webkit-input-placeholder {
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:focus::-moz-placeholder {
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:focus:-ms-input-placeholder {
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:focus::placeholder {
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:disabled {
|
|
|
+ color: #ABB5BA;
|
|
|
+ border-color: #E3E6E8;
|
|
|
+ cursor: not-allowed;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:read-only {
|
|
|
+ color: #171A1C;
|
|
|
+ border: none;
|
|
|
+ background-color: #F1F2F3;
|
|
|
+ cursor: not-allowed;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:-moz-read-only:focus::placeholder {
|
|
|
+ color: #ABB5BA;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:read-only:focus::placeholder {
|
|
|
+ color: #ABB5BA;
|
|
|
+}
|
|
|
+
|
|
|
+.c0 {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+<div>
|
|
|
+ <div
|
|
|
+ class="c0"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="c1 fas fa-search"
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ class="c2 c0"
|
|
|
+ placeholder="Search"
|
|
|
+ type="text"
|
|
|
+ value=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
`;
|
|
|
|
|
|
exports[`Search when placeholder is provided matches the snapshot 1`] = `
|
|
|
-<Styled(Input)
|
|
|
- defaultValue=""
|
|
|
- inputSize="M"
|
|
|
- leftIcon="fas fa-search"
|
|
|
- onChange={[Function]}
|
|
|
- placeholder="Search bt the Topic name"
|
|
|
- type="text"
|
|
|
-/>
|
|
|
+.c1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ line-height: 0;
|
|
|
+ z-index: 1;
|
|
|
+ left: 12px;
|
|
|
+ right: unset;
|
|
|
+ height: 11px;
|
|
|
+ width: 11px;
|
|
|
+ color: #454F54;
|
|
|
+}
|
|
|
+
|
|
|
+.c2 {
|
|
|
+ border: 1px #ABB5BA solid;
|
|
|
+ border-radius: 4px;
|
|
|
+ height: 32px;
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 36px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.c2::-webkit-input-placeholder {
|
|
|
+ color: #ABB5BA;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.c2::-moz-placeholder {
|
|
|
+ color: #ABB5BA;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:-ms-input-placeholder {
|
|
|
+ color: #ABB5BA;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.c2::placeholder {
|
|
|
+ color: #ABB5BA;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:hover {
|
|
|
+ border-color: #73848C;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #454F54;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:focus::-webkit-input-placeholder {
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:focus::-moz-placeholder {
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:focus:-ms-input-placeholder {
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:focus::placeholder {
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:disabled {
|
|
|
+ color: #ABB5BA;
|
|
|
+ border-color: #E3E6E8;
|
|
|
+ cursor: not-allowed;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:read-only {
|
|
|
+ color: #171A1C;
|
|
|
+ border: none;
|
|
|
+ background-color: #F1F2F3;
|
|
|
+ cursor: not-allowed;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:-moz-read-only:focus::placeholder {
|
|
|
+ color: #ABB5BA;
|
|
|
+}
|
|
|
+
|
|
|
+.c2:read-only:focus::placeholder {
|
|
|
+ color: #ABB5BA;
|
|
|
+}
|
|
|
+
|
|
|
+.c0 {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ class="c0"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="c1 fas fa-search"
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ class="c2 c0"
|
|
|
+ placeholder="Search bt the Topic name"
|
|
|
+ type="text"
|
|
|
+ value=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
`;
|
Dekshut